一、什么是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包;
Comments | NOTHING
Warning: Undefined variable $return_smiles in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/functions.php on line 1078
Warning: Undefined variable $robot_comments in /www/wwwroot/blog.moonlet.cn/wp-content/themes/Sakura/comments.php on line 97