ES6 复习
This commit is contained in:
xugaoyi
parent
450f6215d3
commit
7d38658717
|
|
@ -27,7 +27,7 @@ features: # 可选的
|
|||
|
||||
|
||||
<!-- 小熊猫 -->
|
||||
<img src="/img/panda-waving.png" class="panda no-zoom" style="width: 130px;height: 115px;opacity: 0.8;margin-bottom: -4px;padding-bottom:0;position: fixed;bottom: 0;left: 0.5rem;z-index: 1;">
|
||||
<!-- <img src="/img/panda-waving.png" class="panda no-zoom" style="width: 130px;height: 115px;opacity: 0.8;margin-bottom: -4px;padding-bottom:0;position: fixed;bottom: 0;left: 0.5rem;z-index: 1;"> -->
|
||||
|
||||
<!--
|
||||
## 关于
|
||||
|
|
|
|||
|
|
@ -414,7 +414,7 @@ last // 3
|
|||
|
||||
## 字符串的解构赋值
|
||||
|
||||
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
|
||||
字符串也可以解构赋值。这是因为此时，**字符串被转换成了一个类似数组的对象**。
|
||||
|
||||
```javascript
|
||||
const [a, b, c, d, e] = 'hello';
|
||||
|
|
@ -434,7 +434,7 @@ len // 5
|
|||
|
||||
## 数值和布尔值的解构赋值
|
||||
|
||||
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
|
||||
**解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。**
|
||||
|
||||
```javascript
|
||||
let {toString: s} = 123;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ hell\u{6F} // 123
|
|||
|
||||
## 字符串的遍历器接口
|
||||
|
||||
ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被`for...of`循环遍历。
|
||||
ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得**字符串可以被`for...of`循环遍历**。
|
||||
|
||||
```javascript
|
||||
for (let codePoint of 'foo') {
|
||||
|
|
@ -434,7 +434,7 @@ alert`123`
|
|||
alert(123)
|
||||
```
|
||||
|
||||
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
|
||||
**标签模板其实不是模板，而是函数调用的一种特殊形式**。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
|
||||
|
||||
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
|
||||
|
||||
|
|
@ -544,7 +544,7 @@ function passthru(literals, ...values) {
|
|||
}
|
||||
```
|
||||
|
||||
“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。
|
||||
**“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。**
|
||||
|
||||
```javascript
|
||||
let message =
|
||||
|
|
@ -577,7 +577,7 @@ message
|
|||
// <p><script>alert("abc")</script> has sent you a message.</p>
|
||||
```
|
||||
|
||||
标签模板的另一个应用，就是多语言转换（国际化处理）。
|
||||
**标签模板的另一个应用，就是多语言转换（国际化处理）**。
|
||||
|
||||
```javascript
|
||||
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
|
||||
|
|
|
|||
|
|
@ -195,13 +195,13 @@ ES6 提供字符串实例的`normalize()`方法，用来将字符的不同表示
|
|||
|
||||
不过，`normalize`方法目前不能识别三个或三个以上字符的合成。这种情况下，还是只能使用正则表达式，通过 Unicode 编号区间判断。
|
||||
|
||||
## 实例方法：includes(), startsWith(), endsWith()
|
||||
## 实例方法：includes() 包含, startsWith() 头部包含, endsWith() 末尾包含
|
||||
|
||||
传统上，JavaScript 只有`indexOf`方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
|
||||
|
||||
- **includes()**：返回布尔值，表示是否找到了参数字符串。
|
||||
- **startsWith()**：返回布尔值，表示参数字符串是否在原字符串的头部。
|
||||
- **endsWith()**：返回布尔值，表示参数字符串是否在原字符串的尾部。
|
||||
- **includes()**：返回布尔值，表示**是否找到了参数字符串**。
|
||||
- **startsWith()**：返回布尔值，表示**参数字符串是否在原字符串的头部**。
|
||||
- **endsWith()**：返回布尔值，表示**参数字符串是否在原字符串的尾部**。
|
||||
|
||||
```javascript
|
||||
let s = 'Hello world!';
|
||||
|
|
@ -223,7 +223,7 @@ s.includes('Hello', 6) // false
|
|||
|
||||
上面代码表示，使用第二个参数`n`时，`endsWith`的行为与其他两个方法有所不同。它针对前`n`个字符，而其他两个方法针对从第`n`个位置直到字符串结束。
|
||||
|
||||
## 实例方法：repeat()
|
||||
## 实例方法：repeat() 重复
|
||||
|
||||
`repeat`方法返回一个新字符串，表示将原字符串重复`n`次。
|
||||
|
||||
|
|
@ -267,9 +267,9 @@ s.includes('Hello', 6) // false
|
|||
'na'.repeat('3') // "nanana"
|
||||
```
|
||||
|
||||
## 实例方法：padStart()，padEnd()
|
||||
## 实例方法：padStart() 补全头部，padEnd() 补全末尾
|
||||
|
||||
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全，`padEnd()`用于尾部补全。
|
||||
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于**头部补全**，`padEnd()`用于**尾部补全**。
|
||||
|
||||
```javascript
|
||||
'x'.padStart(5, 'ab') // 'ababx'
|
||||
|
|
@ -317,7 +317,7 @@ ES2017 引入了字符串补全长度的功能。如果某个字符串不够指
|
|||
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
|
||||
```
|
||||
|
||||
## 实例方法：trimStart()，trimEnd()
|
||||
## 实例方法：trimStart() 修剪头部，trimEnd() 修剪末尾
|
||||
|
||||
[ES2019](https://github.com/tc39/proposal-string-left-right-trim) 对字符串实例新增了`trimStart()`和`trimEnd()`这两个方法。它们的行为与`trim()`一致，`trimStart()`消除字符串头部的空格，`trimEnd()`消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ Number('0b111') // 7
|
|||
Number('0o10') // 8
|
||||
```
|
||||
|
||||
## Number.isFinite(), Number.isNaN()
|
||||
## Number.isFinite() 是否为有限, Number.isNaN() 是否为NaN
|
||||
|
||||
ES6 在`Number`对象上，新提供了`Number.isFinite()`和`Number.isNaN()`两个方法。
|
||||
|
||||
|
|
@ -103,14 +103,14 @@ Number.parseInt('12.34') // 12
|
|||
Number.parseFloat('123.45#') // 123.45
|
||||
```
|
||||
|
||||
这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。
|
||||
这样做的目的，是**逐步减少全局性方法，使得语言逐步模块化**。
|
||||
|
||||
```javascript
|
||||
Number.parseInt === parseInt // true
|
||||
Number.parseFloat === parseFloat // true
|
||||
```
|
||||
|
||||
## Number.isInteger()
|
||||
## Number.isInteger() 是否为整数
|
||||
|
||||
`Number.isInteger()`用来判断一个数值是否为整数。
|
||||
|
||||
|
|
@ -154,7 +154,7 @@ Number.isInteger(5E-325) // true
|
|||
|
||||
总之，如果对数据精度的要求较高，不建议使用`Number.isInteger()`判断一个数值是否为整数。
|
||||
|
||||
## Number.EPSILON
|
||||
## Number.EPSILON 用于浮点数误差检查
|
||||
|
||||
ES6 在`Number`对象上面，新增一个极小的常量`Number.EPSILON`。根据规格，它表示 1 与大于 1 的最小浮点数之间的差。
|
||||
|
||||
|
|
@ -211,7 +211,7 @@ withinErrorMargin(0.1 + 0.2, 0.3) // true
|
|||
withinErrorMargin(1.1 + 1.3, 2.4) // true
|
||||
```
|
||||
|
||||
上面的代码为浮点数运算，部署了一个误差检查函数。
|
||||
上面的代码为浮点数运算，部署了一个**误差检查函数**。
|
||||
|
||||
## 安全整数和 Number.isSafeInteger()
|
||||
|
||||
|
|
@ -320,11 +320,11 @@ trusty(1, 2, 3)
|
|||
|
||||
## Math 对象的扩展
|
||||
|
||||
ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用。
|
||||
ES6 在 Math 对象上新增了 **17 个与数学相关的方法**。所有这些方法都是静态方法，只能在 Math 对象上调用。
|
||||
|
||||
### Math.trunc()
|
||||
### Math.trunc() 去除一个数的小数部分，返回整数部分
|
||||
|
||||
`Math.trunc`方法用于去除一个数的小数部分，返回整数部分。
|
||||
`Math.trunc`方法**用于去除一个数的小数部分，返回整数部分**。
|
||||
|
||||
```javascript
|
||||
Math.trunc(4.1) // 4
|
||||
|
|
@ -360,9 +360,9 @@ Math.trunc = Math.trunc || function(x) {
|
|||
};
|
||||
```
|
||||
|
||||
### Math.sign()
|
||||
### Math.sign() 判断一个数是正数、负数、还是零
|
||||
|
||||
`Math.sign`方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
|
||||
`Math.sign`方法用来**判断一个数到底是正数、负数、还是零**。对于非数值，会先将其转换为数值。
|
||||
|
||||
它会返回五种值。
|
||||
|
||||
|
|
@ -405,9 +405,9 @@ Math.sign = Math.sign || function(x) {
|
|||
};
|
||||
```
|
||||
|
||||
### Math.cbrt()
|
||||
### Math.cbrt() 计算一个数的立方根
|
||||
|
||||
`Math.cbrt`方法用于计算一个数的立方根。
|
||||
`Math.cbrt`方法用于**计算一个数的立方根**。
|
||||
|
||||
```javascript
|
||||
Math.cbrt(-1) // -1
|
||||
|
|
@ -434,7 +434,7 @@ Math.cbrt = Math.cbrt || function(x) {
|
|||
|
||||
### Math.clz32()
|
||||
|
||||
`Math.clz32()`方法将参数转为 32 位无符号整数的形式，然后返回这个 32 位值里面有多少个前导 0。
|
||||
`Math.clz32()`方法将**参数转为 32 位无符号整数的形式**，然后返回这个 32 位值里面有多少个前导 0。
|
||||
|
||||
```javascript
|
||||
Math.clz32(0) // 32
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ function foo(x, x, y = 1) {
|
|||
// SyntaxError: Duplicate parameter name not allowed in this context
|
||||
```
|
||||
|
||||
另外，一个容易忽略的地方是，参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。
|
||||
另外，一个容易忽略的地方是，参数默认值不是传值的，而是**每次都重新计算默认值表达式的值**。也就是说，参数默认值是**惰性求值**的。
|
||||
|
||||
```javascript
|
||||
let x = 99;
|
||||
|
|
@ -249,7 +249,7 @@ foo(undefined, null)
|
|||
|
||||
上面代码中，`length`属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。比如，上面最后一个函数，定义了 3 个参数，其中有一个参数`c`指定了默认值，因此`length`属性等于`3`减去`1`，最后得到`2`。
|
||||
|
||||
这是因为`length`属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入`length`属性。
|
||||
这是因为**`length`属性的含义是，该函数预期传入的参数个数**。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入`length`属性。
|
||||
|
||||
```javascript
|
||||
(function(...args) {}).length // 0
|
||||
|
|
@ -408,7 +408,7 @@ function foo(optional = undefined) { ··· }
|
|||
ES6 引入 rest 参数（形式为`...变量名`），用于获取函数的多余参数，这样就不需要使用`arguments`对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
|
||||
|
||||
```javascript
|
||||
function add(...values) {
|
||||
function add(...values) { // values是一个数组，该变量将多余的参数放入数组中
|
||||
let sum = 0;
|
||||
|
||||
for (var val of values) {
|
||||
|
|
@ -625,7 +625,7 @@ var sum = function(num1, num2) {
|
|||
};
|
||||
```
|
||||
|
||||
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用`return`语句返回。
|
||||
如果**箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用`return`语句返回**。
|
||||
|
||||
```javascript
|
||||
var sum = (num1, num2) => { return num1 + num2; }
|
||||
|
|
@ -718,13 +718,13 @@ headAndTail(1, 2, 3, 4, 5)
|
|||
|
||||
箭头函数有几个使用注意点。
|
||||
|
||||
（1）函数体内的`this`对象，就是定义时所在的对象，而不是使用时所在的对象。
|
||||
（1）函数体内的**`this`对象**，就是**定义时所在的对象**，而不是使用时所在的对象。
|
||||
|
||||
（2）不可以当作构造函数，也就是说，不可以使用`new`命令，否则会抛出一个错误。
|
||||
（2）**不可以当作构造函数**，也就是说，不可以使用`new`命令，否则会抛出一个错误。
|
||||
|
||||
（3）不可以使用`arguments`对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
|
||||
（3）**不可以使用`arguments`对象**，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
|
||||
|
||||
（4）不可以使用`yield`命令，因此箭头函数不能用作 Generator 函数。
|
||||
（4）**不可以使用`yield`命令**，因此箭头函数不能用作 Generator 函数。
|
||||
|
||||
上面四点中，第一点尤其值得注意。`this`对象的指向是可变的，但是在箭头函数中，它是固定的。
|
||||
|
||||
|
|
@ -773,7 +773,7 @@ setTimeout(() => console.log('s2: ', timer.s2), 3100);
|
|||
var handler = {
|
||||
id: '123456',
|
||||
|
||||
init: function() {
|
||||
init: function() { // 注意这里不是使用箭头函数，如这里使用箭头函数将时this指向全局对象
|
||||
document.addEventListener('click',
|
||||
event => this.doSomething(event.type), false);
|
||||
},
|
||||
|
|
@ -866,7 +866,7 @@ foo(2, 4, 6, 8)
|
|||
|
||||
由于箭头函数使得`this`从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
|
||||
|
||||
第一个场合是定义对象的方法，且该方法内部包括`this`。
|
||||
第一个场合是**定义对象的方法，且该方法内部包括`this`**。
|
||||
|
||||
```javascript
|
||||
const cat = {
|
||||
|
|
@ -877,9 +877,9 @@ const cat = {
|
|||
}
|
||||
```
|
||||
|
||||
上面代码中，`cat.jumps()`方法是一个箭头函数，这是错误的。调用`cat.jumps()`时，如果是普通函数，该方法内部的`this`指向`cat`；如果写成上面那样的箭头函数，使得`this`指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致`jumps`箭头函数定义时的作用域就是全局作用域。
|
||||
上面代码中，`cat.jumps()`方法是一个箭头函数，这是错误的。调用`cat.jumps()`时，如果是普通函数，该方法内部的`this`指向`cat`；如果写成上面那样的箭头函数，使得`this`指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，**导致`jumps`箭头函数定义时的作用域就是全局作用域。**
|
||||
|
||||
第二个场合是需要动态`this`的时候，也不应使用箭头函数。
|
||||
第二个场合是**需要动态`this`的时候，也不应使用箭头函数**。
|
||||
|
||||
```javascript
|
||||
var button = document.getElementById('press');
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ tags:
|
|||
|
||||
### 含义
|
||||
|
||||
扩展运算符（spread）是三个点（`...`）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
|
||||
扩展运算符（spread）是三个点（`...`）。它好比 rest 参数的逆运算，**将一个数组转为用逗号分隔的参数序列**。
|
||||
|
||||
```javascript
|
||||
console.log(...[1, 2, 3])
|
||||
|
|
@ -27,7 +27,8 @@ console.log(1, ...[2, 3, 4], 5)
|
|||
// [<div>, <div>, <div>]
|
||||
```
|
||||
<!-- more -->
|
||||
该运算符主要用于函数调用。
|
||||
|
||||
**该运算符主要用于函数调用**。
|
||||
|
||||
```javascript
|
||||
function push(array, ...items) {
|
||||
|
|
@ -371,7 +372,7 @@ let arr = [...obj]; // TypeError: Cannot spread non-iterable object
|
|||
|
||||
## Array.from()
|
||||
|
||||
`Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
|
||||
`Array.from`方法**用于将两类对象转为真正的数组**：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
|
||||
|
||||
下面是一个类似数组的对象，`Array.from`将它转为真正的数组。
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
margin-top .6rem
|
||||
a
|
||||
display block
|
||||
padding .45rem .3rem
|
||||
padding 8px .3rem 7px .3rem
|
||||
color var(--textColor)
|
||||
opacity .8
|
||||
font-size .95rem
|
||||
|
|
@ -84,12 +84,12 @@ export default {
|
|||
float right
|
||||
background-color var(--textColor)
|
||||
color var(--mainBg)
|
||||
border-radius 2px
|
||||
padding 0 .1rem
|
||||
border-radius 8px
|
||||
padding 0 .13rem
|
||||
min-width 1rem
|
||||
height 1rem
|
||||
line-height 1rem
|
||||
font-size .65rem
|
||||
font-size .6rem
|
||||
text-align center
|
||||
opacity .6
|
||||
transition opacity .3s
|
||||
|
|
|
|||
Loading…
Reference in New Issue