数组常用的20个方法

最新推荐文章于 2026-03-08 08:53:17 发布

原创最新推荐文章于 2026-03-08 08:53:17 发布 · 1.2k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

1.join( )

用于把数组的所有元素连接并转换成字符串。
默认用逗号作为分隔符。
如果分隔符是空字符串，则所有元素之间没有任何字符。

    var arr = [1, 2, 3];
    console.log(arr.join()); // 返回 1,2,3
    console.log(arr.join('')); // 返回 123
    console.log(arr.join('-')); // 返回 1-2-3

2. map( )

返回一个新的数组,有返回值。
并且此方法不会改变原数组。

var arr = [1, 2, 3, 4];
    var arr2 = arr.map((item,index,array) => {
        // item 是遍历的数组内容  
        // index 是对应元素在数组中的下标 
        // array 是数组本身
        return item * 2
    });
    console.log(arr); // 返回 [1, 2, 3, 4]
    console.log(arr2); // 返回 [2, 4, 6, 8]

3. forEach( )

对数组进行遍历循环,没有返回值。

    var arr = [11, 22, 33, 44, 55, 66];
    var arr2 = arr.forEach((item, index, array) => {
        // item是遍历的数组内容 
         // index是对应元素在数组中的下标  
        // array是数组本身
        console.log(item, index, array);
        // 打印结果:
        // 11 0 [11, 22, 33, 44, 55, 66]
        // 22 1 [11, 22, 33, 44, 55, 66]
        // 33 2 [11, 22, 33, 44, 55, 66]
        // 44 3 [11, 22, 33, 44, 55, 66]
        // 55 4 [11, 22, 33, 44, 55, 66]
        // 66 5 [11, 22, 33, 44, 55, 66]
    });

4. filter( )

有过滤遍历功能，返回满足过滤条件的元素，并组成数组。

    var arr = [1, 2, 3, 4, 5, 6, 7, 8];
    var arr2 = arr.filter((item, index) => {
        return item > 5 
    });
    console.log(arr2); // 返回值 [6, 7, 8]

5. push( )

从数组的末尾向数组添加元素，可以添加一个或者多个元素。

    var arr = [1];
    arr.push(2);
    console.log(arr); // 返回值 [1, 2]
    arr.push(3, 4, 5);
    console.log(arr); // 返回值 [1, 2, 3, 4, 5]

6. pop( )

用于删除数组的最后一个元素,并返回删除的元素。

    var arr = ["Lily", "lucy", "Tom"];
    var arr2 = arr.pop();
    console.log(arr); // 返回值 ['Lily', 'lucy']
    console.log(arr2); // 返回值 Tom

7. shift( )

用于把数组的第一个元素删除，并返回第一个元素的值。

    var arr = ["Tom", "Jack", "Sean"];
    var arr2 = arr.shift();
    console.log(arr); // 返回值 ['Jack', 'Sean']
    console.log(arr2); // 返回值 Tom

8. unshift( )

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

    var arr = ["Tom", "Jack", "Sean"];
    var arr2 = arr.unshift('lisi');
    console.log(arr); // 返回值 ['lisi', 'Tom', 'Jack', 'Sean'];
 
    var arr3 = arr.unshift('zhaoliu', 'wangwu');
    console.log(arr); // 返回值  ['zhaoliu', 'wangwu', 'lisi', 'Tom', 'Jack', 'Sean'];
 
    console.log(arr2, arr3); // 返回值 4 6

9.some( )
用于判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false。
**注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);
callback默认有三个参数，分别为 value，index，self。

    var arr = [1, 2, 3, 4, 5, 6];
    var bool = arr.some((value, index, self) => {
        // value 是遍历的数组内容
        // index 是对应元素在数组中的下标 
        // self 是数组本身
        return value > 5
    })
    console.log(bool) //返回值 true; 
 
    var bool2 = arr.some((value, index, self) => {
        return value > 6
    })
    console.log(bool2) //返回值 false;

10. sort( )

用于对数组的元素进行排序。
排序顺序可以是数字或者字母，并按升序或降序进行排序。
默认排序顺序为升序。

    var arr = [1, 9, 5, 3, 7];
    var arr2 = ['z', 'a', 'f', 'b', 'h', 'x'];
    // 默认排序
    console.log(arr.sort()); // 返回值 [1, 3, 5, 7, 9]
    console.log(arr2.sort()); // 返回值 ['a', 'b', 'f', 'h', 'x', 'z']

11.slice( )

通过索引位置获取新的数组。
**原始数组不会被改变。
.slice(start,end) 可以接受一或两个参数（参数代表了数组元素的索引），即要返回元素的起始位置和结束位置。

    const arr = ['ant', 'bison', 'camel', 'duck', 'elephant'];

(1)在只有一个参数的情况下， .slice()方法返回从该参数指定位置开始到当前数组末尾的所有元素。

    console.log(arr.slice(2)); // 返回值 ["camel", "duck", "elephant"]

(2)如果有两个参数，该方法返回起始位置和结束位置之间的元素，但不包括结束位置的元素。

    console.log(arr.slice(1, 5)); // 返回值 ["bison", "camel", "duck", "elephant"]

(3)如果参数为负数：
第1个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2 指倒数第二个元素，以此类推。
第2个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2指倒数第二个元素，以此类推。

    console.log(arr.slice(-1)); // 返回值 ['elephant']
    console.log(arr.slice(1, -2)); // 返回值 ['bison', 'camel']
    console.log(arr); // 返回值 ['ant', 'bison', 'camel', 'duck', 'elephant'] (原数组没变)

12. splice()

是很强大的数组方法，可以实现删除、插入和替换。
**会改变原始数组。

(1)、删除元素,并返回删除的元素

     var arr = [1, 3, 5, 7, 9, 11];
     var arrRemoved = arr.splice(0, 2);
     console.log(arr);   // 返回值 [5, 7, 9, 11]
     console.log(arrRemoved);   // 返回值 [1, 3]

(2)、向指定索引处添加元素

    var array1 = [22, 3, 31, 12];
    array1.splice(1, 0, 12, 35);
    console.log(array1); // 返回值 [22, 12, 35, 3, 31, 12]

(3)、替换指定索引位置的元素

     const array1 = [22, 3, 31, 12];
     array1.splice(1, 1, 8);
     console.log(array1);  // 返回值 [22, 8, 31, 12]

13. reverse()

用于颠倒数组中元素的顺序。
**原数组会改变。

    var arr = [13, 24, 51, 3];
    console.log(arr.reverse());   // 返回值 [3, 51, 24, 13]
    console.log(arr);   //返回值 [3, 51, 24, 13] (原数组改变)

14. concat( )

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

(1)两个数组合并

    var arr = [1, 3, 5, 7];
    var brr = [11, 13]
    var arrCopy = arr.concat(brr);
    console.log(arrCopy);   // 返回值 [1, 3, 5, 7, 11, 13]
    console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

(2)多个数组合并

    const num1 = [1, 2, 3];
    const num2 = [4, 5, 6];
    const num3 = ['a', 'b', 'c'];
    const numbers = num1.concat(num2, num3);
    console.log(numbers);  // 返回值 [1, 2, 3, 4, 5, 6, 'a', 'b', 'c']

15.every( )

用于判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true，否则返回false。

    const everyArr = [1, 30, 39, 29, 10, 13];
    const everyArrisBlow = everyArr.every((item) => {
        return item > 10 // 检测所有元素是否都大于10
    });
    console.log(everyArrisBlow); // 返回值 false

16. toString()

将值转为字符串。

场景1：数组转字符串
const arr = [1, 2, 3];
console.log(arr.toString()); // 输出: '1,2,3'

场景2：数字转字符串。

const num = 123;
console.log(num.toString()); // 输出: '123'

// 布尔值转字符串
console.log(true.toString()); // 输出: 'true'
注意：null 和 undefined 无法直接调用 .toString()。

17.indexof()

用于根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，则返回-1，如果找到了指定的数据则返回该数据的索引。

如果indexof有两个参数，indexof(searchElement,fromIndex),第一个参数表示要查找的元素（必需），第二个元素表示开始搜索的起始索引（可选），如果第二个参数是负数，表示从数组末尾倒数，如-2，表示从倒数第二个位置开始，如果第二个参数超出数组的长度，直接返回-1，不搜索。

    const indexofarr = ['ant', 'camel', 'bison', 'duck', 'bison'];
    console.log(indexofarr.indexOf('bison')); //返回值 2
    console.log(indexofarr.indexOf('bison', 3)); //返回值 4
 
    //如果不存在返回-1
    console.log(indexofarr.indexOf('giraffe')); //返回值 -1

18. lastIndexof()

用于从数组的末尾开始向前查找。

    var lastIndexOfarr = [1, 3, 4, 7, 7, 5, 3, 1];
    console.log(lastIndexOfarr.lastIndexOf(5, 4), 'lastIndexOf数组使用方法')

19.reduce()

用于对数组的每一个元素执行依次传入前一个元素计算返回值。

场景1：数组求和
// 查找 id 为 2 的用户
const numbers = [10, 20, 30];

// 求和
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 输出: 60
场景2：将数组转为对象（如统计元素频率）。

const fruits = ['apple', 'banana', 'apple', 'orange'];

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count); // 输出: { apple: 2, banana: 1, orange: 1 }

20.find（）

1、find返回数组中满足条件的第一个元素的值，否则返回undefined。

2、find方法对数组中的每个元素执行callback函数，并返回true的第一个元素值。

3、find不会改变原数组。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// 查找 id 为 2 的用户
const user = users.find(item => item.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/WZH15075051915/article/details/136290754

标签