JavaScript高阶之ES6新特性

JavaScript高阶之ES6新特性

---

---

前言

---

六、字符串的扩展

6.1 四字节字符的解决办法

6.1.1 允许采用\uxxxx形式表示一个字符

// 其中xxxx表示字符的 Unicode 码点
"\u0061" == "a"

6.1.2 四字节字符

// 普通字符用两个字节表示，超出\u0000~\uFFFF范围的字符用四个字节表示
// \u后面跟上超过FFFF的数值（如20BB7）默认看成\u20BB + 7
// 解决办法是将码点用大括号括起来（如\u{20BB7}）

let hello = 123;
console.log(hell\u{6F});	//123

6.1.3 遍历含有四字节的字符则用for…of方法

// 字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for...of循环会正确识别出这一个字符。
let text = String.fromCodePoint(0x20BB7);
for (let i of text) {
    console.log(i);
}
// "𠮷"

6.2 模板字符串

6.2.1 模板字符串概述 反引号括起、保留换行和空格、可嵌入变量的字符串

// 一般都会使用trim()去掉首位的换行或空格
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

6.2.2 模板字符串使用

（1） ${变量名/方法名} 嵌入变量和方法

    let username = "chx";
    let password = "123456";
    let userStr = `User ${username}'s password is ${password}.`;
    console.log(userStr); //ser chx's password is 123456.

    function fn(){
       return username + password;
    }
    let funcStr = `${fn()}`;
    console.log(funcStr);   //chx123456

（2）标签函数 另类调用函数的方式

参数列表	备注
数组	开头和结尾的插值会变为“”，被插值分开的每一块子字符串分别作为数组的元素
其他	每个插值表达式的值

函数名`表达式`

var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals){
    var result = '';
    var i = 0;
    while(i<literals.length){
        result += literals[i++];  //literals: (3) ["The total is ", " (", " with tax)"]
        if(i < arguments.length){ //arguments: Arguments(3) [Array(3), 30, 31.5]
            result += arguments[i];
        }        
    }
    return result;
}
console.log(msg);   //The total is 30 (31.5 with tax)

方法	备注
includes	str1是否含有str2，从下标为index开始搜索
startsWith	str1是否以str2开头【，从下标为index开始搜索】
endsWith	str1是否以str2结束【，前num个字符】 是否在前num个字符中以str2结束

九、对象的扩展

8.1 属性和方法的简洁表示

8.1.1 用途

（1）函数返回多个值

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

（2）模块暴露属性和方法

module.exports = { getItem, setItem, clear };

8.3 super 指向当前对象的原型对象

// super 必须用在对象方法的简写法中
const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

十、正则的扩展

y标记

	粘连修饰符。也是全局匹配，只不过下一次匹配必须是从上一次的lastIndex开始匹配

	//在粘附标记下，每次调用exec（）只会在lastIndex的位置寻找匹配项，粘附标记覆盖全局标记
let text = "cat, bat, sat, fat";
let partern = /.at/y;
let array = partern.exec(text);
console.log(array.index);       //0
console.log(array[0]);          //cat
console.log(partern.lastIndex); //3

array = partern.exec(text);
console.log(array);             //null,在index=3的地方没匹配到
console.log(partern.lastIndex); //0   

在split方法使用y字符，原字符串必须以分隔符开头（试验后没效果）

console.log('##'.split(/#/y));  //["", "", ""]
console.log('##x'.split(/#/y)); //["", "", "x"]
console.log('#x#'.split(/#/y)); //["", "x", ""]
console.log('x##'.split(/#/y)); //["x", "", ""]

单独一个y修饰符对match方法只能返回第一个匹配，必须与g修饰符连用才能返回所有匹配

console.log("a1a2a3".match(/a\d/y)); //["a1"]
console.log("a1a2a3".match(/a\d/yg));//["a1","a2","a3"]

s标记

代表任意单个字符，但是行终止符（\n,\r,行分隔符，段分隔符）除外

4.3 新增实例属性

   sticky：   	布尔值，表示是否设置了 y 标记。
   flags：		正则表达式的标记字符串。始终以字面量而非传入构造函数的字符串模式形式返回(没有前后斜杠)。 
   				通过这些属性可以全面了解正则表达式的信息，不过实际开发中用得并不多，因为模式声明中包

   console.log(/hell\d/ig.source); //hell\d
   console.log(/hell\d/ig.flags);  //gi

十、数据结构的扩展

10.1 Set

10.1.1 概述

（1）类似于数组，但键和值相同

（2）成员的值唯一

（3）Set集合使用size属性表示元素个数

// 1、判断是否相等的算法是类似于精确相等运算符（===）
// 主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。
const s = new Set([2, 3, 5, 4, 5, 2, 2, NaN, NaN]);
console.log(s); // 2 3 5 4 NaN

// 2、对象的地址不同，所以两个对象不同
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

10.1.2 声明set结构

// 1、使用Set构造函数(空参数)
const s = new Set();


// 2、使用具有iterator接口的其他数据结构作为参数的构造函数
// 原理: 调用了iterator接口遍历
const set = new Set([1, 2, 3, 4, 4]);

10.1.3 遍历

let set = new Set(['red', 'green', 'blue']);

// 1、Set.prototype.keys()：返回键名的遍历器
for (let item of set.keys()) {
  console.log(item);  // red green blue
}


// 2、Set.prototype.values()：返回键值的遍历器
for (let item of set.values()) {
  console.log(item); // red green blue
}


// 3、Set.prototype.entries()：返回键值对的遍历器
for (let item of set.entries()) {
  console.log(item); // ["red", "red"] ["green", "green"] ["blue", "blue"]
} 


// 4、Set.prototype.forEach()：使用回调函数遍历每个成员
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1    4 : 4    9 : 9



// 5、for of遍历
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit

10.1.4 Set增加的方法

1、增加方法

（1）s.add(value) 添加value

2、 删除方法

（1）s.delete(value) 删除value

（2）s.clear() 删除所有值

3、查找方法

（1）s.has(value) 判断是否有某个值

10.1.5 主要用途

1、实现并集、交集和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

10.2 WeakSet

10.2.1 概述

1、结构与 Set 类似、元素唯一

2、WeakSet 的成员只能是对象，而不能是其他类型的值

3、受到垃圾回收机制的影响，WeakSet 不可遍历

1、WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用
2、也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中
3、由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。
4、由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的。

10.2.2 声明WeakSet集合

// 1、使用WeakSet构造函数(空参数)
const ws = new WeakSet();

// 2、使用任何具有 Iterable 接口的对象的构造函数
// 原理: 调用了iterator接口遍历
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);  // WeakSet {[1, 2], [3, 4]}

10.2.3 WeakSet方法

1、增加方法

（1）ws.add(value) 向 WeakSet 实例添加一个新成员

2、删除方法

（1）ws.delete(value)清除 WeakSet 实例的指定成员。

3、查找方法

（1）ws.has(value) 返回一个布尔值，表示某个值是否在 WeakSet 实例之中

10.3 Map

10.3.1 概述

（1）类似于对象, 提供了“值—值”的对应

（2）“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

（2）Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键

（3）Map集合使用size属性表示元素个数

10.3.2 声明Map结构

// 1、使用Map构造函数(空参数)
const map = new Map();


// 2、使用任何具有 Iterable 接口的对象的构造函数
// 原理: 调用了iterator接口遍历
const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

10.3.3 遍历

// 1、Map.prototype.keys()：返回键名的遍历器。
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {
  console.log(key);
}
// "F"  "T"



// 2、Map.prototype.values()：返回键值的遍历器
for (let value of map.values()) {
  console.log(value);
}
// "no"  "yes"



// 3、Map.prototype.entries()：返回所有成员的遍历器
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"   "T" "yes"



// 4、Map.prototype.forEach()：遍历 Map 的所有成员
map.forEach(function(value, key, map) {
  console.log(key, value);
});
// "F" "no"    "T" "yes"



// 5、for of遍历
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

10.3.4 Map方法

1、增加方法

（1）m.set(key, value) 设置键名key对应的键值为value

2、删除方法

（1）m.delete(key) 删除key键

（2）m.clear() 删除所有键值

3、获取方法

（1）m.get(key) 获取key对应的值

（2）m.has(key) 判断key键是否在当前map对象中

10.4 WeakMap

10.4.1 概述

（1）只接受对象作为键名

（2）WeakMap的键名所指向的对象，不计入垃圾回收机制

10.4.2 声明WeakMap集合

// 1、使用WeakMap构造函数(空参数)
const wm = new WeakMap();

// 2、使用任何具有 Iterable 接口的对象的构造函数
// 原理: 调用了iterator接口遍历
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);

10.4.3 用途

（1）把对象的引用作为键,方便释放内存

let myWeakmap = new WeakMap();
var logo = document.getElementById('logo');
// 将节点的引用作为键，如果其他地方不再引用该对象就会被回收
myWeakmap.set(logo,{timesClicked: 0});
document.getElementById('logo').addEventListener('click', function() {
	let logoData = myWeakmap.get(logo);
	logoData.timesClicked++;
}, false);

10.4.4 WeakMap方法

1、增加方法

（1）wm.set(key, value) 设置键名key对应的键值为value

2、删除方法

（1）wm.delete(key) 删除key键

3、获取方法

（1）wm.get(key) 获取key对应的值

（2）wm.has(key) 判断key键是否在当前map对象中

总结

提示：这里对文章进行总结：
例如：