如何在使用 map() 時只更改少數 Property ?

栏目: JavaScript · 发布时间: 7年前

内容简介：使用ECMAScript 2015我們希望對

使用 map() 的目的就在於修改原來 Array 的 Object，實務上可能只有幾個 Property 需要修改，其他的 Property 都必須保留；若原本 Property 不多，重複輸入 Property 問題不大，但若 Property 很多，這會是一個很大的負擔。

Version

ECMAScript 2015

基本寫法

const data = [
  { id: 1, name: 'Sam', city: 'Taipei' },
  { id: 2, name: 'Kevin', city: 'Tokyo' },
  { id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => ({
  id: x.id,
  city: x.city,
  name: `Mr. ${x.name}`
});

const result = data.map(mapping);
console.log(result);

我們希望對 name property 加工加上 Mr. ，其他 property 都必須保留。

最基本的寫法就是將原本的 property 都照抄一遍。

如何在使用 map() 時只更改少數 Property ?

Object.assign()

const data = [
  { id: 1, name: 'Sam', city: 'Taipei' },
  { id: 2, name: 'Kevin', city: 'Tokyo' },
  { id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => {
  const obj = Object.assign({}, x);
  obj.name = `Mr. ${x.name}`;
  return obj;
};

const result = data.map(mapping);
console.log(result);

使用 ECMAScript 2015 的 Object.assign() 複製一份新的 object，修改 property 之後，再 return 傳回。

如何在使用 map() 時只更改少數 Property ?

Object Spread

const data = [
  { id: 1, name: 'Sam', city: 'Taipei' },
  { id: 2, name: 'Kevin', city: 'Tokyo' },
  { id: 3, name: 'Mike', city: 'Chicago'},
];

const mapping = x => ({
  ...x,
  name: `Mr. ${x.name}`
});

const result = data.map(mapping);
console.log(result);

使用 ECMAScript 2015 的 Object Spread 將 x object 展開，再加上 name property，將會蓋掉原本的 name property。

如何在使用 map() 時只更改少數 Property ?

Conclusion

Object Spread 無疑是最漂亮的寫法，既直覺又優雅

Reference

MDN , Object.assign

MDN , Spread syntax

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

金字塔原理

[美] 巴巴拉·明托 / 王德忠、张珣 / 民主与建设出版社 / 2002-12 / 39.80元

《金字塔原理》是一本讲解写作逻辑与思维逻辑的读物，全书分为四个部分。第一篇主要对金字塔原理的概念进行了解释，介绍了如何利用这一原理构建基本的金字塔结构。目的是使读者理解和运用简单文书的写作技巧。第二篇介绍了如何深入细致地把握思维的环节，以保证使用的语句能够真实地反映希望表达的思想要点。书中列举了许多实例，突出了强迫自己进行“冷静思维”对明确表达思想的重要性。第三篇主要针对的......一起来看看《金字塔原理》这本书的介绍吧!

码农工具