最全前端面试总结面试了 N家公司总结的高频面试题。 经典！必考必会！

目录

1.数组处理reduce（）方法

（1）求数组所有值的和

（2）将二维数组转为一维数组

(3)计算数字中每个元素出现次数。

 (4) 数组去重

2.ES6  map()方法

（1）使用map计算任意复杂的函数

(2)使用Map格式化数组对象

 3.Es6语法对数组去重(2种方式）

(1)用ES6进行最简普通数组去重[...new Set(arr)]

(2)用reduce（）方法去重。(例子见上)

4.computed计算和watch区别，用在什么场景?

（1）2者区别

（2）使用场景

5. Vue中created和mounted的区别？

6. DOM事件模型

（1）事件冒泡

（2）事件捕获

（3）Dom事件流

（1）html事件处理程序

（2）DOM0级事件处理程序

（3）DOM2 级事件处理程序

7.插槽，具名插槽

8.vue 父子，兄弟，祖孙如何通信（重要）

1 父子组件通信

（1）父组件向子组件传值

（2）子组件修改父组件属性，调用父组件方法

（3）父组件调用子组件方法

2 .兄弟组件通信

3.祖孙组件通信

9.vue中data为什么是函数？

10.如何处理路由跳转到404

11. slice() 和splice()的区别

12.判断是否是数组的方法（4种方法）

13.for in 和for of的区别

14.vue 中$router 和$route区别

15.this.$route.params和this.$route.query的区别

16.map方法和forEach的区别

forEach

17.原型和原型链

原型链

18 @import和link引入样式的区别

1.从属关系区别

2.加载顺序区别

3.兼容性区别

---

1.数组处理reduce（）方法

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加

（1）求数组所有值的和

let sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b
}, 0)

或者用箭头函数
let sum=[1,2,3,4].reduce((a,b)=>a+b,0)

设置了初始值，返回结果20

[1, 2, 3, 4].reduce( 
(previousValue, currentValue, currentIndex, array) 
=> previousValue + currentValue,10 )

（2）将二维数组转为一维数组

let arr = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b)
  },
  []
)

(3)计算数字中每个元素出现次数。

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let newName = names.reduce(function (a, b) {
  if (b in a) {
    a[b]++
  }
  else {
    a[b] = 1
  }
  return a
}, {})
// newName is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

 (4) 数组去重

let arr = ['a', 'b', 'a', 'b', 'c']
let newArr = arr.reduce(function (a, b) {
  if (a.indexOf(b) === -1) {
    a.push(b)
  }
  return a
}, [])

console.log(newArr)

---

2.ES6  map()方法

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成. 

// 箭头函数
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组

（1）使用map计算任意复杂的函数

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

(2)使用Map格式化数组对象

var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {
   console.log(obj);
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
console.log(reformattedArray);

---

 3.Es6语法对数组去重(2种方式）

(1)用ES6进行最简普通数组去重[...new Set(arr)]

// 原始数组
var arr = [1,2,3,2,2,4,5,6];
// 使用解构方式 去重的核心方法
var newArr = [...new Set(arr)];
// 去重后数据
console.log(newArr);

(2)用reduce（）方法去重。(例子见上)

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

---

4.computed计算和watch区别，用在什么场景?

（1）2者区别

computed 计算属性，通过属性计算得来的

属性的结果会被缓存，除非依赖的响应式属性发生变化才重新计算。当依赖的响应式属性没有变化的时候，调用当前函数的结果会从缓存中读取。必须用return来返回结果。

watch 属性监听 ，监听属性的变化。主要监听数据的变化，然后执行相关业务逻辑。

（2）使用场景

computed   当一个属性受多个属性影响的时候。

                   场景：购物车商品结算

watch          当一个数据影响多条数据的时候

                    场景：搜索数据

---

5. Vue中created和mounted的区别？

created：模板渲染成html前调用
mounted：模板渲染成html后调用，页面初始化后，对dom节点进行操作

6. DOM事件模型

事件是用户或者浏览器执行的动作，比如点击事件等。DOM支持大量事件，JS和html之间的交互事通过事件实现的。

事件流：描述的事件的触发顺序。

（1）事件冒泡

事件冒泡是IE的事件流。最具体的元素接受事件后逐级向上传播，直到传到Document对象上。谷歌浏览器会传到window对象上。

阻止事件冒泡
e.stopPropagation()可以中断冒泡。 捕获无法取消。

（2）事件捕获

从不具体的节点到具体的节点，一般从document对象传播，与事件冒泡相反。很少使用。

（3）Dom事件流

有3个阶段：事件捕获阶段，目标阶段，事件冒泡阶段。

事件处理程序：响应事件的函数。

（1）html事件处理程序

HTML 的on属性。用这个方法指定的监听代码，只会在冒泡阶段触发。