ES6知识点(二)

204 阅读3分钟

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 我们日常使用场景中主要有两种地方会用到解构赋值:

数组解构赋值
let [a, b, c] = [1, 2, 3]
let [a, [b], c] = [1, [2], 3]
let [a, ...b] = [1, 2, 3]
let [a,,b] = [1, 2, 3] 
let [a,b] = [1, 2, 3] 

上面的数组解构赋值首先是逐个解构,其次不完全解构,嵌套数组结构以及不连续的数组结构等等,数组的解构赋值可以用来交互数据的值如:

[a,b] = [b,a]

这样就不用写多行代码来实现数据的交换。

对象的解构赋值
let {a, b} = {a: '1', b: '2'}
let a = {d: '3', e: {f: '4'}}
let {b, c:{d}} = a

对象的解构赋值和数组的使用方法类似,在函数传参的时候我们就可以使用解构赋值的特性来将我们的代码简化:

let param={
  a:'a',
  b:'b',
  c:'c'
}
let {a,b,c}=config
console.log(a,b,c)
 
function demo(x){
  console.log(x)
}
demo({a,b,c})

在ES6中类似于解构赋值这种对于复杂数据类型取值的操作还有展开运算符,通过展开运算符我们可以展开一个复杂数据类型从而获得内部的值。

展开运算符

首先贴一段MDN上对于展开运算符...的介绍:

展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

一个常见的例子:合并数组。以前我们可能需要利用数组的concat函数来将两个数组进行合并,现在可以利用展开运算符合并如:

a = [1,2,3].concat([4,5,6])
a = [1,2,3,4,5,6]
let b = [1,2,3]
let c = [4,5,6]
let d = [...b,...c]
//d = [1,2,3,4,5,6]

展开运算符如果用在函数参数中的时候可以将入参展开为一个零散的单值,通过这个用法可以灵活运用函数的callapply方法,其次展开运算符还可以将一些不是数组的类型转化为数组,如Set类型可以通过...new Set([1,2,3,3,3])这种方式来转化。

MDN文档中对于展开运算符在对象类型浅拷贝中,有一个小提示是Object.assign()的浅拷贝过程中会出发对象的setter属性,而展开运算符则不会。

剩余参数(rest Parameters)

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

如果函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组。

剩余参数和 arguments对象之间的区别主要有三个:引自MDN文档

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法。
  • arguments对象还有一些附加的属性 (如callee属性)。

剩余参数主要用于函数形参的地方,用来将一部分参数转为一个数组,看一个例子:

function sum(...args) {
  return args.reduce((pre, cur) => {
    return pre + cur;
  });
}