js里的filter,map,find,findindex方法

filter方法

filter方法用于对数组元素进行过滤
filter()不会对空数组进行检测、不会改变原始数组

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let res = nums.filter((num) => {
  return num > 5;
});

console.log(res);  // [6, 7, 8, 9, 10]

map方法

map方法用于对数组元素进行加工处理
map()不会对空数组进行检测、不会改变原始数组
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

find方法

find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
find()不会对空数组进行检测、不会改变原始数组
find函数只会返回符合条件的第一个数据

let arr = [1, 2, 3, 4, 5];
let a = arr.find(item => item > 4);
console.log(a); //5

let b = arr.find(item => item === 6);
console.log(b); //undefined

findindex方法

findIndex()对于空数组，函数时不会执行的
findIndex()并没有改变数组的原始值
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

 /*对象，取出满足要求的下标*/
    const nameArr=[
        {id:1,userName:"zhaoqian",age:16},
        {id:2,userName:"sunli",age:18},
        {id:3,userName:"zhouwu",age:26 },
        {id:4,userName:"zhengwang",age:18}
    ];
    /*满足条件，返回下标位置1*/
    var i1=nameArr.findIndex((value)=>value.age==18);
    console.log(i1);
    /*没有满足条件的，返回-1*/
    var i2=nameArr.findIndex((value)=>value.age==168);
    console.log(i2);

类似的方法有很多,比如说forEach之类的函数,我们一般都是结合处理
这里记录一下我在项目中遇到的需求问题

找出两个数组中相同的元素对象

1.两个数组，里面有若干项对象，其中arr1数组中包含arr2数组中元素对象，需求是找出两个数组
中相同的元素对象

方法一:some方法和filter方法
const newArr=arr1.filter(item1=>{
    return arr2.some(item2=>{
          return item1.id==item2.id
        })
   })

2.两个数组，里面有若干项对象，其中arr1数组中包含arr2数组中元素对象，需求是找出两个数组
中不同的元素对象

方法一:some方法和filter方法
const res = arr1.filter(item => !arr2.some(ele=> ele.id === item.id))

找出两个数组相同的元素对象的下标

1.两个数组，里面有若干项对象，其中arr1数组中包含arr2数组中元素对象，需求是找出两个数组
中相同的元素对象的索引

const arr1=[{id:1},{id:2},{id:3},{id:4}]
const arr2=[{id:1},{id:4},{id:7}]
const indexList=[]
 arr2.forEach(item1=>{
 let index=arr1.findIndex(item2=>{
    return item1.id === item2.id
  })
  index!==-1&&indexList.push(index)
})
console.log(indexList,'所有符合条件的索引值');

上面结果是[0,3]如果想查arr1的元素在arr2的哪个位置上，将arr1与arr2互换就行

数组去重

文章引用链接: 
https://blog.csdn.net/qq_52732369/article/details/121877897
https://juejin.cn/post/7223182095584542776
const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

1.利用Set()+Array.from()

const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

2.使用 Set：将数组转化为 Set 对象，去重后再转化回数组，Set 会自动去重

const arr = [1, 2, 3, 2, 1, 4]
const uniqueArr = [...new Set(arr)]
console.log(uniqueArr) // [1, 2, 3, 4]


3.使用 filter：遍历数组，对每个元素判断是否在新数组中出现过。

const arr = [1, 2, 3, 2, 1, 4]
const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index
})
console.log(uniqueArr) // [1, 2, 3, 4]

在 JavaScript 中，可以使用以下几种方法去重数组对象：
1.使用 Set Set 是 ES6 中新增的一种数据结构，它类似于数组，但是成员的值都是唯一的，可以用来去重。我们可以使用 Set 来去重数组对象，然后再将结果转换为数组

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];

const result = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);
console.log(result); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]
这个方法的原理是：先使用 Array.prototype.map() 将数组中的对象转换为字符串，然后再用 Set 去重，最后再将字符串转换回对象。


2.使用 reduce 我们也可以使用 reduce 方法进行去重
const arr = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Alice" },
  { id: 3, name: "Charlie" },
]

const result = arr.reduce((acc, curr) => {
  const index = acc.findIndex((item) => item.id === curr.id)
  if (index < 0) {
    acc.push(curr)
  }
  return acc
}, [])

console.log(result) // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]


3.使用 Map Map 也可以用来去重数组对象

const arr = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Alice" },
  { id: 3, name: "Charlie" },
]

const map = new Map()
const result = []

for (const item of arr) {
  if (!map.has(item.id)) {
    map.set(item.id, true)
    result.push(item)
  }
}

console.log(result) // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]