JavaScript数组常用方法总结及使用详解

方法简介

JavaScript中的数组是一种非常重要的数据类型，它提供了许多方法来处理和操作数组数据。下面是一些常用的JavaScript数组方法：

1. push(): 向数组末尾添加一个或多个元素，并返回新的数组长度。

2. pop(): 从数组末尾删除一个元素，并返回删除的元素。

3. shift(): 从数组开头删除一个元素，并返回删除的元素。

4. unshift(): 向数组开头添加一个或多个元素，并返回新的数组长度。

5. slice(): 从数组中复制一部分元素，并返回一个新的数组。

6. splice(): 在数组中添加或删除元素，并返回被删除元素的数组。

7. concat(): 连接两个或多个数组，并返回一个新的数组。

8. join(): 把数组中的所有元素转换为字符串，并用指定的分隔符分隔，返回字符串。

9. reverse(): 反转数组中元素的顺序，并返回反转后的数组。

10. sort(): 对数组元素进行排序，并返回排序后的数组。

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

12. lastIndexOf(): 返回指定元素在数组中最后一次出现的位置，如果不存在则返回-1。

13. filter(): 过滤数组中的元素，并返回符合条件的元素组成的新数组。

14. map(): 对数组中的每个元素进行操作，并返回一个新数组。

15. reduce(): 从左到右对数组中的元素进行操作，并返回一个值。

方法详解

1.push

push() 该方法向数组的末尾添加一个或多个元素，并返回新的数组长度。它的语法如下：arr.push(element1[, element2[, ...[, elementN]]])

let fruits = ['apple', 'banana', 'orange'];
let length = fruits.push('grape', 'pear');
console.log(fruits); // ["apple", "banana", "orange", "grape", "pear"]
console.log(length); // 5

2.pop()

该方法从数组的末尾删除一个元素，并返回删除的元素。它的语法如下：arr.pop()

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"

3.shift()

该方法从数组的开头删除一个元素，并返回删除的元素。它的语法如下：arr.shift()

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(fruits); // ["banana", "orange"]
console.log(firstFruit); // "apple"

4.unshift()

该方法向数组的开头添加一个或多个元素，并返回新的数组长度。它的语法如下：arr.unshift(element1[, element2[, ...[, elementN]]])

let fruits = ['apple', 'banana', 'orange'];
let length = fruits.unshift('grape', 'pear');
console.log(fruits); // ["grape", "pear", "apple", "banana", "orange"]
console.log(length); // 5

5.slice()

该方法从数组中复制一部分元素，并返回一个新的数组。它的语法如下：arr.slice([begin[, end]])

let fruits = ['apple', 'banana', 'orange', 'grape', 'pear'];
let slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // ["banana", "orange", "grape"]

6.splice()

该方法在数组中添加或删除元素，并返回被删除元素的数组。它的语法如下：arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

let fruits = ['apple', 'banana', 'orange', 'grape', 'pear'];
let removedFruits = fruits.splice(2, 2, 'kiwi', 'mango');
console.log(fruits); // ["apple", "banana", "kiwi", "mango", "pear"]
console.log(removedFruits); // ["orange", "grape"]

7.concat()

该方法连接两个或多个数组，并返回一个新的数组。它的语法如下：arr.concat(array1[, array2[, ...[, arrayN]]])

let fruits1 = ['apple', 'banana', 'orange'];
let fruits2 = ['grape', 'pear'];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ["apple", "banana", "orange", "grape", "pear"]

8.join()

该方法把数组中的所有元素转换为字符串，并用指定的分隔符分隔，返回字符串

let fruits = ['apple', 'banana', 'orange'];
let joinedFruits = fruits.join(', ');
console.log(joinedFruits); // "apple, banana, orange"

9.indexOf()

该方法返回数组中第一个找到的指定元素的索引，如果没找到则返回-1。它的语法如下：arr.indexOf(searchElement[, fromIndex])

let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index); // 1

10.lastIndexOf()

该方法返回数组中最后一个找到的指定元素的索引，如果没找到则返回-1。它的语法如下：arr.lastIndexOf(searchElement[, fromIndex])

let fruits = ['apple', 'banana', 'orange', 'banana'];
let index = fruits.lastIndexOf('banana');
console.log(index); // 3

11.includes()

该方法返回一个布尔值，表示数组是否包含指定元素。它的语法如下：arr.includes(searchElement[, fromIndex])

let fruits = ['apple', 'banana', 'orange'];
let hasBanana = fruits.includes('banana');
console.log(hasBanana); // true

12.forEach()

该方法对数组中的每个元素执行指定的操作。它的语法如下：arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit, index) {
  console.log(index + ": " + fruit);
});
// 0: apple
// 1: banana
// 2: orange

13.map()

该方法创建一个新数组，其中的元素是对原数组中的每个元素应用指定的操作后的结果。它的语法如下：arr.map(callback(currentValue[, index[, array]])[, thisArg])

let numbers = [1, 2, 3];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6]

14.filter()

该方法创建一个新数组，其中的元素是原数组中符合指定条件的元素。它的语法如下：arr.filter(callback(currentValue[, index[, array]])[, thisArg])

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 == 0;
});
console.log(evenNumbers); // [2, 4]

15.reduce()

该方法对数组中的元素逐个执行指定的操作，返回一个累积的结果。它的语法如下：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

let arr = [1, 2, 3, 4, 5];

// 删除 reduce 的初始值（没有 0）
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

题尾

分享今天学的一首诗

月夜

唐 杜甫

 今夜鄜州月，闺中只独看。
 遥怜小儿女，未解忆长安。
 香雾云鬟湿，清辉玉臂寒。
  何时倚虚幌，双照泪痕干。

 　这首诗借看月而抒离情，但抒发的不是一般情况下的夫妇离别之情。字里行间，表现出时代的特征，离乱之痛和内心之忧熔于一炉，对月惆怅，忧叹愁思，而希望则寄托于不知“何时”的未来。