事关我对于操作JS数组的那些事

写在前面:这一篇主要是我对数组操作的常用方法一些总结和概括,毕竟业务中最常用的就是拿到接口的数据进行操作和传递。

ES6数组操作

数组操作首先要注意且牢记splice、sort、reverse这3个常用方法是对数组自身的操作,会改变数组自身。其他会改变自身的方法是增删push/pop/unshift/shift、填充fill和复制填充copyWithin。

展开运算符和解构赋值

用处很多

// 交换变量
[a, b] = [b, a]

//获取剩余参数
[...arr] = [a,...b];

//浅拷贝
const arr = [...arr] //数组
const obj = {...obj} //对象

//数组合并
const arr1 = [1, 2]
const arr2 = [a, b]
const arr = [...arr1, ...arr2]

//数组去重
const arr = [1, 1, 2, 2, 3, 4, 5, 5]
const newArr = [...new Set(arr)]

//取两数组交集
const a = [1, 2, 3, 4, 5,6]
const b = [3, 4, 5, 6, 7, 8]
const Values = [...new Set(a)].filter(item => 
    b.includes(item)
)
console.log(Values); // [3, 4, 5, 6]

//数据扁平化(数组摊平)
const obj = {a: '群主', b: '男群友', c: '女裙友', d: '未知性别'}
const getName = function (item) { 
    return item.includes('群')
}
// 方法
const flatArr = Object.values(obj).flat().filter(item => getName(item))

// 经大佬指点,更加简化(发现自己的抽象能力真的差~)
const flatArr = Object.values(obj).flat().filter(getName)
//flat()函数用来拉平数组结构,可以传参控制拉平的层次

复制代码

数组迭代常用的方法及释义

forEach():遍历数组,让数组每一项做一件事,改变原数组
map():遍历数组,让数组每一项做一件事,然后返回新数组
filter():遍历数组,筛选符合条件的子项,然后返回新数组
reduce():遍历数组,让数组相邻子项进行计算,然后返回累计值
find/findIndex():遍历数组,找到数组内第一项符合条件的子项,返回子项或者下标(判断是否存在)
some(): 遍历数组,查看是否有满足条件的子项,有一个则为true。(判断是否存在)
every():遍历数组,查看是否每个子项都满足条件,全部满足返回true。(判断是否不存在)
复制代码

迭代方法详解

filter()方法

const data = [
    {id:1,title:"阿修罗"},
    {id:2,title:"阿松大"},
    {id:3,title:"阿拉贡"},
    {id:4,title:"阿拉善"},
]
//是否存在符合条件的
const hasNum = data.filter(res => {
    return res.id == 4;
})
console.log(hasNum)

//筛选符合条件的
let Obj = arrObj.filter(res => res.id > 2)
console.log(Obj) //{id:3,title:"阿拉贡"},{id:4,title:"阿拉善"}

//筛选不符合条件的(其实还是符合条件的,只不过是符合跟意愿相反的条件)
let Obj = arrObj.filter(res => res.id < 2)
console.log(Obj) //{id:1,title:"阿修罗"}
复制代码

find/findIndex

const arr = [1, 2, 3, 4, 5]
const findItem = arr.find(item => item === 2) // 返回子项
const findIndex = arr.findIndex(item => item === 2) // 返回子项的下标
复制代码

some

map

数组常用方法

  1. splice(起始位置,删除个数,添加的内容)

一般用来删除数据,也能用来替换,返回值是被删除的内容

let array = [1,2,3,4];
array.splice(1,2,"5");  //[1,"5",4]
复制代码
  1. sort(函数)

不传参则按照字符编码的顺序进行升序排序,传参则传入规定排序顺序的函数,函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字

<!--无参数-->
let arr = [1,3,6,4,7];
let arrSort1 = arr.sort();
console.log(arrSort1);//[1,3,4,6,7]
console.log(arr);//[1,3,4,6,7]
console.log(arrSort1 === arr);//true,该方法直接改变原数组

<!--有参数-->
// 升序
let arr = [1,3,6,4,7];
let arrSort1 = arr.sort((a,b)=>{
    if(a>b){
        return 1;
    }else if(a === b){
        return 0
    }else{
        return -1
    }
});

//降序
let arr = [1,3,6,4,7];
let arrSort1 = arr.sort((a,b)=>{
    if(a>b){
        return -1;
    }else if(a === b){
        return 0
    }else{
        return 1
    }
});

复制代码

End

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享