记录一下JavaScript中常用的数组操作

本文主要记录一下在开发中常用的js数组操作:

map():返回一个新数组、这个数组的每一个元素都调用一次提供函数的返回值组成的

javascript 复制代码
const array = [1,2,3];
const mapArray = array.map(x => x *2) // 2,4,6

filter(): 创建给定数组一部分的浅拷贝;主要用于过滤数据元素的场景下。代码举例如下:

javascript 复制代码
const array = [{name:"zhansan",age:18},{name:'tom',age:20},{name:"lisi",age:21},{name:'jerry',age:14}]
const newArray = array.filter(item => item.age > 18);
console.log(newArray);//output: {name:'tom',age:20},{name:"lisi",age:21}
// 此时修改如下元素名称
newArray[1].name = "lisi2";
// 将看到array数组的lisi名称被修改为lisi2

reduce():逐个遍历数组元素,将当前元素的值与之前的计算值相加。如果需要从数组下标为0的元素开始计算、则需要传递一个初始值,否则将会以第0个元素为初始值,从第一个元素计算开始、使用于需要计算当前元素的总值情况,如后端返回了一个question数组,计算当前question的总分数。

javascript 复制代码
const array = [1,2,3,4]
const initValue = 10;
const sumWithInitial = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initValue,
);// 20
​
const sumWithOutInitial = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
);//10

slice(): 方法返回一个新的数组对象,这一对象是一个由 startend 决定的原数组的浅拷贝(包括 start,不包括 end, 左闭右开区间),其中 startend 代表了数组元素的索引。原始数组不会被改变。

javascript 复制代码
const array = ["apple","banana","orange","tomato"]
const sliceArray = array.slice(1,3)// "banana","orange";

splice(start,deleteCount,newItem): 就地的删除或者替换已存在的元素或者添加新的元素,start:表示元素数组元素开始的位置,deleteCount:要删除的元素个数,如果省略了 deleteCount,或者其值大于或等于由 start 指定的位置到数组末尾的元素数量,那么从 start 到数组末尾的所有元素将被删除,newItem:从 start 开始要加入到数组中的元素。可选的。返回值是一个删除元素的数组,如果没有删除元素则是空数组。

javascript 复制代码
const array = ["apple","banana","orange","tomato"]
const removed = array.splice(2, 0, "bbq");
// array 是 ["apple","banana",'bbq',"orange","tomato"]
// removed 是 [],没有移除的元素
const added = array.splice(2, 0, "java",'css');
// array 是 ["apple","banana","java",'css','bbq',"orange","tomato"]

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度

相关推荐
觉醒法师3 分钟前
HarmonyOS开发 - 电商App实例二( 网络请求http)
前端·http·华为·typescript·harmonyos·ark-ts
沈剑心3 分钟前
Kotlin的协程,真能提升编程效率么?
android·前端·kotlin
堕落年代14 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
OpenTiny社区25 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽25 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿29 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
剪刀石头布啊37 分钟前
css属性值计算过程
前端·css
bin915341 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek
小华同学ai44 分钟前
吊打中文合成!这款开源语音神器效果炸裂,逼真到离谱!
前端·后端·github
颜酱1 小时前
后台系统从零搭建(三)—— 具体页面之部门管理(抽离通用的增删改查逻辑)
前端·javascript·react.js