后端开发教程 - Java、Spring Boot 实战 - msg200.com
JavaScript 数组方法：Mutator VS Non-mutator 以及返回值
最初发布在我的博客上
JavaScript 数组方法使我们能够操作数据。然而，我们必须谨慎使用它们，具体取决于它们操作数组的方式。有些方法依赖于不可变性，而另一些则使用可变性。了解它们如何操作数据可以帮助我们构建可预测的应用程序。
在这篇文章中，我将引导您了解变异器和非变异器数组方法及其返回值。
请注意，本文并非数组方法的入门介绍。我将重点介绍可变性和不可变性。因此，如果您不熟悉数组方法，本文可能会对您有所帮助。
否则，我们就开始吧。
变量数组方法
以下方法将修改数组。
种类（）
它对数组的元素进行排序。
返回值：排序后的数组。
const myAwesomeArray = [5, 4, 3, 2, 1]
// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//------->return value: [1, 2, 3, 4, 5]
取消移位（）
它将一个或多个元素添加到数组的开头。
返回值：数组的新长度。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.unshift(6)
//------->return value: (6)
转移（）
它从数组中删除第一个元素。
返回值：被删除的元素或者undefined数组是否为空。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.shift()
//------->return value: (5)
拼接（）
它删除或替换现有元素和/或添加新元素。
返回值：包含被删除元素的数组。如果没有元素被删除，则返回一个空数组。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.splice(0, 1, 8)
//------->return value: [5]
推（）
它将一个或多个元素添加到数组的末尾。
返回值：数组的新长度。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.push(7)
//------->return value: (6)
撤销（）
它反转一个数组。
返回值：反转后的数组。
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
//------->return value: ['a', 'b', 'c', 'd', 'e']
流行音乐（）
它从数组中删除最后一个元素。
返回值：从数组中删除的元素或者undefined数组是否为空。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.pop()
//------->return value: 1
充满（）
它用相同的值填充数组的所有元素。
返回值：修改后的数组。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.fill(0, 1, 3)
//------->return value: [1, 0, 0, 4, 5]
forEach()
它将一个函数应用于数组的每个元素。
返回值：返回undefined。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.forEach(element => console.log(element.name))
//------->return value: undefined
非改变数组的方法
以下方法不会修改数组并返回数组的一些表示形式。
片（）
它提取给定数组的一部分。
返回值：包含提取元素的新数组。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.slice(0, 3)
//------->return value: [1, 2, 3]
加入（）
它将数组的所有元素连接成一个字符串。
返回值：所有数组元素连接在一起的字符串，如果数组为空，则返回空字符串。
const myAwesomeArray = ["JavaScript", "is", "awesome"]
myAwesomeArray.join(" ")
//------->return value: "JavaScript is awesome"
包括（）
它确定数组是否包含给定值。
返回值：返回布尔值true或false。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
//------->return value: 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")
//-------> return value : [{id: 3, name: "Mass"},
// {id: 4, name: "Mass"}]
连接（）
它将通过连接来合并两个或多个数组/值。
返回值：连接数组/值的新数组。
const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> return value : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
每一个（）
它检查数组中的所有元素是否通过测试函数。
返回值：返回布尔值true或false。
const myAwesomeArray = ["a", "a", "a", "a", "a"]
myAwesomeArray.every(test => test === "a")
//-------> return value : true
寻找（）
它找到满足所提供的测试功能的元素。
返回值：第一个满足测试函数的元素，否则返回undefined。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.find(element => element.id === 3)
//-------> return value : {id: 3, name: "Mass"}
查找索引（）
它返回找到的并且满足测试函数的元素的索引。
返回值：第一个满足测试函数的元素的索引，否则返回-1。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.findIndex(element => element.id === 3)
//-------> return value : 2
地图（）
它以函数作为参数，该函数将在数组的所有元素上运行。
返回值：一个新数组，包含回调函数结果的每个元素。
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
//-------> return value : [25, 16, 9, 4, 1]
减少（）
它对数组的每个元素执行一个 reducer 函数。
返回值：数组减少后产生的单个值。
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value)
//-------> return value = 120
一些（）
它确定数组中是否至少有一个元素与测试函数匹配。
返回值：返回布尔值true或false。
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
//-------> return value : true
平坦的（）
它将所有子数组元素平铺到新数组中。
返回值：一个包含子数组元素连接的新数组。
const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat()
//-------> return value : [1, 2, 3, 4, 5]
平面地图（）
它将一个函数应用于数组的每个元素，然后将结果展平为一个数组。
返回值：一个新数组，其中每个元素都是回调函数的结果并被展平。
const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10)
//-------> return value : [10, 20, 30, 40, 50]