1
0
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:
ruanyf 2014-05-10 00:51:24 +08:00
parent 55831c506e
commit 3a4f714af5
2 changed files with 118 additions and 3 deletions

View File

@ -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

View File

@ -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 6s 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