《ES6 标准入门》学习笔记 - 基础扩展篇

原书链接：http://es6.ruanyifeng.com/

Chapter 2：let 和 const 命令

使用 Object.freeze 方法冻结 const 常量：

const foo = Object.freeze({})
foo.prop = 123 // It doesn't work.

在全局作用域声明的 let / const 不会被绑定到全局变量上。

Chapter 3：变量的解构赋值

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值：

function* fibs () {
    var a = 0
    var b = 1
    while (true) {
        yield a
        [a, b] = [b, a + b]
    }
}
var [first, second, third, fourth, fifth, sixth] = fibs()

let {foo, bar} = {foo: 1, bar: 2} 是 let {foo: foo, bar: bar} = {foo: 1, bar: 2} 的简写。

嵌套结构对象的解构：

var obj = {
    p: [
        'Hello',
        {
            y: 'world'
        }
    ]
}
var {P: [x, { y }]} = obj // 会得到 x, y 的值，但不会得到 p ，因为 p 是模式，不是变量。

let obj = {}
let arr = []
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }) // 加 () 是为了避免 JS 将 {} 理解为代码块，而发生语法错误。

解构的默认值生效的条件是属性值严格等于 undefined 。（用 null 也不行。）
如果解构的是嵌套对象，子对象所在的父属性不存在，那么会报错：
```
var {foo: {bar}} = {baz: 'baz'}
```

字符串也支持解构赋值：

const [a, b, c, d, e] = 'hello' // h, e, l, l, o
const { length: len } = 'hello' // 5

数值和布尔值的解构赋值：

let { toString: s } = 123
s === Number.prototype.toString // true
let { toString: s2 } = true
s2 === Boolean.prototype.toString // true

关于圆括号的规则：[P025 - 026]
- 变量声明语句中，模式不能带有圆括号
- 函数参数中，模式不能带有圆括号
- 不能将整个模式或嵌套模式中的一层放在圆括号中
遍历 Map：
```
for(let [key, value] of map) {
}
```

Chapter 4：字符串的扩展

ES6之前，超过 \uFFFF 的 Unicode 字符，要使用 2 个双字节形式表达。ES6 中，只要将码点放入大括号就能正确解读该字符：
```
\u{41}\u{42} \\ AB
'\u{1F680}' === '\uD83D\uDE80' // true
```
ES6 提供了 codePointAt 处理 4 字节储存的字符，返回一个字符的码点。不过要配合 for...of 循环解决位置序号的问题。
String.fromCharCode() 用于从码点返回对应字符，但是不能识别 32 位的 UTF-16 字符（ Unicode 编号大于 0xFFFF ）�。String.fromCodePoint() 解决了这个问题。
ES6 提供了 at() 方法解决 charAt 无法正确返回大于 0xFFFF 的字符的问题。
JavaScript 将合成字符视为两个字符（比如带注音符号的字符）。使用 normalize() 方法解决这个问题，具体用法查阅手册：
```
'\u01D1\.normalize() === '\u004F\u030C'.normalize()
```
repeat(n) 用来将指定字符串重复 n 次，n 为小数的话，会被阶段取整，n 为负数或 Infinity 会报错。
ES7 提供了字符串补全长度的功能。如果某个字符串未达到指定长度，会在头部或尾部补全。padStart() 作用于头部， padEnd() 于尾部。
```
'x'.padEnd(5, '123')
```

标签模板：本质是一个函数，字符串模板会被拆分开并当做参数传入函数中：[P040 - P041]

function tag (stringArr, ...vaules) {
    console.log(stringArr)
    for(let i of values) {
        console.log(values)
    }
}
tag`Hello ${1 + 2} world ${3 + 4}`
/*
    arg1: ['Hello ', ' world', '']
    arg2: 3
    arg3: 7
*/

// 过滤 HTML 字符串
var message = SafeHTML`<p>${sender} has sent you a message.</p>`
function SafeHTML (templateData) {
    var s = templateData[0]
    for (var i = 1; i < arguments.length; i++) {
        var arg = String(arguments[i])
        s += arg.replace(/&/g, '&')
                    .replace(/</g, '<')
                    .replace(/>/g, '>')
        s += templateData[i]
    }
    return s
}

标签模板还可以用于 i18n 和 JSX 函数。

可以通过 String.raw() 方法取得转义前的字符串。它会替换所有变量，并转义反斜线。[�P042]

Chapter 5：正则的扩展

[P43-48]

Chapter 6：数值的扩展

ES6 提供了二进制和八进制数值的新写法，分别用前缀 0b 或 0B 和 0o 或 0O 表示。（从 ES5 开始，八进制数就已经不再允许使用前缀 0 直接表示了。）
ES6 引入了一个非常小的常量：Number.EPSILON 。它的作用是为浮点数计算设置一个误差范围：
```
0.1 + 0.2 - 0.3 === 0 // false
0.1 + 0.2 - 0.3 < Number.EPSILON // true
```
ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 两个常量，用来表示整数范围的上下限。同时，可以使用 Number.isSafeInteger() 来加以判断，但是结果不一定可靠。[P051 - 052]
ES6 为 Math 进行了一些扩展。具体可以查看文档。[P54 - 58]
ES6 新增了指数运算符（ ** ）：
```
2 ** 3 === 8

let b = 3
b **= 3 // 27
```

Chapter 7：数组的扩展

Array.from() 用来将类似数组的对象或可遍历的对象转换成数组：[P060 - 061]
```
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
let arr = Array.from(arrayLike)
```
```
function foo () {
    var args = Array.from(arguments)
}
```
同时，扩展运算符（ ... ）也可以将某些数据结构转为数组。
```
function foo () {
    var args = [...arguments]
}
```
```
const doms = [...documents.querySelectorAll('div')]
```
只有对象部署了 Symbol.iterator 接口，才可以进行转换。同时，Array.from() 也支持类似数组的对象。所谓类似数组的对象，本质特征只有一点：具有 length 属性。
Array.of() 用来将一组值转换为数组：
```
Array.of(1, 2, 3)
```
copyWithin() 用来将当前数组内部指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。（会修改当前数组）
```
Array.prototype.copyWithin(target, start = 0, end = this.length)
```
```
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
```
find() 用于找出第一个符合条件的数组成员；findIndex() 返回第一个符合条件的数组成员索引。（使用方法与 filter 类似）�
fill() 方法用于使用指定值填充数组：
```
['a', 'b', 'c'].fill(7) // [7, 7, 7]
```

entries(), keys() & values()：遍历键值对、键名、键值。

for (let index of ['a', 'b'].keys())
for (let el of ['a', 'b'].values())
for (let [index, el] of ['a', 'b'].entries())

includes() 不会像 indexOf() 一样使用 === 而导致对 NaN 的误判。
Map 的 has() 方法用来查找键名，Set 的 has() 方法用来查找键值。
数组的空位并不等于 undefined 。undefined 也是值，会占据数组的位置：[P065 - 066]
```
0 in [undefined, undefined, undefined] // true
0 in [, ,] // false
```
在 ES5 中，不同函数对数组空位的处理很不一样。而 ES6 统一视为 undefined 。

数组推导：（注意控制内存消耗）[P067 - 068]

var a1 = [1, 2, 3, 4]
var a2 = [for (i of a1) => i * 2]
var a3 = [for (i of a1) => if(i < 3) i]

Chapter 8：函数的扩展

对函数指定默认值之后，函数的 length 属性会返回没有指定默认值的参数个数。
利用参数默认值，可以指定某一个参数不得省略（指定其默认值为一个函数，这个函数会抛出一个异常）
ES6 引入了 rest 参数（ ...args ），用于获取函数的多余参数。rest 参数之后不能再有其他参数。
数组的扩展运算符能够正确识别 32 位 Unicode 字符。
任何类似数组的对象，或者有 Iterator 接口的对象都可以使用扩展运算符，比如 Generator：
```
var go = function* () {
    yield 1
    yield 2
    yield 3
}
[...go()]
```

函数的 name 属性的行为，在 ES6 中有了变化：[P079 - 080]

var func = function () {
    console.log('hello')
}
console.log(func.name)
// ES5: ""
// ES6: "func"

const bar = function baz() {}
console.log(bar.name)
// ES5: "baz"
// ES6: "baz"
(new Function).name // "anonymous"

箭头函数：
- 箭头函数不能用作构造函数。
- 不可以使用 arguments 对象（如果外部是一个 function ，会访问到外部 function 的 arguments）�。
- 不可以使用 yield 命令，故不能作为 Generator 函数。
- pipeline
```
const pipeline = (...funcs) => 
    val => funcs.reduce((a, b) => b(a), val)
const plus1 = a => a + 1
const mult2 = a => a * 2
const addThenMult = pipeline(plus1, mult2)
addThenMult(5)
```
- lambda 演算
ES7 提出了函数绑定运算符（::），用来替代 bind() 之类的函数：[P084 - 085]
```
foo::bar // 等价于
bar.bind(foo)

foo::bar(...args) // 等价于
bar.apply(foo, args)
```
如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上：
```
::obj.foo // 等价于
obj.foo.bind(obj)
```
尾调用优化和尾递归[P086 - 087]
ES7 提案允许函数函数的最后一个参数有尾逗号（ trailing comma ）。

Chapter 9：对象的扩展

/* 
    Why this happens?
    Guess: JavaScript Scope
 */

var obj = {
    data: '123',
    getData () {
        console.log(this.data)
    }
}
obj.getData() // 123

var obj2 = {
    data: '123',
    getData: () => {
        console.log(this.data)
    }
}
obj2.getData() // undefined

对象中的 Generator 函数：

var obj = {
    * m () {
        yield 'Hello World!'
    }
}

属性表达式与简洁表示法不能一起使用：

var foo = 'bar'
var bar = 'abc'
var baz = {
    [foo]
} // Error

bind 方法创造的函数，name 属性返回 bound 加上原函数的名字，Function 构造函数创造的函数，name 属性返回 anonymous；如果对象方法是一个 Symbol 值，则返回这个 Symbol 值的描述。
Object.is() 用来判断两个值是否严格相等。它与 === 的行为基本一致。有两点不同：+0 不等于 -0，NaN 等于自身。
Object.assign() 只复制可枚举的自有属性，而且是浅拷贝。
Object.setPropertyOf() 和 Object.getPropertyOf() 用来操作 __proto__。
Object.entries() 可以用来将一个对象转为真正的 Map 结构：const map = new Map(Object.entries(obj))
rest 参数 / 扩展运算符（ ... ）用于从一个对象取值。需要注意的是，rest 参数的复制是浅复制，对于复合类型得到的是引用，而不是副本。同时，rest 参数不会复制继承自原型对象的属性。
Null 传导运算符 —— 用于安全访问对象内部的属性。
```
const firstName = message?.body?.user?.firstName || 'default'
```
有四种用法：obj?.prop，obj?.[prop]，func?.(...args)，new C?.(...args) 。可以组合使用。

《ES6 标准入门》学习笔记 - 基础扩展篇

《ES6 标准入门》学习笔记 - 基础扩展篇

Chapter 2：let 和 const 命令

Chapter 3：变量的解构赋值

Chapter 4：字符串的扩展

Chapter 5：正则的扩展

Chapter 6：数值的扩展

Chapter 7：数组的扩展

Chapter 8：函数的扩展

Chapter 9：对象的扩展

相关阅读更多精彩内容

友情链接更多精彩内容

《ES6 标准入门》 学习笔记 - 基础扩展篇

Chapter 2：let 和 const 命令

Chapter 3：变量的解构赋值

Chapter 4：字符串的扩展

Chapter 5： 正则的扩展

Chapter 6： 数值的扩展

Chapter 7：数组的扩展

Chapter 8：函数的扩展

Chapter 9：对象的扩展

相关阅读更多精彩内容

友情链接更多精彩内容

《ES6 标准入门》学习笔记 - 基础扩展篇

Chapter 5：正则的扩展

Chapter 6：数值的扩展