mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
edit object & array & math
This commit is contained in:
ruanyf
parent
aae41fcb21
commit
1ed5dfa1f3
@ -154,9 +154,11 @@ body {
|
||||
}
|
||||
|
||||
#content p>code,
|
||||
#content li>code {
|
||||
color: #c7254e;
|
||||
background: #f9f2f4;
|
||||
#content li>code,
|
||||
#content h2>code,
|
||||
#content h3>code{
|
||||
color: #c7254e;
|
||||
background: #f9f2f4;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
## Array.from()
|
||||
|
||||
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
|
||||
`Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
|
||||
|
||||
```javascript
|
||||
Array.from('hello')
|
||||
@ -20,26 +20,40 @@ Array.from(ps).forEach(function (p) {
|
||||
});
|
||||
```
|
||||
|
||||
上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。
|
||||
上面代码中，`querySelectorAll`方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。
|
||||
|
||||
Array.from方法可以将函数的arguments对象，转为数组。
|
||||
`Array.from`方法可以将函数的`arguments`对象，转为数组。
|
||||
|
||||
```javascript
|
||||
function foo() {
|
||||
var args = Array.from( arguments );
|
||||
var args = Array.from(arguments);
|
||||
}
|
||||
|
||||
foo( "a", "b", "c" );
|
||||
foo('a', 'b', 'c');
|
||||
```
|
||||
|
||||
任何有length属性的对象，都可以通过Array.from方法转为数组。
|
||||
值得提醒的是，扩展运算符（`...`）也可以将某些数据结构转为数组。
|
||||
|
||||
```javascript
|
||||
// arguments对象
|
||||
function foo() {
|
||||
var args = [...arguments];
|
||||
}
|
||||
|
||||
// NodeList对象
|
||||
[...document.querySelectorAll('div')]
|
||||
```
|
||||
|
||||
扩展运算符背后调用的是遍历器接口（`Symbol.iterator`），如果一个对象没有部署这个接口，就无法转换。`Array.from`方法就不存在这个问题，比如下面的这个例子，扩展运算符就无法转换。
|
||||
|
||||
任何有`length`属性的对象，都可以通过`Array.from`方法转为数组。
|
||||
|
||||
```javascript
|
||||
Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
|
||||
// [ "a", "b" , "c" ]
|
||||
```
|
||||
|
||||
对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代。
|
||||
对于还没有部署该方法的浏览器，可以用`Array.prototype.slice`方法替代。
|
||||
|
||||
```javascript
|
||||
const toArray = (() =>
|
||||
@ -47,7 +61,7 @@ const toArray = (() =>
|
||||
)();
|
||||
```
|
||||
|
||||
Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。
|
||||
`Array.from`还可以接受第二个参数，作用类似于数组的`map`方法，用来对每个元素进行处理。
|
||||
|
||||
```JavaScript
|
||||
Array.from(arrayLike, x => x * x);
|
||||
@ -58,14 +72,26 @@ Array.from([1, 2, 3], (x) => x * x)
|
||||
// [1, 4, 9]
|
||||
```
|
||||
|
||||
下面的例子将数组中布尔值为false的成员转为0。
|
||||
下面的例子将数组中布尔值为`false`的成员转为`0`。
|
||||
|
||||
```javascript
|
||||
Array.from([1, , 2, , 3], (n) => n || 0)
|
||||
// [1, 0, 2, 0, 3]
|
||||
```
|
||||
|
||||
`Array.from()`可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，你可以在数组里造出任何想要的值。
|
||||
另一个例子是返回各种数据的类型。
|
||||
|
||||
```javascript
|
||||
function typesOf () {
|
||||
return Array.from(arguments, value => typeof value)
|
||||
}
|
||||
typesOf(null, [], NaN)
|
||||
// ['object', 'object', 'number']
|
||||
```
|
||||
|
||||
如果`map`函数里面用到了`this`关键字，还可以传入`Array.from`的第三个参数，用来绑定`this`。
|
||||
|
||||
`Array.from()`可以将各种值转为真正的数组，并且还提供`map`功能。这实际上意味着，你可以在数组里造出任何想要的值。
|
||||
|
||||
```javascript
|
||||
Array.from({ length: 2 }, () => 'jack')
|
||||
@ -74,7 +100,7 @@ Array.from({ length: 2 }, () => 'jack')
|
||||
|
||||
上面代码中，`Array.from`的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。
|
||||
|
||||
`Array.from()`的另一个应用是，将字符串转为数组，然后返回字符串的长度。这样可以避免JavaScript将大于`\uFFFF`的Unicode字符，算作两个字符的bug。
|
||||
`Array.from()`的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种Unicode字符，可以避免JavaScript将大于`\uFFFF`的Unicode字符，算作两个字符的bug。
|
||||
|
||||
```javascript
|
||||
function countSymbols(string) {
|
||||
@ -84,7 +110,7 @@ function countSymbols(string) {
|
||||
|
||||
## Array.of()
|
||||
|
||||
Array.of方法用于将一组值，转换为数组。
|
||||
`Array.of`方法用于将一组值，转换为数组。
|
||||
|
||||
```javaScript
|
||||
Array.of(3, 11, 8) // [3,11,8]
|
||||
@ -92,17 +118,26 @@ Array.of(3) // [3]
|
||||
Array.of(3).length // 1
|
||||
```
|
||||
|
||||
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
|
||||
这个方法的主要目的，是弥补数组构造函数`Array()`的不足。因为参数个数的不同，会导致`Array()`的行为有差异。
|
||||
|
||||
```javascript
|
||||
Array() // []
|
||||
Array(3) // [undefined, undefined, undefined]
|
||||
Array(3,11,8) // [3, 11, 8]
|
||||
Array(3, 11, 8) // [3, 11, 8]
|
||||
```
|
||||
|
||||
上面代码说明，只有当参数个数不少于2个，Array()才会返回由参数组成的新数组。
|
||||
上面代码说明，只有当参数个数不少于2个，`Array()`才会返回由参数组成的新数组。
|
||||
|
||||
Array.of方法可以用下面的代码模拟实现。
|
||||
`Array.of`基本上可以用来替代`new Array()`，并且不存在`new Array(length)`导致的重载。它的行为非常统一。
|
||||
|
||||
```javascript
|
||||
Array.of() // []
|
||||
Array.of(undefined) // [undefined]
|
||||
Array.of(1) // [1]
|
||||
Array.of(1, 2) // [1, 2]
|
||||
```
|
||||
|
||||
`Array.of`方法可以用下面的代码模拟实现。
|
||||
|
||||
```javascript
|
||||
function ArrayOf(){
|
||||
@ -112,12 +147,16 @@ function ArrayOf(){
|
||||
|
||||
## 数组实例的copyWithin()
|
||||
|
||||
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
|
||||
数组实例的`copyWithin`方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
|
||||
|
||||
```javascript
|
||||
Array.prototype.copyWithin(target, start = 0, end = this.length)
|
||||
```
|
||||
|
||||
它接受三个参数。
|
||||
|
||||
- target（必需）：从该位置开始复制数据。
|
||||
- start（必需）：从该位置开始读取数据。如果为负值，表示倒数。
|
||||
- target（必需）：从该位置开始替换数据。
|
||||
- start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
|
||||
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
|
||||
|
||||
这三个参数都应该是数值，如果不是，会自动转为数值。
|
||||
@ -157,7 +196,7 @@ i32a.copyWithin(0, 2);
|
||||
|
||||
## 数组实例的find()和findIndex()
|
||||
|
||||
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
|
||||
数组实例的`find`方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为`true`的成员，然后返回该成员。如果没有符合条件的成员，则返回`undefined`。
|
||||
|
||||
```javascript
|
||||
[1, 4, -5, 10].find((n) => n < 0)
|
||||
@ -172,9 +211,9 @@ i32a.copyWithin(0, 2);
|
||||
}) // 10
|
||||
```
|
||||
|
||||
上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
|
||||
上面代码中，`find`方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
|
||||
|
||||
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
|
||||
数组实例的`findIndex`方法的用法与`find`方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回`-1`。
|
||||
|
||||
```javascript
|
||||
[1, 5, 10, 15].findIndex(function(value, index, arr) {
|
||||
@ -198,7 +237,7 @@ i32a.copyWithin(0, 2);
|
||||
|
||||
## 数组实例的fill()
|
||||
|
||||
fill()使用给定值，填充一个数组。
|
||||
`fill`方法使用给定值，填充一个数组。
|
||||
|
||||
```javascript
|
||||
['a', 'b', 'c'].fill(7)
|
||||
@ -208,9 +247,9 @@ new Array(3).fill(7)
|
||||
// [7, 7, 7]
|
||||
```
|
||||
|
||||
上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
|
||||
上面代码表明，`fill`方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
|
||||
|
||||
fill()还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
|
||||
`fill`方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
|
||||
|
||||
```javascript
|
||||
['a', 'b', 'c'].fill(7, 1, 2)
|
||||
|
||||
@ -271,13 +271,21 @@ ES6在Math对象上新增了17个与数学相关的方法。所有这些方法
|
||||
|
||||
### Math.trunc()
|
||||
|
||||
Math.trunc方法用于去除一个数的小数部分，返回整数部分。
|
||||
`Math.trunc`方法用于去除一个数的小数部分，返回整数部分。
|
||||
|
||||
```javascript
|
||||
Math.trunc(4.1) // 4
|
||||
Math.trunc(4.9) // 4
|
||||
Math.trunc(-4.1) // -4
|
||||
Math.trunc(-4.9) // -4
|
||||
Math.trunc(-0.1234) // -0
|
||||
```
|
||||
|
||||
对于非数值，`Math.trunc`内部使用`Number`方法将其先转为数值。
|
||||
|
||||
```javascript
|
||||
Math.trunc('123.456')
|
||||
// 123
|
||||
```
|
||||
|
||||
对于空值和无法截取整数的值，返回NaN。
|
||||
@ -298,7 +306,7 @@ Math.trunc = Math.trunc || function(x) {
|
||||
|
||||
### Math.sign()
|
||||
|
||||
Math.sign方法用来判断一个数到底是正数、负数、还是零。
|
||||
`Math.sign`方法用来判断一个数到底是正数、负数、还是零。
|
||||
|
||||
它会返回五种值。
|
||||
|
||||
@ -332,13 +340,20 @@ Math.sign = Math.sign || function(x) {
|
||||
|
||||
### Math.cbrt()
|
||||
|
||||
Math.cbrt方法用于计算一个数的立方根。
|
||||
`Math.cbrt`方法用于计算一个数的立方根。
|
||||
|
||||
```javascript
|
||||
Math.cbrt(-1); // -1
|
||||
Math.cbrt(0); // 0
|
||||
Math.cbrt(1); // 1
|
||||
Math.cbrt(2); // 1.2599210498948734
|
||||
Math.cbrt(-1) // -1
|
||||
Math.cbrt(0) // 0
|
||||
Math.cbrt(1) // 1
|
||||
Math.cbrt(2) // 1.2599210498948734
|
||||
```
|
||||
|
||||
对于非数值，`Math.cbrt`方法内部也是先使用`Number`方法将其转为数值。
|
||||
|
||||
```javascript
|
||||
Math.cbrt('8') // 2
|
||||
Math.cbrt('hello') // NaN
|
||||
```
|
||||
|
||||
对于没有部署这个方法的环境，可以用下面的代码模拟。
|
||||
@ -352,7 +367,7 @@ Math.cbrt = Math.cbrt || function(x) {
|
||||
|
||||
### Math.clz32()
|
||||
|
||||
JavaScript的整数使用32位二进制形式表示，Math.clz32方法返回一个数的32位无符号整数形式有多少个前导0。
|
||||
JavaScript的整数使用32位二进制形式表示，`Math.clz32`方法返回一个数的32位无符号整数形式有多少个前导0。
|
||||
|
||||
```javascript
|
||||
Math.clz32(0) // 32
|
||||
@ -360,16 +375,28 @@ Math.clz32(1) // 31
|
||||
Math.clz32(1000) // 22
|
||||
```
|
||||
|
||||
上面代码中，0的二进制形式全为0，所以有32个前导0；1的二进制形式是0b1，只占1位，所以32位之中有31个前导0；1000的二进制形式是0b1111101000，一共有10位，所以32位之中有22个前导0。
|
||||
上面代码中，0的二进制形式全为0，所以有32个前导0；1的二进制形式是`0b1`，只占1位，所以32位之中有31个前导0；1000的二进制形式是`0b1111101000`，一共有10位，所以32位之中有22个前导0。
|
||||
|
||||
对于小数，Math.clz32方法只考虑整数部分。
|
||||
`clz32`这个函数名就来自”count leading zero bits in 32-bit binary representations of a number“（计算32位整数的前导0）的缩写。
|
||||
|
||||
左移运算符（`<<`）与`Math.clz32`方法直接相关。
|
||||
|
||||
```javascript
|
||||
Math.clz32(0) // 32
|
||||
Math.clz32(1) // 31
|
||||
Math.clz32(1 << 1) // 30
|
||||
Math.clz32(1 << 2) // 29
|
||||
Math.clz32(1 << 29) // 2
|
||||
```
|
||||
|
||||
对于小数，`Math.clz32`方法只考虑整数部分。
|
||||
|
||||
```javascript
|
||||
Math.clz32(3.2) // 30
|
||||
Math.clz32(3.9) // 30
|
||||
```
|
||||
|
||||
对于空值或其他类型的值，Math.clz32方法会将它们先转为数值，然后再计算。
|
||||
对于空值或其他类型的值，`Math.clz32`方法会将它们先转为数值，然后再计算。
|
||||
|
||||
```javascript
|
||||
Math.clz32() // 32
|
||||
@ -384,7 +411,7 @@ Math.clz32(true) // 31
|
||||
|
||||
### Math.imul()
|
||||
|
||||
Math.imul方法返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数。
|
||||
`Math.imul`方法返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数。
|
||||
|
||||
```javascript
|
||||
Math.imul(2, 4); // 8
|
||||
@ -392,13 +419,13 @@ Math.imul(-1, 8); // -8
|
||||
Math.imul(-2, -2); // 4
|
||||
```
|
||||
|
||||
如果只考虑最后32位（含第一个整数位），大多数情况下，`Math.imul(a, b)`与`a * b`的结果是相同的，即该方法等同于`(a * b)|0`的效果。之所以需要部署这个方法，是因为JavaScript有精度限制，超过2的53次方的值无法精确表示。这就是说，对于那些很大的数的乘法，低位数值往往都是不精确的，Math.imul方法可以返回正确的低位数值。
|
||||
如果只考虑最后32位（含第一个整数位），大多数情况下，`Math.imul(a, b)`与`a * b`的结果是相同的，即该方法等同于`(a * b)|0`的效果（超过32位的部分溢出）。之所以需要部署这个方法，是因为JavaScript有精度限制，超过2的53次方的值无法精确表示。这就是说，对于那些很大的数的乘法，低位数值往往都是不精确的，`Math.imul`方法可以返回正确的低位数值。
|
||||
|
||||
```javascript
|
||||
(0x7fffffff * 0x7fffffff)|0 // 0
|
||||
```
|
||||
|
||||
上面这个乘法算式，返回结果为0。但是由于这两个数的个位数都是1，所以这个结果肯定是不正确的。这个错误就是因为它们的乘积超过了2的53次方，JavaScript无法保存额外的精度，就把低位的值都变成了0。Math.imul方法可以返回正确的值1。
|
||||
上面这个乘法算式，返回结果为0。但是由于这两个二进制数的最低位都是1，所以这个结果肯定是不正确的，因为根据二进制乘法，计算结果的二进制最低位应该也是1。这个错误就是因为它们的乘积超过了2的53次方，JavaScript无法保存额外的精度，就把低位的值都变成了0。`Math.imul`方法可以返回正确的值1。
|
||||
|
||||
```javascript
|
||||
Math.imul(0x7fffffff, 0x7fffffff) // 1
|
||||
@ -428,7 +455,7 @@ Math.fround = Math.fround || function(x) {
|
||||
|
||||
### Math.hypot()
|
||||
|
||||
Math.hypot方法返回所有参数的平方和的平方根。
|
||||
`Math.hypot`方法返回所有参数的平方和的平方根。
|
||||
|
||||
```javascript
|
||||
Math.hypot(3, 4); // 5
|
||||
@ -448,7 +475,7 @@ Math.hypot(-3); // 3
|
||||
|
||||
ES6新增了4个对数相关方法。
|
||||
|
||||
（1） Math.expm1()
|
||||
**（1） Math.expm1()**
|
||||
|
||||
`Math.expm1(x)`返回e<sub>x</sub> - 1。
|
||||
|
||||
@ -466,9 +493,9 @@ Math.expm1 = Math.expm1 || function(x) {
|
||||
};
|
||||
```
|
||||
|
||||
（2）Math.log1p()
|
||||
**（2）Math.log1p()**
|
||||
|
||||
`Math.log1p(x)`方法返回1 + x的自然对数。如果x小于-1，返回NaN。
|
||||
`Math.log1p(x)`方法返回`1 + x`的自然对数。如果`x`小于-1，返回`NaN`。
|
||||
|
||||
```javascript
|
||||
Math.log1p(1); // 0.6931471805599453
|
||||
@ -485,7 +512,7 @@ Math.log1p = Math.log1p || function(x) {
|
||||
};
|
||||
```
|
||||
|
||||
（3）Math.log10()
|
||||
**（3）Math.log10()**
|
||||
|
||||
`Math.log10(x)`返回以10为底的x的对数。如果x小于0，则返回NaN。
|
||||
|
||||
@ -505,17 +532,18 @@ Math.log10 = Math.log10 || function(x) {
|
||||
};
|
||||
```
|
||||
|
||||
（4）Math.log2()
|
||||
**（4）Math.log2()**
|
||||
|
||||
`Math.log2(x)`返回以2为底的x的对数。如果x小于0，则返回NaN。
|
||||
|
||||
```javascript
|
||||
Math.log2(3); // 1.584962500721156
|
||||
Math.log2(2); // 1
|
||||
Math.log2(1); // 0
|
||||
Math.log2(0); // -Infinity
|
||||
Math.log2(-2); // NaN
|
||||
Math.log2(1024); // 10
|
||||
Math.log2(3) // 1.584962500721156
|
||||
Math.log2(2) // 1
|
||||
Math.log2(1) // 0
|
||||
Math.log2(0) // -Infinity
|
||||
Math.log2(-2) // NaN
|
||||
Math.log2(1024) // 10
|
||||
Math.log2(1 << 29) // 29
|
||||
```
|
||||
|
||||
对于没有部署这个方法的环境，可以用下面的代码模拟。
|
||||
|
||||
@ -190,7 +190,16 @@ obj[key2].name // ""
|
||||
|
||||
## Object.is()
|
||||
|
||||
Object.is()用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
|
||||
`Object.is`用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。
|
||||
|
||||
```javascript
|
||||
Object.is('foo', 'foo')
|
||||
// true
|
||||
Object.is({}, {})
|
||||
// false
|
||||
```
|
||||
|
||||
不同之处只有两个：一是`+0`不等于`-0`，二是`NaN`等于自身。
|
||||
|
||||
```javascript
|
||||
+0 === -0 //true
|
||||
@ -200,7 +209,7 @@ Object.is(+0, -0) // false
|
||||
Object.is(NaN, NaN) // true
|
||||
```
|
||||
|
||||
ES5可以通过下面的代码，部署Object.is()。
|
||||
ES5可以通过下面的代码，部署`Object.is`。
|
||||
|
||||
```javascript
|
||||
Object.defineProperty(Object, 'is', {
|
||||
@ -220,7 +229,7 @@ Object.defineProperty(Object, 'is', {
|
||||
|
||||
## Object.assign()
|
||||
|
||||
Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出TypeError错误。
|
||||
`Object.assign`方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出TypeError错误。
|
||||
|
||||
```javascript
|
||||
var target = { a: 1 };
|
||||
@ -244,7 +253,48 @@ Object.assign(target, source1, source2);
|
||||
target // {a:1, b:2, c:3}
|
||||
```
|
||||
|
||||
assign方法有很多用处。
|
||||
`Object.assign`只拷贝自身属性，不可枚举的属性（`enumerable`为false）和继承的属性不会被拷贝。
|
||||
|
||||
```javascript
|
||||
Object.assign({b: 'c'},
|
||||
Object.defineProperty({}, 'invisible', {
|
||||
enumerable: false,
|
||||
value: 'hello'
|
||||
})
|
||||
)
|
||||
// { b: 'c' }
|
||||
```
|
||||
|
||||
上面代码中，`Object.assign`要拷贝的对象只有一个不可枚举属性`invisible`，这个属性并没有被拷贝进去。
|
||||
|
||||
属性名为Symbol值的属性，也会被`Object.assign`拷贝。
|
||||
|
||||
```javascript
|
||||
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
|
||||
// { a: 'b', Symbol(c): 'd' }
|
||||
```
|
||||
|
||||
对于嵌套的对象，`Object.assign`的处理方法是替换，而不是添加。
|
||||
|
||||
```javascript
|
||||
var target = { a: { b: 'c', d: 'e' } }
|
||||
var source = { a: { b: 'hello' } }
|
||||
Object.assign(target, source)
|
||||
// { a: { b: 'hello' } }
|
||||
```
|
||||
|
||||
上面代码中，`target`对象的`a`属性被`source`对象的`a`属性整个替换掉了，而不会得到`{ a: { b: 'hello', d: 'e' } }`的结果。这通常不是开发者想要的，需要特别小心。有一些函数库提供`Object.assign`的定制版本（比如Lodash的`_.defaultsDeep`方法），可以解决深拷贝的问题。
|
||||
|
||||
注意，`Object.assign`可以用来处理数组，但是会把数组视为对象。
|
||||
|
||||
```javascript
|
||||
Object.assign([1, 2, 3], [4, 5])
|
||||
// [4, 5, 3]
|
||||
```
|
||||
|
||||
上面代码中，`Object.assign`把数组视为属性名为0、1、2的对象，因此目标数组的0号属性`4`覆盖了原数组的0号属性`1`。
|
||||
|
||||
`Object.assign`方法有很多用处。
|
||||
|
||||
**（1）为对象添加属性**
|
||||
|
||||
@ -329,7 +379,9 @@ function processContent(options) {
|
||||
}
|
||||
```
|
||||
|
||||
上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。
|
||||
上面代码中，`DEFAULTS`对象是默认值，`options`对象是用户提供的参数。`Object.assign`方法将`DEFAULTS`和`options`合并成一个新对象，如果两者有同名属性，则`option`的属性值会覆盖`DEFAULTS`的属性值。
|
||||
|
||||
注意，由于存在深拷贝的问题，`DEFAULTS`对象和`options`对象的所有属性的值，都只能是简单类型，而不能指向另一个对象。否则，将导致`DEFAULTS`对象的该属性不起作用。
|
||||
|
||||
## `__proto__`属性，Object.setPrototypeOf()，Object.getPrototypeOf()
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user