mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2024-04-21 12:32:22 +00:00
edit object & array & math
This commit is contained in:
+64
-25
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user