<p>在JavaScript中以函数式编程方式循环数组的一些用例:</p>
<h3>一。只需遍历数组</h3>
<pre><code>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
});
</code></pre>
<p>注意:严格来说,Array.prototype.forEach()不是一种函数方式,因为它作为输入参数的函数不应该返回值,因此不能将其视为纯函数。</p>
<h3>2。检查数组中的任何元素是否通过测试</h3>
<pre><code>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
</code></pre>
<h3>三。转换为新数组</h3>
<pre><code>const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]
</code></pre>
<p>注意:map()方法创建一个新数组,其结果是对调用数组中的每个元素调用一个提供的函数。</p>
<h3>四。总结一个特定的属性,并计算其平均值</h3>
<pre><code>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
</code></pre>
<h3>5个。基于原始数组创建新数组,但不修改它</h3>
<pre><code>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]
</code></pre>
<h3>6。计算每个类别的数量</h3>
<pre><code>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}
</code></pre>
<h3>7号。基于特定条件检索数组的子集</h3>
<pre><code>const myArray = [{x:100}, {x:200}, {x:300}];
const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]
</code></pre>
<p>注意:filter()方法创建一个新数组,其中包含通过由提供的函数实现的测试的所有元素。</p>
<h3>8个。对数组进行排序</h3>
<pre><code>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);
</code></pre>
<p><a href="https://i.stack.imgur.com/HDP2k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HDP2k.png" alt="enter image description here"/></a></p>
<h3>9号。在数组中查找元素</h3>
<pre><code>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);
</code></pre>
<p><a href="https://i.stack.imgur.com/RjfY9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RjfY9.png" alt="enter image description here"/></a></p>
<p>方法返回数组中满足所提供测试函数的第一个元素的值。</p>
<h3>参考文献</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some" rel="noreferrer">Array.prototype.some()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" rel="noreferrer">Array.prototype.forEach()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer">Array.prototype.map()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" rel="noreferrer">Array.prototype.filter()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" rel="noreferrer">Array.prototype.sort()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="noreferrer">Spread syntax</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find" rel="noreferrer">Array.prototype.find()</a></li>
</ul>