JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问

南北极之间

已于 2022-03-29 10:24:46 修改

阅读量1.7k

点赞数 12

分类专栏：前端开发前端面试题前端进阶文章标签： es6 前端js数组数组常用方法前端面试题必考必问

于 2021-10-27 16:59:12 首次发布

本文链接：https://blog.csdn.net/qq_22182989/article/details/120995392

版权

前端开发同时被 3 个专栏收录

571 篇文章 52 订阅

订阅专栏

前端面试题

34 篇文章 21 订阅

订阅专栏

前端进阶

15 篇文章 4 订阅

订阅专栏

前端面试题汇总资料：需要资料的同学可以给我留言

在这里插入图片描述

正文：

请添加图片描述

1. Array.push()

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

一个：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi");
console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"]    
console.log(x)//5  x是 新的数组长度

多个：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi","Java");
console.log(fruits) //(6) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Java"]  
console.log(x)   // 6 x是 新的数组长度

2. Array.unshift()，

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

let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
    console.log(arr.length) //7
VM509:3 (7) [6, 7, 1, 2, 3, 4, 5]
VM509:4 7

3.pop()

删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。

pop() 方法从数组中删除最后一个元素。

pop() 方法的返回值是已删除的项目。

let arr = [1, 2, 3, 4, 5]
let r=arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
console.log(r)
VM561:3 (4) [1, 2, 3, 4]
VM561:4 4
VM561:5 5//删除的是5

4.Array.shift()，

删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。

let arr = [1, 2, 3, 4, 5]
let r=arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
console.log(r)
VM581:3 (4) [2, 3, 4, 5]
VM581:4 4
VM581:5 1

5.find()

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
console.log(ages.find(checkAdult));
console.log(ages);
VM109:7 18
VM109:8 (4) [3, 10, 18, 20]

资料：

JavaScript find() 方法

6.Array.concat(arr1,arr2…)，

合并两个或多个数组，生成一个新的数组。原数组不变。

let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]
VM590:4 (5) [1, 2, 3, 4, 5]

7.Array.join()，

将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

let arr = [1, 2, 3, 4, 5];
let str1 = arr.join('*')
let str2 = arr.join('-')
let str3 = arr.join('#')
console.log(str1)
console.log(str2)
console.log(str3)
VM739:5 1*2*3*4*5
VM739:6 1-2-3-4-5
VM739:7 1#2#3#4#5

8.Array.reverse()，

将数组倒序。原数组改变。

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

9.Array.sort()，

对数组元素进行排序。按照字符串UniCode码排序，原数组改变。

默认：

let arr=[2,3,5,1,4];
let newArr=arr.sort();
console.log(newArr,arr)//newArr=[1,2,3,4,5]; arr r=[1,2,3,4,5]
VM263:3 (5) [1, 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]

按照函数规则排序：

①从小到大

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

②从大到小

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return b - a;
});
console.log(numbers);
VM168:5 (5) [5, 4, 3, 2, 1]

③按照数组对象中的某个值进行排序

var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];

function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))
//打印结果：按照age排序
VM54:14 
(3) [{…}, {…}, {…}]
0: {name: "zopp", age: 0}
1: {name: "yjj", age: 8}
2: {name: "gpp", age: 18}
length: 3
__proto__: Array(0)

10.Array.map(function)，

 var arr = ['a','b','c','d'];
 arr.map(function(item,index,arr){   //参数含义同forEach
        console.log(item);
        console.log(index);
    });
VM175:3 a
VM175:4 0
VM175:3 b
VM175:4 1
VM175:3 c
VM175:4 2
VM175:3 d
VM175:4 3

原数组的每一项执行函数后，返回一个新的数组。原数组不变。（注意该方法和forEach的区别）。

map和forEach的区别

map方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
forEach方法返回值则永远是undefined。

11.Array.slice(start,end)，

从start开始，end之前结束，不到end；如果不给end值，从start开始到数组结束。start可以给负值，-1表示数组最后位置，-2表示倒数第二个，以此类推，顾前不顾后。

在数组中添加删除或替换元素
splice();在任意位置添加或删除元素,返回删除或被替换的值，如果没有被删除或替换则返回空数组;
splice()方法会修改原数组的值;
只有一个值时，从当前位置删除到数组末尾

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

VM390:3 (4) [2, 3, 4, 5] [1]

有两个值时，第一个值为删除的位置，第二个值为删除的个数;

let arr=[1,2,3,4,5]
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1,arr);// num1=[3,4,5],arr=[1,2]
VM183:3 (3) [3, 4, 5] (2) [1, 2]

有三个或者多个值时，第一个值为插入元素的位置，第二个值为替换的个数，后面的值都为插入的新元素；

let arr=[1,2,3,4,5]
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8

//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2,arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]
VM197:5 [3] (7) [1, 2, 6, 7, 8, 4, 5]

截取复制数组指定位置的内容
slice(开始位置，结束位置)；第二个参数不写默认到尾部,只能从前往后截取；返回的值为截取到的内容形成的新数组;

let arr=[1,2,3,4,5]
let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr,copyArr)//newArr=[2,3];arr=[1,2,3,4,5];
VM249:4 (2) [2, 3] (5) [1, 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]

12.Array.splice(index,howmany,arr1,arr2…) ，

删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。

参数描述
index 必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany 可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
arr1, …, arr2可选。要添加到数组中的新项目。

13.Array.forEach(function)，

用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    console.log(`数组第${index+1}个元素是${item}`);
 })
    console.log(res);//forEach的返回值为undefined,
VM238:3 数组第1个元素是1
VM238:3 数组第2个元素是3
VM238:3 数组第3个元素是5
VM238:3 数组第4个元素是13
VM238:3 数组第5个元素是2

14.Array.filter(function)，

过滤数组中，符合条件的元素并返回一个新的数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}
console.log(ages.filter(checkAdult))
VM57:6 (3) [32, 33, 40]

单一参数的单行箭头函数

如下段代码所示，很简单：

const fn= foo =>`${foo} world`;

这是箭头函数最简洁的形式，常用于用作简单的处理函数，如过滤。如下段代码所示：

let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);

15.Array.every(function)，

对数组中的每一项进行判断，若都符合则返回true，否则返回false。
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}
console.log(ages.every(checkAdult))
VM54:6 false

16.Array.some(function)，

对数组中的每一项进行判断，若都不符合则返回false，否则返回true。
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}
console.log(ages.some(checkAdult))
VM54:6 true

Array.every和Array.some的区别

方法区别

every() 每一项都返回true才返回true
some() 只要有一项返回true就返回true

17.Array.reduce(function)，

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum)
VM937:4 15

18.Array.isArray()

isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true，否则返回 false。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
console.log(Array.isArray(fruits))
VM78:3 true

19.Array.forEach()

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
console.log(`数组第${index+1}个元素是${item}`);
    })
console.log(res);//forEach的返回值为undefined,
VM437:3 数组第1个元素是1
VM437:3 数组第2个元素是3
VM437:3 数组第3个元素是5
VM437:3 数组第4个元素是13
VM437:3 数组第5个元素是2
VM437:5 undefined //敲黑板——forEach()是没有返回值的！

20.Array.toString()

此方法将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(arr)
console.log(str)

VM680:3 (5) [1, 2, 3, 4, 5]
VM680:4 1,2,3,4,5

观察颜色：字符串和数字的颜色不同：
在这里插入图片描述

参考：

JavaScript 数组方法

js数组常用方法整理
 js中数组常用方法总结
 js中forEach，for in，for of循环的用法和区别（一个比较神奇的例子）
JS中 reduce() 的用法

简述forEach()、map()、every()、some()和filter()的用法
 自定义ES6提供的数组方法（forEach、filter、map、some、every、find、findIndex）

南北极之间

关注

12
点赞
踩
60

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问

1.　Array.push()向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。一个：var fruits = ["Banana", "Orange", "Apple", "Mango"];var x=fruits.push("Kiwi");console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"] console.log(x)//5 x是新的数组长度多个：var fruits =
复制链接

扫一扫