2020年您需要了解的15种使用数组的JavaScript方法

这是dev.to上发表的文章翻译。 发言者: Ibrahima Ndaw
原文发表在作者的博客上

JavaScript中的数组是一种特殊的数据结构,用于存储各种元素。 使用内置的属性和方法,您可以根据需要添加,删除,迭代或处理数据。 了解如何在JavaScript中使用数组将使您的专业开发技能更上一层楼。

在本文中,我们将介绍15种方法,这些方法将帮助您更有效地使用JavaScript中的数组。



请注意,基本上,我们将简化作为参数传递的函数。

// 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.()


此方法检查数组的任何元素是否满足在传递的函数中指定的条件。 如果至少一个元素与被测试的函数匹配,它将返回true ,否则返回false

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true 

2.减少()


此方法采用一个以累加器和一个值作为参数的函数。 它将函数应用于累加器和数组的每个值,以便仅返回一个值。

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120 

3.每个()


此方法检查数组的所有元素是否满足要传递的函数中指定的条件。 如果每个元素都与被测试的函数匹配,它将返回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.地图()


此方法将一个函数作为参数,并创建一个新数组,并为该数组的每个元素调用指定的函数。 它将始终返回相同数量的项目。

 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返回–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.找到()


此方法将一个函数作为参数,然后将其应用于数组。 如果元素满足检查功能的条件,它将返回在数组中找到的元素的值。 否则,它将返回值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.包含()


如果数组包含特定元素,则此方法返回true否则返回false

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Output : true myAwesomeArray.includes(8) //-------> Output : false 

14.反向()


此方法反转数组中元素的顺序。 第一个元素成为最后一个,最后一个成为第一个。

 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] 

Source: https://habr.com/ru/post/zh-CN483958/


All Articles