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

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

内容简介:使用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


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

查看所有标签

猜你喜欢:

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

SNS浪潮

SNS浪潮

李翔昊 / 人民邮电出版社 / 2010 / 35.00元

内容提要: 本书通过互联网行业与社会生活中的案例内容,向读者介绍了一些互联网技术和新型网站的发展,揭示了社交网站兴起的因素。在探讨社交网站发展和网络开放平台的同时,也介绍、描述了其对社会信息传播、行业组织、广告营销等方面的影响。最后通过新技术和产品应用,展望了未来社会化网络的趋势走向。 本书适合从事信息技术、社会传播、市场营销相关工作,以及广大互联网用户,或对IT行业有兴趣的人士阅读。......一起来看看 《SNS浪潮》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具