• 技术文章 >web前端 >前端问答

    新增的es6数据结构有哪些

    青灯夜游青灯夜游2022-04-15 19:26:29原创152

    新增结构有:1、Symbol,表示独一无二的值,是一个函数结构;2、Set,指的是“集合”结构,类似数组,允许存放无序且不能重复的数据;3、WeakSet,类似Set,内部数据也不能有重复值;4、Map,指的是“字典”结构,可存储映射关系。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    ES6新增数据结构

    1、Symbol

    SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

    const s1 = Symbol()
    const s2 = Symbol()
    console.log(s1 === s2); // false

    symbol作为key

    第一种方式,直接在对象的字面量中添加。

    // symbol作为key
    const obj = {
      [s1]:'abc',
      [s2]:'cc',
    }

    第二种方式,通过添加数组方式添加。

    // 需要用数组方式来获取,不能通过点语法,否则会获取到字符串key
    console.log(obj[s1]);

    第三种方式,通过对象中的defineProperty方法添加。

    const s4=Symbol()
    Object.defineProperty(obj,s4,{
      configurable:true,
      enumerable:true,
      writable:true,
      value:'ff'
    })

    通过symbol获取对应的值

    需要用数组方式来获取,不能通过点语法,否则会获取到字符串key。

    console.log(obj[s1]);

    symbol不能被隐式转换成string类型。

    注意:Symbol函数中的参数是symbol描述符,这是在ES10新增的特性

    let Sym = Symbol("Sym")
    alert(Sym)  // TypeError: Cannot convert a Symbol value to a string

    我们不能直接alert一个symbol对象,但是我们可以通过toString的方式或者.description来获取symbol对象的描述符。

    let sym = Symbol('a')
    console.log(sym.description); // 'a'

    遍历symbol

    在使用for遍历、object.keys中是获取不到symbol健的,对此object还提供了getOwnPropertySymbols方法,用于获取对象中所有symbol的key。

    const sKeys=(Object.getOwnPropertySymbols(obj));
    for(const skey of sKeys){
      console.log(obj[skey]);
    }

    全局symbol对象注册

    有时,我们可能需要多个symbol的值是一致的,我们可以通过symbol提供的静态方法for方法传入一样的描述符来使它们的值一致。

    Symbol.for

    该方法会在使用给定键搜索运行时符号注册表中的现有符号,并在找到时返回它。否则,使用此键在全局符号注册表中创建一个新符号。

    const sa=Symbol.for('cc')
    const sb=Symbol.for('cc')
    console.log(sa===sb); //true

    Symbol.keyFor

    该方法用于获取全局symbol的描述符。

    const key =Symbol.keyFor(sb)
    console.log(key); // c

    2、Set

    Set对象(类似数组)允许你存放任何数据类型,但里面的值不能重复。

    const s1 = new Set()
    s1.add(10)
    s1.add(20)
    s1.add(30)
    s1.add(40)
    
    console.log(s1) // Set(4) { 10, 20, 30, 40 }
    
    s1.add(20)
    console.log(s1) // Set(4) { 10, 20, 30, 40 }

    Set常用方法

    方法返回值说明
    sizeset对象中的数量返回set对象中的数量
    addSet对象添加元素
    deleteboolean删除元素
    hasbooleanSet对象中是否存在这个值
    clear清空Set对象中的值

    3、WeakSet

    WeakSet是类似Set的另外一种数据结构,内部数据也不能有重复值。

    基本使用

    const weakSet = new WeakSet();
    let obj = {
      name: "_island"
    };
    
    weakSet.add(obj);

    WeakSet常用方法

    方法返回值说明
    addweakset对象添加元素
    deleteboolean删除元素
    hasbooleanweakset对象中是否存在这个值

    关于遍历

    WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

    所以WeakSet中的对象是不能获取的

    4、Map

    ES6新增的数据结构,用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。(假如我们把对象作为key,其内部会将对象转换为字符串[object object]

    const obj1 = { name: "_island" };
    const obj2 = { name: "QC2125" };
    const obj3={
      [obj1]:'a',
      [obj2]:'b',
    }
    
    console.log(obj3);
    // { '[object Object]': 'b' }

    Map则可以把对象作为key进行存储,可以通过set方法添加到Map中,也直接通过字面量的方式添加。

    const obj1 = { name: "_island" };
    const obj2 = { name: "QC2125" };
    const map = new Map();
    map.set(obj1, "a");
    map.set(obj2, "b");
    console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }
    
    // or
    const map2 = new Map([[obj1,'a'],[obj2,'b']])

    Map常用方法

    方法返回值说明
    get获取对应的元素通过key获取对应元素
    sizeMap对象中的数量返回Map对象中的数量
    setMap对象添加元素
    deleteboolean删除元素
    hasbooleanSet对象中是否存在这个值
    clear清空Set对象中的值

    遍历Map

    通过foreach语句遍历Map

    map2.forEach((item) => console.log(item));

    通过for..of遍历Map

    for ([val, key] of map2) {
      console.log(`${key}---${val}`);
    }

    5、WeakMap

    Map类似,也是以键值对的形式存在的

    基本使用

    const weakMap = new WeakMap();
    weakMap.set(obj, "a");
    console.log(weakMap.get(obj)); // a

    WeakMap常用方法

    方法返回值说明
    getweakmap对象获取元素
    deleteboolean删除元素
    hasbooleanweaksmap对象中是否存在这个值

    关于遍历

    WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

    【相关推荐:javascript视频教程web前端

    以上就是新增的es6数据结构有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:es6 数据结构
    上一篇:es6数组怎么去掉规定的值 下一篇:es6中let与var的区别是什么
    Web大前端开发直播班

    相关文章推荐

    • es6中some的作用是什么• es6新增的声明方法有什么• es6中set类型是不是有序的• es6怎么检测数组中有没有某个元素• es6怎么判断对象有没有某属性• es6怎么判断一个变量是否为字符串• 你说你会用ES6,那赶紧用上啊!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网