《ES6标准入门》学习总结

《ES6 标准入门》学习总结

3 变量的解构赋值

3.4 数值和布尔值的解构

解构赋值的规则：只要等号右边的值不是对象或者数组，就先将其转为对象。

4 字符串的扩展

4.7 includes(),startsWith(),endsWith()

4.8 repeat()

4.9 padStart(),padEnd()

补全

4.12 标签模板

可以过滤 HTML 字符串，防止用户输入恶意内容

4.13 String.raw()

返回一个反斜线都会被转义的字符串，对应替换变量后的模板字符串

5 正则的扩展

5.3 u 修饰符

预定义模式

5.4 y 修饰符

5.8 后行断言

JavaScript 语言只支持先行断言（和先行否定断言），不支持后行断言。

先行断言：x 只有在 y 前面才匹配，/x(?=y)/

先行否定断言：x 只有不在 y 前面才匹配，/x(?!y)/

后行断言：x 只有在 y 后面才匹配，/(?<=y)x/

后行否定断言：x 只有不在 y 后面才匹配，/(?<!y)x/

5.9 Unicode 属性类

6 数值的扩展

6.7 Math 对象的扩展

6.7.1 Math.trunc()

去掉小数部分

6.7.1 Math.sign()

判断一个数到底是正数、负数、还是零

6.7.8 对数方法

6.8 Math.signbit()

6.9 指数运算符

let b = 4;
b **= 3; // b=b*b*b

7 函数的扩展

7.1.3 参数默认值的位置

通常情况下，定义了默认值的参数应该是函数的尾参数，如果非尾部的参数设置默认值，实际上这个参数是无法省略

7.5 箭头函数

=>后面就是函数，如果只是变量和表达式，就代表是 return 值。

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function (num1, num2) {
	return num1 + num2;
};

如果有{}，则代表函数体多于一行的代码块；如果要返回对象，则用({ id: id, name: "Temp" })表示对象

7.5.2 注意事项

1. 函数体内的 this 对象就是定义时所在的对象，而不是使用时所在的对象
2. 不可以当作构造函数。也就是说，不可以使用 new 命令，否则会抛出错误
3. 不可以使用 arguments 对象，因为不存在。如果要用，可以用 rest 参数代替
4. 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

function foo() {
	setTimeout(() => {
		console.log('id:', this.id);
	}, 100);
}
var id = 21;
foo.call({ id: 42 }); //id:42

如果是普通函数，执行时 this 应该指向全局对象 window，应该输出 21.但是箭头函数的 this 总是指向函数定义生效时的对象（42）

this 指向的固定化的根本原因是：箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。也正是因为它没有 this，所以不能用作构造函数

7.5.3 嵌套的箭头函数

箭头函数部署管道机制（pipeline），还可以改写 λ 演算

7.6 绑定 this

foo::bar;
//等价于
bar.bind(foo);

7.7 尾调用优化

7.7.2 尾调用优化（只在严格模式下开启）·

函数调用会在内存形成一个“调用帧“（call frame），保存调用位置和内部变量等信息。如果在函数 A 的内部调用函数 B，那么在 A 的调用帧上方还会形成一个 B 的调用帧，等到 B 运行结束，将结果返回到 A，B 的调用帧才会消失。

所有的调用帧就形成了调用栈（call stack）

只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”

7.7.3 尾递归

function Fibonacci(n) {
	if (n <= 1) {
		return 1;
	}
	return Fibonacci(n - 1) + Fibonacci(n - 2);
}

function Fibonacci2(n, ac1 = 1, ac2 = 1) {
	if (n <= 1) {
		return ac2;
	}
	return Fibonacci2(n - 1, ac2, ac1 + ac2);
}

在 ES6 中，只要使用尾递归，就永远不会发生栈溢出（stack overflow），相对节省内存。

柯里化（currying），将多参数的函数转化成单函数的形式

7.7.6 尾递归优化的实现

尾递归优化只在严格模式下生效。

其他模式可以用“循环”替换“递归“，蹦床函数可以完成（trampoline）

8 数组的扩展

扩展（spread）运算符：…

8.2 Array.from()

将两类对象转为真正的数组：类似数组的对象（array-like） 和 可遍历对象（iterable）

8.3 Array.of()

代替 Array()方法

Array.of(3)是//[3] Array(3)是//[,,]

8.4 Array.copyWithin(target,start=0,end=this.length)

数组内复制替换

8.5 Array.find(fn) Array.findIndex(fn)

8.6 Array.fill(value,start,end)

8.7 Array.entries() keys() values()

分别用于对数组键名、键值、键值对的遍历

8.8 Array.includes()

注意与 Map 和 Set 的 has 方法区分。Map 的 has 是用来找键名的，Set 的 has 是找值的

8.9 数组的空位

• es5 对空位的处理：
• forEach() filter() every() some()都会跳过空位
• map()会跳过空位，但是会保留这个值
• join() toString()会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串
• es6 则明确将空位转为 undefined

9 对象的扩展

9.4 Object.is()

和===基本一致，不同之处： Object.is(+0,-0) //false Object.is(NaN,NaN) //true

9.5 Object.assign(target,source1,source2)

只有字符串的包装对象会产生可枚举属性

10 Symbol

作为属性名的 Symbol

var mySymbol = Symbol();

var a = {};
a[mySymbol] = 'hello';

var a = { [mySymbol]: 'hello' };

var a = {};
Object.defineProperty(a, mySymbol, { value: 'hello' });

以上三种方法都可以，但是不能用点运算。

因为点运算符后面总是字符串

只有 Object.getOwnPropertySymbols 才能获取指定对象的所有 Symbol 属性名

Reflect.ownKeys 返回所有键名

symbol.for(‘a’)：如果有 a，则使用，没有才创建

Symbol.for(‘b’)===Symbol.for(‘b’)

11 Set 和 Map

…运算符

array.from set 实例四个方法：add(value),delete(value),has(value),clear()

四个遍历：keys(),values(),entries(),forEach() 键名，键值，键值对，每个成员

数组去重：

let arr = [3, 6, 3, 5, 2, 6];
let unique = [...new Set(arr)];

…运算符内部使用 for-of

unique 已经是数组了，不是 Set

用 set 实现交并差集 let union=new Set([...a,...b]) let interest=new Set([...a].filter(x=>b.has(x))) let difference=new Set([...a].filter(x=>!b.has(x)))

适用 WeakMap 场景：

1. 注册监听事件的 listener 对象（dom 消失，绑定的监听函数也自动消失）
2. 部署私有属性

WeakMap 弱引用的只是键名而不是键值，键值是正常引用的

forEach 可以接受第二个参数，用于绑定 this

14 Promise 对象

Promise 缺点：

1. 无法取消，一旦设定就会立即执行
2. 如果不写回调，错误不会抛出到外部
3. 执行期间不知道是刚开始还是快要结束

如果事件不断发生，应该采用stream

14.3 基本用法

setTimeout(code, milliseconds, param1, param2, …) setTimeout(function, milliseconds, param1, param2, …)

后面的 param 是传递给执行函数的其他参数

then 的参数：第一个是 Resolved 的回调（必选），第二个是 Rejected 的回调（可选）

14.3 Promise.prototype.then()

14.4 Promise.prototype.catch()

14.5 Promise.all()

14.6 Promise.race()

14.7 Promise.resolve()

14.8 Promise.reject()

const thenable = {
	then(resolve, reject) {
		reject('出错了');
	},
};
Promise.reject(thenable).catch((e) => {
	console.log(e === thenable);
});

14.9 部署.done() .finally()

14.11 Promise.try()

18 async 函数

18.3 语法

async 函数返回的 Promise 对象必须等到内部所有 await 命令后面的 Promise 对象执行完毕才会发生状态改变，除非遇到 return 语句或者抛出错误，也就是说，只有 async 函数内部的异步操作执行完，才会执行 then 方法指定的回调函数

只要有一个 await 语句的 Promise 变为 reject，那么 async 函数就不会再继续执行

错误处理：可以把 await 放在 try…catch 的 try 里面

import * as

import * as abc from ‘xxx’: 把 xxx 里面的“export a“和”export b“导出的内容组合成一个对象返回。

import bcd from ‘xxx’：（export default bcd）只会导出这个默认的对象作为一个对象。

19 Class 的基本语法

19.1 简介

类的数据类型就是函数，类本身就指向构造函数

类的所有方法都定义在类的 prototype 属性上

class B {}
let b = new B();

b.constructor === B.prototype.constructor; //true

上述代码中，b 是 B 的实例，它的 constructor 方法就是 B 类原型的 constructor 方法。

Donate