一、什么是ES6?

ES6就是ECMAScript6是新版本JavaScript语言的标准,它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

二、ECMAScript历史

ECMAScript是JavaScript的规范,而 JavaScript 是对规范的实现。ECMA (European Computer Manufacturers Association)是国际标准化组织。

最早的 JavaScript 是由 Netscape 公司开发的,并提交给 ECMA 标准化组织,制定了最早的 ECMAScript 1.0 (简称ES1,以下同)标准。
此后,又陆续制定了后续其他标准:
- 6.0 标准(ES6)- 第一个 ES6 版本是在 2015 年 6 月份发布的,因此 ES6 又称为 ECMAScript 2015。标准委员会决定每年 6 月份发布一次:
- 2015 年 6 月发布 ES6 的第一个版本,又称 ECMAScript 2015(简称 ES2015,以下同)。
- 2016 年 6 月发布 ES6 的第二个版本,又称 ECMAScript 2016。
- 2017 年 6 月发布 ES6 的第三个版本,又称 ECMAScript 2017。
ES6 是泛指,包含了 ES2015、ES2016、ES2017 等标准。ES2015 才是正式的标准名称,特指在 2015 年发布的语言标准。

三、ES6新特性

1、let 关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点:
1. 不允许重复声明;
2. 块儿级作用域(局部变量);
3. 不存在变量提升,即不可在变量创建之前使用;
4. 不影响作用域链,即上级代码块中的局部变量下级代码块可用;

2、const 关键字

const 关键字用来声明常量,const 声明有以下特点:
1. 声明必须赋初始值;
2. 标识符一般为大写(习惯);
3. 不允许重复声明;
4. 值不允许修改;
5. 块儿级作用域(局部常量);
声明对象类型使用 const,非对象类型声明选择 let;

3、变量和对象的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。频繁使用对象方法、数组元素,就可以使用解构赋值形式。

// 1、数组的解构赋值 
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4; // 这就相当于我们声明4个变量a,b,c,d,其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
    name : "大哥",
    age : 22,
    sex : "男",
    xiaopin : function(){
        console.log("我会演小品!"); 
    } 
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin);
xiaopin(); // 此方法可以正常调用

4、模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
1. 字符串中可以出现换行符;
2. 可以使用 ${xxx} 形式引用变量;
当遇到字符串与变量拼接的情况使用模板字符串;

5、简化对象和函数写法

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

//创建对象
const school = {
// 完整写法
// name:name,
// change:change
// 简化写法
    name,
    change,
// 声明方法的简化
    say(){
    console.log("言行一致!");
    }
}
school.change();
school.say();

6、箭头函数

ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义。
箭头函数的注意点:
1. 如果形参只有一个,则小括号可以省略;
2. 函数体如果只有一条语句,则花括号可以省略(return也省略),函数的返回值为该条语句的执行结果;
3. 箭头函数的this是静态的,箭头函数 this 指向声明时所在作用域下 this 的值;
4. 箭头函数不能作为构造函数实例化;
5. 不能使用 arguments;

7、函数参数的默认值

ES6可以给函数的参数设置默认值;

8、rest参数

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments。
将实参转化为数组。

//ES5获取实参的方式,使用arguments参数
function data(){
    console.log(arguments); //arguments是一个对象
}
data("大哥","二哥","三哥","四哥");

// ES6的rest参数...args,rest参数必须放在最后面
function data(...args){//此时可以使用实参
    console.log(args); //args是一个数组
}
data("大哥","二哥","三哥","四哥");

打印结果:
["大哥","二哥","三哥","四哥"]
["大哥","二哥","三哥","四哥"]

9、扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列;扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,扩展运算符将一个数组转为用逗号分隔的参数序列,对数组进行解包。

//声明一个数组 ...
const tfboys = ['易烊千玺', '王源', '王俊凯'];// => '易烊千玺','王源','王俊凯'
// 声明一个函数
function chunwan() {
    console.log(arguments);
}
chunwan(...tfboys); // 相当于chunwan('易烊千玺','王源','王俊凯')

//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
// 使用扩展运算符合并
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; 
console.log(zuixuanxiaopingguo);

//2. 数组的克隆 const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);

//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); //arguments

10、Symbol

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。
Symbol 特点:
1. Symbol 的值是唯一的,用来解决命名冲突的问题;
2. Symbol 值不能与其他数据进行运算;
3. Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名;

其他类型

  • USONB you are so niubility
  • u undefined
  • s string symbol
  • o object
  • n null number
  • b boolean

11、迭代器

用来遍历集合、数组等;

12、生成器

是一种异步编程解决方案;

13、Promise

非常强大的异步编程的新解决方案;

14、Set集合

类似数组,但元素不重复的集合;

15、Map集合

键值对集合;

16、class类 像java实体类一样声明js类;

17、数值扩展

增加一些数值相关的方法等;

18、对象扩展

增加一些对象相关的方法等;

19、模块化

模块化、组件化;

20、Babel对ES6模块化代码转换

为了适配浏览器,将更新的ES规范转换成ES5规范;

21、ES6模块化引入NPM包

像导入模块一样导入npm包;