数组是js中很重要的数据类型，虽然在 ES5 中，关于数组的方法和属性很多。但为了更加简洁、高效的操作数组，ES6 中又在数组原型上和实例上新增了一些方法。
一、Array方法
1.1 Array.from()
js中存在很多类似数组的对象，比如说 获取的一组DOM元素，比如说 函数的参数。
它们有着类似数组的属性，比如说键值对，或者 length 属性，但它们并不能使用数组里的方法。
要把一个类似数组的对象转换成一个真正的数组有时候可能很麻烦，就拿 函数的参数 来说，你需要通过如下方式：
function () { var arr = [];
for (var i = 0; i < arguments.length; i++) { arr.push(arguments[i]); }
return arr;}
console.log(convertArray(1, 2, 3)); console.log(Object.prototype.toString.call(convertArray(1, 2, 3))); // '[object Array]'
|
你也可以通过另外一种方式来转换数组，我们再拿 一组DOM元素 来说：
<ul> <li>aa</li> <li>bb</li> <li>cc</li></ul> |
var li = document.querySelectorAll('li');var convertArray = Array.prototype.slice.call(li);
console.log(convertArray); // [li, li, li]console.log(Object.prototype.toString.call(convertArray)); // [object Array]
|
虽然上面两种方式都能实现转换成数组的目的，但是因为需要各种代码‘模拟’，我们还是觉得有些繁琐。因此，ES6 中提供了 Array.from() 方法，它有一个参数，即类似数组对象，它的返回值为一个数组。
如果传入的是其他值，Array.from() 会做一些特殊处理：
- 参数为 数组， 则该方法返回原数组
- 参数为 字符串， 则该方法返回字符串以空格拆分的数组
- 参数为 数字，则该方法返回空数组
- 参数为 NaN，则该方法返回空数组
- 参数为 其他数据类型，则该方法报错
用代码来说明下：
var li = document.querySelectorAll('li');
console.log(Array.from({'0': 5, '1': 10, length: 2})); // [5, 10]console.log(Array.from({length: 3})); // [undefined, undefined, undefined]console.log(Array.from(li)); // [li, li, li]
console.log(Array.from([1, 2, 3])); console.log(Array.from('abc')); // ["a", "b", "c"]console.log(Array.from(2)); // []console.log(Array.from(NaN)); // []
|
1.2 Array.of()
我们通常使用 Array() 方法来创建新数组（其实都是直接使用 []）：
console.log(Array()); // []
console.log(Array(3)); // [] 最新chrome，估计是把 [,,,] 优化成 [] // [,,,] 旧版chromeconsole.log(Array(3).length); // 3console.log(Array(3)[1]); // undefined
console.log(Array('a')); // ["a"]
console.log(Array(1, 2, 'abc')); // [1, 2, "abc"]
|
从上面的代码可以发现，Array() 传入的情况不同，返回的值也有很大差异：
- 不传参数时，返回的是空数组。
- 参数为 一个数字，则表示创建包含该数字项长度的数组，其中数组的每项都是 undefined。
- 参数为 一个字符串，则直接返回包含该字符串，且数组长度为1的数组。
- 参数为 多项，则直接返回包含这些项，对应的数组。
额，就因为传入的参数不同，就返回各种各样的结果。这很容易让人混淆好吗？而且你也不太可能记录各种传参的情况以及对应的返回值吧。
还好，ES6中引入了 Array.of() 方法。 无论你传入怎样的参数，它都是创建一个 “对应” 的数组。来看看它的使用：
console.log(Array.of()); // []
console.log(Array.of(3)); // [3]console.log(Array.of(3).length); // 1
console.log(Array.of('a')); // ["a"]
console.log(Array.of(1, 2, 'abc')); // [1, 2, "abc"]
|
二、数组实例方法
2.1 find()、findIndex()
如果要查询数组中的符合条件的某一项，你通常的做法是：
- 循环整个数组
- 逐个匹配该项是否满足条件
- 把满足条件的数组项返回出来
有点繁琐？的确如此。 ES6 中 find() 方法可以把你从里面解脱出来，该方法用于查询符合条件的第一个数组项，它的参数是一个回调函数，函数里设置查找规则。
它的用法：
var positiveNumber = function(value) { 大专栏 ES6中的数组"keyword">return value > 0;};
console.log([2, 3, -1].find(positiveNumber)); // 2
|
除了 数组项 外，这个回调函数还接受另外两个参数：索引值 和 原数组
var positiveNumber = function(value, index, arr) { console.log(index, arr); // 0 [2, 3, -1] return value > 0;};
console.log([2, 3, -1].find(positiveNumber)); // 2
|
不过我觉得这个方法设计的有点奇怪，它为什么不是返回一个符合条件的数组呢？如果需要对符合条件的多个数组项同时操作怎么办？循环使用 find ?
我们再来说说 findIndex() 方法，它的作用是返回第一个符合条件的数组项的索引位置。如果没有找到则返回 -1 ，它的用法和参数与 find() 相同：
var positiveNumberIndex = function(value, index, arr) { console.log(index, arr); // 0 [2, 3, -1] return value > 0;};
console.log([2, 3, -1].findIndex(positiveNumberIndex)); // 0
|
2.2 fill()
fill 在字面上是填充的意思，所以 fill() 就表示通过一个或多个参数，来填充(覆盖)原始数组里的数组项。
当只传递一个参数时，该函数会用这个参数重写所有数组项：
console.log([2, 3, -1].fill(1)); // [1, 1, 1]console.log(new Array(5).fill(2)); // [2, 2, 2, 2, 2] |
在某些情况下，你可能不想替换数组里的所有项，这时，你可以给它传递一个开始索引和一个结束索引，即该函数的第二个或第三个参数：
console.log([2, 3, -1, 0].fill(1, 1)); // [2, 1, 1, 1]console.log([2, 3, -1, 0].fill(1, 1, 2)); // [2, 1, -1, 0] |
看到没，当传递了第二个参数后，则该参数索引在数组中后面的所有项都被替换。当传递了第三个参数后，那么就设置了一个替换范围。当同时传递后面这两个参数时，它的功能就有点类似之前操作数组的 splice 方法。但是，它似乎比 splice 方法功能更强大些。
需要注意的是，如果后面两个参数为负数，则需要将这个负数加上数组的长度，从而得到正确的索引位置。
2.3 copyWithin()
copyWithin 方法和前面说的 fill() 方法类似，主要功能还是更新替换数组项，但是它更强调复制功能，它是通过复制数组里的某一项或某几项来替换数组项。
它有三个参数：
- target，必选，表示开始替换数组项的索引。
- start，可选，表示从该索引数组项开始复制数据，默认值为 0。
- end，可选，表示从该索引数组项结束复制数据，默认值为数组长度。
console.log([2, 3, -1, 0].copyWithin(1)); // [2, 2, 3, -1]console.log([2, 3, -1, 0].copyWithin(1, 2)); // [2, -1, 0, 0]console.log([2, 3, -1, 0].copyWithin(1, 2, 3)); // [2, -1, -1, 0] |
第一行代码只要一个参数，表示从数组第 1 项开始替换，复制的数据是从第 0 项到 最后 一项。
第二行代码有两个参数，表示从数组第 1 项开始替换，复制的数据是从第 2 项到 最后 一项。
第三行代码有三个参数，表示从数组第 1 项开始替换，复制的数据是从第 2 项到第 3 项。
需要注意的是，数组里的操作，第二个索引大多数都是不包含在内的，它的作用只是限定一个范围而已。
2.4 entries()，keys()、values()
通过 entries() , keys() 和 values() 方法，ES6 中还新增了数组中键值对、键、值的循环。这三个方法返回的值，内部都是一种 ArrayIterator 结构，无法直接读取。
entries() 循环键值：
var arr = ['a', 'b', 'c'], iterator = arr.entries(); console.log(iterator.next().value); // [0, 'a']console.log(iterator.next().value); // [1, 'b']console.log(iterator.next().value); // [2, 'c'] |
当然，如果你了解 ES6 的迭代器的话，你也可以直接循环出来：
var arr = ['a', 'b', 'c'], iterator = arr.entries();
for (let i of iterator) { console.log(i); // [0, 'a'] , [1, 'b'], [2, 'c']}
|
keys() 循环键：
var arr = ['a', 'b', 'c'], iterator = arr.keys(); console.log(iterator.next().value); // 0console.log(iterator.next().value); // 1console.log(iterator.next().value); // 2 |
values() 循环值：
var arr = ['a', 'b', 'c'], iterator = arr.values(); console.log(iterator.next().value); // 'a'console.log(iterator.next().value); // 'b'console.log(iterator.next().value); // 'c' |
对于 values() 方法，浏览器支持性可能弱一些。在写本片文章时，我用的chrome 54 版本进行测试的，但该方法返回的却是 arr.values is not a function 。
原文地址：https://www.cnblogs.com/lijianming180/p/12147446.html