文章目录

rest参数
数组的扩展
小结

解构赋值

数组的解构赋值
对象的解构赋值
小结

结语

…

…有两种含义，一种表示rest参数，另一种表示数组的扩展。

rest参数

rest参数，顾名思义，就是无法确定某一个函数的具体参数个数。
talk is empty,show you the example.

function sum(a, b) {
  return a + b;
}
console.log(sum(1,2));
console.log(sum(1,2,3));

结果很显然，都是3。那么如何才能做到可以自定义参数求和的功能呢？
…（rest参数）来帮忙！

function sumAll(...args) { 
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}
console.log(sumAll(1,2));
console.log(sumAll(1,2,3));

不出意外，结果分别为3和6，这也正是我们所期待的效果。
本质上，rest参数就是将rest的参数列表封装成一个数组。

数组的扩展

这里所指的数组的扩展实质上就是rest参数的逆运算，即将一个数组拆解为一个参数列表。
talk is empty,show you the example.

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
console.log( Math.max(...arr1, ...arr2) ); // 8

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
console.log(merged);// 0,3,5,1,2,8,9,15

结果在注释里，那些曾经感觉有点复杂的数组的求最值以及合并问题，如今用…可以一行代码搞定，确实很Amazing。
甚至还能把rest参数与数组的扩展混合使用：

function f(...args) {
  return Math.min(...args);
}
console.log(f(4,7,-8,-7,20));// -8
console.log(f(4,7,-8,-7,20,-10));// -10

数组的扩展，还有一个很经典的应用场景：copy array/object。

let arr  = [1,2,3];
let arrCopy = Object.assign(arr);
console.log(arrCopy);// [1,2,3]

上面是使用Object.assign()进行快速copy，属于使用api的手段。
下面看看使用数组的扩展的方法实现：

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

小结

有关…语法糖的使用案例还有很多，这里我是使用一些很简单很常见的例子让大家知道此语法糖是如何使用的。
当…在函数参数的末尾，它是rest参数，并将参数列表的其余部分收集到一个数组中。
当…发生在函数调用或类似的情况下，称为数组的扩展，将数组展开为列表。

解构赋值

解构赋值表示从数组或者对象中提取值，对变量进行赋值

数组的解构赋值

talk is empty,show you the example.

let input = [1, 2];
let [first, second] = input;
console.log(first); // 1
console.log(second); // 2

也许这个例子显得太简单，不过瘾，那么接下来再看一下更经典的两数交换的例子：

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a);// 2
console.log(b);// 1

是不是感觉很Amazing，“传说中的两数交换”竟然能用一行代码解决。
解构赋值的默认值：

let [name = "Guest", surname = "Anonymous"] = ["Julius"];
console.log(name);    // Julius 
console.log(surname); // Anonymous

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则只能得到undefined。
talk is empty,show you the example.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};
let {height, title, age} = options;
console.log(height);// 200
console.log(title);// Menu
console.log(age);// undefined

同样，对象的解构赋值也允许使用默认值：

let user = {
  name: "John",
  years: 30
};
let {name, years: age, isAdmin = false} = user;
console.log(name);// John
console.log(age);// 30
console.log(isAdmin);// false

甚至，解构赋值也能与rest参数结合使用：

let options = {
  title: "Menu",
  height: 200,
  width: 100
};
let {title, ...rest} = options;
console.log(rest.height);// 200
console.log(rest.width);// 100

小结

有关解构赋值语法糖的使用案例还有很多甚至还有很多很“高级”的用法，我文中所例举的案例都是一些简单易懂的例子。但是不难发现就算是最简单的解构表达式也是有些难以理解的，所以解构表达式在使用时要尽量保持小而简单。
对于object的一般解构表达式：

let {prop : varName = default, ...rest} = object

对于array的一般结构表达式：

let [item1 = default, item2, ...rest] = array

结语

本文介绍的两个短小精悍的js语法糖分别是 … 和 解构赋值。这两个语法糖对于一般的后端语言的使用者可能会感到有些陌生，毕竟显得并不是非常实用。但是一旦遇到例如数组copy，两数交换等经典问题时，它俩就能大显身手！
有关此语法糖更多的详细内容可以参看我下面给出的两个参考教程链接。
阮一峰es6教程：https://es6.ruanyifeng.com/
javascript.info教程：https://javascript.info/

两个短小精悍的js语法糖