ES6

ES6学习总结

一、变量声明let和const

1、let

• 变量声明
• 没有变量提升（不能在声明变量之前使用，而 var则有变量提升，可以在声明之前使用）
• 不能重复声明，否则会报错（var则会覆盖）
• 需要在块级作用域种声明，并且只在所在块级作用域生效（一对大括号{ }就是一个块级作用域）

2、const

• 声明一个只读变量（声明的值无法修改，因此不能只声明不赋值）
• 没有变量提升（不能在声明变量之前使用，而 var则可以）
• 需要在块级作用域种声明，并且只在所在块级作用域生效（一对大括号{ }就是一个块级作用域）

3、var、let、const的区别

• var有变量提升，可以在声明之前使用，但是let和const不可以
• var在局部作用域或者全局作用域中使用，而let和const在块级作用域中使用
• var和let可以只声明，不赋值，赋值以后可以可以对其进行修改，但是const声明时必须赋值，而且赋值以后不可修改（可以修改对象的属性）
• 同一块级作用域，var可以声明同一个变量，但是let和const不可以

ES5有两种变量声明方法，分别是var和function，ES6除了let和const外，还有import和class。所有ES6中共有6中变量声明的方法。

二、变量解构

1、数组解构

let [a, b, c] = [1, 2, 3];		//a=1,b=2,c=3
let [foo, [[bar], baz]] = [1, [[2], 3]];		//foo=1,bar=2,baz=3
let [ , , third] = ["foo", "bar", "baz"];		//third="baz"
let [x, , y] = [1, 2, 3];			//x=1,y=3
let [head, ...tail] = [1, 2, 3, 4];		//head=1,tail=[2,3,4]
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 [x, y, z] = new Set(['a', 'b', 'c']);		//x='a',y='b',z='c'

let [foo = true] = [];			//允许指定默认值，foo=true
let [x, y = 'b'] = ['a']; 		// x='a', y='b'

注意：

• 解构不成功时，变量等于undefined
• 不完全解构时，部分匹配，解构成功
• 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

2、对象解构

//变量名与属性名一致情况下
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };		//foo='aaa',bar='bbb'
ler { foo, bar } = {'aaa', 'bbb'}					//报错
//变量名与属性名不一致情况下
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };		//baz = "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;			//f ='hello',l='world'
//上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

注意：

• 如果解构失败，变量的值等于undefined。

3、字符串解构

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

4、数值、布尔值解构

5、函数参数解构

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3
************************************************************************************************
//函数参数使用默认值解构
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
***********************************************************************************************
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

三、字符串的扩展

1、字符串的unicode表示法

2、字符串的遍历接口

for...of..使字符串可以直接遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

四、数组的扩展

1、扩展运算符

扩展运算符是三个点...

console.log(...[1, 2, 3])				// 1 2 3
console.log(1, ...[2, 3, 4], 5)			// 1 2 3 4 5
let a=[1,2,3];
let b=[4,5,6];
let c=[...a,...b]		//c=[1,2,3,4,5,6]

function(a, b, ...theArgs) {
  return theArgs;
}
args(1,2,3,4,5,6)		//[3, 4, 5, 6]

//获取数组中的最大值
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);


//将一个数组push到另一个数组的尾部
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);