5个数组Array方法- indexOf、filter、forEach、map、red

ECMAScript5标准的发布，于2009年12月3日为我们带来了全新的数组操作方法。尽管这些方法的实用性毋庸置疑，但在当时缺乏支持ES5的浏览器，因此它们并未真正流行起来。这些数组方法被一些人戏称为Array "Extras"，但实际上它们是非常实用的工具。

随着时间的推移，我们看到了一种趋势的转变。在GitHub上流行的开源JS项目中，开发者们开始更倾向于使用本地代码，而不是依赖大量的第三方库。这就是我们要介绍这些数组方法的原因。

在ES5中，Array对象新增了多个实用方法，包括 indexOf、lastIndexOf、every、some、forEach、map、filter、reduce以及reduceRight。这些方法极大地丰富了数组的操作方式，提高了开发效率。

接下来，我将重点介绍其中五个我认为最为有用的方法。

首先是indexOf方法。该方法返回数组中第一个找到的元素的索引位置，如果元素不存在则返回-1。在没有使用indexOf的情况下，我们需要通过循环来查找元素是否存在。而使用indexOf后，只需一行代码就能完成同样的操作。例如：

不使用indexOf时的代码：

```javascript

var arr = ['apple','orange','pear'];

var found = false;

for(var i= 0; i < arr.length; i++){

if(arr[i] === 'orange'){

found = true;

break; // 如果找到了就跳出循环，否则会一直循环到数组末尾

}

}

console.log("found:",found); // 输出 "found: true" 或 "found: false"

```

使用indexOf后的代码：

```javascript

var arr = ['apple','orange','pear'];

console.log("found:", arrdexOf("orange") !== -1); // 输出 "found: true" 或 "found: false"，取决于是否包含"orange"元素。

```

接下来是filter方法。filter()方法创建一个新的数组，该数组包含通过测试的所有元素。这种方法对于筛选数组中的元素非常有用。通过提供一个测试函数，我们可以轻松地过滤出符合特定条件的元素。这使得我们能够轻松地处理复杂的数组过滤需求，而无需手动遍历整个数组。这使得代码更加简洁高效。使用filter方法可以使我们更加便捷地处理数据，提高工作效率。这些只是ES5提供的众多实用数组方法中的一部分，开发者可以根据实际需求选择使用不同的方法来满足自己的需求。无需过滤，直接操作数组：

考虑这样一个数组，它包含一些水果及其数量：

```javascript

var arr = [

{"name":"apple", "count": 2},

{"name":"orange", "count": 5},

{"name":"pear", "count": 3},

{"name":"orange", "count": 16}

];

```

如果我们想筛选出所有的橙子，可以使用传统的for循环：

```javascript

var newArr = [];

for(var i=0; i < arr.length; i++){

if(arr[i].name === "orange"){

newArr.push(arr[i]);

}

}

console.log("筛选结果：", newArr);

```

使用filter()简化操作：

其实，我们可以使用数组的`filter()`方法更简洁地实现上述功能：

```javascript

var newArr = arr.filter(function(item){

return item.name === "orange";

});

console.log("筛选结果：", newArr);

```

forEach()：为每一个元素执行对应的方法

当我们有一组数字，并想逐个打印它们时，可以使用`forEach()`：

传统的for循环：

```javascript

var arr = [1,2,3,4,5,6,7,8];

for(var i=0; i < arr.length; i++){

console.log(arr[i]);

}

console.log("========================");

```

使用forEach()：

```javascript

arr.forEach(function(item, index){

console.log(item);

});

```

map()：对数组的每个元素进行映射操作

假设我们有一个包含姓名首尾的数组，我们想要得到一个新的数组，其中包含全名。不使用map的话，我们可能需要一个循环来完成这一操作。但使用map可以简化这一流程：不使用map的方法：首先定义一个旧数组：接着定义一个函数来获取新数组。在这个函数中，我们遍历旧数组，为每个对象创建一个全名属性并添加到新数组中。然后返回新数组。使用map简化操作：我们只需要在旧数组上调用map函数。在函数内部，我们为每个对象创建全名属性并返回该对象。新的数组将自动由map函数生成。reduce()：实现累加器功能对于reduce()，它是一个非常强大的函数，可以将数组转化为单一的值。假设我们有一个数字数组并想要求其总和。我们可以使用reduce来实现这一点。尽管它的概念可能开始时有些抽象，但一旦理解并尝试使用它，你会发现它是处理数组数据的强大工具。希望这些解释和示例有助于您更好地理解JavaScript中的这些数组方法！在数组的世界里，不重复单词的数量是一项富有挑战性的任务。让我们一起看看在不使用reduce方法和使用reduce方法时，如何完成这项任务。

不使用reduce时：

假设我们有一个数组，里面包含了若干重复的单词。为了统计每个单词出现的次数，我们可以使用一个对象来存储这些信息。遍历数组中的每个元素，如果元素已经在对象中存在，就将其对应的值加一；如果不存在，就将其添加到对象中并设置其值为1。这种方法可以有效地统计每个单词的数量。

使用reduce()后：

reduce()方法为我们提供了一种更简洁的方式来处理这个问题。reduce方法会遍历数组中的每个元素，并将它们通过回调函数进行处理。在回调函数中，我们可以更新对象以存储单词及其对应的数量。reduce方法会自动处理数组的遍历和回调函数的执行，使得代码更加简洁。

为了更好地理解reduce方法的工作原理，让我们通过一个简单的例子来说明一下。假设我们有一个包含两个元素的数组，我们可以使用reduce方法来打印每个元素以及它们的累积结果。如果我们不提供初始值，那么reduce方法会从数组的第二个元素开始，将前一个元素的值作为下一次调用的累积结果。如果我们提供了一个初始值（在本例中是一个空对象），那么reduce方法会使用这个初始值作为累积结果，并将数组中的每个元素添加到该对象中。这样我们就可以看到每个单词在数组中出现的次数了。"passValue"函数中的reduce方法会将每个单词作为键存储在对象中，并将它们的数量设置为1。这样我们就可以轻松地统计每个单词的数量了。

无论我们选择使用哪种方法，目的都是为了统计数组中不重复单词的数量。通过使用reduce方法，我们可以更简洁地完成这项任务。但是如果你对reduce的工作原理还不太熟悉，那么使用传统的循环方式可能会更加直观易懂一些。无论如何，这两种方法都可以帮助我们有效地完成任务。通过运行这两种方法的代码片段，我们可以直观地看到它们之间的区别和效果。让我们一起编程的世界吧！在这个世界里，有许多有趣的问题等待我们去解决和。让我们一起开启编程之旅吧！通过调用 "cambrian.render('body')" 可以将结果渲染到网页上。