快捷導(dǎo)航

js對象數(shù)組查找某一元素的各種方法(不改變原數(shù)組)

更新時間：2024年06月13日 10:23:57 作者：慢慢雨夜

前端經(jīng)常要通過javaScript來處理數(shù)組中的數(shù)據(jù),其中就包括檢查數(shù)組中是否包含滿足特定搜索條件的單個或者多個值,這篇文章主要給大家介紹了關(guān)于js對象數(shù)組查找某一元素的各種方法,文中介紹的方法不改變原數(shù)組,需要的朋友可以參考下

find()方法

這個方法會返回數(shù)組中第一個符合條件的元素，如果沒有符合條件的元素則返回undefined。

const arr = [{name: '張三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.find(item => item.name === '李四')
//result = {name: '李四', age: 30}

filter()方法

這個方法會返回符合條件的元素組成的新數(shù)組，如果沒有符合條件的元素則返回空數(shù)組。

const arr = [{name: '張三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.filter(item => item.age > 20)
// result = [{name: '李四', age: 30}, {name: '王五', age: 25}]

some()方法

這個方法會返回一個布爾值，表示數(shù)組中是否存在至少一個符合條件的元素。

const arr = [{name: '張三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.some(item => item.name === '李四')
// result = true

findIndex()方法

這個方法會返回數(shù)組中第一個符合條件的元素的索引，如果沒有符合條件的元素則返回-1。

const arr = [{name: '張三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.findIndex(item => item.name === '李四')
// result = 1

forEach()方法

這個方法可以遍歷整個數(shù)組，通過判斷每一個元素是否符合條件來找到目標(biāo)元素。

const arr = [{name: '張三', age: 20}, {name: '李四', age: 30}, {name: '李四', age: 66}]
let result
arr.forEach(item => {  if (item.name === '李四') {
    result = item
  }
})
// result = {name: '李四', age: 66}

注意：以上方法都不會改變原數(shù)組，如果想要改變原數(shù)組可以使用splice()方法。

附：js檢查對象數(shù)組中的每個對象是否包含另一個數(shù)組中的屬性,并取出相同的值

檢查數(shù)組對象是否包含另一個數(shù)組的值,并取出相同的數(shù)組對象。

例子:

返回結(jié)果:

[{name:"zangsan",age:"18"},{name:"wangwu",age:"12"}]

js代碼:

const movies  = [
{name:"zangsan",age:"18"},
{name:"zhaoliu",age:"21"},
{name:"wangwu",age:"12"}
];
const filters = ["zangsan", "wangwu"];
const res = movies.filter(
  movie => Object.values(movie).some(v => filters.includes(v))
);

console.log(res);