后端开发教程 - Java、Spring Boot 实战 - msg200.com
JavaScript forEach你应该知道的 10 个 JavaScript 数组方法
这篇文章最初发表在我的博客上。
在这篇文章中，我将分享您应该知道的 10 种 JavaScript 数组方法。
如果你对数组一无所知，可以点击这里查看数组介绍。
以下是你至少应该知道的 10 个 JavaScript 数组方法
1. forEach()
此方法可以帮助您循环遍历数组的项目。
const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => {
console.log(item); // output: 1 2 3 4 5 6
});
2. includes()
此方法检查数组是否包含方法中传递的项目。
const arr = [1, 2, 3, 4, 5, 6];
arr.includes(2); // output: true
arr.includes(7); // output: false
3. 过滤器()
此方法创建仅包含所提供函数内传递条件的元素的新数组。
const arr = [1, 2, 3, 4, 5, 6];
// item(s) greater than 3
const filtered = arr.filter(num => num > 3);
console.log(filtered); // output: [4, 5, 6]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]
4. map()
此方法通过在每个元素中调用提供的函数来创建新数组。
const arr = [1, 2, 3, 4, 5, 6];
// add one to every element
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]
5. reduce()
reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，以将其减少为单个值 - MDN
const arr = [1, 2, 3, 4, 5, 6];
const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21
6. some()
此方法检查数组中是否至少有一个元素满足条件。如果满足，则返回 true；否则返回 false。
const arr = [1, 2, 3, 4, 5, 6];
// at least one element is greater than 4?
const largeNum = arr.some(num => num > 4);
console.log(largeNum); // output: true
// at least one element is less than or equal to 0?
const smallNum = arr.some(num => num <= 0);
console.log(smallNum); // output: false
7. every()
此方法检查数组的所有项是否符合条件。如果符合，则返回“true”，否则返回“false”。
const arr = [1, 2, 3, 4, 5, 6];
// all elements are greater than 4
const greaterFour = arr.every(num => num > 4);
console.log(greaterFour); // output: false
// all elements are less than 10
const lessTen = arr.every(num => num < 10);
console.log(lessTen); // output: true
8. 排序()
此方法用于按升序或降序排列/排序数组的项目。
const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];
// sort in descending order
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]
// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']
9. 数组.from()
这会将所有类似数组或可迭代的内容更改为真正的数组，尤其是在使用 DOM 时，以便您可以使用其他数组方法，如 reduce、map、filter 等。
const name = 'frugence';
const nameArray = Array.from(name);
console.log(name); // output: frugence
console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']
使用 DOM
// I assume that you have created unorder list of items in our html file.
const lis = document.querySelectorAll('li');
const lisArray = Array.from(document.querySelectorAll('li'));
// is true array?
console.log(Array.isArray(lis)); // output: false
console.log(Array.isArray(lisArray)); // output: true
10. 数组.of()
这将根据传递给它的每个参数创建数组。
const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]