JS数组常用方法

最新推荐文章于 2025-05-28 18:15:13 发布

做梦都在睡

最新推荐文章于 2025-05-28 18:15:13 发布

阅读量133

点赞数 2

文章标签：前端 javascript html5

本文链接：https://blog.youkuaiyun.com/qq_53791154/article/details/128104032

版权

这篇博客详细介绍了JavaScript中数组的各种操作方法，包括增（push、unshift）、删（pop、shift、splice）、查（slice、concat、join、reverse、sort）以及过滤（filter）、映射（map）和归约（reduce）。通过实例展示了如何使用这些方法来处理和转换数组数据，对于理解和操作JavaScript数组非常有帮助。

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

* 增

* arr.push(元素) : 在数组末尾新增元素

* arr.unshift() : 在元素开头新增元素

* 删

* arr.pop() : 删除数组最后一个元素

* arr.shift(): 删除数组第一个元素

* arr.splice(起始位置,删除数量,...插入元素)

* 查

* arr.slice(起始下标,结束下标) : 查询指定范围的元素

* 连接:arr.concat(数组) :连接数组

* 分割:arr.join('分隔符') :把数组元素按照分隔符拼接成一个字符串

* 翻转:arr.reverse()

* 排序:arr.sort()

filter语法:

* 根据条件筛选数组,将满足条件的元素放入新数组

* 筛选数组元素

* 批量删除数组元素

* 1.循环次数 === 数组长度

* 2.回调函数内部返回值

* return true :满足条件.放入新数组

* return false :不满足条件,不放入新数组

* 3.方法自身返回值

* return 新数组

forEach

let arr = [
    {name:'商品1',select:false},
    {name:'商品2',select:false},
    {name:'商品3',select:true},
    {name:'商品4',select:false}
]
/**
 * 遍历修改数组每一个元素(不需要得到新数组,仅仅只是修改数组自身元素)
 * 1.循环次数==数组长度
 * 2.回调函数内部返回值
 *      无return
 * 3.方法自身返回值
 *      无return
 */
arr.forEach( (item,index) =>{
    item.select = true
})
console.log(arr)

// 箭头函数的函数体只有一行,则可以省略大括号.此时也必须要省略return
arr.forEach( item =>item.select = true)

map

let arr = [20,30,40,50,60]
/**
 * 根据规则映射数组,得到新数组
 *      后台返回的数组 和 页面元素  的数据不一致, 需要映射成一致
 * 1.循环次数 === 数组长度
 * 2.回调函数内部返回值
 *      return新数组元素
 * 3.方法自身返回值
 *      return 映射后的数组
 */
const res = arr.map(item =>item*0.5)
console.log(res)

reduce

let arr = [
    {name:'商品1',price:123,select:false},
    {name:'商品2',price:456,select:false},
    {name:'商品3',price:455,select:true},
    {name:'商品4',price:666,select:false}
]

const res = arr.reduce((sum,item)=>item.select ? sum+item.price : sum,0)
console.log(res)