javaScript中数组常用方法的详细归纳

最新推荐文章于 2024-08-13 16:15:07 发布

宣宣丿

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量179

点赞数 1

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_67644104/article/details/129752487

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javaScript中数组常用方法详细归纳总结

一、改变原数组方法

1.push()

向数组末尾添加一个或多个元素，并返回新的数组长度，添加多个元素时用 " , " 隔开。

push()方法会改变原数组，即向原数组中添加一个或多个元素。

语法：

array.push(element1, element2, ... , elementN)

示例：

let arr = [1,2,3,4];
let length = arr.push(8,9)
console.log(arr);     // [ 1, 2, 3, 4, 8, 9 ]
console.log(length);  // 6

2.pop()

从数组末尾移除一个元素，并返回该元素。

pop()方法会改变原数组，即从原数组中移除一个元素。

语法：

array.pop()

示例：

let arr = [10,20,30,40];
let res = arr.pop()
console.log(arr);     // [ 10, 20, 30 ]
console.log(res);     // 40

注意：

如果pop()方法应用于一个空数组，它将返回undefined。因此，在使用pop()方法前，最好先检查数组是否为空

3.shift()

从数组开头移除一个元素，并返回该元素。

shift()方法会改变原数组，即从原数组中移除一个元素。

语法：

array.shift()

示例：

let arr = [10,20,30,40];
let res = arr.shift()
console.log(arr);     // [ 20, 30, 40 ]
console.log(res);     // 10

注意：

如果shift()方法应用于一个空数组，它将返回undefined。因此，在使用shift()方法前，最好先检查数组是否为空

4.unshift()

向数组开头添加一个或多个元素，并返回新的数组长度，添加多个元素时用 " , " 隔开。

unshift()方法会改变原数组，即向原数组开头添加一个或多个元素。

语法：

array.unshift(element1, element2, ... , elementN)

示例：

let arr = [10,20,30,40];
let length = arr.unshift(100,200)
console.log(arr);     // [ 100, 200, 10, 20, 30, 40 ]
console.log(length);  // 6

5.splice()

向数组中添加或删除元素，并返回被删除的元素。

splice()方法会改变原数组，即向原数组中添加或删除元素。

语法：

array.splice(start, deleteCount, item1, item2, ..., itemN)

参数说明：

start：必需，表示从哪个位置开始添加或删除元素，可以是负数（表示从末尾开始计算）。
deleteCount：可选，表示要删除多少个元素，默认为0，如果为负数，则表示从start位置添加元素，而不是删除元素。
item1, item2, …, itemN：可选，表示要添加到数组中的元素。

返回值：

返回一个由被删除元素组成的数组，如果没有删除任何元素，则返回空数组。

示例：

let arr = [1, 2, 3, 4, 5];
let deleted = arr.splice(1, 2, 'a', 'b', 'c');
console.log(deleted); // 输出 [2, 3]
console.log(arr);     // 输出 [1, 'a', 'b', 'c', 4, 5]

容易看出，splice()方法可以用于添加、删除或替换数组中的元素。

6.reverse()

反转数组中元素的顺序，并返回反转后的数组。

reverse()方法同时会改变原数组

语法：

array.reverse()

示例：

let arr = [1, 2, 3, 4, 5];
let res = arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
console.log(res); // [5, 4, 3, 2, 1]

7.sort()

用于对数组进行排序，会改变原数组

语法：

array.sort(compareFunction)

参数说明：

compareFunction：可选参数，表示排序时要使用的比较函数。如果省略该参数，则按照ASCII字符顺序进行排序。

返回值：

此方法会修改原数组，也会返回排序后的新数组。

比较函数的参数：

a：表示当前比较的元素。
b：表示下一个比较的元素。

比较函数的返回值：

如果返回值小于0，则a排在b前面。
如果返回值等于0，则a和b的顺序不变。
如果返回值大于0，则b排在a前面。

示例：

1.compareFunction比较函数被省略，则按ASCII字符顺序排序

let arr = ['banana', 'apple', 'orange', 'pear'];
arr.sort();
console.log(arr); // ['apple', 'banana', 'orange', 'pear']

2.如果一个数组元素是数字，此时还是用sort()为数组排序：

let arr = [1, 3, 15, 4, 2];
arr.sort();
console.log(arr); // [ 1, 15, 2, 3, 4 ]

之所以出现这种情况，是因为sort(方法会调用每个数组项的toString()方法，得到字符串，然后再对得到的字符串进行排序。虽然数值15比3大，但在进行字符串比较时"15"则排在"3"前面（ASCII字符顺序）。

此时，compareFunction比较函数就起到了作用：

let arr = [1, 3, 15, 4, 2];
arr.sort(function(a,b){
  return a-b
});
console.log(arr); // [ 1, 2, 3, 4, 15 ]

3.按对象属性排序

let arr = [
  {name: 'Tom', age: 20},
  {name: 'Jerry', age: 18},
  {name: 'Lucy', age: 22}
];
arr.sort(function(a, b) {
  return a.age - b.age;
});
console.log(arr); // [{name: 'Jerry', age: 18}, {name: 'Tom', age: 20}, {name: 'Lucy', age: 22}]

二、不改变原数组的方法

1.slice()

从原数组中截取一段元素，生成一个新的数组。不会修改原数组。

语法：

array.slice(start, end)

参数说明：

start：必选参数，表示截取的起始位置（包含start元素）。如果为负数，则表示从后往前数的位置，例如-1表示倒数第一个元素。
end：可选参数，表示截取的结束位置（不包含end元素）。如果省略该参数，则截取到数组末尾。如果为负数，则表示从后往前数的位置，例如-1表示倒数第一个元素。

返回值：

该方法会返回一个新的数组。

示例：

let arr = ['apple', 'banana', 'orange', 'pear', 'grape'];
let newArr = arr.slice(1, 3);
console.log(newArr); // ['banana', 'orange']
console.log(arr); // ['apple', 'banana', 'orange', 'pear', 'grape']

2.concat()

将两个或多个数组合并成一个新数组，并返回新数组。不会修改原数组。

语法：

array.concat(array1, array2, ..., arrayN)

参数说明：

array1, array2, …, arrayN：可选参数，表示要合并的一个或多个数组。

返回值：

该方法会返回一个新的数组，新数组中包含原数组和所有参数数组中的元素。

示例：

let arr1 = ['apple', 'banana'];
let arr2 = ['orange', 'pear'];
let arr3 = ['grape'];
let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // ['apple', 'banana', 'orange', 'pear', 'grape']
console.log(arr1); // ['apple', 'banana']
console.log(arr2); // ['orange', 'pear']
console.log(arr3); // ['grape']

3.join()

将数组中的所有元素转换为一个字符串，并返回该字符串。不会修改原数组。

语法：

array.join(separator)

参数说明：

separator：可选参数，表示元素之间的分隔符，默认为逗号。

返回值：

该方法会返回一个字符串，该字符串由数组中所有元素组成，元素之间使用separator分隔。

示例：

let arr = ['apple', 'banana', 'orange'];
let str1 = arr.join('-');
let str2 = arr.join();
console.log(str1); // 输出：'apple-banana-orange'
console.log(str2); // 输出：'apple,banana,orange'

4.indexOf()

查找指定的元素在数组中第一次出现的位置（索引）。不会修改原数组。

语法：

array.indexOf(searchElement, fromIndex)

参数说明：

searchElement：要查找的元素
fromIndex：可选参数，起始查找的索引

返回值：

返回指定元素在数组中第一次出现的位置，如果不存在则返回-1。

示例：

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出：2
console.log(arr.indexOf(6)); // 输出：-1
console.log(arr.indexOf(3, 2)); // 输出：2 （从索引2开始查找）
console.log(arr.indexOf(3, 3)); // 输出：-1 （从索引3开始查找，但是没找到）

注意：

indexOf()方法使用“全等比较”（===）来判断元素是否相等，因此对于复杂类型的元素（如对象、数组等），只有在引用地址相同的情况下才能被认为是相等的。

5.lastIndexOf()

查找指定元素在数组中最后一次出现的位置（索引）。

其他同indexOf()方法。

三、数组迭代方法（不改变原数组）

1.filter()

筛选数组中符合条件的元素，返回一个新的数组。

语法：

array.filter(callback(element, index, array){ return 条件（布尔值）})

参数：

callback：回调函数，用于判断数组中的每个元素是否满足条件，需要返回一个布尔值。回调函数接受以下三个参数：
element：当前元素的值。
index：当前元素的索引。
array：原数组。

返回值：

返回一个新的数组，包含满足条件的元素。

示例：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item) {
  return item > 2;
});
console.log(newArr); // 输出：[3, 4, 5]

注意：

callback函数中不应该修改原始数组的值

2.reduce()

接受一个回调函数作为参数，可以将数组中的元素迭代为单个值。

语法：

array.reduce(callback(prev,element, index, array){ },initialValue)

其中，callback 函数接收四个参数：

prev（累加器）：累加器累加回调函数的返回值。它是上一次调用回调函数时返回的值，或者是传递给 reduce() 方法的 initialValue。
element（当前值）：当前正在处理的元素。
index（当前索引）：当前正在处理的元素的索引。
array（原数组）：调用 reduce() 方法的数组。

initialValue 参数是可选的，如果传递了 initialValue，则作为第一次调用 callback 函数时的 accumulator 值。如果没有传递，则将使用数组的第一个元素作为初始值。

reduce() 方法执行时，从数组的第一个元素开始迭代，依次传递每个元素给回调函数。在每次迭代时，回调函数返回的值将成为下一次迭代时的 prev值。

最后，reduce() 方法返回 prev 的值。如果数组是空的，并且没有传递 initialValue，那么它将抛出 TypeError。如果数组只有一个元素（无论是否传递了 initialValue），则不执行回调函数，直接将这个元素作为 reduce() 方法的返回值。

示例，使用 reduce() 方法计算数组中所有元素的和：

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((prev, element) => {
  return prev + element;
}, 0);
console.log(sum); // 输出 15

3.find()

查找数组中满足条件的第一个元素，并返回该元素的值。如果没有找到满足条件的元素，则返回 undefined。

语法：

array.find(callback(element, index, array){ return 条件（布尔值）})

其中，callback 函数接收三个参数：

element（当前值）：当前正在处理的元素。
index（索引）：当前正在处理的元素的索引。
array（原数组）：调用 find() 方法的数组。

find() 方法执行时，从数组的第一个元素开始迭代，依次传递每个元素给回调函数。当回调函数返回 true 时，find() 方法返回该元素的值，并停止迭代。如果数组中没有满足条件的元素，则返回 undefined。

示例，使用 find() 方法查找数组中第一个大于 3 的元素：

let arr = [1, 2, 3, 4, 5];
let result = arr.find((element) => {
  return element > 3;
});
console.log(result); // 输出 4

注意：

find() 方法只会返回第一个满足条件的元素，并不会返回所有满足条件的元素。如果需要查找所有满足条件的元素，可以使用 filter() 方法。

4.findIndex()

查找数组中满足条件的第一个元素，并返回该元素的索引。如果没有找到满足条件的元素，则返回 -1。

其他同find()方法。

5.forEach()

用于对数组中的每个元素执行一次指定的操作。该方法没有返回值，只是在数组的每个元素上执行指定的操作，替代了for循环使用。

语法：

array.forEach(callback(element, index, array){ })

其中，callback 函数接收三个参数：

element（当前值）：当前正在处理的元素。
index（索引）：当前正在处理的元素的索引。
array（原数组）：调用 forEach() 方法的数组。

forEach() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的操作。在遍历过程中，不会对数组进行修改。

示例，使用 forEach() 方法对数组中的每个元素进行打印：

let arr = [1, 2, 3, 4, 5];
arr.forEach((element) => {
  console.log(element);
});

6.map()

对数组中的每个元素执行指定的操作，并将操作的结果存储在一个新的数组中。该方法返回一个新的数组，原数组不会被修改。

语法：

array.map(callback(element, index, array){ })

其中，callback 函数接收三个参数：

element（当前值）：当前正在处理的元素。
index（索引）：当前正在处理的元素的索引。
array（原数组）：调用 map() 方法的数组。

map() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的操作。在遍历过程中，将每个元素的操作结果存储在新的数组中，并返回该数组。

示例，使用 map() 方法将数组中的每个元素都平方，并将平方后的结果存储在新的数组中：

let arr = [1, 2, 3, 4, 5];
let res = arr.map((element) => {
  return element * element;
});
console.log(res); // 输出 [1, 4, 9, 16, 25]

7.some()

检测数组中是否至少有一个元素满足指定条件。该方法返回一个布尔值，如果有至少一个元素满足条件，则返回 true，否则返回 false。

语法：

array.some(callback(element, index, array){return 条件 })

其中，callback 函数接收三个参数：

element（当前值）：当前正在处理的元素。
index（索引）：当前正在处理的元素的索引。
array（原数组）：调用 some() 方法的数组。

some() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的判断条件。如果有至少一个元素满足条件，则返回 true，否则返回 false。

示例，使用 some() 方法检测数组中是否存在数字5：

let arr = [1, 2, 5, 4, 5, 6, 5];
let res = arr.some((element) => {
  console.log(element)
  return element === 5;
});
console.log(res); // 输出 1  2  5  true

注意：

some() 方法只要找到满足条件的元素就会停止遍历，不会继续执行。

8.every()

检测数组中是否所有元素都满足指定条件。该方法返回一个布尔值，如果所有元素都满足条件，则返回 true，否则返回 false。

语法：

array.every(callback(element, index, array){return 条件 })

其中，callback 函数接收三个参数：

element（当前值）：当前正在处理的元素。
index（索引）：当前正在处理的元素的索引。
array（原数组）：调用 every() 方法的数组。

every() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的判断条件。如果所有元素都满足条件，则返回 true，否则返回 false。

示例，使用 every() 方法检测数组中是否所有元素都为奇数：

let arr = [1, 3, 4, 7, 9];
let res = arr.every((element) => {
  console.log(element);
  return element % 2 === 1
});
console.log(res); // 输出 1  3  4  false