数组常见操作：增、删、改、查（筛选），遍历，排序

原创已于 2023-02-22 13:57:38 修改 · 846 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-01-10 12:12:32 首次发布

本文介绍了JavaScript中数组的常见操作，包括push()和unshift()方法用于添加元素，splice()方法实现增加、删除和修改，concat()方法用于合并数组而不改变原数组，filter()方法进行筛选操作，以及foreach方法遍历数组，还有reverse()和sort()方法进行数组的排序。详细阐述了每个方法的使用方式和注意事项。

一，给数组添加元素

1.push()方法：将一个或者多个元素添加到数组末尾（修改原数组，返回数组长度）

let array1 = ['1']
let array2 = '字符串'
let array3 = ['5','6']
let array4 = {name:'张三',age:'16'}

console.log(array1.push(array2)) //添加字符串，返回索引：2
console.log(array1.push(array3)) //添加数组，返回索引：3
console.log(array1.push(array4)) //添加对象，返回索引：4

console.log(array1) //添加元素后的数组，返回值：['1','字符串',['5','6'],{name:'张三',age:'16'}]

2.unshift()方法：在数组开头添加一个或多个元素（修改原数组，返回数组的新长度）

let array1 = ['b','c']

console.log(array1.unshift('a'),array1) //打印 3 ['a','b','c']

二.数组增，删，改

2.1：splice()方法：数组增，删，改（修改原数组，返回修改后的数组）

1.删除：第一个参数（第一项位置），第二个参数（要删除几个）

array.splice(index,num) 返回值为删除删除的内容，array为删除指定元素后的值
let array1 = ['周一','周二','周三','周四']
array1.splice(1,1)

console.log(array1.splice(1,1)) //控制台输出：['周二']
console.log(array1) //控制台输出：['周一','周三','周四']
2.添加：第一个参数（要添加元素的位置），第二个参数（为0表示删除0个），第三个参数（要添加的元素）

array.splice(index,num,addValue) ,返回值为空数组，array值为添加元素后的值
let array = ['1','2','3']

//在元素'1'后面加一个'天'元素：
//index为元素'1'的后面一位索引值为1,不需要删除元素num为0,要添加的元素是'天'addValue为'天'
array.splice(1,0,'天')
console.log(array) //控制台输出：['1','天','2','3']
3.修改(在被删除元素的位置上添加元素)：第一个参数（开始的位置），第二个参数（要被修改的项数），第三参数（要修改成的最终元素）

array.splice(index,num,addValue) ,返回值为删除的内容，array为修改元素后的值
let array = ['洗','水','果']

//把洗水果修改为吃水果
array.splice(0,1,'吃')
consloe.log(array.splice(0,1,'吃')) //控制台输出：['吃']
consloe.log(array)  //控制台输出：['吃','水','果']
2.2：concat()方法：数组合并数组，（不修改原数组，返回一个新数组）
let array = ['1','2','3']
let array1 = ['4','5']

console.log(array.concat(array1)) //控制台输出：['1','2','3','4','5']

三.筛选数组指定元素（查）filter() -- 不修改原数组，返回筛选后的数组

3.1：基本使用：

const array = ['10','10','20','30']
const array1 = array.filter(num => num > 14) //筛选这个数组中大于14的元素
console.log(array1) //打印:['20','30']

3.2:使用 filter() + indexOf() 方法--数组去重

const array = ['1','1','2','3','4','4']
//使用filter() + indexOf 实现数组去重
const array1 = array.filter((item , i , arr) => {
    return arr.indexOf(item) === i
})

console.log(array1) //打印:['1','2','3','4']

参考链接https://blog.youkuaiyun.com/a15220216758/article/details/124993673

四.foreach方法 -- 数组遍历

let array = ['1','2','3','4']

array.foreach((item,index) =>{
    console.log(item)
    console.log(index)
})

五.数组排序

5.1：feverse()方法 -- 倒序（改变原数组，返回倒序后的数组）
let array1 = ['1','2','3']

console.log(array1.reverse()) //打印['3','2'.'1']
5.2：sort()方法 -- 按照Ascll码从小到大的顺序排序（改变原数组，返回排序后的数组，个人用的少）
let array1 = ['2','14','1','5','3']

console.log(array1.sort()) //打印['1','14','2','3','5']

以上是我常用的，较为完整的参考：

js常用数组操作https://blog.youkuaiyun.com/qq_41926416/article/details/121137061