前端面试ES6全方位总结

变量的解构赋值

在ES6中可以从数组和对象中提取值，对变量进行赋值，称为解构赋值。

解构赋值就是只要等号两边的模式相同，左边的变量就会被对应赋值。

解构赋值分类：

1. 数组的解构赋值

          数组的元素是按次序排列的，变量的取值由它的位置决定
   

2. 对象的解构赋值

          1.对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而`对象的属性没有次序，变量必须与属性同名，才能取到正确的值`。
   
          2.如果变量没有对应的同名属性，导致取不到值，最后等于`undefined`。
   
          3.如果变量名与属性名不一致，必须写成下面这样。
          

   

3. 字符串的解构赋值

         字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
         

   

4. 数字以及布尔值的解构赋值

         解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
   

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

1. 函数参数的解构赋值

剩余运算符（reset）和扩展运算符

共同点：都是有三个点（...）加变量

不同点：

• 位置的不同：当三个点(...)在等号左边，或者放在形参上，为 rest 运算符(剩余运算符); 当三个在等号右边，或者放在实参上，是 spread运算符(扩展运算符)

• 功能不同: 扩展运算符功能是把数组或类数组对象展开成一系列用逗号隔开的值；剩余运算符则正好相反；它是将一系列用逗号隔开的值有序的组成数组。

Set和Map

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

• Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的 值（包括对象）都可以当作键。也就是说，

Object 结构提供了“字符串—值”的对 应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需 要“键值对”的数据结构，

Map 比 Object 更合适；

• Map 可以接受一个数组作为参数。该数组的成员是一个表示键值对的数组。

const map = new Map([ ['name', '张三'], ['title', 'Author'] ])

Set实例的属性和方法

①属性：

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

②方法：

• add(value)：添加某个值，返回Set结构本身【去重】；

`
const set = new Set([1,3,4,6,'e'])
set.add('f');
set.add(3);
console.log(set);
`

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功；
• has(value)：返回一个布尔值，表示该值是否为Set的成员；
• clear()：清除所有成员，没有返回值；
• keys()：返回键名的遍历器；
• values()：返回键值的遍历器；
• entries()：返回键值对的遍历器；
• forEach()：使用回调函数遍历每个成员；

keys()，values()，entries()都是遍历操作；

使用for...of来遍历的值

Map实例的属性和方法

属性：

Map.prototype.size：返回 Map 结构的成员总数。

方法：

• set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如 果key已经有值，则键值会被更新，否则就新生成该键；
• get(key)：get方法读取key对应的键值，如果找不到key，返回undefined；
• has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中；
• delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false；
• clear():清除所有成员，没有返回值；
• keys()：返回键名的遍历器；
• values()：返回键值的遍历器；
• entries()：返回键值对的遍历器；
• forEach()：使用回调函数遍历每个成员；

ES6中对象、函数、数组的扩展

对象扩展

Object.is(value1,value2)

判断两个参数的值是否全等,与 === 类似,不过区别在于Object.is(+0, -0)返回false,Object.is(NaN, NaN)返回true

Object.is('foo','foo') //true
Object.is({},{}) //false

Object.assign(target,o1,o2...)

用于对象的合并将参数中所有可枚举的属性复制到目标对象target,返回目标对象
若有相同的属性值,后面的会覆盖之前的值

const target = {a:1, b:2, c:3}
const o1 = {b:4, d:5}
const newTarget = Object.assign(target, o1)

console.log(target) //{a:1, b:4, c:3, d:5}
console.log(Object.is(target,newTarget)) //true

Object.keys(obj)

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键名

const obj = {name: 'lil', age: 3}
console.log(Object.keys(obj)) //[ 'name', 'age' ]

Object.values(obj)

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键值

const obj = {name: 'lil', age: 3}
console.log(Object.values(obj)) //[ 'lil', 3 ]

Object.entries(obj)

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键值对

const obj = {name: 'lil', age: 3}
console.log(Object.entries(obj))
//[ [ 'name', 'lil' ], [ 'age', 3 ] ]

Object.setPrototypeOf(obj,prototype)

用来设置对象的prototype对象,返回参数对象本身,这个方法是ES6
正式推荐的设置原型对象的方法,等同于

function foo(obj,proto) {

obj.\_\_proto\_\_ = proto;
return obj

}

Object.getPrototypeOf(obj)

传入对象获取对象的原型对象

函数扩展

rest参数【剩余扩展运算符】

reset用来获取函数多余的参数,将多余的参数放入数组中,可调用数组的方法

function foo(...rest) {
return rest
}
console.log(foo(1,2,3)) //[1,2,3]

数组

扩展运算符

扩展运算符表示为...,可理解为rest参数的逆运算
扩展运算符将一个数组转为用逗号隔开的参数序列

const arr = [1,2,3,4]
console.log(arr) //1 2 3 4

将字符串转换为数组

console.log([...'hello']) //[ 'h', 'e', 'l', 'l', 'o' ]

合并数组

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1,...arr2]
console.log(arr3) //[ 1, 2, 3, 4, 5, 6 ]

Array.from()【转换为数组】

用于将类数组【比如字符串】或者可遍历具有length属性的对象转为数组

const obj = {'0':'a','1':'b','2':'c',length:3}
console.log(Array.from(obj)) //[ 'a', 'b', 'c' ]

console.log(Array.from('hello'))//[ 'h', 'e', 'l', 'l', 'o' ]

Array.of()

将一组值转换为数组,弥补了Array()的不足之处

Array.of(1,2,3) //[1, 2, 3]
Array(1,2,3) //[1, 2, 3]

Array.of(3) //[3]
Array(3) //[, , ,]

find()

返回数组中满足回调函数的第一个的值,全都不满足则返回undefined

const arr = [1, 2, 30, 100, 60]
const result = arr.find(item => item > 30)
console.log(result) //100

findIndex()

与find()用法类似,返回值为满足回调函数的第一个值的下标
全都不满足则返回undefined

const arr = [1, 2, 30, 100, 60]
const result = arr.findIndex(item => item > 30)
console.log(result) //3

entries()

用于遍历数组,返回一个遍历器对象Object [Array Iterator]{}
可用for...of进行循环遍历

const arr = ['a', 'b', 'c']
for (let [index, item] of arr.entries()) {

console.log(index, item)

}
//0 'a'
//1 'b'
//2 'c'

keys()

用法与entries()一样,区别在于keys()是对键名进行遍历而entries()
是对键值对进行遍历

const arr = ['a', 'b', 'c']
for (let index of arr.keys()) {

console.log(index)

}

includes()

发方法返回布尔值,检测数组是否包含某个值

const arr = [1,2,'a',NaN]
arr.includes(1) //true
arr.includes(3) //false
arr.includes('a') //true
arr.includes(NaN) //true