JavaScript数组的常用方法

概述

在JavaScript中，数组是一个特殊的对象，继承自Object原型，但具有一些特殊的属性和方法，这些方法主要定义在Array.prototype上。

常用方法

unshift和push；shift和pop

相同：

四者均会修改原数组

不同：

push

向数组末尾添加一个或多个元素，并返回新的数组长度

const array = [1, 2, 3];  
const newLength = array.push(4);  
console.log(array); // 输出: [1, 2, 3, 4]  
console.log(newLength); // 输出: 4

 unshift

向数组开头添加一个或多个元素，并返回新的数组长度

const array = [2, 3, 4];  
const newLength = array.unshift(1);  
console.log(array); // 输出: [1, 2, 3, 4]  
console.log(newLength); // 输出: 4

pop

删除并返回数组的最后一个元素，如果数组为空，则返回undefined。

const array = [1, 2, 3, 4];  
const lastElement = array.pop();  
console.log(array); // 输出: [1, 2, 3]  
console.log(lastElement); // 输出: 4

shift

删除并返回数组的第一个元素，如果数组为空，则返回undefined。

const array = [1, 2, 3, 4];  
const firstElement = array.shift();  
console.log(array); // 输出: [2, 3, 4]  
console.log(firstElement); // 输出: 1

---

forEach和map；filter和find

相同：

1. 四者均会遍历数组；
2. 四者均接收一个回调函数作为参数（其中，回调函数可用箭头函数简化）；
3. 四者接收的回调参数均有三个特别传参；

无论是forEach和map，还是filter和find，都会在遍历数组的同时，成功打印出以下的相应值，以forEach为例：

let testArray = [1, 2, 3, 4]
testArray.forEach((item, index, array) => {
    console.log(item) //item元素当亲元素
    console.log(index) //index数组索引
    console.log(array) //array数组本身
})

let newArray = arr1.map((item, index, array) => {
    console.log(item) //item元素当亲元素
    console.log(index) //index数组索引
    console.log(array) //array数组本身
    return item * 2
})

不同：

forEach

不会返回新的数组

const array = [1, 2, 3, 4];  
array.forEach(element => console.log(element));  
// 输出: 1, 2, 3, 4

map

返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

const array = [1, 2, 3, 4];  
const doubled = array.map(element => element * 2);  
console.log(doubled); // 输出: [2, 4, 6, 8]

filter

返回一个新数组，其包含通过所提供函数实现的测试的所有元素

const array = [1, 2, 3, 4, 5];  
const evenNumbers = array.filter(element => element % 2 === 0);  
console.log(evenNumbers); // 输出: [2, 4]

find

返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

const array = [5, 12, 8, 130, 44];  
const found = array.find(element => element > 10);  
console.log(found); // 输出: 12

---

splice和slice

slice

1. 返回一个新的数组对象，这一对象是一个由begin到end（不包括end）的浅拷贝的原数组的片段。原数组不会被修改
2. slice方法可以接受两个数组索引作为参数：

• 第一个参数，起始索引。如果该参数为负数，则表示倒数（即从右向左数）
• 第二个参数，结束索引（截取内容不包括该位置），如果该参数被省略或大于原数组的长度，slice会一直提取到原数组末尾。

let sliceArr = [1, 2, 3, 4, 5]
let sliced1 = sliceArr.slice(0, 3)   //输出[1,2, 3]
let sliced2 = sliceArr.slice(1)      //输出[2,3,4,5]
let sliced4 = sliceArr.slice(-4, -1) //输出[2, 3,4]
let sliced3 = sliceArr.slice(-4)     //输出[2, 3,4,5]

splice

1. 通过删除现有元素和/或添加新元素来更改一个数组的内容。它会改变原数组
2. splice方法可以接受两个或更多参数：

• 第一个参数，开始删除元素的索引（从该索引处开始删除）

• 第二个参数，应该删除的元素的数量（如果省略，或者其值大于array.length - start，则从start开始到原数组末尾的所有元素都将被删除）

• 之后的参数（可选）是要添加进数组的新元素，从start位置开始

• splice会返回一个新数组，这个数组包含被删除的元素（如果没有删除元素，则返回一个空数组）

// 删除
let testArray = [1, 2, 3, 4, 5, 6]
let removed = testArray.splice(2, 3) // removed: [3, 4, 5]  //从2开始删除3个元素
console.log(testArray) // [1, 2, 6]
// 插入
let testArray = [1, 2, 3, 4, 5, 6]
let removed = testArray.splice(2, 0, 'a', 'b') // removed: []  //从2开始删除0个，插入'a', 'b'
console.log(testArray) // [1, 2, 'a', 'b', 3, 4, 5, 6]
// 替换
let testArray = [1, 2, 3, 4, 5, 6]
let removed = testArray.splice(2, 1, 'a', 'b') // removed: [3]  //从2开始删除1个，插入'a', 'b'
console.log(testArray) // [1, 2, 'a', 'b', 4, 5, 6]

---

sort和reverse

相同：

sort和reverse都会改变原数组。

不同：

reverse

1. 将数组中的元素顺序颠倒
2. 就地排序，也就是说，原数组会被修改。排序后的数组会替换原数组，而不是创建一个新的数组。

let testArray = [1, 2, 3, 4, 5]
testArray.reverse()
console.log(testArray) //输出[5, 4, 3, 2, 1]

sort  

    1. 默认排序

• 默认情况下，sort()会将数组元素（即使是数字）转换为字符串，然后按照字符串的Unicode码点顺序进行排序。这可能会导致非直观的排序结果

const arr = ['a', 3, '11', 'ab', '2', 1, '15']
arr.sort()
console.log(arr) // 输出:[1, '11', '15', '2', 3, 'a', 'ab']

     2.比较函数

• sort()方法可接受较函数作为参数。比较函数接受两个参数（假设为a,b），并根据这a,b的比较结果返回一个值来确定它们的排序顺序。

• 返回值 <  0，则a排在b之前；返回值 > 0，则b排在a之前。 返回值 = 0，则a和b的相对位置不变。由此可实现数组的升序和降序排列

const numbers = [40, 100, 1, 5, 25]
numbers.sort((a, b) => b - a)
console.log(numbers) // 输出: [100, 40, 25, 5, 1]

    3.就地排序

• 就地对数组进行排序，也就是说，原数组会被修改。排序后的数组会替换原数组，而不是创建一个新的数组。

---

indexOf和lastIndexOf

相同：

用于查找元素的索引位置

不同：

indexOf

• 在数组或字符串中查找子元素或子串，并返回其首次出现的索引
• 如果未找到该元素或子字符串，则返回 -1
• 可指定开始查找的位置索引

let fruits = ["Apple", "Banana", "Mango", "Orange", "Banana"];  
let index = fruits.indexOf("Banana");  
console.log(index); // 输出: 1  
  
// 使用 fromIndex  
index = fruits.indexOf("Banana", 2);  
console.log(index); // 输出: 4，因为从索引 2 开始查找

lastIndexOf

• 与 indexOf() 类似，但它从数组的末尾或字符串的末尾开始搜索元素或子串，并返回其最后一次出现的索引（即第一次查找到的索引）
• 如果未找到该元素或子字符串，则返回 -1

let fruits = ["Apple", "Banana", "Mango", "Orange", "Banana"];  
let index = fruits.lastIndexOf("Banana");  
console.log(index); // 输出: 4  
  
// 使用 fromIndex  
index = fruits.lastIndexOf("Banana", 2);  
console.log(index); // 输出: 1，因为从索引 2 开始向前搜索

---

reduce和 reduceRight

相同：

•  将数组中的所有元素归纳（或“缩减”）为单个值。
• 这两个方法都接受一个回调函数作为累加器，数组中的每个值（从左到右或从右到左）都会依次执行这个回调函数。不过，它们在遍历数组时的方向上是相反的。

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• callback：回调函数，可接收四个参数：
  • accumulator：累加器累加回调的返回值；它是上一次调用回调时返回的累积值，或initialValue（如果提供的话）
  • currentValue：数组中正在处理的元素
  • index（可选）：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则为1
  • array（可选）：调用reduce的数组
• initialValue（可选）：作为第一次调用callback函数时第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。注意：在这种情况下，callback函数将从索引1开始调用，数组的第一个元素将作为累加器的初始值，并且不会作为当前值传递给函数

不同：

reduce

数组从左到右执行回调函数，将其结果汇总为单个返回值

const array = [1, 2, 3, 4];  
const reducer = (accumulator, currentValue) => accumulator + currentValue;  
  
// 1 + 2 + 3 + 4  
console.log(array.reduce(reducer));  
// 输出: 10  
  
// 初始值为 10  
console.log(array.reduce(reducer, 10));  
// 输出: 20

reduceRight

语法与reduce() 相同，但遍历方向相反

const array = [[0, 1], [2, 3], [4, 5]];  
const flatten = (accumulator, currentValue) => accumulator.concat(currentValue);  
  
// 相当于 [[0, 1], [2, 3], [4, 5]].reduce(flatten, [])  
// 但由于 reduceRight，它先从右向左处理  
console.log(array.reduceRight(flatten, []));  
// 输出: [4, 5, 2, 3, 0, 1]

---

some和every

相同：

• 用于检测数组中的元素是否满足某种条件
• 不会改变原数组
• 都返回布尔值

不同：

some

• 检测数组中是否至少有一个元素满足指定的条件（函数提供）。一旦找到满足条件的元素，就会立即返回true，并且不再继续遍历数组。如果遍历了整个数组都没有找到满足条件的元素，则返回false。
• 如果数组为空，结果直接为false，因为没有任何元素可以检测

const numbers = [1, 2, 3, 4, 5];  
const hasEven = numbers.some(function(number) {  
  return number % 2 === 0;  
});  
console.log(hasEven); // 输出: true

every

检测数组中的所有元素是否都满足指定的条件（函数提供）。只有当所有元素都满足条件时，才返回true；如果有一个元素不满足条件，就会立即返回false，并且不再继续遍历数组。

• 只有当所有元素都满足条件时，才返回true。
• 如果数组为空，根据ECMAScript 2015及更新版本的规定，every()会返回true，因为技术上没有元素不满足条件。

const numbers = [2, 4, 6, 8, 10];  
const allEven = numbers.every(function(number) {  
  return number % 2 === 0;  
});  
console.log(allEven); // 输出: true

---

 join

将数组的元素连接成一个字符串，以指定的分隔符进行分隔。默认的分隔符是逗号。

const joinArr = [1,2,3,4,5]
console.log(joinArr.join());  //'1,2,3,4,5'

---

flat

用于将嵌套的数组“扁平化”，即将一个嵌套多层的数组转化为一个单层数组。

flat 方法接受一个参数，这个参数指定了要“扁平化”的层数。如果传递给 flat 的参数是 Infinity，则无论多少层嵌套的数组都会被扁平化为一维数组。

const arr = [1, [2, [3, [4]]]]
console.log(arr.flat())
// 输出: [1, 2, [3, [4]]]
console.log(arr.flat(2))
// 输出: [1, 2, 3, [4]]
console.log(arr.flat(Infinity))
// 输出: [1, 2, 3, 4]

注意：

1. flat 方法不会改变原数组。而是返回一个新数组
2. 如果原数组中的某些项不是数组，flat 方法会将这些项直接包含在返回的新数组中
3. 如果扁平化的层数大于实际嵌套的层数，当扁平化的层数大于实际嵌套的层数时，flat 方法会在完全扁平化数组后立即停止并返回结果，而不会继续无意义地调用扁平化函数

---

fill

fill()方法，用于将数组中的所有元素替换为指定的值。

const arr = new Array(3).fill(null)
console.log(arr)//[null, null, null]

---

contact

concat() 方法用于合并两个或多个数组。不会改变原数组，而是返回被合并数组的一个新数组。

var array1 = ['a', 'b', 'c']
var array2 = ['d', 'e', 'f']
var array3 = array1.concat(array2)
console.log(array3)
// 输出: ["a", "b", "c", "d", "e", "f"]
console.log(array1)
// 输出: ["a", "b", "c"] (原数组不会被修改)

---

includes

用于判断一个数组是否包含一个指定的值，根据情况，它会返回 true 或 false。这个方法不会改变原始数组。

arr.includes(searchElement[, fromIndex])

• searchElement：你想要在数组中查找的元素。

• fromIndex（可选）：从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索（即，从末尾开始往前跳 Math.abs(fromIndex) 个位置开始查找）。如果省略该参数，则默认为 0。

const arr = [1, 1, 2, 3, 4, 4, 3];
console.log(arr.includes(2));//true

console.log(arr.includes(2, 3));      //false

---

其他方法

除了上述这些定义在Array.prototype上的方法，还有一些常与JS数组操作相关的方法或操作

Array上的静态方法

定义在Array构造函数上的静态方法，这些方法不能通过数组实例来调用，而是应该通过 Array 构造函数来调用它。

Array.isArray

该方法用于确定一个值是否是一个数组，对于检测数组类型非常有用。

const testArray= []
console.log(Array.isArray(testArray)) //true

---

Array.from 

用于从类似数组或可迭代对象（如 Map、Set、String、TypedArray、NodeList 等）中创建一个新的、浅拷贝的数组实例。它提供了一种将类数组对象或可迭代对象转换为数组的简单方式。是 JS 中的一个非常有用的静态方法。

从类数组对象创建数组

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };  
  
// 不使用 Array.from()  
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  
  
// 使用 Array.from()  
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

使用 map 函数

let numbers = { length: 2, 0: 1, 1: 2 };  
  
// 使用 map 函数将每个元素加倍  
let doubled = Array.from(numbers, (x) => x * 2);  
  
console.log(doubled); // [2, 4]

字符串转换为数组

let str = 'hello';  
let strArray = Array.from(str);  
  
console.log(strArray); // ['h', 'e', 'l', 'l', 'o']

 Set 转换为数组

let set = new Set([1, 2, 3, 4, 5]);  
let arrayFromSet = Array.from(set);  
  
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

---

Array.of

• 该方法用于创建数组实例，基本与构造函数Array创建数组功能一致。

• 使用 Array() 构造函数时，如果只有一个数字参数，则它会被解释为数组的长度，新生成的数组会产生空槽位。而 Array.of() 则会创建一个包含该数字作为元素的新数组。

• 故其主要作用如下

创建包含单个元素的数组

//例一：
let arr = Array(2)
console.log(arr, arr.length, arr[0]) //[空 ×2] 2 undefined

let arr2 = Array.of(2)
console.log(arr2, arr2.length, arr2[0]) //[2]  1 2

//例二：
let arr = Array(0)
console.log(arr, arr.length, arr[0]) //[]  0 undefined

let arr2 = Array.of(0)
console.log(arr2, arr2.length, arr2[0]) //[0]  1 0

---

Math对象的方法

虽然Math对象的方法不是直接用于数组操作的，但你可以使用它们来处理数组中的数值

• Math.max(...array) 和 Math.min(...array)：使用扩展运算符（...）将数组元素作为单独的参数传递给Math.max()和Math.min()，以找到数组中的最大值和最小值。
• Math.floor(), Math.ceil(), Math.round()等：用于对数组中的数值进行四舍五入、向下取整或向上取整操作。

let numbers = [3.14, 4.99, -1.56, -2.45]
console.log(Math.max(...numbers)) //4.99
console.log(Math.min(...numbers)) //-2.45
console.log(numbers.map(Math.floor)) //  [3, 4, -2, -3]
console.log(numbers.map(Math.ceil)) //  [4, 5, -1, -2]
console.log(numbers.map(Math.round)) //  [3, 5, -2, -2]

---

 如有不足或遗漏，烦请私信或评论留言😊