ECMAScript 6 扩展运算符

---

扩展运算符和rest运算符是ES6新推出的,大家可能比较陌生,本来我是打算放在数组扩展里面一起讲的,但是觉得他们挺好用也挺重要的,所以就提前拿出来单独分享一下

文章主要参考阮一峰老师的 ECMAScript 6入门,站在巨人的肩膀上看世界…

扩展运算符

扩展运算符（spread）是三个点（…），将一个数组转为分隔的参数序列。

举一个简单的例子

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

function add(x,y,z){
  return x + y + z
}

add(...arr) // 6

注意，扩展运算符如果放在括号中，JavaScript 引擎就会认为这是函数调用，否则就会报错。

(...[1,2]) // 报错

console.log((...[1,2])) // 报错

console.log(...[1,2]) // 不会报错,因为这时是函数调用。

接下来讲一下扩展运算符的基本用法

代替apply方法

举一个求数组中最大值的例子

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

不明白apply用法的可以看我之前的博客,原型与原型链,这篇文章有讲到apply的用法

复制数组

我们之前复制数组的时候,用的是深拷贝和浅拷贝,这里我就不再说什么是深拷贝了,来看看ES6怎么复制数组

let a1 = [1, 2];

let a2 = [...a1]; // 写法一

let [...a2] = a1; // 写法二

合并数组

let arr1 = [{cs:'123'}, 'b'];
let arr2 = ['c'];
let arr3 = ['d', 'e'];

let arr4 = [...arr1, ...arr2, ...arr3]

arr1[0].cs = 'csing'

console.log(arr4) // [ {cs:'csing'}, 'b', 'c', 'd', 'e' ]

注意!!! 这种方法是浅拷贝,这个坑需要注意一下

rest运算符

rest运算符也是用…(三个点)来表示,甚至很多时候你不用特意去区分

function add(one,...rest){
  console.log(rest) // [2,3,4,5,6]
}

add(1,2,3,4,5,6)

这样写的好处在于,当你不知道函数会传进来几个参数的时候,…rest可以全部接受后转为数组

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

需要注意的是,如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

以上就是我对ECMAScript 6运算符扩展的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。