初探第七种数据类型,symbol

210 阅读1分钟

es5中有六种数据类型:string , boolean , number , object , null , undefined

es6中新加入了一种数据类型: symbol

首先 symbol 是以函数形式存在的,调用这个函数可以拿到这个symbol值

let a = Symbol()
console.log(a);

// 或者直接
console.log(Symbol());

都会输出:==> image.png

再打印一下他是什么类型的:

console.log(typeof Symbol());

它本身是个symbol类型 image.png

也可以用字符串来对它进行一个描述

const name = Symbol("abc")
console.log(name)

image.png

symbol也可以当作对象的属性名

    const favorite = Symbol('favorite')
    const message = {
        name :'张三',
        age: 18,
        [favorite] : '喝奶茶'
    }
    console.log(message);

image.png

输出结果发现拿不到'喝奶茶'的属性名

再用for遍历 , Object.keys() , 以及Object.getOwnPropertyNames()来测试

    const favorite = Symbol('favorite')
    const message = {
        name :'张三',
        age: 18,
        [favorite] : '喝奶茶'
    }
    for(let item in message){
      console.log(item);
    }
    console.log(Object.keys(message));
    console.log(Object.getOwnPropertyNames(message));

image.png

可以看到结果依旧只有这两个

结论: 通过Symbol定义的属性名,用之前给的方法拿不到

但是可以用Object.getOwnPropertySymbols()可以拿到

const message = {
        name :'张三',
        age: 18,
        [Symbol('favorite')] : '喝奶茶'
    }
    for(let item in message){
      console.log(item);
    }
    console.log(Object.keys(message));
    console.log(Object.getOwnPropertySymbols(message));
    

image.png

结果是以数组的形式返回的,也就是说 =>

    const message = {
        name :'张三',
        age: 18,
        [Symbol('favorite')] : '喝奶茶',
        [Symbol('favorite')] : '喝可乐',
        [Symbol('favorite')] : '喝咖啡'
    }
    console.log(Object.getOwnPropertySymbols(message));

image.png

symbol可以定义多个,而且不重复,接下来在使用for遍历看是否可以拿到属性值

    const message = {
        name :'张三',
        age: 18,
        [Symbol('favorite')] : '喝奶茶',
        [Symbol('favorite')] : '喝可乐',
        [Symbol('favorite')] : '喝咖啡'
    }
    const arr = Object.getOwnPropertySymbols(message);
    for(let val of arr){
      console.log(message[val]);
    }

image.png

可以看到现在可以拿到所有用symbol属性名的属性值了