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

Question

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

数组如下所示：

[
  {
    "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

时，我只想 select 值

我试过

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

但是，我只得到 FormBody 个元素。

我做错了什么？

Answer 1

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

如果您希望所有元素都通过检查，请改用 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);

Answer 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}

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

Javascript Arrow function find using && and ||

javascript

arrays

arrow-functions