ES6之三个点（扩展运算符及rest运算符）

ES6中出现了三个点的写法，初次看到一脸懵逼，现在让我们好好来搞清楚这三个点...

首先需要了解的是在ES6中新增了扩展运算符和rest参数，而这两个都是用...三个点来表示的(麻蛋就不能用不同的表示吗!)

第二需要了解的是扩展运算符（spread）好比 rest 参数的逆运算，为啥这么说呢？

扩展运算符是将一个数组转为用逗号分隔的参数序列。

rest参数（形式为...变量名），用于获取函数的任意数目的参数。

这样说来还是有点抽象，下面看代码吧

// 扩展运算符
// 将一个数组转为用逗号分隔的参数序列。
// 示例1
console.log(1, ...[2, 3, 4], 5)    // 1 2 3 4 5

// 示例2
function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

// 示例3
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add([2,3,5]) // 02,3,5



// rest参数
// 用于接收函数任意数目的参数
// ...values是一个数组，也叫rest参数,它接收了3个参数，将这3个参数放入数组中使用
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

从示例上来看，...到底是rest参数还是扩展运算符，要看...后面跟的是数组还是一个非数组变量，如果是数组，则...是扩展运算符，如果是非数组变量，则是rest参数。  (这样理解有问题)

上面的举例只是粗浅的认识，下面看下多了rest参数和扩展运算符对实际开发有什么好处呢？

// 1、数字排序

// rest参数语法

const sortNumber = (...values) => values.sort();

console.log(sortNumber(2,6,4,7,5,1));      // [1,2,4,5,6,7]



// 普通写法
// 普通写法需要先将arguments转为数组后才能使用sort排序
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

console.log(sortNumber(2,6,4,7,5,1));      // [1,2,4,5,6,7]


// 2、复制数组

// 扩展运算符
let arr = [1,2];
let arr2 = [...arr];
arr2[1] = 3;
console.log(arr);     // [1,2]
console.log(arr2);    // [1,3]

// 普通写法
let arr = [1,2];
let arr2 = arr.concat();
arr2[1] = 3;
console.log(arr);     // [1,2]
console.log(arr2);    // [1,3]


// 3、求数组中最大值

// 扩展运算符
console.log(Math.max(...[1,5,3,5,7,6]))    // 7

// 普通写法
console.log(Math.max.apply(null,[1,5,3,5,7,6]))     // 7

写完了感觉这个知识点还是有点模糊，以后开发中多用吧，有了新的理解再来补充！