Javascript / React - 获取匹配特定条件的数组中的第一项

Posted

技术标签:

【中文标题】Javascript / React - 获取匹配特定条件的数组中的第一项【英文标题】:Javascript / React - getting first item in array that matches specific conditions 【发布时间】:2020-10-05 18:14:01 【问题描述】:

我有一个数组,比如说

[
    
        lesson: 1,
        title: "Welcome",
        slug: "welcome",
        active: active,
        breakDay: false,
        started_time: new Date(),
        finished_time: null,
        completed: true,
        sublesson: [
            
                lesson: 1.1,
                title: "Evaluation",
                slug: 'evaluation',
                completed: false,
                answers: []
            
        ],
        answers: []
    ,
    
        lesson: 2,
        title: "Example",
        slug: "example",
        active: active,
        breakDay: false,
        started_time: null,
        finished_time: null,
        completed: false,
        sublesson: [
            
                lesson: 2.1,
                title: "example2,
                slug: 'example2,
                answers: []
            
        ],
        answers: []
    
]

我需要找到一种方法来绘制第一个项目以达到特定条件。

我在我的 React 应用程序中进行了尝试,但很快意识到它实际上是在检查第一项而不是整个数组的条件是否为真。

    
        lessons !== null ?

            lessons.map((item, index, arr) => (
                index === 0 && item.active === true ?
                <>
                <p>item.title</p>
                </>
                :
                null
            ))
            :
            null

    

所以本质上,我如何过滤第一项,以满足特定条件,例如item.active === true &amp;&amp; item.completed === false

【问题讨论】:

developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 【参考方案1】:

const arr = [
    
        lesson: 1,
        title: "Welcome",
        slug: "welcome",
        active: false,
    ,
    
        lesson: 2,
        title: "Welcome 2",
        slug: "welcome",
        active: true,
    ,
    
        lesson: 3,
        title: "Example 3",
        slug: "example",
        active: true,
    
]

console.log(arr.find(item => item.active))

我认为你可以使用 Array.prototype.find 函数https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

【讨论】:

【参考方案2】:

你可能需要filter这里:

var data=[  lesson: 1, title: "Welcome", slug: "welcome", active: 'active', breakDay: false, started_time: new Date(), finished_time: null, completed: true, sublesson: [  lesson: 1.1, title: "Evaluation", slug: 'evaluation', completed: false, answers: []  ], answers: [] ,  lesson: 2, title: "Example", slug: "example", active: 'active', breakDay: false, started_time: null, finished_time: null, completed: false, sublesson: [  lesson: 2.1, title: "example2", slug: 'example2', answers: []  ], answers: [] ];

var result = data.filter((active, completed)=> active && !completed);

console.log(result);

find 获取第一个匹配对象:

var data=[  lesson: 1, title: "Welcome", slug: "welcome", active: 'active', breakDay: false, started_time: new Date(), finished_time: null, completed: true, sublesson: [  lesson: 1.1, title: "Evaluation", slug: 'evaluation', completed: false, answers: []  ], answers: [] ,  lesson: 2, title: "Example", slug: "example", active: 'active', breakDay: false, started_time: null, finished_time: null, completed: false, sublesson: [  lesson: 2.1, title: "example2", slug: 'example2', answers: []  ], answers: [] ];

var result = data.find((active, completed)=> active && !completed);

console.log(result);

【讨论】:

以上是关于Javascript / React - 获取匹配特定条件的数组中的第一项的主要内容,如果未能解决你的问题,请参考以下文章

如果在React React路由器中没有匹配,如何获取交换机的状态

React Native 版本不匹配

如何使 Javascript/React/Typescript 获取调用异步?

React Native End to End Tests with Detox:获取匹配元素的高度、宽度和其他属性

javascript 在React.js中获取API

JavaScript JQuery - 获取匹配元素的总数