mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
edit docs/array
This commit is contained in:
parent
55831c506e
commit
3a4f714af5
120
docs/array.md
120
docs/array.md
@ -1,8 +1,57 @@
|
||||
# 数组的扩展
|
||||
|
||||
## Array.prototype.find(),Array.prototype.findIndex()
|
||||
## Array.from()
|
||||
|
||||
Array.prototype.find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素。
|
||||
Array.from()用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,其中包括ES6新增的Set和Map结构。
|
||||
|
||||
```javascript
|
||||
|
||||
let ps = document.querySelectorAll('p');
|
||||
|
||||
Array.from(ps).forEach(function (p) {
|
||||
console.log(p);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
|
||||
|
||||
Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
|
||||
|
||||
```JavaScript
|
||||
|
||||
Array.from(arrayLike, x => x * x);
|
||||
// 等同于
|
||||
Array.from(arrayLike).map(x => x * x);
|
||||
|
||||
```
|
||||
|
||||
## Array.of()
|
||||
|
||||
Array.of()方法用于将一组值,转换为数组。
|
||||
|
||||
```javaScript
|
||||
|
||||
Array.of(3, 11, 8) // [3,11,8]
|
||||
Array.of(3).length // 1
|
||||
|
||||
```
|
||||
|
||||
这个函数的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
|
||||
|
||||
```javascript
|
||||
|
||||
Array() // []
|
||||
Array(3) // [undefined, undefined, undefined]
|
||||
Array(3,11,8) // [3, 11, 8]
|
||||
|
||||
```
|
||||
|
||||
上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。
|
||||
|
||||
## 数组实例的find()和findIndex()
|
||||
|
||||
数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。
|
||||
|
||||
```javascript
|
||||
|
||||
@ -14,7 +63,7 @@ Array.prototype.find()用于找出第一个符合条件的数组元素。它的
|
||||
|
||||
从上面代码可以看到,回调函数接受三个参数,依次为当前的值、当前的位置和原数组。
|
||||
|
||||
Array.prototype.findIndex()的用法与find()非常类似,返回第一个符合条件的数组元素的位置。
|
||||
数组实例的findIndex()的用法与find()非常类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。
|
||||
|
||||
```javascript
|
||||
|
||||
@ -24,6 +73,71 @@ Array.prototype.findIndex()的用法与find()非常类似,返回第一个符
|
||||
|
||||
```
|
||||
|
||||
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
|
||||
|
||||
另外,这两个方法都可以发现NaN,弥补了IndexOf()的不足。
|
||||
|
||||
```javascript
|
||||
|
||||
[NaN].indexOf(NaN)
|
||||
// -1
|
||||
|
||||
[NaN].findIndex(y => Object.is(NaN, y))
|
||||
// 0
|
||||
|
||||
```
|
||||
|
||||
## 数组实例的fill()
|
||||
|
||||
fill()使用给定值,填充一个数组。
|
||||
|
||||
```javascript
|
||||
|
||||
['a', 'b', 'c'].fill(7)
|
||||
// [7, 7, 7]
|
||||
|
||||
new Array(3).fill(7)
|
||||
// [7, 7, 7]
|
||||
|
||||
```
|
||||
|
||||
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
|
||||
|
||||
fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
|
||||
|
||||
```javascript
|
||||
|
||||
['a', 'b', 'c'].fill(7, 1, 2)
|
||||
// ['a', 7, 'c']
|
||||
|
||||
```
|
||||
|
||||
## 数组实例的entries(),keys()和values()
|
||||
|
||||
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
|
||||
|
||||
```javascript
|
||||
|
||||
for (let index of ['a', 'b'].keys()) {
|
||||
console.log(index);
|
||||
}
|
||||
// 0
|
||||
// 1
|
||||
|
||||
for (let elem of ['a', 'b'].values()) {
|
||||
console.log(elem);
|
||||
}
|
||||
// 'a'
|
||||
// 'b'
|
||||
|
||||
for (let [index, elem] of ['a', 'b'].entries()) {
|
||||
console.log(index, elem);
|
||||
}
|
||||
// 0 "a"
|
||||
// 1 "b"
|
||||
|
||||
```
|
||||
|
||||
## 数组推导
|
||||
|
||||
ES6提供简洁写法,允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)。
|
||||
|
@ -23,6 +23,7 @@
|
||||
- Nicholas C. Zakas, [Understanding ECMAScript 6 arrow functions](http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/)
|
||||
- Jack Franklin, [Real Life ES6 - Arrow Functions](http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/)
|
||||
- Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)
|
||||
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
|
||||
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
|
||||
|
||||
## Generator
|
||||
|
Loading…
x
Reference in New Issue
Block a user