ES6中的数组

Posted 2021-03-18 lijianming180

数组是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，估计是把 [,,,] 优化成 [] // [,,,] 旧版chrome console.log(Array(3).length); // 3 console.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()

如果要查询数组中的符合条件的某一项，你通常的做法是：

1. 循环整个数组
2. 逐个匹配该项是否满足条件
3. 把满足条件的数组项返回出来

有点繁琐？的确如此。 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); // 0 console.log(iterator.next().value); // 1 console.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 。