ECMAScript 6即将带给我们新的数组操作方法前瞻

ECMAScript 6即将为我们带来全新的数组操作方法，让我们一起这些新颖的功能，看看如何在现有的浏览器中应用这些新的数组特性。

在ECMAScript 6中，"类方法"（也就是直接定义在数组（Array）上的方法）得到了扩展。其中，Array.from()方法是一个引人注目的新特性。

Array.from()的基本功能是将两种类型的对象转换为数组。第一种是类数组对象（Array-like objects），这类对象拥有长度和索引属性，比如通过DOM操作得到的结果，如document.getElementsByClassName()返回的结果。第二种是可迭代对象（Iterable objects），这类对象在取值时，每次只能取一个元素。而数组是可迭代的，还有其他如映射(Map)和集(Set)等也是可迭代对象。

下面是一个将类数组对象转换为数组的示例：

```javascript

let lis = document.querySelectorAll('ul.fancy li');

Array.from(lis).forEach(function (li) {

console.log(li);

});

```

在这个例子中，querySelectorAll()返回的结果不是一个真正的数组，因此没有forEach()方法。在使用forEach()之前，我们需要将其转换为数组。Array.from()正是我们需要的工具。

除了转换功能，Array.from()还可以用于映射（map）。它是一个泛型使用map()的替代选择。例如：

```javascript

let spans = document.querySelectorAll('span.name');

// 使用 map()，泛型方式：

let names1 = Array.prototype.map.call(spans, s => s.textContent);

// 使用 Array.from()：

let names2 = Array.from(spans, s => s.textContent);

```

在这个示例中，再次使用了querySelectorAll()，其返回的是一个类数组对象。由于不能直接调用map()，我们通过泛型方法和使用Array.from()来避免这个中间步骤。

Array.from()的另一个特点是它会忽略数组中的空洞（holes），并用undefined元素来处理。例如：

```javascript

console.log(Array.from([0,,2])) // 输出 [ 0, undefined, 2 ]

```

这意味着你可以使用Array.from()来创建或填充一个数组。例如：

```javascript

console.log(Array.from(new Array(5), () => 'a')) // 输出 [ 'a', 'a', 'a', 'a', 'a' ]

console.log(Array.from(new Array(5), (x,i) => i)) // 输出 [ 0, 1, 2, 3, 4 ]

```

在编程世界中，数组的扩展和定制是一种强大的技术，它允许我们创建自己的数组类，并为其添加新的方法和功能。让我们深入一种名为“MyArray”的自定义数组类，以及如何利用它的特殊功能进行映射操作。

我们定义一个名为“MyArray”的类，它继承了Array的原型。这个类使我们能够控制数组的构造方式，并为其添加新的方法。接下来，我们创建一个名为“instanceOfMyArray”的实例，使用“MyArray.from()”方法从一个可迭代对象中创建一个新的MyArray实例。这个方法通过接收一个可迭代对象，根据MyArray类的定义来确定结果构造器。

然后，我们将如何使用“map()”方法进行映射操作。这是一个常用的数组方法，用于对数组中的每个元素应用一个函数，并返回一个新的数组。在这个例子中，我们将使用“map()”方法来处理一个包含数字的数组，并返回一个新的数组。值得注意的是，“map()”方法总是返回一个实例为Array的对象。

接下来，我们讨论如何将一组值转换为数组。在JavaScript中，我们可以使用数组源文本（array literal）来完成这个任务。当只有一个值且为数字时，数组的构造器可能会遇到问题。我们需要使用Array.of()方法来避免这个问题。这个方法接受一组值作为参数，并返回一个新的数组实例。这是当我们想要创建一个具有特定值的数组时非常有用的方法。我们还了如何在使用自定义数组类时利用Array.of()方法。

然后，我们讨论了在自定义数组类中使用Array.prototype.map()方法时需要注意的问题。当我们将一个包含字符串的数组传递给map()方法时，会传递三个参数到回调函数中，而不仅仅是当前迭代的元素。这两个额外的参数是元素的索引和原始数组本身。在使用map()方法时，我们必须确保正确处理这些参数。为了解决这个问题，我们可以使用箭头函数或其他函数表达式来明确指定回调函数的参数。

Array的新方法：从迭代器到填充

在编程中，我们经常需要与数组打交道。幸运的是，随着JavaScript的发展，我们有了更多强大的数组方法可以使用。本文将介绍一些的Array方法，包括使用Array.from()处理迭代器，使用find和findIndex方法查找数组元素，以及使用fill方法填充数组。

一、使用Array.from()处理迭代器

你是否曾想过如何将迭代器的内容放入数组中？Array.from()方法可以实现这个需求。以下是一些示例：

```javascript

Array.from([ 'a', 'b' ].keys()) // [ 0, 1 ]

Array.from([ 'a', 'b' ].values()) // [ 'a', 'b' ]

Array.from([ 'a', 'b' ].entries()) // [ [ 0, 'a' ], [ 1, 'b' ] ]

```

结合entries()和ECMAScript 6中的for-of循环，你可以方便地将迭代对象拆解成key-value对。例如：

```javascript

for (let [index, elem] of ['a', 'b'].entries()) {

console.log(index, elem); // 输出：0 'a'， 1 'b'

}

```

二、使用find和findIndex查找数组元素

Array.prototype.find()和Array.prototype.findIndex()是两个非常有用的方法，用于查找满足特定条件的数组元素。find()返回满足条件的第一个元素，如果没有满足条件的元素则返回undefined。findIndex()返回满足条件的第一个元素的索引，如果没有满足条件的元素则返回-1。例如：

```javascript

[6, -5, 8].find(x => x < 0) // -5

[6, 5, 8].find(x => x < 0) // undefined

```

三、使用fill方法填充数组

Array.prototype.fill()方法可以用给定的值填充数组。该方法忽略洞（即undefined的元素）。例如：

```javascript

['a', 'b', 'c'].fill(7) // [ 7, 7, 7 ]

new Array(3).fill(7) // [ 7, 7, 7 ]

['a', 'b', 'c'].fill(7, 1, 2) // [ 'a', 7, 'c' ]

```

四、解决NaN查找问题

传统的Array.prototypedexOf()方法不能查找NaN。使用findIndex()，你可以使用Object.is()，从而解决这个问题。你还可以创建一个帮助函数elemIs()来简化操作。例如：

```javascript

function elemIs(x) { return Object.is.bind(Object, x) }

[NaN].findIndex(elemIs(NaN)) // 0

```

这些新的数组方法提供了更强大、更灵活的数组操作方式。它们可以帮助你更轻松地处理数组，提高代码的可读性和可维护性。如果你正在使用的浏览器，那么这些新方法可能已经可用。请确保在实际项目中尝试使用它们，以提高你的编程效率。