使用 && 和 || 的 Javascript 箭头函数查找答案

【问题标题】：Javascript Arrow function find using && and ||使用 && 和 || 的 Javascript 箭头函数查找
【发布时间】：2021-06-24 23:35:39
【问题描述】：

我有一个对象数组，对象有属性。

数组如下所示：

[
  {
    "type": {
      "resolvedName": "FormRoot"
    },
    "isCanvas": true,
    "props": {},
    "displayName": "Form",
    "custom": {},
    "hidden": false,
    "nodes": [],
    "linkedNodes": {
      "form-body": "NODE_BODY"
    },
    "parent": "ROOT"
  },
  {
    "type": {
      "resolvedName": "DdGroup"
    },
    "isCanvas": true,
    "props": {
      "definitionId": "-2"
    },
    "displayName": "Group",
    "custom": {
      "target": "Group"
    },
    "hidden": false,
    "nodes": [
      "NODE_624_O2CI6D",
      "NODE_626_ZGPRNS",
      "NODE_628_8S3MOI",
      "NODE_629_8S3BLC",
      "NODE_630_8NWNVH",
      "NODE_631_XB8YML",
      "NODE_632_WDVQND",
      "NODE_633_XI5GWK",
      "NODE_634_GCWR1",
      "NODE_635_6JDVLL",
      "NODE_636_YSJ79I",
      "NODE_637_B2G1VS"
    ],
    "linkedNodes": {},
    "parent": "NODE_-1_DSO75T"
  },
  {
    "type": "div",
    "isCanvas": true,
    "props": {
      "className": "_3Op7nHDBF8ya__B1tPDfL_ e1nzbV5Ci4vpgTdE1tSJO"
    },
    "displayName": "de",
    "custom": {
      "target": "FormBody"
    },
    "hidden": false,
    "nodes": [
      "NODE_-1_DSO75T",
      "NODE_644_DNSKM7O"
    ],
    "linkedNodes": {},
    "parent": "NODE_FORM"
  }
]

我只想在目标是 FormBody 或 Group

时选择值

我试过了

const formBody = nodeValues.find((x) => x.custom && (x.custom.target === 'FormBody' || x.custom.target === 'Group'));

但是，我只得到 FormBody 元素。

我做错了什么？

【问题讨论】：

您的意思是filter，而不是find？ Find 只会返回满足谓词的第一个项目。过滤器将返回所有匹配的项目
@misterjojo nope ????‍♂️????

标签： javascript arrays arrow-functions

【解决方案1】：

find 返回数组中通过检查的第一个元素。

如果您希望所有元素都通过检查，请改用filter。

const nodeValues = [
  {
      "type": {
          "resolvedName": "FormRoot"
      },
      "isCanvas": true,
      "props": {
      },
      "displayName": "Form",
      "custom": {},
      "hidden": false,
      "nodes": [],
      "linkedNodes": {
          "form-body": "NODE_BODY"
      },
      "parent": "ROOT"
  },
  {
      "type": {
          "resolvedName": "DdGroup"
      },
      "isCanvas": true,
      "props": {
          "definitionId": "-2",
      },
      "displayName": "Group",
      "custom": {
          "target": "Group"
      },
      "hidden": false,
      "nodes": [
          "NODE_624_O2CI6D",
          "NODE_626_ZGPRNS",
          "NODE_628_8S3MOI",
          "NODE_629_8S3BLC",
          "NODE_630_8NWNVH",
          "NODE_631_XB8YML",
          "NODE_632_WDVQND",
          "NODE_633_XI5GWK",
          "NODE_634_GCWR1",
          "NODE_635_6JDVLL",
          "NODE_636_YSJ79I",
          "NODE_637_B2G1VS"
      ],
      "linkedNodes": {},
      "parent": "NODE_-1_DSO75T"
  },
  {
      "type": "div",
      "isCanvas": true,
      "props": {
          "className": "_3Op7nHDBF8ya__B1tPDfL_ e1nzbV5Ci4vpgTdE1tSJO"
      },
      "displayName": "de",
      "custom": {
          "target": "FormBody"
      },
      "hidden": false,
      "nodes": [
          "NODE_-1_DSO75T",
          "NODE_644_DNSKM7O"
      ],
      "linkedNodes": {},
      "parent": "NODE_FORM"
  }
];

const formBody = nodeValues.filter((x) => x.custom && (x.custom.target === 'FormBody' || x.custom.target === 'Group'));

console.log(formBody);

【讨论】：

【解决方案2】：

你也可以使用Optional chaining (?.)

nodeValues.filter(x=>x?.custom?.target==='FormBody' || x?.custom?.target==='Group')

或更好：

nodeValues.filter(x=>['FormBody','Group'].includes(x?.custom?.target))

演示代码：

const
  nodeValues = 
    [ { type        : { resolvedName: 'FormRoot' } 
      , isCanvas    : true
      , props       : {}
      , displayName : 'Form'
      , custom      : {}
      , hidden      : false
      , nodes       : [] 
      , linkedNodes : { 'form-body': 'NODE_BODY' } 
      , parent      : 'ROOT'
      } 
    , { type        : { resolvedName: 'DdGroup' } 
      , isCanvas    : true
      , props       : { definitionId: '-2' } 
      , displayName : 'Group'
      , custom      : { target: 'Group' } 
      , hidden      : false
      , nodes       : 
          [ 'NODE_624_O2CI6D', 'NODE_626_ZGPRNS', 'NODE_628_8S3MOI', 'NODE_629_8S3BLC', 'NODE_630_8NWNVH'
          , 'NODE_631_XB8YML', 'NODE_632_WDVQND', 'NODE_633_XI5GWK', 'NODE_634_GCWR1', 'NODE_635_6JDVLL'
          , 'NODE_636_YSJ79I', 'NODE_637_B2G1VS'
          ] 
      , linkedNodes : {}
      , parent      : 'NODE_-1_DSO75T'
      } 
    , { type        : 'div'
      , isCanvas    : true
      , props       : { className: '_3Op7nHDBF8ya__B1tPDfL_ e1nzbV5Ci4vpgTdE1tSJO' } 
      , displayName : 'de'
      , custom      : { target: 'FormBody' } 
      , hidden      : false
      , nodes       : [ 'NODE_-1_DSO75T', 'NODE_644_DNSKM7O' ] 
      , linkedNodes : {}
      , parent      : 'NODE_FORM'
      } 
    ] 
, arrV   = ['FormBody','Group']
, result = nodeValues.filter(x=>arrV.includes(x?.custom?.target))
  ;
console.log(result)

.as-console-wrapper {max-height: 100%!important;top:0}

【讨论】：