标签：覆盖 perm 补全 obj nts object 任务 构造 val
### 前言
*这两本书应该是目前ES6相关的比较好的了，网上有电子版本（文末有链接）。不过我买了书看，哈哈。这两篇摘录笔记分为上下两部分，本文是上半部分（1-6章），摘录了两本书里一些比较有用的知识点。*
### 目录
> #####1. 块级作用域绑定
> #####2. 字符串与正则表达式
> #####3. 函数的扩展
> #####4. 数组的扩展
> #####5. 对象的扩展
#####6. 集合（Set、Map）
> 7 . Symbol和Symbol属性
>
> 8 . Javascript中的类
>
> 9 . Promise、Generator函数、Async函数
>
> 10 . 代理（Proxy）和反射（Reflection）API
>
> 11 . 修饰器
>
> 12 . Module
### 一、块级作用域绑定
块级声明用于声明在指定块级作用域之外无法访问的变量。块级作用域存在于：1、函数内部；2、块中（字符‘{‘和‘}‘之间的区域）。Es6 中存在的两种变量声明就是Let和Const声明。
值得摘录的有以下六点：
##### 1. 不能重复声明
var count = 9;
//抛出语法错误
let count = 7;
##### 2. Const常量声明必须进行初始化
const age = 8;
//语法错误：常量未初始化
const name;
##### 3. 特殊的For循环
For循环设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for(let i = 0;i< 3;i++){
let i = ‘can not change‘;
console.log(i);//输出‘can not change‘
}
##### 4. 暂时性死区
在区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭的作用域。只要在声明之前就使用这些变量，就会报错。
情况一：
var tmp = 123;
if(true){
tmp = ‘abc‘;//ReferenceError
let tmp;
}
情况二：
function test(x = y,y = 2){
return [x,y];
}
test();//报错
情况三：
let x = x;//ReferenceError: x is not defined
##### 5. Const声明对象，对象属性可变
##### 6. 彻底冻结函数
constantize(obj) {//彻底冻结函数
Object.freeze(obj);
Object.keys(obj).forEach((key, i) => {
if (typeof obj[key] === ‘object‘) {
constantize(obj[key]);
}
})
obj.name = 777;//TypeError: Cannot add property name, object is not extensible
return obj;
}
### 二、字符串与正则表达式
Es6加强了对Unicode的支持，并且扩展了字符串对象。正则表达式则增加了修饰符和属性。
值得摘录的有以下几点：
##### 1. codePointAt()与String.fromCodePoint()方法
完全支持UTF-16，接受编码单元的位置而非字符位置作为参数，返回与字符串中给定位置对应的码位，即一个整数值：
var text = "??a";
console.log(text.charCodeAt(0)); //55362
console.log(text.codePointAt(0)); //134017
判断一个字符是2个字节还是4个字节组成：
function is32Bit(c){
return c.codePointAt(0) > 0xFFFF;
}
is32Bit("??"); // true
is32Bit("a"); // false
console.log(String.fromCodePoint(134071)); // "??"
##### 2. normalize()方法
Es6为字符串添加了一个Normalize()方法，它可以提供Unicode的标准化形式，接受一个参数，指明应用哪种Unicode标准化形式（NFC,NFD,NFKC,NFKD）。只需要记住，在对比字符串之前，一定要先把它们标准化为同一种形式：
let normalized = values.map((text) => {
return text.normalize();
})
console.log(this[normalize](‘\u01D1‘) === this[normalize](‘\u004F\u030C‘)) // true
##### 3. includes()、startsWith()、endsWith()、repeat()方法
let tempArray = [1, "4", "uu", 5];
let tempStr = "test123uuunit582";
console.log(tempArray.includes(5)); //true
console.log(tempStr.includes("test123", 1)); //从第二个位置进行匹配
console.log(tempStr.startsWith("test")); //true
console.log(tempStr.startsWith("test123", 0)); //从第一个位置进行匹配
console.log(tempStr.endsWith("12",6)); //从第六个位置进行匹配
console.log(tempStr.repeat(3)); //test123uuunit582test123uuunit582test123uuunit582
##### 4. 模板字符串
领域专用语言（DSL）,可以生成、查询并操作其他语言里的内容，且可以免受注入攻击（XSS、SQL等）。
> A、去掉模板字符串中的换行
$(‘#list‘).html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
> B、引用模板字符串本身
//写法一
let str = ‘return ‘ + ‘`ni hao ${name}`‘;
let func = new Function(‘name‘,str);
let data = func(‘uct‘);
//写法二
let str2 = ‘(name) => `ni hao ${name}`‘;
let func2 = eval.call(null,str2);
let data2 = func2(‘uct‘);
console.log(data + ‘ ‘ + data2);
> C、标签模板
alert`123`;
//等同于
alert(123);
var a = 1,b = 2;
tag`Hello ${a + b} world ${a * b}`;
//等同于
tag([‘Hello ‘,‘ world , ‘‘],1,2);//第一个参数是数组，存放模板中没有变量替换的部分，后续参数是变量。
> D、String.raw()转义模板字符串
String.raw`Hi\n${3+4}`;//"Hi\\n5"
[关于new Function][newFunction]
[关于eval][eval]
[newFunction]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
[eval]:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval
##### 5.U修饰符与Y修饰符
U修饰符，即为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符。Y修饰符，叫作“粘连”（Sticky）修饰符，它的后一次匹配都从上一次匹配成功的下一个位置开始。
> A、点（.）字符匹配(匹配除换行符外的所有字符)
var s = "??";
/^.$/.test(s); // false
/^.$/u.test(s); // true
> B、返回字符串长度的函数
function codePointLength(){
var result = text.match(/[\s\S]/gu);
return result ? result.length : 0;
}
> C、y修饰符隐含了头部匹配的标志（^）
const REGEX = /a/y;
REGEX.lastIndex = 2;
REGEX.exec("xaya"); // null
REGEX.lastIndex = 3;
const match = REGEX.exec("xaya");
match.index; // 3
### 三、函数的扩展
值得摘录的有以下几点：
##### 1.函数参数的默认值
> A、参数变量默认声明
function test(x = 1){
let x = 2;//error
}
> B、惰性求值
let x = 10;
function testLazy(p = x + 1){
console.log(p);
}
testLazy(); // 11
let x = 12;
testLazy(); // 13
> C、非尾部设置默认值，参数不可省略
function f(x = 1,y){
return [x,y];
}
f(,1); //报错
> D、默认参数的临时死区TDZ
function add(first = second,second){
return first + second;
}
console.log(add(1,1)); // 2
console.log(add(undefined,1)); // 抛出错误
//当初次调用add()时，绑定first和second被添加到一个专属于函数参数的临时死区
//表示调用add(1,1) 时的Javascript 代码
let first = 1;
let second = 2;
//表示调用add(undefined,1) 时的Javascript 代码
let first = second;
let second = 1; //所以抛出错误；
##### 2.默认参数表达式
初次解析函数声明时不会调用getValue()方法，只有当调用add()函数且不传入第二个参数时才会调用：
constructor() {
this.value = 5;
}
getValue(){
return this.value ++;
}
add(first,second = this.getValue()){
console.log(‘plus: ‘, first + second );
}
...
Es6Function.add(1,1); // plus: 2
Es6Function.add(1); // plus: 6
Es6Function.add(1); // plus: 7
##### 3. 只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能严格模式
const doSomething = (a,b = a,...c) => { //error
‘use strict‘;
//code
}
##### 4. 不定参数限制使用
> 每个函数最多只能声明一个不定参数，而且一定要放在所有参数的末尾。
function any(a,...b,last){} //报错
> 不定参数不能用于对象字面量Setter中
let object = {
//语法错误，不可以在Setter中使用不定参数
set name(...value){}
}
> 取数组最大值
let values = [25,34,11,99];
console.log(Math.max(...values)); // 99
##### 5. 箭头函数
> A、箭头函数中的This值取决于该函数外部非箭头函数的this值，且不能通过call()、apply()或bind()方法来改变this值
thisScope(){
setTimeout(()=>{
console.log(‘id: ‘,this.id);
},100);
}
...
var id = 55;
Es6Function.thisScope.call({id:100}); // id : 100
> B、函数体内不可民使用Arguments对象，该对象在函数体内不存在，可以用Rest参数（...）代替
testArguments(){
setTimeout(() => {
console.log(‘args: ‘,arguments)
}, 100);
}
...
Es6Function.testArguments(1,2,5,6); // args: Arguments(4) [1, 2, 5, 6, callee: (...), Symbol(Symbol.iterator): ?]
##### 6. 尾调用优化
> 尾调用就是指某个函数的最后一步是调用另一个函数，只在严格模式下开启。
"use strict";
function doSomething(){
//优化后，立即返回结果
return doSomethingElse();
}
function doSomething2(){
//无法优化，无返回
doSomethingElse();
}
> 非严格模式下实现尾递归优化，用“循环” 替换 “递归”
function sum(x,y){
if(y > 0){
return sum( x + 1,y - 1);
} else {
return x;
}
}
sum(1,1000000);// Uncaught RangeError: Maximum call stack size exceeded(...)
//用蹦床函数可以将递归执行转为循环执行
function trampoline(f){
while(f && f instanceof Function){
f = f();
}
return f;
}
//返回一个函数，然后执行该函数，而不是在函数里调用函数，避免递归，消除调用栈过大问题
### 四、数组的扩展
值得摘录的有以下几点：
##### 1. 扩展运算符(...)
扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署该接口就无法转换
> 替代数组的 Apply方法
//Es5 的写法
function f(x,y,z){}
var args = [1,2,3];
f.apply(null,args);
//Es6 的写法
function f(x,y,z){}
var args = [1,2,3];
f(...args);
> 合并数组
Es5 合并数组
var arr1 = [1,2];
var arr2 = [3,4];
var arr3 = [5];
arr1.concat(arr2,arr3);
Es6 合并数组
[...arr1,...arr2,...arr3];
> 能够识别 32 位的 Unicode 字符的取字符串长度的方法
function length(str){
return [...str].length;
}
length(‘x\uD83D\uDE80y‘); // 3
##### 3. Array.from()方法，用于将类似数组对象和可遍历对象（包括Set和Map结构）转为真正的数组
Array.from()方法除了支持遍历器接口转换外，还支持类数组对象（类数组对象的本质就是有Length属性）
Array.from（{length:3}）；
// [undefined,undefined,undefined]
> 映射转换，Array.from()的第二个参数用来遍历类数组对象并返回
translate() {
return Array.from(arguments, (value) => value + 1);
}
console.log(NewArray.translate(1,2,3)); // [2,3,4]
##### 4. 为所有数组添加新的方法
> Array.of()，为了弥补数组构造函数Array()的不足
Array.of(3,11,8); // [3,11,8]
Array.of(undefined); // [undefined] , 通过Vue 显示到页面则为 [null]
Array(3); // [,,]
> copyWithin()，把数组内部指定位置成员复制到其他位置（会覆盖其他成员）
//将3号位复制到0号位
[1,2,3,4,5].copyWithin(0,3,4); //[ 4, 2, 3, 4, 5 ]
// -2相当于3号位，-1相当于4号位
[1,2,3,4,5].copyWithin(0,-2,-1); //[ 4, 2, 3, 4, 5 ]
> find()，返回符合条件的第一个（可能有多个）成员，如果没有就返回undefined
testFind(){ // 返回 3
return [1,2,3,4,5].find((value,index,arr)=>{
return value > 2;
})
}
> findIndex()，返回第一个符合条件的成员的位置，如果没有就返回 -1
testFindIndex(){ // 返回 -1
return [1,2,3,4,5].findIndex((value,index,arr)=>{
return value > 6;
})
}
> fill()，填充一个数组，接受第二第三个参数（起始位置和结束位置）
testFill(){
console.log([‘a‘,‘b‘,‘c‘].fill(8,1,2)); // ["a", 8, "c"]
return new Array(3).fill(8); //[ 8, 8, 8 ]
}
> includes()，返回一个布尔值，表示某个数组是否包含给定的值，它与indexOf 比起来更加直观，并且可以判断NaN的情况
testIncludes(){
return [1,2,NaN].includes(NaN); // true
}
> entries(),keys(),values()方法，它们都返回一个遍历器对象
testEntries(){
for(let [key,value] of [‘a‘,‘b‘,‘c‘].entries()){
console.log(key,value); // 0 "a" 1 "b" 2 "c"
}
let letter = [‘a‘,‘b‘,‘c‘];
//手动调用遍历器对象的Next方法进行遍历
let entries = letter.entries();
console.log(entries.next().value); //[0, "a"]
console.log(entries.next().value); //[1, "b"]
console.log(entries.next().value); //[2, "c"]
}
### 五、对象的扩展
ECMAScript6 中，为了使某些任务更易完成，在全局Object 对象上引入了一些新方法
值得摘录的有以下几点：
##### 1. 可计算属性名
let suffix = " name";
var person = {
["first" + suffix]: "Nicholas", // Es5 版本，这里的名称是不可以计算的
["last" + suffix]: "Zakas",
}
console.log(person["first name"]); // "Nicholas"
console.log(person["last name"]); // "Zakas"
##### 2. Object.is()，弥补全等（===）运算符的特殊情况判断不一致
testObjectIs(){
console.log(+0 == -0); // true
console.log(+0 === -0); // true
console.log(Object.is(+0 , -0)); // false
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN , NaN)); // true
}
##### 3. Object.assign(),只会复制对象自身可枚举属性，忽略enumerable为false的属性
> 多个对象复制具有同名属性，排位靠后的源对象会覆盖排位靠前的
testObjectAssign(){
let receiver = {};
Object.assign(receiver,{
type:‘girl‘,
name:‘superman‘,
},{
type:‘boy‘,
})
return receiver.type + " : " + receiver.name; // boy : superman
}
> 对象浅复制（源对象某个属性是对象，只复制这个对象的引用）
let target = { a: { b: ‘c‘, d: ‘e‘ } };
let source = { a: { b: ‘hello‘ } }
console.log(Object.assign(target, source)); // {a: {b:‘hello‘}}
// a属性被整体覆盖掉，不会得到 {a : {b:‘hello‘,d:‘e‘}} 的结果
##### 3. Object.values()
> 只返回对象自身可遍历属性
testObjectValues() { // p 的属性描述对象的 enumerable 默认是 false
var obj = Object.create({}, { p: { value: 42 } });
return Object.values(obj); // []
}
> Object.values 会过滤属性名为Symbol值的属性
console.log(Object.values({ [Symbol()]: 123, any: ‘abc‘ })); // [‘abc‘]
##### 3. Object.entries()
> 转换对象为真正的Map结构
testObjectEntries(){
let obj = { a: ‘bar‘, b: 23 };
let map = new Map(Object.entries(obj));
console.log(map.get(‘a‘)); // bar
}
### 六、集合（Set、Map）
Es6 中的Set和Map核心思想跟Java中的Set和Map类似，Set集合成员是唯一的，没有重复，Set本身是构造函数用来生成Set数据结构；Map类型是一种存储着许多键值对的有序列表，它的键名的判断是通过Object.is()方法来实现的（Set也是通过这个方法来判断两个值是否一致），所以 5 和字符串"5"会被判定为两种类型。
值得摘录的有以下几点：
##### 1. Set
> 添加元素用add()方法，删除用delete()方法，判断存在用has()，清空用clear()
testSet() {
let set = new Set();
set.add(5);
set.add(‘5‘);
console.log(set.has(5)); // true
set.delete(5);
console.log(set.has(5)); // false
console.log(set.size); // 1
set.clear();
console.log(set.has(‘5‘)); // false
console.log(set.size); // 0
}
> 数组去重
testArrayUniq(){
let set = new Set([1,2,3,3,3,3,4,4,4,4,5]);
let arr = [...set];
console.log(arr); //[ 1, 2, 3, 4, 5 ]
return arr; //[ 1, 2, 3, 4, 5 ]
}
> 改变原来的Set结构
changeSet(){
let set = new Set([1, 2, 3]);
//方法二
set = new Set([...set].map((val) => val * 2));
//方法二
set = new Set(Array.from(set, val => val * 2));
return set; // [ 4, 8, 12 ]
}
##### 2. Map
Map结构提供了“值-值”对应，而Object结构提供了“字符串-值”对应，Map结构是一种更加完善的Hash结构实现
> 设置值set()，获取值get()，判断存在has()，删除delete()，清空用clear()，多次对同一个键赋值，后面覆盖前面
testMap(){
const m = new Map();
const o = {p:‘hello uct‘};
m.set(o,‘content‘);
m.set(o,‘new content‘)
console.log(m.get(o)); // new content
console.log(m.has(o)); // true
m.delete(o);
console.log(m.has(o)); // false
}
> Map 和 对象互相转换
//Map转为对象
strMapToObj(strMap){//Map to Object
let obj = Object.create(null);
for(let [k,v] of strMap){
obj[k] = v;
}
return obj;
}
//对象转为Map
objToStrMap(obj){// Object to Map
let strMap = new Map();
for(let k of Object.keys(obj)){
strMap.set(k,obj[k]);
}
return strMap;
}
##### 3. WeakMap
WeakMap只接受对象作为键名（Null除外）
> WeakMap 应用的典型场景就是以DOM节点作为键名的场景
const listener = new WeakMap();
listener.set(element1,handler1);
listener.set(element2,handler2);
element1.addEventListener(‘click‘,listener.get(element1),false);
element2.addEventListener(‘click‘,listener.get(element2),false);
//一旦DOM对象消失，与它绑定的监听函数也会自动消失
> 部署私有属性
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter);//weakmap的私有属性
_action.set(this, action); //weakmap的私有属性
}
dec() {
let counter = _counter.get(this);
if (counter < 1) return;
counter--;
console.log(counter);
_counter.set(this, counter);
if (counter === 0) {
_action.get(this)();
}
}
}
export default Countdown;
### 结语
*本来觉得没有必要写这个笔记，但是，看和写真的是两回事。书中的例子大都是抽象化的，也就是为了让大家看起来直观，去掉了上下文，有些还有错。自己动手写的话（运用实例），印象会非常深刻，在真实开发环境中会想到去用它。笔记的下篇已经在写了，相对上篇，我更期待下篇，NSL...*
### 参考链接
[ECMAScript 6 入门](http://es6.ruanyifeng.com/)
[UNDERSTANDING ES6 英文原版](https://leanpub.com/understandinges6/read)
《ES标准入门》&《UNDERSTANDING ECMACHRIPT 6》 读书摘录笔记（上）
标签：覆盖 perm 补全 obj nts object 任务 构造 val
原文地址：https://www.cnblogs.com/ChickenTang/p/8793613.html
