对象es6的条件解构数组答案

【问题标题】：Conditional destructuring array of objects es6对象es6的条件解构数组
【发布时间】：2020-08-28 19:19:31
【问题描述】：

stackblitz：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

【问题讨论】：

“映射”表示生成一个新数组。您基本上只是循环，并将上次迭代的结果存储在全局变量中。你真正想要的结果是什么？
我看不出这个问题与解构、es6 或 es7 有什么关系。
您在这里遇到的问题是什么？根据你的逻辑你得到了什么？
为什么不根据isAvailable属性遍历集合并设置按钮的状态？您可以将其映射并分配给您的三个变量。
@bergi，你是对的，我没有在这里进行破坏，只是将最后一次迭代映射并分配给全局变量。仍然卡在代码和 es6 破坏对象概念中

标签： javascript typescript ecmascript-6 destructuring ecmascript-2016

【解决方案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);

【讨论】：

【解决方案2】：

我认为这或多或少是您正在寻找的：

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

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

let isAvailable = (brand, collections) => collections.some((x) => x.productId === brand && x.isAvailable) 

let x = {
    showButtonSamsung: isAvailable('samsung', collections),
    showButtonNokia: isAvailable('nokia', collections),
    showButtonLg: isAvailable('Lg', collections),
}
console.log(x);

另一种选择：

let x = {
    showButtonSamsung: 'samsung',
    showButtonNokia: 'nokia',
    showButtonLg: 'Lg',
}


let isAvailable = (brand, collections) => collections.some((x) => x.productId === brand && x.isAvailable)
x = Object.entries(x).map(([key, value]) => ([key, isAvailable(value, collections)]))
    .reduce((obj, arr) => ({
        ...obj, [arr[0]]: arr[1]
    }), {})

console.log(x);

【讨论】：

array.some(...) 会比array.find(...) !== undefined 更好