ES6学习笔记

ECMAScript 的各大版本

• ES5 : 09年发布。

• ES6：ECMAScript 2015年6月

• ES7：ECMAScript 2016

• ES8：ECMAScript 2017

ES6 的其他优势

• 使用 babel 语法转换器，支持低端浏览器。

• 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。

ES6的环境配置（为了兼容 ES5）

掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 Babel将 ES6 转换为 ES5。

但是，在这之前，我们需要配置一下相关的环境。

ES6 的变量声明

ES6 中新增了 let 和 const 来定义变量：

• var：ES5 和 ES6中，定义全局变量（是variable的简写）。

• let：定义局部变量，替代 var。

• const：定义常量（定义后，不可修改）。

变量的解构赋值

ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。

解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。

数组解构赋值：let [a, b, c] = [1, 2, 3];

对象解构赋值：let { foo, bar } = { bar: '我是 bar 的值', foo: '我是 foo 的值' };

for ... of 循环

ES6 中，如果我们要遍历一个数组，可以这样做：

	let arr1 = [1, 2, 3, 4, 5];

	for (let value of arr1) {
	    console.log(value);
	}

for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。

注意，上面的数组中，for ... of获取的是数组里的值；for ... in获取的是index索引值。

模板字符串

    var name = 'smyhvae';
    var age = '26';

    console.log('name:'+name+',age:'+age);   //传统写法

    console.log(`name:${name},age:${age}`);  //ES6 写法

ES6在函数扩展方面，新增了很多特性

• 箭头函数：var fn2 = (a, b) => a + b;

• 参数默认值：默认值的后面，不能再有没有默认值的变量

• 参数解构赋值

• 扩展运算符：格式为...

• rest参数：格式为...变量名，需要放在参数列表最后

• this绑定：箭头函数中的this，是不会变的，是永远绑定在当前的环境下

• 尾调用：指某个函数的最后一步是调用另一个函数

• Symbol：ES6引入的新数据类型，解决命名冲突

ES6在数字，字符串，数组，对象的扩展

参考链接