注：此为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
模块化
分别导出与全部导出
分别引入与全部引入
网友评论