javascript - 对象 es6 的条件解构数组

Question

堆栈 Blitz :demo

思路是服务器发送以下格式的响应，需要根据以下条件决定页面上显示或隐藏按钮，每个按钮都有单独的点击功能。这就是我在页面中静态声明按钮的内容。

我下面有一组对象。我需要在某些条件下将对象的属性映射到其他属性。

collections = [
  {
    "productId": "samsung",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "nokia",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "Lg",
    "productParams": "",
    "isAvailable": false
  },
]

这是对象的集合数组。这里我尝试根据两个条件来映射对象的属性，

如果 productId 值匹配 'string' 并且 isAvailable 属性为 true 我已分配给全局变量并显示按钮。但它是错误的。任何人都可以帮助编写我做错的代码。

getClick() {
  let showButtonSamsung, showButtonNokia, showButtonLg;
  let x = this.collections.map(x => {
    showButtonSamsung = x.productId == 'samsung' && x.isAvailable == true ? true : false;
    showButtonNokia = x.productId =='nokia' && x.isAvailable == true ? true : false;
    showButtonLg = x.productId == 'Lg' && x.isAvailable == true ? true : false;
  });
}

预期的 O/P:

showButtonSamsung: true  // will show the button
showButtonNokia: true  // will show the button
showButtonLg: false  // hide the button

Answer 1

我认为在这种情况下 reduce 会好得多。

let collections = [{
    "productId": "samsung",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "nokia",
    "productParams": "",
    "isAvailable": true
  },

  {
    "productId": "Lg",
    "productParams": "",
    "isAvailable": false
  }
]


const map = {
  samsung: "showButtonSamsung",
  nokia: "showButtonNokia",
  Lg: "showButtonLg"
}

const {showButtonSamsung, showButtonNokia, showButtonLg} = collections.reduce((acc, obj) => {
  const property = map[obj.productId];
  acc[property] = obj.isAvailable;
  return acc;
}, {})

console.log(showButtonSamsung, showButtonNokia, showButtonLg);