在JavaScript中以函数编程方式循环数组的一些用例：

1.只需循环遍历数组

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

注意：严格来说，Array.prototype.forEach（）不是一种函数方式，因为它作为输入参数的函数不应该返回值，因此不能将其视为纯函数。

2.检查数组中的任何元素是否通过测试

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.转换为新阵列

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

注意：map（）方法使用对调用数组中的每个元素调用所提供函数的结果创建一个新数组。

4.总结某一特定属性，并计算其平均值

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5.基于原始数组创建新数组，但不进行修改

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6.统计每个类别的数量

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7.基于特定条件检索数组的子集

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

注意：filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

8.对数组进行排序

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9.在数组中查找元素

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

方法返回数组中满足所提供测试函数的第一个元素的值。

工具书类

Array.prototype.some（）Array.prototype.forEach（）Array.prototype.map（）Array.prototype.filter（）Array.prototype.sort（）Spread语法Array.prototype.find（）

var array=['hai'，'hello'，'how'，'are'，'you']$（文档）.ready（函数（）{$（'#clickButton'）.click（函数（）{对于（var i=0；i<array.length；i++）{警报（阵列[i]）}})})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js“></script><input id=“clickButton”value=“click Me”type=“button”/><div id=“show”></div>

var obj = ["one","two","three"];

for(x in obj){
    console.log(obj[x]);
}

优化的方法是缓存数组长度，并使用单变量模式，用一个var关键字初始化所有变量。

var i, max, myStringArray = ["Hello", "World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);

    // Do something
}

如果迭代的顺序无关紧要，那么您应该尝试反向循环。它是最快的，因为它减少了开销条件测试，并且减少了一个声明：

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

或者使用while循环更好更干净：

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // Do something with fruits[i]
}

它不是100%相同，但相似：

var myStringArray=['Hello'，'World']；//数组使用[]而不是｛｝for（myStringArray中的var i）{console.log（i+'->'+myStringArray[i]）；//我是索引/键，而不是项目}

三个主要选项：

对于（var i=0；i<xs.length；i++）｛console.log（xs[i]）；｝xs.forEach（（x，i）=>console.log（x））；for（xs的常量x）｛console.log（x）；｝

下面是详细的示例。

---

1.循环顺序：

var myStringArray=[“Hello”，“World”]；var arrayLength=myStringArray.length；for（var i=0；i<arrayLength；i++）{console.log（myStringArray[i]）；//做点什么}

Pros

适用于各种环境可以使用break和continue流控制语句

Cons

过于冗长迫切的容易出现一个错误（有时也称为围栏柱错误）

2.阵列.原型.每个：

ES5规范引入了许多有益的数组方法。其中一个是Array.prototype.forEach，它为我们提供了一种简单的方法来遍历数组：

常量数组=[“一”，“二”，“三”]array.forEach（函数（项，索引）{console.log（项，索引）；});

在撰写ES5规范发布之时（2009年12月）已近十年，它已被桌面、服务器和移动环境中的几乎所有现代引擎实现，因此使用它们是安全的。

使用ES6箭头函数语法，它更加简洁：

array.forEach(item => console.log(item));

箭头功能也被广泛实现，除非您计划支持古老的平台（例如Internet Explorer 11）；你去也很安全。

Pros

非常简短和简洁。声明的

Cons

无法使用中断/继续

通常，您可以通过在迭代数组元素之前过滤数组元素来代替中断命令循环的需要，例如：

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

请记住，如果您正在迭代一个数组以从中构建另一个数组，则应该使用map。我见过很多次这种反模式。

反模式：

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

地图的正确使用情况：

常量=[1,2,3,4,5]；常量doubled=numbers.map（n=>n*2）；console.log（加倍）；

此外，如果您试图将数组缩减为一个值，例如，您希望对一个数字数组求和，则应使用reduce方法。

反模式：

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

正确使用reduce：

常量=[1,2,3,4,5]；常量sum=数字。减少（（total，n）=>total+n，0）；console.log（总和）；

3.声明的ES6：

ES6标准引入了可迭代对象的概念，并定义了用于遍历数据的新构造，即for。。。声明。

此语句适用于任何类型的可迭代对象，也适用于生成器（任何具有\[Symbol.iiterator\]属性的对象）。

根据定义，数组对象是ES6中内置的可迭代对象，因此可以对它们使用以下语句：

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

Pros

它可以遍历大量对象。可以使用正常的流量控制语句（中断/继续）。用于迭代串行异步值。

Cons

如果您的目标是较旧的浏览器，则转译的输出可能会让您大吃一惊。

不用于。。。在里面

@zipcodeman建议使用for。。。在语句中，但对于迭代数组，应该避免for-in，该语句旨在枚举对象财产。

它不应用于类似数组的对象，因为：

迭代的顺序没有保证；数组索引不能按数字顺序访问。还枚举了继承的财产。

第二点是它会给您带来很多问题，例如，如果您扩展Array.prototype对象以在其中包含一个方法，那么该属性也会被枚举。

例如：

Array.prototype.foo=“foo！”；var数组=[‘a’，‘b’，‘c’]；for（数组中的变量i）{console.log（array[i]）；}

上面的代码将控制台日志“a”、“b”、“c”和“foo！”。

如果您使用一些严重依赖原生原型扩充的库（如MooTools），这可能是一个特别的问题。

如前所述，for-in语句用于枚举对象财产，例如：

变量obj={“a”：1，“b”：2，“c”：3};for（obj中的var属性）{if（obj.hasOwnProperty（prop））{//或如果（Object.protype.hasOwnProperty.call（obj，prop））安全。。。console.log（“prop:”+prop+“value:”+obj[prop]）}}

在上面的示例中，hasOwnProperty方法允许您仅枚举自己的财产。就是这样，只有对象物理上具有的财产，没有继承的财产。

我建议您阅读以下文章：

枚举VS迭代