JS - ES2015/ES6新特性详解3（默认参数、不定参数、扩展运算符、解构）

八、Default、Rest、Spread

1，Default（默认参数）

function f(x, y) {
  y = y || 12;
  return x + y;
}

console.log(f(3));  //15
console.log(f(3,2));  //5

（2）如果用 ES6 我们而已直接这么写：

function f(x, y = 12) {
  return x + y;
}

console.log(f(3));  //15
console.log(f(3,2));  //5

2，Rest（不定参数）

Rest 可以让我们更方便地获取不定参数（或者说剩余参数），而不再需要 arguments。

function demo(part1, ...part2) {
    console.log(part1); // 1
    console.log(part2); // [2,3,4,5,6]
}

demo(1,2,3,4,5,6);

3，Spread（扩展运算符）

扩展运算符可以将数组转换为连续的函数参数。
（1）在函数中使用

function f(x, y, z) {
  return x + y + z;
}
// 传递数组的每个元素作为参数
f(...[1,2,3]); // 6

（2）在数组中使用

var parts = ["1", "2"];
var lyrics = ["a", ...parts, "b"]; //["a", "1", "2", "b"]

九、解构（Destructuring）

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1，从一个数组中得到元素

var array = [1, 2, 3, 4];

//ES5写法
var first = array[0];
var third = array[2];
console.log(first, third);  // 1 3

//ES6写法
const [first, ,third] = array;
console.log(first, third); // 1 3

2，交换两个值

var a = 1;
var b = 2;

//ES5写法
var tmp = a;
a = b;
b = tmp;
console.log(a, b); // 2 1

//ES6写法
[a, b] = [b, a];
console.log(a, b); // 2 1

3，多个返回值的解构

function margin() {
  var left=1, right=2, top=3, bottom=4;
  return { left: left, right: right, top: top, bottom: bottom };
  //return { left, right, top, bottom }; //ES6还可以简写成这样
}

//ES5的写法
var data = margin();
var left = data.left;
var bottom = data.bottom;
console.log(left, bottom); // 1 4

//ES6的写法
const { left, bottom } = margin();
console.log(left, bottom); // 1 4

4，参数匹配的解构

function g({name: x}) {
  return x
}

function m({name}) {
  return name
}

console.log(g({name: 5}))  //5
console.log(m({name: 5}))  //5

5，对象解构（又叫深度匹配）

function settings() {
  return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
}
const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
console.log(displayColor, keyboardLayout); // red querty