前端常见面试题

最新推荐文章于 2025-08-12 20:56:37 发布

学魔学编程

最新推荐文章于 2025-08-12 20:56:37 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏： Html 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_59717525/article/details/121806234

Html 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了JavaScript中数组操作的方法，包括join(), push(), pop(), shift(), unshift(), sort(), reverse(), concat(), slice(), splice()以及ES5新增的数组方法。接着讨论了ES6的新特性，如let和const、模板字符串、解构赋值、展开运算符、箭头函数、对象简化赋值、类和函数参数默认值。在Vue方面，阐述了Vue的生命周期、页面存储、父子组件通信、路由实现原理以及CSS的box-sizing属性。此外，还讲解了CSS Flex布局的相关属性。最后，提到了TCP的三次握手和四次挥手过程，以及Vue中解决跨域问题的两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 操作数组常用的

join() 数组的元素组起一个字符串

push() 可以接收任意数量的参数，把它们逐个添加到数组末尾

pop() 数组末尾移除最后一项，减少数组的 length 值

shift() 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

unshift() 将参数添加到原数组开头，并返回数组的长度。

sort() 按升序排列数组项——即最小的值位于最前面，最大的值排在最后面

reverse() 反转数组项的顺序。

concat() 将参数添加到原数组中。这个方法会先创建当前数组一个副本，

然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组

slice() 返回从原数组中指定开始位置到结束位置之间的项组成的新数组

splice() 很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6

indexOf()和 lastIndexOf() （ES5新增）

forEach() （ES5新增）

map() （ES5新增）

filter() （ES5新增）

every() （ES5新增）

some() （ES5新增）

reduce()和 reduceRight() （ES5新增）

ES6有哪些新特性

(1)变量声明:由var变为let和const;

(2)模板字符串:使用反引号``;在模板字符串里面支持换行,并可以在里面使用${}来包裹一个变量或表达式;

(3)解构:有数组解构和对象解构;可以快速获取数组和对象的值;

(4) 展开运算符:在ES6中用...来表示展开运算符,它可以将数组或者对象进行展开;

(5) 箭头函数:函数的快捷写法,不需要通过function关键字创建函数,并且可以省略return关键字.但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象;

化简规则:

Function 变成 =>;

只有1个参数可以省略小括号;

没有参数或者有多个参数不能省略小括号;

函数体内只有一行可以省略大括号,如果有返回值return,则return也要省略;

函数体内有多行,不能省略大括号;

(6) 对象的简化赋值:对象赋值时如果属性名和变量名一致可以简写

(7) .类的支持:ES6中添加了对类的支持，引入了class关键字。JS本身就是面向对象，ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建，继承更直观，父类方法的调用，实例化，静态方法和构造函数更加形象化

Es5的时候是以function来做关键字,es6可以用class来做关键字

(8) .函数的参数默认值:

vue的生命周期

vue页面的存储

前端使用localStorage、sessionStorage存储方法大家都不陌生了，今天主要记录下localStorage在vue项目中的存储使用方法。

区别：

localStorage是本地存储，永久保存，除非主动删除；sessionStorage是会话存储，临时保存，并且它们只能存储字符串类型，对于复杂的对象可以使用JSON.stringify和JSON.parse来处理。

应用场景：

localStorage、sessionStorage主要用于不同页面之间的传值。

存储有效时间：

当刷新页面(指F5刷新，属于清除内存了)时，vuex存储的值会丢失，sessionStorage页面关闭后就清除了，localStorage不会，除非主动删除，所以我们需要根据的不同的需求决定是采用LocalStorage，还是SessionStorage保存数据。

注：很多人误认为localStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源(对象或数组)时，如果其中一个组件改变了该数据源，希望另一个级件响应该变化时，localStorage、sessionStorage无法做到，原因就是在于它们的区别。

vue的路由的实现原理

Vue的路由实现：hash模式和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

vue父子组件如何进行通讯

1.通过prop实现通信

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：

（1）静态传递

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

2）动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

2.通过$ref 实现通信

对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

rop和$ref之间的区别：

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。