ECMASript 6 新特性
一、let关键字
let关键字用来声明变量，使用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 = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;
// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;
注意：当遇到字符串与变量拼接的情况使用模板字符串
五、简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
let name = '前端';
let slogon = '好好学习';
let improve = function () {
console.log('提高技能');
}
//属性和方法简写
let wul= {
name,
slogon,
improve,
change() {
console.log('可以改变你')
}
};
六、箭头函数
ES6 允许使用「箭头」（=>）定义函数。
// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
箭头函数的注意点:
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
- 箭头函数this指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
// 2. 省略小括号的情况
let fn2 = num => {
return num * 10;
};
// 3. 省略花括号的情况
let fn3 = score => score * 20;
// 4. this指向声明时所在作用域中 this 的值
let fn4 = () => {
console.log(this);
}
let school = {
name: 'wu',
getName(){
let fn5 = () => {
console.log(this);
}
fn5();
}
};
注意：箭头函数不会更改this指向，所以非常适合设置与this无关的回调，比如数组回调、定时器回调，不适合事件回调与对象方法。
七、rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments
// 作用与 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};
九、Symbol
-
Symbol基本使用
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 > JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol特点：- Symbol的值是唯一的，用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用
Reflect.ownKeys来获取对象的所有键名
//创建 Symbol let s1 = Symbol(); console.log(s1, typeof s1); //添加标识的 Symbol let s2 = Symbol('wu'); let s2_2 = Symbol('wu'); console.log(s2 === s2_2); //使用 Symbol for 定义 let s3 = Symbol.for('wu'); let s3_2 = Symbol.for('wu'); console.log(s3 === s3_2);注: Symbol类型唯一合理的用法是用变量存储 symbol的值，然后使用存储的值创建对象属性
-
Symbol内置值
除了定义自己使用的 Symbol 值以外，ES6 还提供了11个内置的Symbol值，指向语言内部使用的方法。
Symbol.hasInstance
当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法Symbol.isConcatSpreadable
对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。Symbol. unscopables
该对象指定了使用with关键字时，哪些属性会被with环境排除。Symbol.match
当执行str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。Symbol.replace
当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值。Symbol.search
当该对象被str. search (myObject)方法调用时，会返回该方法的返回值。Symbol.split
当该对象被str. split (myObject)方法调用时，会返回该方法的返回值。Symbol.iterator
对象进行for…of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器Symbol.toPrimitive
该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。Symbol. toStringTag
在该对象上面调用toString方法时，返回该方法的返回值Symbol.species
创建衍生对象时，会使用该属性
十、迭代器
迭代器（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属性的对象
注: 需要自定义遍历数据的时候，要想到迭代器。
十一、生成器
生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同
function * gen(){
yield '一只没有耳朵';
yield '一只没有尾巴';
return '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
代码说明：
- 位置没有限制
- 生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到yield语句后的值
- yield相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码
- next方法可以传递实参，作为yield语句的返回值
十二、Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
十三、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','wu'],
['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 比较两个值是否严格相等，与『===』行为基本一致
Object.assign对象的合并，将原对象的所有可枚举属性，复制到目标对象__proto__、setPrototypeOf可以直接设置对象的原型
扫一扫
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
