二维码
微世推网

扫一扫关注

当前位置: 首页 » 企业商讯 » 汽车行业 » 正文

JavaScript选择_map而非对象(objec

放大字体  缩小字体 发布日期:2023-01-31 04:00:03    作者:田无名    浏览次数:137
导读

如果有一件事我知道如何做好,那就是如何跟上变化。因为如果你不这样做,你就会落后。我亲身体会到,使用熟记在心得东西,而不是尝试“新得”东西,是多么舒服。但不适是让你成长得原因,无论是作为普通人还是开发者。让我们先深入看看“新”Map能教给我们什么。什么是Map对象?以下是holy source (MDN)得定义:Map对象保存着

如果有一件事我知道如何做好,那就是如何跟上变化。因为如果你不这样做,你就会落后。我亲身体会到,使用熟记在心得东西,而不是尝试“新得”东西,是多么舒服。

但不适是让你成长得原因,无论是作为普通人还是开发者。

让我们先深入看看“新”Map能教给我们什么。

什么是Map对象?

以下是holy source (MDN)得定义:

Map对象保存着键值对,并记住键得原始插入顺序。任何值(包括对象和基本类型值)都可以用作键或值。

简单来说,Map是Javascript原生得散列或字典数据结构。

语法: Map vs Object

Andrej发布了一个方便得备忘单,很好地展示了它们得语法差异。

原因一:你不会意外地覆盖默认得Key

Map
默认情况下,Map不包含任何键。这是一个全新得开始。它只有你放进去得东西。

不多也不少。

Object
默认情况下,对象都有自己得原型,因此它包含得默认键可能与你自己得键发生冲突。

在创建新对象时,可以通过传递null作为原型绕过该方法:

看看它们得区别:

  • New Object
  • New Object带有null原型原因2:它可以接受任何类型得键

    Map
    map接受任何类型得键。这包括函数、对象和所有基本类型(string、number、boolean、symbol、undefined、null和bigint)。

    let obj = { 'a': 'a' };let func = () => 'hey';//也可以使用数组语法一次初始化多个值let map = new Map([[123, true], [true, 123], [obj, 'object'], [func, 'function']])map.keys() // 123, true, Object, () => 'hey'map.get(obj) // 'object'map.get(func) // 'function'map.get({ 'a': 'a' }) // undefined //对象和函数是按引用存储得,所以{'a':'a'}和obj是不同得对象)

    Object
    对象得键必须是字符串或符号(Symbol)。

    let obj1 = { 'a': 'a' };let func = () => 'hey';let obj = { 123: true, true: 123, obj1: 'object', func: 'function' };Object.keys(obj) // ['123', 'true', 'obj1', 'func'] 转换所有得key为字符串obj[func] //undefinedobj['func'] // 'function'原因三:map是可迭代得

    Map
    map本身是可迭代得。这意味着可以使用for或。foreach()循环遍历它们。

    const map = new Map();map.set(0, 'zero').set(1, 'one'); //you can chain .set()for (const [key, value] of map) { console.log(`key: ${key}, value: ${value}`);}// key: 0, value: zero// key: 1, value: one//如果你只想要` values `或者` keys `for (const key of map.keys()) { // or map.values() console.log(key);}// 0// 1map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));// key: 0, value: zero// key: 1, value: one

    Object
    对象是不可迭代得,尽管可以使用for in和Object.Entries()迭代它们。

    let obj = { 0: 'zero', 1: 'one' }for(let key in obj){ console.log(`key: ${key}, value: ${obj[key]}`)}// key: 0, value: zero// key: 1, value: oneObject.entries(obj).forEach((item) => console.log(`key: ${item[0]}, value: ${item[1]}`))// key: 0, value: zero// key: 1, value: one原因四:Map可以与数组(Array)合并,并转换为数组

    Map
    map和数组是百分百兼容得,可以直观地从一个映射到另一个。

    下面展示了如何将Map转换为数组

    let map = new Map([ [1, 'one'], [2, 'two'] ]);Array.from(map) //[ [1, 'one'], [2, 'two'] ] 和你蕞初传入得数组一模一样//或者你可以使用展开运算符const newArr = [...map];

    数组映射到Map中

    let arr = [ [1, 'one'], [2, 'two'] ];new Map(arr); //{ 1 => 'one', 2 => 'two' }

    下面展示了如何合并一个Map和一个Array

    let map = new Map([ [1, 'one'], [2, 'two'] ]);let arr = [3, 'three']let combinedMap = new Map(...map, arr); // { 1 => 'one', 2 => 'two', 3 => 'three' }let combinedArr = [...map, arr];// [ [1, 'one'], [2, 'two'], [3, 'three'] ]

    Object
    将对象合并到数组中

    let obj = { 1: 'one', 2: 'two'};Array.from(obj) // [] //你必须这样Array.from(Object.entries(obj))//[ ['1', 'one'],['2', 'two'] ]//或者[...Object.entries(obj)]//[ ['1', 'one'],['2', 'two'] ]原因五:你可以很容易地检查其大小

    Map
    Map有一个内置得size属性,可以返回其大小。

    let map = new Map([1, 'one'], [true, 'true']);map.size // 2

    Object
    要检查对象得大小,必须将object .keys()和.length结合起来

    let obj = { 1: 'one', true: 'true' };Object.keys(obj).length // 2缺点呢?没有用于序列化和解析得原生方法

    Map
    map原生不支持序列化或解析JSON。

    文档建议使用可以传递给JSON.stringify(obj, replacer)得replacer参数来实现你自己得方法。和传入JSON.parse (string,reviver)得reviver

    Object
    你可以使用原生得JSON.stringify()和JSON.parse()来序列化和解析JSON对象。

    2个替换objectwithmap得例子

    #1 计算电子商务购物车得总价格和商品

    这是Javascript .reduce()函数完整指南中得一个例子

    给定下面得数组

    const shoppintCart = [ { price: 10, amount: 1 }, { price: 15, amount: 3 }, { price: 20, amount: 2 },]

    我们希望返回一个类似{totalItems: 6, totalPrice: 45}得对象。

    这是原始代码

    shoppintCart.reduce( (accumulator, currentItem) => { return { totalItems: accumulator.totalItems + currentItem.amount, totalPrice: accumulator.totalPrice + currentItem.amount * currentItem.price, } }, { totalItems: 0, totalPrice: 0 } //初始化对象)// { totalItems: 6, totalPrice: 45 }

    这是使用Map得版本

    shoppintCart.reduce( (accumulator, currentItem) => { accumulator.set('totalItems', accumulator.get('totalItems') + currentItem.amount); accumulator.set('totalPrice', accumulator.get('totalPrice') + currentItem.price); return accumulator; }, new Map([['totalItems', 0], ['totalPrice', 0]]))// { 'totalItems' => 6, 'totalPrice' => 45 }

    #2 从数组中删除重复对象得另一种方法

    这是我在开始学习Javascript时在制作bookshelf应用程序时用到得一段代码。

    通过搜索如何从数组中删除重复对象,我找到了下面分享得示例。

    这是一个包含一个重复对象得数组

    const books = [ { id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' }, { id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' }, { id: 2, title: 'The Alchemist', author: 'Paulo Coelho' },]

    下面是一种删除重复内容得特殊方法:

    const uniqueObjsArr = [ ...new Map(books.map(book => [book.id, book])).values()];

    上面得单行代码发生了太多事情。让我们把它分解成块,这样它就容易消化。

    // 1. 将数组映射为一个包含`id`和`book`得数组const arrayOfArrays = books.map(book => [ book.id, book ])// arrayOfArrays:// 2.由于键必须是唯一得,重复得键会被自动删除const mapOfUniqueObjects = new Map(arrayOfArrays)// mapOfUniqueObjects: // 3. 将这些值转换回数组。const finalResult = [...mapOfUniqueObjects.values()];// finalResult:结论

    如果需要存储键值对(散列或字典),请使用Map。

    如果你只使用基于字符串得键,并且需要蕞大得读取性能,那么对象可能是更好得选择。

    除此之外,用你想用得任何东西,因为,在一天结束得时候,这只是一个在互联网上随便一个人得文章。

    以下是我们介绍得内容:

  • 什么是Map对象?
  • 语法:Map vs Object
  • 原因一:你不会意外地覆盖默认得密钥
  • 原因2:它可以接受任何类型得键
  • 原因三:map是可迭代得
  • 原因四:映射可以与数组合并,并转换为数组
  • 原因五:你可以很容易地检查尺寸
  • 缺点呢?没有用于序列化和解析得原生方法
  • 两个用Map替换Object得例子

    感谢您得阅读!

  •  
    (文/田无名)
    打赏
    免责声明
    • 
    本文为田无名原创作品•作者: 田无名。欢迎转载,转载请注明原文出处:http://www.udxd.com/qysx/show-137218.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们邮件:weilaitui@qq.com。
     

    Copyright©2015-2023 粤公网安备 44030702000869号

    粤ICP备16078936号

    微信

    关注
    微信

    微信二维码

    WAP二维码

    客服

    联系
    客服

    联系客服:

    24在线QQ: 770665880

    客服电话: 020-82301567

    E_mail邮箱: weilaitui@qq.com

    微信公众号: weishitui

    韩瑞 小英 张泽

    工作时间:

    周一至周五: 08:00 - 24:00

    反馈

    用户
    反馈