ES6新特性详解
回到主文章
ES 6 新特性
let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
- 不允许重复声明
- 块儿级作用域
- 不存在变量提升
- 不影响作用域链
以后写js声明变量都用let
const 关键字
const 关键字用来声明常量，const 声明有以下特点
- 声明必须赋初始值
- 标识符一般为大写（潜规则）
- 不允许重复声明
- 常量值不允许修改
- 块儿级作用域
注意: 对象属性修改和数组元素变化不会出发 const 错误
声明对象类型使用 const，非对象类型声明选择 let
变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
对象的解构赋值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
复杂解构
let wangfei = {
name: '王菲', age: 18,
songs: ['红豆', '流年', '暧昧', '传奇'],
history: [{name: '窦唯'},{name: '李亚鹏'},{name: '谢霆锋'}]
};
let {songs: [one, two, three], history: [first, second, third]} =wangfei;
频繁使用对象方法、数组元素，就可以使用解构赋值形式
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
定义字符串
let str = `
- 沈腾
- 玛丽
- 魏翔
- 艾伦
`;
变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;
当遇到字符串与变量拼接的情况使用模板字符串
简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁
let name = '刀妹';
let slogon = '艾欧尼亚昂扬不灭！';
let improve = function () {
console.log('我奶奶说过');
}
//属性和方法简写
let atguigu = {
name, //之前要这样写name：name，
slogon,
improve,
change() {
console.log('切断他们的退路')
}
};
对象简写形式简化了代码，所以以后用简写会大大提高效率
箭头函数
ES6 允许使用「箭头」（=>）定义函数。
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
箭头函数的注意点:
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
- 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments（保存实参）变量
省略小括号的情况
如果形参只有一个，则小括号可以省略
let fn2 = num => {
return num * 10;
};
省略花括号的情况
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的
let fn3 = score => score * 20;
this 指向声明时所在作用域中 this 的值
箭头函数 this 指向声明时所在作用域下 this 的值
//使用老方式创建个函数
function getName(){
console.log(this.name)
}
//使用es6创建个函数
let getName2 = () =>{
console.log(this.name)//this指的是全局
}
//设置window对象的name属性
window.name = `张三`
const school = {
name:`ZHANGSAN`
}
//直接调用
getName();//输出张三
getName2();//输出张三
//call方法调用（call方法可以改变函数内部this的值）
getName.call(school); //输出ZHANGSAN
getName2.call(school);//仍然输出张三
箭头函数不会更改 this 指向，用来指定回调函数会非常合适
不能作为构造函数实体化
箭头函数不能作为构造函数实例化
let Person = (name ,age) =>{
this.name = name;
this.age = age;
}
let me = new Person(`xiao`,30)
console.log(me);
报错：Uncaught TypeError: Person is not a constructor
atxxxxxxxx（说明Person不是一个构造函数）
不能使用 arguments
不能使用 arguments（保存实参）变量
let fun = () =>{
console.log(arguments)
}
fun(1 , 2 , 3)
报错：Uncaught ReferenceError: arguments is not defined at funxxxxx
rest 参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
- 作用和arguments类似
- rest 参数必须是最后一个形参
/**
* 作用与 arguments 类似
*/
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
rest 参数非常适合不定个数参数函数的场景
spread 扩展运算符
扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。
/**
* 展开数组
*/
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {
q: '致命打击',
};
let skillTwo = {
w: '勇气'
};
let skillThree = {
e: '审判'
};
let skillFour = {
r: '德玛西亚正义'
};
let gailun = {...skillOne,...skillTwo,...skillThree,...skillFour};
扩展运算符的应用
数组的合并
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);
数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);
将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);// arguments
Symbol
Symbol基本使用
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是
JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点
- Symbol 的值是唯一的,用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义 的 对象属性不能使用 for…in 循 环遍 历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名
//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);//输出Symbol() "symbol"
//添加标识的 Symbol
let s2 = Symbol('英雄联盟');//括号里面的数相当于注释，没有意义
let s2_2 = Symbol('英雄联盟');
console.log(s2 === s2_2);//false
//使用 Symbol for 定义
let s3 = Symbol.for('英雄联盟');
let s3_2 = Symbol.for('英雄联盟');
console.log(s3 === s3_2);//true
遇到唯一性的场景时要想到 Symbol
运用：在不确定对象是否有一个属性时随意添加对象
//向对象中添加方法 up down
let game = {
name: '俄罗斯方块',
up: function () { },
down: function () { }
};
//声明一个对象
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function () {
console.log("我可以改变形状");
}
game[methods.down] = function () {
console.log("我可以快速下降!!");
}
console.log(game);
Symbol 内置值
除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。
这里就不一一介绍了
迭代器
遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
- ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
- 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList - 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
使用for in是遍历键名，用for of遍历键值
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];
//使用 for...of 遍历数组
for(let v of xiyou){
console.log(v);
}
let iterator = xiyou[Symbol.iterator]();//输出 唐僧,孙悟空,猪八戒,沙僧
生成器
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，在之前我们解决异步编程的方法都是使用回调函数。
代码说明：
-
- 的位置没有限制
- 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值
- yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码
- next 方法可以传递实参，作为 yield 语句的返回值
function * gen(){
yield '一只没有耳朵';
yield '一只没有尾巴';
return '真奇怪'; }
let iterator = gen();
console.log(iterator.next());//输出{value: "一只没有耳朵"done: false}
console.log(iterator.next());//输出{value: "一只没有尾巴"done: false}
console.log(iterator.next());//输出{value: "真奇怪"done: false}
Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，
用来封装异步操作并可以获取其成功或失败的结果。
- Promise 构造函数: Promise (excutor) {}
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
Set
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进
行遍历，集合的属性和方法：
- size 返回集合的元素个数
- add 增加一个新元素，返回当前集合
- delete 删除元素，返回 boolean 值
- has 检测集合中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());
map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。
Map 的属性和方法：
- size 返回 Map 的元素个数
- set 增加一个新元素，返回当前 Map
- get 返回键名对象的键值
- has 检测 Map 中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
['name','英雄联盟'],
['slogon','德玛西亚']
]);
属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());
class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是
一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
//父类
class Phone {
//构造方法
constructor(brand, color, price) {
this.brand = brand;
this.color = color;
this.price = price;
}
//对象方法
call() {
console.log('我可以打电话!!!')
} }
//子类
class SmartPhone extends Phone {
constructor(brand, color, price, screen, pixel) {
super(brand, color, price);
this.screen = screen;
this.pixel = pixel;
}
//子类方法
photo(){
console.log('我可以拍照!!');
}
playGame(){
console.log('我可以玩游戏!!');
}
//方法重写
call(){
console.log('我可以进行视频通话!!');
}
//静态方法
static run(){
console.log('我可以运行程序')
}
static connect(){
console.log('我可以建立连接')
} }
//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088,
'4.7inch','500w');
//调用子类方法
iPhone6s.playGame();
//调用重写方法
iPhone6s.call();
//调用静态方法
SmartPhone.run();
数值扩展
二进制和八进制
ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。
Number.isFinite() 与 Number.isNaN()
Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN
Number.parseInt() 与 Number.parseFloat()
ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。
Math.trunc
用于去除一个数的小数部分，返回整数部分。
Number.isInteger
Number.isInteger() 用来判断一个数值是否为整数
对象扩展
ES6 新增了一些 Object 对象的方法
- Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
- Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
- proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势有以下几点：
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
ES6 之前的模块化规范有：
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能