JavaScript 的Array.prototype.map中参数也可以使用{}解构赋值

在数组的map方法中传参数时可以使用{},拿到对象特定的属性,并进行操作
map方法:创建(返回)一个新的数组,其中薪数组的每一个元素由调用数组中的每一个元素执行提供的函数得来
1.简单的打印或者对于数组中每个元素进行操作,比较在项目中很常见的对select 选项的

const fruits = [
  {
    id:1,
    status:0,
    amount:11,
    name:"西瓜"
  },
  {
    id:2,
    status:0,
    amount:1,
    name:"葡萄"
  },
  {
    id:3,
    status:1,
    amount:11,
    name:"梨子"
  },
  {
    id:4,
    status:0,
    amount:22,
    name:"苹果"
  },
  {
    id:5,
    status:1,
    amount:4,
    name:"提子"
  }
];
fruits.map(({name,amount}) => {
  console.log(name,amount)
})
结果:
西瓜 11
葡萄 1
梨子 11
苹果 22
提子 4

想实现一个功能,水果的status为0的时候,不显示这个下拉列表

<Select>
{fruits.map(({name,status,id}) => (
  status === 1 ?
    <Select.Option
      key={id}
      value={id}
    >
      {name}
    </Select.Option> :null
  ))}
</Select>

2.提取该数组的某一个属性到数组中。
当时项目中需要拿到后端返回的list数组中的id来做判断,看了以前的代码发现使用map和解构更加简洁

const idlist = fruits.map(({id}) => id);
console.log(idlist);
//[ 1, 2, 3, 4, 5 ]

const idlist = fruits.map(({id,status}) => {
  if(status!=1){
    return id
  }
});

//[ 1, 2, undefined, 4, undefined ]

JavaScript 的Array.prototype.map中参数也可以使用{}解构赋值

上一篇:springMVC(四)数据处理及跳转


下一篇:两种方式访问字符数组