JS数组操作详解-优快云博客

本文详细介绍JavaScript数组的各种操作方法，包括添加、删除、排序、映射、过滤等，并提供了丰富的示例代码，帮助开发者快速掌握数组处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组知识

数组

添加元素

// 在数组最后面添加
arr.push('element')

// 在数组最前面添加
arr.unshift('element')

// js 数组没有 insert 方法，需要通过 splice 间接的实现
let array = [1,2,3,4,5,"张三","李四","王五"]
Array.prototype.insert = function(index, value){
    this.splice(index,0, value);
}
console.log(array); //[1, 2, 3, 4, 5, "张三", "李四", "王五"]
array.insert(4, 10);
console.log(array); //[1, 2, 3, 4, 10, 5, "张三", "李四", "王五"]

删除元素

//删除尾部元素

var array = ['草莓','香蕉','苹果','西瓜','番茄','葡萄'];
array.pop();
console.log(array);//['草莓','香蕉','苹果','西瓜','番茄'];

//删除头部元素

var array = ['草莓','香蕉','苹果','西瓜','番茄','葡萄'];
array.shift();
console.log(array);//['香蕉','苹果','西瓜','番茄','葡萄'];

//删除指定下标的元素
let arr=[1,2,3,4,5,6];
let splice = arr.splice(1,1);//删除从下标1开始，1个元素
console.log(arr);//[1, 3, 4, 5, 6]
console.log(splice);//[2]

合并数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
//1) concat:合并数组
console.log(arr1.concat(arr2,arr3));//[1, 2, 3, 4, 5, 6, 7, 8, 9]

//...方法
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
//2）...:扩展运算符合并数组
console.log([...arr1,...arr2,...arr3])//[1, 2, 3, 4, 5, 6, 7, 8, 9]

判断是否包含某个元素

//indexOf:是否包含某个元素，包含返回下标，不包含返回-1

let arr = [1,2,3,4,5];
console.log(arr.indexOf(1)); //0      元素为1的下标
console.log(arr.indexOf(10)); //-1    不存在

//includes：是否包含某个元素，包含返回true，不包含返回false
let arr = [1,2,3,4,5];
console.log(arr.includes(1)); //true
console.log(arr.includes(10)); //false
console.log(arr.includes('1')); //false

将类数组转化为数组

let obj = {0:'小明',1:'小红',2:'小丽',3:'小兰','length':4};
console.log(Array.from(obj)); //["小明", "小红", "小丽", "小兰"]

判断是否为数组

let obj = {0:'小明',1:'小红',2:'小丽',3:'小兰','length':4};
console.log(Array.isArray(obj));//false

foreach 遍历数组

var array =[
                {
                    id:'001',
                    name:'小新',
                    age:5
                },
                {
                    id:'002',
                    name:'小葵',
                    age:1
                },
                {
                    id:'003',
                    name:'美冴',
                    age:28
                },
                {
                    id:'004',
                    name:'广志',
                    age:30
                },
            ];

array.forEach((value,key) => {
  console.log(key);
  console.log(value);
  //console.log(value.name);
});

value，key 的名字是自己命名的，位置不能调换

打印结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHNjmjbr-1667555424724)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221104085714611.png)]

sort 数组排序

let arr = [44,23,21,45,67,1];
const arr1 = arr.sort((a,b)=>{
    //从小到大排序
    return a-b;
})

const arr2 = arr.sort((a,b)=>{
    return b-a;
})


console.log(arr1);//[1, 21, 23, 44, 45, 67]
console.log(arr2);//[67, 45, 44, 23, 21, 1]

一定要写成array.sort((a,b)=>{return a-b})

若是array.sort()；只会对数字的第一位进行排序

map 映射一个新数组

使数组中每个人的年龄 +1

var array =[
                {
                    id:'001',
                    name:'小新',
                    age:5
                },
                {
                    id:'002',
                    name:'小葵',
                    age:1
                },
                {
                    id:'003',
                    name:'美冴',
                    age:28
                },
                {
                    id:'004',
                    name:'广志',
                    age:30
                },
            ];

let newArr = array.map((v)=>{
    v.age = v.age+1;
    return v;
})

当数组中元素是值类型，map不会改变原数组；当是引用类型，则可以改变原数组（具体看浅拷贝和深拷贝）

reduce()累加器

let arr=[1,2,3,4];
let b=arr.reduce((pre,cur)=>pre + cur)
console.log(b);//10

分隔符

var arr = [1,2,3,4,5,6,7];
var str = arr.join("★"); //转为字符串用新变量接收
console.log(str);//1★2★3★4★5★6★7

splice

splice 删除写法

array.splice(index,n)；
参数含义，index：数组中需要删除数据的起始位置；
n：需要删除的元素，数据的个数；

let a=[1,2,3,4];
let b=a.splice(0,2);
console.log(b); //[1,2]   这是输出删除的元素
console.log(a); // 这是输出删除完的原数组

splice插入写法，array.splice(index,0,data1,data2,…)；
参数含义，index：数组中需要插入数据的起始位置；
0：删除的个数为0；
data1,data2：需要插入的元素，用逗号隔开
```
let a=[1,2,3,4];
a.splice(2,0,[2,3,4]);
console.log(a);//[1,2,[2,3,4],3,4]
```
splice替换写法，array.splice(index,n,data1,data2,…)；
参数含义，index：需要替换的元素的起始位置；
n：需要替换的元素的个数，实质是删除；
data1，data2：需要插入元素，用逗号隔开；
```
let a=[1,2,3,4];
a.splice(2,2,8);
console.log(a);//[1,2,8]
```

过滤元素

filter 过滤元素

将所有元素进行判断，将满足条件的作为一个新的数组返回

let newArr = array.filter((v)=>{
    return v.age>20;
})
console.log(newArr)

find 过滤元素

与 filter 不同的是，他找到第一个满足条件的值就不在继续寻找

let newArr = array.find((v)=>{
    return v.age>20;
})

some 过滤元素

与 find 类似，找到满足条件的值就返回 true

let newArr = array.some((v)=>{
    return v.age>20;
})

every 过滤元素

只有当数组中所有的值都满足条件，才返回 true

let newArr = array.every((v)=>{
    return v.age>20;
})

findIndex 过滤元素

找到满足条件的元素，返回该元素的索引位置

let arr=[1,2,3,4,5]
let b=arr.findIndex((i,index)=>{
    return i == 3
})
console.log(b);

前端开发中常用的数组方法

场景1

获取一个数组中全部的商品名称

// 商品信息数组

const Material_Array=[
       {MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
       {MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
       {MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
       {MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]

const material_name= Material_Array.map(e=>e.MaterialName)
console.log(materials_name)

结果如图：
在这里插入图片描述

如何获取数组中的两个属性的值

想法：将不需要的属性值删除掉

第一种方法 for 循环

const Material_Array=[
       {MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
       {MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
       {MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
       {MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]

for (const i in Material_Array) {
   // 删除id属性
   delete Material_Array[i].MaterialCode;
}

console.log(Material_Array);

第二种方法 map数组方法

第一种方法

const Material_Array=[
       {MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
       {MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
       {MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
       {MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]


let new_Material_Array = JSON.parse(JSON.stringify(Material_Array)) //数组是引用类型, 深拷贝一下
 
new_Material_Array.map(e => { delete e.MaterialName }) //然后删除属性

console.log(new_Material_Array);

插入对两个概念的解释

引用数据类型

JS分为两种数据类型：

基本数据类型

基本数据类型在上一篇文章中已经介绍，其包括：

Number

String

Boolean

Null

Undefined

Symbol(ES6中的语法，后续文章中会介绍)

基本数据类型 - 键值储存在栈内存中，当复制时栈内存会开辟一个新的内存空间，所以修改原值时，复制的值不会随之变化

在这里插入图片描述

引用数据类型

引用数据类型即 Object ，在JS中，所有除了基本数据类型外的数据类型都属于Object，例如数组、函数方法、对象等。

引用数据类型 - 键储存在栈内存中，值储存在堆内存中，但是栈内存会提供一个引用的地址来指向堆内存中的值

在这里插入图片描述

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

当 a 进行修改时，由于 a 和 b 指向的是同一个地址，所以自然 b 也会受到影响

在这里插入图片描述

在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了

在这里插入图片描述

深、浅拷贝

如何区分深浅拷贝

A 复制 B，当 B 修改时，观察 A 是否跟着变化，如果 A 也跟着变化，那么就是深拷贝

深拷贝的格式
    // 深拷贝
      const form_copy = JSON.parse(JSON.stringify(this.form));

参考地址：https://blog.youkuaiyun.com/HelloWord176/article/details/103769515?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103769515-blog-117200611.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103769515-blog-117200611.pc_relevant_landingrelevant&utm_relevant_index=2

第三种方法 forEach 方法

const Material_Array=[
       {MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
       {MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
       {MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
       {MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]

Material_Array.forEach(item => {
  if (item.MaterialCode) {
	// 删除id属性
   delete item.MaterialCode;
  }
})

console.log(Material_Array);