ES6常用语法

新的声明方法

var是之前常用的声明变量的方法, 它会提升变量等级, 将变量提升至全局.
let , const 是ES6新出的声明变量的方法. 其中

let的特性:

• 同一作用域内变量不能重复声明
• 块级作用域

// var使变量提升至全局
for(var i = 0; i < 10; i++){
	setTimeOut(function(){
		console.log(i);
		// 输出结果为10个10
	})
}
// 块级作用域, 每一个块都声明一个新的变量i
for(let i = 0; i < 10; i++){
	setTimeOut(function(){
		console.log(i);
		// 输出结果为0-9
	})
}

const的特性:

• 用const声明的变量为只读不可更改的
• 声明对象时, 不可直接更改对象, 但可以对对象里面的属性进行更改
• const定义变量必须进行初始化, 即在声明时就赋值
• 同一作用域内变量不能重复声明
• 跨级作用域

const a; // 只声明未初始化, 错误
const a = 0;
a = 1;  // 对const定义的变量进行更改, 错误

const obj = {
	a: 1, 
	b: 2
};
obj = {};  // 对对象直接更改, 错误
obj.a = 3;  // 更改const定义的对象的属性 ,正确
// 这里也可以给对象添加和删除属性

模板字符串

• 反引号``(Esc键下方)
• 表达式 ${}
• 方便对字符串进行拼接
• 表达式内部尽量不对字符串变量进行拼接, 不规范(不会报错). 但是表达式内可以进行计算

let a = 'Hello';
let b = 'World';
console.log(`${a} ${b}!!!`);  // Hello World!!!
let c = 4;
let d = 5;
console.log(`c+d的结果是:${c+d}`)'  // c+d的结果是:9

变量解构赋值

参考资料: ES6 解构赋值

• 数组的解构赋值

// 基本
let [a, b, c] = [1, 2, 3];   // a = 1  b = 2 c = 3

// 可嵌套
let [a, [[b], c]] = [1, [[2], 3]];   // a = 1  b = 2 c = 3

// 可忽略
let [a, , b] = [1, 2, 3];   // a = 1  b = 3

// 不完全解构
let [a = 1, b] = []; // a = 1, b = undefined

// 剩余运算符
let [a, ...b] = [1, 2, 3];    // a = 1  b = [2, 3]

// 在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据
let [a, b, c, d, e] = 'hello';

// 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果
let [a = 2] = [undefined];  // a = 2
let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

• 对象解构赋值

// 基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };  // foo = 'aaa'  bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };   // foo = 'ddd'

// 可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;  // x = 'hello'  y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;  // x = 'hello'

// 不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;   // x = undefined  y = 'world'

// 剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};   // a = 10  b = 20  rest = {c: 30, d: 40}

// 解构默认值
let {a = 10, b = 5} = {a: 3};  // a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};  // aa = 3; bb = 5;

箭头函数

• 匿名的
• 如果只有一个参数, 可以不加括号
• 箭头后面可以直接写返回值
• 没有 this、super、arguments 和 new.target 绑定
• 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

// 当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}