zoukankan      html  css  js  c++  java
  • JavaScript 新旧替换六:键值对数据

    目录

    引子

    “键值对”的数据结构,之前基本上都是使用 {} ,新的规范中有更合适的选择了。

    上一篇 JavaScript 新旧替换五:函数嵌套

    ES5 方式

    基本用法

    使用 {} 存储键值对,键的类型只支持两种:StringSymbol

    const obj1 = {1:'1'};
    const obj2 = {'name':'Tom'};
    const mark = Symbol('age');
    const obj3 = {[mark]:19};
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);
    

    结果

    78-object-base

    上面的 obj1 的键名虽然是一个数字,但会被转换为字符串。

    操作

    添加/修改

    添加和修改使用 .[] 的方式:

    const obj = {};
    obj.name = 'Tom';
    obj['name'] = 'Jim';
    

    对于 Symbol 类型的键值,必须要用 [] 的方式才行。

    读取

    跟添加类似使用 .[] 的方式:

    const mark = Symbol('age');
    const obj = {name:'Tom',};
    obj[mark] = 19;
    console.log(obj.name);
    console.log(obj[mark]);
    

    删除

    删除使用 delete 操作符:

    const mark = Symbol('age');
    const obj = {name:'Tom',};
    obj[mark] = 19;
    delete obj.name;
    delete obj[mark];
    console.log(obj);
    

    遍历

    遍历的常用方法有:for-infor-of

    let obj = {name:'Tom',1:'1'};
    const mark = Symbol('age');
    obj[mark] = 19;
    for (const ele of Object.keys(obj)) {
      console.log(ele);
    }
    
    // 1
    // name
    

    这种数据结构的键是无序的,此外,键如果是 Symbol 类型,无法被遍历。

    ES2015+ 方式

    为了解决上述键类型的问题,ES2015+ 中提供了 Map 数据结构。Map 结构提供了“值-值”的对应,更加适合存储“键值对”。

    基本用法

    const m = new Map([
      [1,'1'],
      ['name','Tom'],
      [Symbol('age'),19],
      [{other:'play'},'basketball'],
    ]);
    console.log(m);
    console.log(m.size);
    

    结果

    78-map-base

    Map 数据结构基本属性 size 是成员的总数。

    操作

    添加/修改

    set(key, value) 方法设置键 key 对应的值为 value ,并返回整个 Map 结构,因此可以链式调用。如果 key 已经存在,则键值会被更新。

    const m = new Map();
    m.set(1,'1').set('name','Tom');
    const mark = Symbol('age');
    m.set(mark,19);
    const obj = {other:'play'};
    m.set(obj,'basketball');
    console.log(m);
    

    读取

    get(key) 方法读取 key 对应的值,如果找不到 key ,返回 undefined

    const m = new Map([
      ['name','Tom'],
    ]);
    const mark = Symbol('age');
    m.set(mark,19);
    
    console.log(m.get('name'));
    console.log(m.get(mark));
    

    删除

    delete(key) 方法删除键 key ,删除成功则返回 true ,否则返回 false

    const m = new Map([
      ['name','Tom'],
    ]);
    
    const result = m.delete('name');
    console.log(result) // true
    console.log(m.delete('age')) // false
    
    

    其它

    • has(key) : 判断是否有键 key
    • clear() : 清除所有成员。

    遍历

    遍历的常用方法有: forEachfor-of

    const m = new Map([
      ['name','Tom'],
      [1,'1'],
      [Symbol('age'),19],
      [{other:'play'},'basketball'],
    ]);
    for (const ele of m.keys()) {
      console.log(ele);
    }
    
    // name
    // 1
    // Symbol(age)
    // {other: "play"}
    

    键名是有序的,Symbol 类型的键也可以遍历到。

    区别

    维度 Map Object
    意外的键 默认情况不包含任何键,只包含显式插入的键。 原型链上的键名有可能与设置的键名产生冲突。
    键的类型 键可以是任意值。 键必须是一个 String 或 Symbol 。
    键的顺序 有序 无序
    键的统计 通过 size 属性获取 要手动计算
    迭代 Map 可以直接被迭代。 以某种方式(例如 Object.keys(obj))处理后才能迭代。
    性能 在频繁增删键值对的场景下表现更好。 在频繁增删除键值对的场景下未作优化。

    参考资料

  • 相关阅读:
    CSS3中的结构伪元素选择器和伪类选择器的使用
    ul li居中
    vue 点击按钮,边框变色
    vue 实现简单的遮罩层
    Vue 控制鼠标移入移出事件文字的隐藏和显示
    vue 文字点击变色
    vue v-for的用法
    使用CSS修改radio样式
    vue 点击显示隐藏,鼠标移动上去显示隐藏
    sql序列(3)基本语法
  • 原文地址:https://www.cnblogs.com/thyshare/p/13867491.html
Copyright © 2011-2022 走看看