ES6要点

2019-03-23 本文已影响0人 Chaos_YM

注：此为ES要点和使用心得概括，适合学习过的人查缺补漏
初学者看这里：传送门

let与const

1，都拥有块级作用域
2，let变量，const常量（指针不变）（其中const声明时必须同步初始化，即赋值）
3，都不存在变量提升（var存在变量提升，提前使用，值为undefined，ES6以上会报错）
4，都有暂时性死区（没有变量提升的后果）
5，都不允许重复声明

var tmp = 123;
if (true) {
tmp = 'abc'
let tmp;
// 报错，暂时性死区
// 如果没有let tmp，就不会报错
}

// 注意
typeof x;
let x;   // 会报错，typeof不再安全

解构赋值

主要说下用途：
1，变量交换
2，处理函数返回多个值的情况
3，函数参数
4，提取json数据（前后端交互）
5，函数参数设置默认值
6，遍历map结构
7，模块化引入时尤其常用

{
    let json = {
        title:'111',
        test:[{
            res:'test'
        }]
    }
    let {title:a, test[{res: b}]} = json
    // 此处a, b 是要赋值的变量
    // 结果是a为'111'， b为'test'
}

字符串扩展

1，Unicode表示法，\u20bb7 => \u{20bb7}
2，以下差别都是对于处理Unicode字符
codePointAt() 与 charCodeAt()
fromCharCode() 与 fromCodePoint

// 以上的主要用途
{
let str = '\u{20bb7}abc';
  for (let i=0; i<str.length; i++) {
  console.log(str[i])   // 打印五个
  }
  for (let code of str) {
  console.log(code)   // 打印四个
  }
}

3，API与模板字符串

string.includes();
string.startsWith('xx');
string.endsWith('xx');
string.repeat(n);
string.padStart(n, 'xx'); // 常用于日期的补白，比如制作 2019/03/05，后面的03和05即可使用
string.padEnd(n, 'xx');

4，标签模板
用途，过滤HTML字符串，抵御XSS攻击；多语言转换等
5，string.raw
使\n不生效

数值扩展

1，二进制，八进制分别以0b和0o开头即可
2，API
以下输入必须为数字类型，否则返回false

Number.isFinite(15);  // 是否再JS number范围内，输入NaN,为false
Number.isNaN()
Number.isInteger()  // 判断是不是整数，25.0是整数报true
Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER
Number.isSafeInteger(n)
Math.trunc(4.2)   //取整
Math.sign(n)  // 判断正负，返回值为1，0，-1，字符串会先转换为数字 '50'，否组返回NaN
Math.cbrt(n) // 立方根  8 => 2
// 等等其他API。。。。

数组扩展

1，API

Array.of(3, 4, 5, 7, 9)  // 生成数组
Array.from()  // 把集合转译为数组，具有遍历功能
let a = Array.from([1, 3, 5], function(item) {return item*2})  // =>结果[2, 6, 10]
Array.fill(‘xxx', start, end)  // 充满数组，覆盖原值

//遍历
for ( let index of array.keys() ) {}
for ( let value array.values() ) {}
for ( let [index, value] array.entries() ) {}

Array.copyWithin(startPaste, starCopy, endCopy)

// 查找
Array.find( function() {return xxx})  // 只返回第一个的value
Array.findIndex( function() {return xxx})  // 只返回第一个的index

Array.includes(n)  //可以辨识NaN

函数

1，参数默认值
参数的作用域只在函数内部
默认值取值为变量，此变量先在函数内部查找（包括查找其他参数），如没有，则全局查找

let x='hhaha'
function test (x, y=x) { console.log() }
test() // 结果为undefind undefind
function test2 (C, y=x) { console.log() }
test2() // 结果为undefind 'hhaha'

2，rest参数
rest是arguments转换为数组的形式
3，扩展运算符
把数组扩展为离散的值
4，箭头函数
5，尾调用
函数的最后一句命令是一个函数，即尾调用，例如：return function();
优点，提升性能

对象

1，属性简洁表示，相同就写一个，函数则hello () {}
2，属性名可以是变量或者表达式，用 [ ] 包裹
3，API

Object.is('xxx', 'xxx')  /判断相等，同===
Object.is([], [])  //false , [] === [] false数组不等于数组，引用对象

Object.assign({}, {})  //浅拷贝，只是拷贝引用地址，不会拷贝原型属性

Object.entries, Object.keys, Object.values
// let of 遍历entries，value，key

4，同数组，解构赋值可以使用扩展运算符

Symbol

概念，提供一个独一无二的值，永远不会相等
for in,,let of取不到symbol属性

Object.getOwnPropertySymbols(obj)  // 结果为数组，是所有的key为symbol的属性

Reflect.ownKeys(obj)  // 返回值是数组，包含所有的属性（普通和symbol）

let a1 = Symbol()
let a2 = Symbol()
a1 === a2   // false
let a3 = Symbol.for('a3')  // 有key值a3可以恢复值
let a4 = Symbol.for('a3')
a3 === a4  // true

数据结构Set，Map

数组的遍历方法皆可用

Set，元素必须是唯一的，添加重复元素会被去重
WeakSet()只接受对象；是弱引用，不会检测垃圾回收机制；，没有size属性，不能使用clear，不能遍历
作用：去重

//api
add()  delete()  clear()  has()

let list = new Set()
list.add(5)
list.size   // =>   1
let arr = [1, 2, 3, 1, 2, '3']
let list22 = new Set(arr)
list22.size  // => 4    去重，数据类型不转换

Map，
WeakMap 接受key必须是对象，没有size属性，不能使用clear，不能遍历，弱引用（同上wekset）

// api
let map = new Map()
map.set(key, value)   map.delete(key)   map.clear()  map.has()
map.get(key)
map.size

let map = new Map([ ['a', 123], ['b', 456] ])

对比Array，Object，set，map使用情况

操作	Array	map	set	Object
增	array.push	map.set	set.add	Obj[x] = x
查	array.find	map.has	set.has	x in Obj
改	array.forEach或array[n].xx = xx	map.set	set.forEach(或者修改引用对象)	Obj[x] = x
删	array.splice配合findIndex	map.delete	set.forEach( set.delete)	delete Obj[x]

综上，优先考虑map，考虑唯一性，使用set

Proxy和Reflect（代理与反射）

用处：数据校验，与业务解耦
两者API全部相同，后者不需要new
例如：Reflect.set(Obj, key, value)

QQ截图20190324182551.png

还可以拦截 in Obj，利用has() {}
还可以拦截 delete，利用deleteProperty() {}
还有很多其他拦截……

QQ截图20190324182924.png

类

使用前要new
1，就是个对象，多了个constructor， extends和super(),然后实现了面向对象编程
2，额外还有get, set方法操作类的属性，set xxx () {}
3，静态方法 static xx () {}
4，静态属性 class xx; xx.a = 'b'（就是对象添加属性）

Promise

懂得异步编程就比较简单
基础用法+promise.all() promise.race()
链式：promise.then( () => { return promise2 } ).then.........

Iterator和Generator

1，Iterator遍历器接口接口，配置与next()调用
2，Generator函数，特殊函数，异步解决方案
调用next(), 执行yield
3，两者关系，Generator可以生成Iterator接口给对象，然后利用let of遍历
4，Generator函数制作状态机，长轮询
5，async， await是Generator函数语法糖

Decorator

修饰器是一个函数，扩展类的行为
多引用第三方库
用途：埋点与日志

修饰器.png

模块化

分别导出与全部导出
分别引入与全部引入