ES6-11 总结一 (nrm,var,let,const,解构赋值) : https://www.jianshu.com/p/b04fbab076b3
ES6-11 总结二 (ES5和ES6数组的 遍历&扩展) : https://www.jianshu.com/p/a775c3311a0b
ES6-11 总结三(深浅拷贝,对象和函数的扩展) : https://www.jianshu.com/p/6dda93b18d9a
ES6-11 总结四 (es5和es6的类与继承,Symbol数据类型) : https://www.jianshu.com/p/e3c24c0db755
ES6-11 总结五 (set,Map,字符串&&正则&&数值的扩展) : https://www.jianshu.com/p/c1ca903f6573
ES6-11 总结六 (代理Proxy 反射Reflect):https://www.jianshu.com/p/4ff19ba5d219
1 新的数据结构 Set
Set里面的值不可重复,,数组Array里面是可以重复的
let s = new Set([1, 2, 3, 2]); //Set(3) {1, 2, 3} // 不可重复的
Set 方法
s.add(6); // 新增
s.delete(6); // 删除
s.has(6); //有没有,,布尔类型返回值
s.size; // set长度 从1开始数的,,不是从0
s.clear(); // 清空
Set 遍历
1 forEach
2 for of for(let item of s)
3 for of for(let item of s.keys())
4 for of for(let item of s.values())
5 for of for(let item of s.entries())
Set 应用场景
1 数组去重 new Set(Array) 把Array去重
2 数组合并去重 new Set([...arr1,...arr2]) 把arr1和arr2,合并去重
3 Set变回数组
3.1 : [...s] // let s = new Set([1,2,3])
3.2 : Array.from(s) // let s = new Set([1,2,3])
4 求出两个数组的交集
let arr1 = [1, 2, 3];
let arr2 = [2, 3, 4];
let s1 = new Set(arr1);
let s2 = new Set(arr2);
let res = new Set(arr1.filter((item) => {
if(s2.has(item)){
return item;
}
}));
console.log(res); // Set(2) {2, 3}
5 求出两个数组的差集
let res2 = new Set(arr1.filter((item) => {
if(!s2.has(item)){
return item;
}
}));
let res3 = new Set(arr2.filter((item) => {
if(!s1.has(item)){
return item;
}
}));
let arr4 = [...res2, ...res3]; // (2) [1, 4]
2 新的数据结构 WeakSet() 类似于Set
1 WeakSet只能存储对象
2 WeakSet不能被遍历 // 弱引用 垃圾回收机制不考虑这种引用,,,如果对象只被WeakSet引用,,就会被回收
垃圾回收机制 GC
1 如果一个值被声明,,计数为0,,每引用一次+1,,如果不是0,就不会被回收
2 WeakSet的引用是弱引用,,不会被+1
3 新的数据结构 Map
Map的key可以是多种数据类型,,比如key是对象,
// Map 定义和方法
let obj = {
age: 18
}
let m = new Map()
// 设置
m.set(obj, "value")
console.log(m) // Map(1) {{…} => "value"} 此时的key就是obj对象
// 获取
m.get(obj)// "value"
// 删除
m.delete(obj)
// 查询
m.has(obj)
// 长度
m.size
// 清空
m.clear
// Map传入数组
let m2 = new Map([
["name", "liu"],
["age", 18]
])
console.log(m2) // Map(2) {"name" => "liu", "age" => 18}
m2.get("age") // 18
m2.set("age", "20") // Map(2) {"name" => "liu", "age" => 20}
Map 遍历
1 forEach 遍历 m.forEach((value,key)=>{}) 注意第一个参数是value,,第二个参数是key
2 forOf 遍历 for(let [key,value] of m) 注意第一个是key 第二个是value
3 forOf 遍历2 for(let key of m.keys())
4 forOf 遍历3 for(let value of m.values())
4 forOf 遍历4 for(let [key,value] of m.entries())
应用场景
1 判断对象有没有某个属性 map.has() 但是正常的obj对象,,要循环遍历
2 判断对象键值对的个数,,比如判断是不是空,,, map.size obj还是要循环
3 经常对 键值对的增删改查,, map更要性能优势
4 新的数据结构 weakMap
weakMap key只是是引用数据类型
weakMap 不支持clear方法
weakMap 不支持size方法 因为不能遍历
weakMap 不支持遍历
weakMap 是弱引用
5 字符串的扩展
5.1 字符串的unicode
unicode : 字符的表示法,,,例如中文,,表情符号啊等等
es6 \uXXX 取值范围在0000~ffff
如果超出了取值范围 例如下面
\u20BB7会被解析成 \u20BB+7
\u{20BB7} 就表示可以超出范围
5.2 字符串的遍历
for(let item of "xxx"){}
5.3 模板字符串
`${}`
1 换行和回车, es5要加\n等等 es6`` 的情况下直接回车或者空格为就行
2 变量
let a = 20 let b =10 let c = "ccc"
let d = `${a+b}c` // "30c"
3 嵌套模板
例如 `icon icon-${XXX}` 前面是固定,后面不固定
5.4 字符串新的api方法
5.4.1 String.fromCodePoint() : 传入unicode返回对应字符
es5 : String.fromCharCode() 参数是unicode 但是不能超过0000~ffff
es6 : String.fromCodePoint() // 参数是unicode 可以超过0000~ffff
5.4.2 String.prototype.includes() : 查看字符串有没有某个字符
es5 : indexOf 有返回下标,,没有返回-1
es6 : includes 返回值是布尔值
5.4.3 String.prototype.startsWith() : 查看字符串是不是以什么开头
5.4.4 String.prototype.endsWith() : 查看字符串是不是以什么结尾#####5.4.5 String.prototype.repeat() : 重复几次当前字符串,,传入是number
6 正则表达式的扩展
es 5 修饰符
i 忽略大小写
m 多行匹配
g 全局匹配
es 6 修饰符
y 粘连修饰符
粘滞匹配不能像普通正则那样,跳过那些匹配失败的字符后接着执行后面字符的匹配操作
let str = "aaa_aa_a"
let reg1 = /a+/g 每次匹配剩余的 +:一次或者多次
let reg2 =/a+/y 剩余的第一个开始匹配
console.log(reg1.exec(str)) ["aaa", index: 0, input: "aaa_aa_a", groups: undefined]
console.log(reg2.exec(str)) ["aaa", index: 0, input: "aaa_aa_a", groups: undefined]
console.log(reg1.exec(str)) ["aa", index: 4, input: "aaa_aa_a", groups: undefined]
console.log(reg2.exec(str)) null 匹配到 _ 直接就失败了,,不会匹配了
console.log(reg1.exec(str)) ["a", index: 7, input: "aaa_aa_a", groups: undefined]
console.log(reg2.exec(str)) ["aaa", index: 0, input: "aaa_aa_a", groups: undefined]
u 修饰符 unicode修饰符
let str = '\uD842\uDFB7' 这是一个字符,,一个字符!,,不是两个字符
举例1 :
es5 : /^\uD842/.test(str) true, es5认为str是两个字符,所有返回true
es6 : /^\uD842/u.test(str) false 会识别str为一个字符
举例2 :
es5 . 修饰符 表示换行符以外的任意 单个 字符
es5 : /^.$/.test(str) false es5认为str是多个字符,
es5 : /^.$/u.test(str) true es6认为str是单个字符,
举例3 : \u{61}表示a字符
/\u{61}/.test("a") false
/\u{61}/u.test("a") true
7 数值的扩展
7.1 进制转换
es 5 进制转换
十进制 => 二进制
let a = 5
a.toString(2) 101
二进制 => 十进制
let b = 101
b.parseInt(b,2) 5
es 6 进制转换 0B:二进制 0O八进制
0101 也表示5
let a = 0101 直接报错
let a = 0B0101 就不会报错
7.2 Number的方法
Es5的parseInit,parseFloat等等,都是挂载在window下面,
Es6的parseInit,parseFloat等等,都挂载在各自的下面
Number.isFinite 判断一个数值是不是有限的
Number.isFinite(5) true
Number.isFinite(Infinity) false
Number.isFinite("XXX") false
Number.isFinite(true") flase"
Number.isNaN 数值是不是NaN
Number.isNaN(5) false
Number.isNaN(NaN) true
Number.parseInt 和window.parseInt 一致
Number.parseFloat 和window.parseFloat 一致
Number.isIntrger 判断一个值是不是整数
let max = Math.pow(2,53) 9007199254740992
Number.MAX_SAFE_INTEGER 9007199254740991
Number.MIN_SAFE_INTEGER 最小值
Number.isSafeInteger() 判断某个值是不是个安全的整数
7.3 精度缺失的问题
js 数字采取的是 IEEE 754 双精度标准
0.1 转换到二进制 0.0001100110011001100110011..............无限大
7.4 Math方法
Math.trunc() 取整 5.5=>5 -5.5=>-5 true=>1 NaN / undefined =>NaN
Math.sign() 判断是正数还是负数和0,,, 正数=>1 负数=>-1 0=>0 true => 1 false =>0
Math.cbrt() 计算一个数的立方根