后端开发教程 - Java、Spring Boot 实战 - msg200.com
2020 年必须了解的 15 种 JavaScript 数组方法
1. some()
2. reduce()
3. every()
4. map()
5. flat()
6. 过滤器()
7. forEach()
8. findIndex()
9. find()
10. 排序()
11. concat()
12. 填充()
13. includes()
14. reverse()
15. flatMap()
最初发布在我的博客上
在 JavaScript 中，数组是一种用于存储不同元素的特殊变量。它有一些内置属性和方法，我们可以根据需要添加、删除、迭代或操作数据。了解 JavaScript 数组方法可以提升你的开发技能。
在这篇文章中，我们将看到 15 种可以帮助您正确操作数据的数组方法。
- 1. some()
- 2. reduce()
- 3. every()
- 4. map()
- 5. flat()
- 6. 过滤器()
- 7. forEach()
- 8. findIndex()
- 9. find()
- 10. 排序()
- 11. concat()
- 12. 填充()
- 13. includes()
- 14. reverse()
- 15. flatMap()
请注意，在这篇文章中，我们将简化作为参数传递的函数。
// Instead of using this way
myAwesomeArray.some(test => {
if (test === "d") {
return test
}
})
// We'll use the shorter one
myAwesomeArray.some(test => test === "d")
1. some()
此方法使用作为参数传递的函数来测试数组。true如果至少有一个元素符合测试条件，则返回结果；false否则，返回结果。
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
//-------> Output : true
2. reduce()
该方法接收一个函数，该函数包含一个累加器和一个值作为参数。它将函数应用于累加器和数组中的每个值，最终返回一个值。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120
3. every()
此方法使用作为参数传递的函数来测试数组。true如果数组中的每个元素都符合测试条件，则返回结果；false否则，返回结果。
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d")
//-------> Output : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a")
//-------> Output : true
4. map()
此方法接收一个函数作为参数，并返回一个包含数组中每个元素图像的新数组。它始终返回相同数量的元素。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
//-------> Output : 25
// 16
// 9
// 4
// 1
5. flat()
此方法创建一个包含子数组中元素的新数组，并将其平铺到新数组中。请注意，此方法只会遍历一层深度。
const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat()
//-------> Output : [1, 2, 3, 4, 5]
6. 过滤器()
此方法接收一个函数作为参数。并返回一个新数组，该数组包含作为参数传递的过滤函数所返回的数组的所有元素true。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
{ id: 4, name: "Mass" },
]
myAwesomeArray.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
// 1:{id: 4, name: "Mass"}
7. forEach()
此方法将函数应用于数组的每个元素。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.forEach(element => console.log(element.name))
//-------> Output : john
// Ali
// Mass
8. findIndex()
此方法接收一个函数作为参数，并将其应用于数组。它返回找到的元素的索引，该元素满足作为参数传递的测试函数，或者-1如果没有元素满足该测试函数，则返回该元素的索引。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.findIndex(element => element.id === 3)
//-------> Output : 2
myAwesomeArray.findIndex(element => element.id === 7)
//-------> Output : -1
9. find()
此方法接收一个函数作为参数，并将其应用于数组。它返回数组中找到的、满足测试函数的元素的值。否则，返回undefined。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.find(element => element.id === 3)
//-------> Output : {id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7)
//-------> Output : undefined
10. 排序()
此方法接收一个函数作为参数。它对数组的元素进行排序并返回。
const myAwesomeArray = [5, 4, 3, 2, 1]
// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//-------> Output : [1, 2, 3, 4, 5]
// Sort from largest to smallest
myAwesomeArray.sort((a, b) => b - a)
//-------> Output : [5, 4, 3, 2, 1]
11. concat()
此方法将通过连接两个或多个数组/值来合并它们。它返回一个包含所有元素的新数组。
const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
12. 填充()
此方法使用相同的值填充给定数组的所有元素，从起始索引（默认 0）到结束索引（默认 array.length）。
const myAwesomeArray = [1, 2, 3, 4, 5]
// The first argument (0) is the value
// The second argument (1) is the starting index
// The third argument (3) is the ending index
myAwesomeArray.fill(0, 1, 3)
//-------> Output : [1, 0, 0, 4, 5]
13. includes()
true如果数组包含某个元素，则此方法返回，false否则返回。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
//-------> Output : true
myAwesomeArray.includes(8)
//-------> Output : false
14. reverse()
此方法反转数组。第一个元素将成为最后一个元素，最后一个元素将成为第一个元素。
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']
15. flatMap()
该方法将一个函数应用于数组的每个元素，然后将结果平铺到数组中。它将flat()和合并map()到一个函数中。
const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]
// With .flat() and .map()
myAwesomeArray.flat().map(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]