Skip to content

Commit 3a4f714

Browse files
committed
edit docs/array
1 parent 55831c5 commit 3a4f714

File tree

2 files changed

+118
-3
lines changed

2 files changed

+118
-3
lines changed

docs/array.md

Lines changed: 117 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,57 @@
11
# 数组的扩展
22

3-
## Array.prototype.find(),Array.prototype.findIndex()
3+
## Array.from()
44

5-
Array.prototype.find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素。
5+
Array.from()用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,其中包括ES6新增的Set和Map结构。
6+
7+
```javascript
8+
9+
let ps = document.querySelectorAll('p');
10+
11+
Array.from(ps).forEach(function (p) {
12+
console.log(p);
13+
});
14+
15+
```
16+
17+
上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
18+
19+
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
20+
21+
```JavaScript
22+
23+
Array.from(arrayLike, x => x * x);
24+
// 等同于
25+
Array.from(arrayLike).map(x => x * x);
26+
27+
```
28+
29+
## Array.of()
30+
31+
Array.of()方法用于将一组值,转换为数组。
32+
33+
```javaScript
34+
35+
Array.of(3, 11, 8) // [3,11,8]
36+
Array.of(3).length // 1
37+
38+
```
39+
40+
这个函数的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
41+
42+
```javascript
43+
44+
Array() // []
45+
Array(3) // [undefined, undefined, undefined]
46+
Array(3,11,8) // [3, 11, 8]
47+
48+
```
49+
50+
上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。
51+
52+
## 数组实例的find()和findIndex()
53+
54+
数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。
655

756
```javascript
857

@@ -14,7 +63,7 @@ Array.prototype.find()用于找出第一个符合条件的数组元素。它的
1463

1564
从上面代码可以看到,回调函数接受三个参数,依次为当前的值、当前的位置和原数组。
1665

17-
Array.prototype.findIndex()的用法与find()非常类似,返回第一个符合条件的数组元素的位置。
66+
数组实例的findIndex()的用法与find()非常类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1
1867

1968
```javascript
2069

@@ -24,6 +73,71 @@ Array.prototype.findIndex()的用法与find()非常类似,返回第一个符
2473

2574
```
2675

76+
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
77+
78+
另外,这两个方法都可以发现NaN,弥补了IndexOf()的不足。
79+
80+
```javascript
81+
82+
[NaN].indexOf(NaN)
83+
// -1
84+
85+
[NaN].findIndex(y => Object.is(NaN, y))
86+
// 0
87+
88+
```
89+
90+
## 数组实例的fill()
91+
92+
fill()使用给定值,填充一个数组。
93+
94+
```javascript
95+
96+
['a', 'b', 'c'].fill(7)
97+
// [7, 7, 7]
98+
99+
new Array(3).fill(7)
100+
// [7, 7, 7]
101+
102+
```
103+
104+
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
105+
106+
fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
107+
108+
```javascript
109+
110+
['a', 'b', 'c'].fill(7, 1, 2)
111+
// ['a', 7, 'c']
112+
113+
```
114+
115+
## 数组实例的entries(),keys()和values()
116+
117+
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
118+
119+
```javascript
120+
121+
for (let index of ['a', 'b'].keys()) {
122+
console.log(index);
123+
}
124+
// 0
125+
// 1
126+
127+
for (let elem of ['a', 'b'].values()) {
128+
console.log(elem);
129+
}
130+
// 'a'
131+
// 'b'
132+
133+
for (let [index, elem] of ['a', 'b'].entries()) {
134+
console.log(index, elem);
135+
}
136+
// 0 "a"
137+
// 1 "b"
138+
139+
```
140+
27141
## 数组推导
28142

29143
ES6提供简洁写法,允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)。

docs/reference.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
- Nicholas C. Zakas, [Understanding ECMAScript 6 arrow functions](http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/)
2424
- Jack Franklin, [Real Life ES6 - Arrow Functions](http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/)
2525
- Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)
26+
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
2627
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
2728

2829
## Generator

0 commit comments

Comments
 (0)