2023年前端（面试-实战）总结

目录

JavaScript

数组遍历方法

数组元素添加、删除

匹配、过滤、排序、合并

拷贝

CSS

CSS3动画属性

弹性布局

定位

Vue2.0

组件通信方式

路由跳转

---

以下是我在工作中以及面试中的总结，后续还会不断更新，希望可以帮助到大家。

JavaScript

• 数组遍历方法

方法名称	描述	注意
map()	map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；map() 方法按照原始数组元素顺序依次处理元素。	当数组元素是基本数据类型时，map()方法不会改变原数组；当数组元素是引用类型时，map()方法会改变原数组
forEach()	forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数	没有返回值；不改变原数组
for	for用于循环代码块一定的次数
for in	for/in主要用于循环遍历对象的属性

• 数组元素添加、删除

添加：

1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
2. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
3. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容

删除：

1. shift() 方法用于把数组的第一个元素从其中删除，方法改变数组的长度
2. pop() 方法用于删除数组的最后一个元素并返回删除的元素，方法改变数组的长度
3. slice() 方法可从已有的数组中返回选定的元素，不会改变原始数组
4. splice() 方法用于添加或删除数组中的元素，会改变原始数组

• 匹配、过滤、排序、合并

匹配：

1. find() 方法返回通过测试（函数内判断）的数组的第一个元素的值
2. some() 方法用于检测数组中的元素是否满足指定条件（函数提供）
3. every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
4. includes()用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false;不会改变原数组。
5. indexOf()检索某个指定的元素在数组中首次出现的位置，返回元素的索引；不会改变原数组。

过滤：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原始数组

排序：

1. sort() 方法用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序；默认排序顺序为按字母升序;会改变原数数组
2. reserve()用于反转数组的元素顺序，会改变原数数组

合并：

concat()将数组和数组（或数组和元素)合并，并返回一个新的数组;不会改变原数组

• 拷贝

浅拷贝：Object.assign()

深拷贝：JSON.parse(JSON.stringify())

区别：浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存；深拷贝会创造一个一摸一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象。

---

CSS

• CSS3动画属性

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。
inherit	从父元素继承属性。

• 弹性布局

注意：flex属性写在父盒子里面

/* 主轴居中 */

justify-content: center;

/* 侧轴剧中 */

align-items: center;

• 定位

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

---

Vue2.0

• 组件通信方式

父子通信

• 父向子传递数据是通过 props，子向父是通过 events（$emit）
• 通过父链 / 子链也可以通信（$parent / $children）
• ref 也可以访问组件实例；
• provide / inject
• $attrs/$listeners

兄弟通信

• Bus
• Vuex

跨级通信

• Bus
• Vuex
• provide / inject
• $attrs / $listeners

• 路由跳转

• router-link（声明式路由，在页面中调用）
• this.$router.push() (在函数里面调用)
• this.$router.resolve()打开新窗口跳转

各位看官，阅读完这篇文章之后，如果对你有帮助的话，那就麻烦点个关注吧！！！