一、替换属性名相同的对象的值
- 当新数据为对象时可以直接使用map替换
const data = [{
id: 1, value: 1}, {
id: 2, value: 2}, {
id: 3, value: 3}];
const newData = {
id: 3, value: 50}
const res = data.map(item => item.id === newData.id ? newData : item);
console.log(res)
// 0: {id: 1, value: 1}
// 1: {id: 2, value: 2}
// 2: {id: 3, value: 50}
- 当新数据为数组时需要联合forEach遍历改变value的值
const data = [{
id: 1, value: 1}, {
id: 2, value: 2}, {
id: 3, value: 3}];
const newData = [{
id: 1, value: 20},{
id: 3, value: 30}]
data.map(item=>{
newData.forEach(nItem=>{
item.value = item.id === nItem.id ? nItem.value : item.value
})
})
console.log(data);
// 0: {id: 1, value: 20}
// 1: {id: 2, value: 2}
// 2: {id: 3, value: 30}
二、数组对象去重
- 直接返回去重数据 （直接使用filter过滤就行）
const myMap = new Map()
const data = [{
id: 1, value: 1}, {
id: 2, value: 2}, {
id: 3, value: 3},{
id: 1, value: 3},{
id: 2, value: 3}];
const res = data.filter((item) => !myMap.has(item.id) && myMap.set(item.id, 1))
console.log(res)
//0: {id: 1, value: 1}
//1: {id: 2, value: 2}
//2: {id: 3, value: 3}
- 将重复的对象返回 （需要使用map）
const myMap = new Map()
const newData = []
const msg = []
const data = [{
id: 1, value: 1}, {
id: 2, value: 2}, {
id: 3, value: 3},{
id: 1, value: 3},{
id: 2, value: 3}];
data.map(item=> {
if(!myMap.has(item.id)){
myMap.set(item.id)
newData.push(item)
}else{
msg.push(`过滤ID:${
item.id}`)
}
})
console.log(newData,msg);
//0: {id: 1, value: 1}
//1: {id: 2, value: 2}
//2: {id: 3, value: 3}
//0: "过滤ID:1"
//1: "过滤ID:2"
三、判断对象类型数组中某个属性值是否全等
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
if (data.every(item => item.num === data[0].num)) {
console.log('全等')
} else {
console.log('有不等的')
}
四、数组在指定位置插入数据
// 普通数组
arr1 = ['a','b','c','d']
arr2 = ['e','f','g']
let index = arr1.indexOf('b')
// 第一个参数表示需要插入的位置，第二个参数表示删除几个元素，0则不删除，第三个参数表示插入的数据
arr1.splice(index ,0,...arr2)
console.log(arr1)
// ['a', 'e', 'f', 'g', 'b', 'c', 'd']
// 对象数组
arr1 = [{
name:'xiaoming'},{
name:'lihua'},{
name:'wencai'}]
arr2 = [{
name:'jiechu'}]
let index = arr1.findIndex(t=>t.name === 'lihua')
arr1.splice(index ,0,...arr2)
// [{ "name": "xiaoming"},{"name": "jiechu"},{"name": "lihua"},{ "name": "wencai"}]
五、常用方法
1. forEach方法
当data是引用数据类型会改变原数组的值，当是基本数据类型不会改变原数组的值，没有返回值
//基本数据类型
const data = [1,2,34,6]
data.forEach(e=>{
e = e+'a'
console.log(e);
//1a 2a 34a 6a
})
console.log(data);
//[1,2,34,6]
//引用数据类型
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
data.forEach(e=>{
e.num = e.num+'a'
})
console.log(data);
// [{num: "123a",age: "18"},{num: "123a",age: "19"},{num: "2141a",age: "20"},{num: "23423a",age: "18"}]
当是引用数据类型时我们可以用一个值来接收，这样就不会改变原数组
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
data.forEach(e=>{
const obj = {
...e,num:e.num+'a'}
console.log(obj);
//{ "num": "123a","age": "18"},{"num": "123a","age": "19"},{"num": "2141a","age": "20"},{"num": "23423a","age": "18"}
})
console.log(data);
//[{"num": "123", "age": "18"},{"num": "123","age": "19"},{"num": "2141","age": "20"},{"num": "23423","age": "18"}]
2. map方法
当data是引用数据类型会改变原数组的值（不改变原数组可以用一个值来接收，参考forEach方法）
当是基本数据类型不会改变原数组的值，有返回值
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
const newData = data.map(e=>{
e.num = e.num+"b"
return e
})
console.log(data);
console.log(newData);
3. filter方法
过滤匹配条件的数据组成一个新数组， 不改变原数组的值
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
const newData = data.filter(e=>{
return e.num === '123'
})
console.log(data);
//[{"num": "123","age": "18"},{"num": "123","age": "19"},{"num": "2141","age": "20"},{"num": "23423","age": "18"}]
console.log(newData);
//[{"num": "123","age": "18"},{"num": "123","age": "19"}]
4. some方法
判断是否有符合条件的数据，一个为真则为真， 不改变原数组的值
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
const newData = data.some(e=>{
return e.num === '123'
})
console.log(data);
//[{"num": "123","age": "18"},{"num": "123","age": "19"},{"num": "2141","age": "20"},{"num": "23423","age": "18"}]
console.log(newData);
//true
5. every方法
判断是否有符合条件的数据，全部为真则为真， 不改变原数组的值
const data = [{
num:'123',age:'18'},{
num:'123',age:'19'},{
num:'2141',age:'20'},{
num:'23423',age:'18'}]
const newData = data.some(e=>{
return e.num === '123'
})
console.log(data);
//[{"num": "123","age": "18"},{"num": "123","age": "19"},{"num": "2141","age": "20"},{"num": "23423","age": "18"}]
console.log(newData);
//false
5. findIndex方法
判断 数组中 是否存在 存在返回所在的位置 不存在返回 -1 不改变原数组
const data = [{
num:'123',age:18},{
num:'123',age:19},{
num:'2141',age:20},{
num:'23423',age:18}]
const newData = data.findIndex(e=>{
return e.age > 18
},1)
console.log(data);
//[{"num": "123","age": 18},{"num": "123","age": 19},{"num": "2141","age": 20},{"num": "23423","age": 18}]
console.log(newData);
//1
5. 两个数组求出差集
// 相当于 data1-data2
let data1 = [{
num:1,age:18},{
num:2,age:19},{
num:3,age:20}]
let data2 = [{
num:1,age:18},{
num:2,age:19}]
const newData = data1 .filter(x => !data2 .find(y => x.num=== y.num)) || []
console.log(newData)
// [{num:3,age:20}]
持续更新~~~