diff --git a/docs/array.md b/docs/array.md index a16b07b..69b3e35 100644 --- a/docs/array.md +++ b/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)。 diff --git a/docs/reference.md b/docs/reference.md index ed5dac8..caeb69f 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -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