ES6、ES7工作中经常用到的特性

1. let 、 const

描述：let 用于声明变量，类似于var，const用于声明常量（声明时必须赋初值，之后不可再改变）

特点：

不存在变量提升
形成块级作用域（之前只有全局、函数作用域）
必须先声明，才能使用，否则报错（即暂时性死区），这也意味着typeof不再是百分百安全的操作
声明变量、常量不再属于window的属性

2. 解构赋值

描述：按照一定模式，从数组和对象中提取值，对变量进行赋值，成为解构。

2.1 数组解构赋值

只要等号两边的模式相同，左边的变量就会被赋予对应的值（一一对应）

let [a, b, c] = ['levy', 'lin', 'love']
a  //  "levy"
b  //  "lin"
c  //  "love"

若左边变量在右边没有匹配到一一对应的值，则解构不成功，值未undefined

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

若右边的值没有左边的变量与之匹配，则不完全解构，未匹配的值会丢弃

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

左边变量允许默认值（即当解构不成功时，使用默认值）

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

2.2 对象解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

其实，实际是，先找到同名属性，然后在赋值给对应的变量，真正被赋值的是后者

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面例子，foo是匹配模式，baz才是变量

对象也可以有默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

3. 函数

描述：函数新增了比较多有用的特性，如参数默认值、rest参数、箭头函数等...

3. 函数默认值

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

与解构赋值默认值配合使用

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 报错

3.2 rest 参数

rest 参数（形式为...变量名），用于获取函数的多余参数

function add(...values) {
  let sum = 0;

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

  return sum;
}

add(2, 5, 3) // 10

3.3 箭头函数

ES6最酷的特性之一（=>）

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

//  rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

注意点：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

4. 数组、对象

4.1 数组扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

function push(array, ...items) {
  array.push(...items);
}

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

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

4.2 对象扩展运算符

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

var o = Object.create({ x: 1, y: 2 });
o.z = 3;

let { x, ...{ y, z } } = o;
x // 1
y // undefined
z // 3

4.3 属性简洁表示法

var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// 等同于
var baz = {foo: foo};

linchwei / blog

ES6、ES7工作中经常用到的特性 #24