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引入的新数据类型,解决命名冲突