ES6 Symbol

ES6 Symbol

之前,本人记忆中关于js原始数据类型有五种,分别是:undefined、Boolean、null、Number、String,但是偶然间看见发现,现在又多增加了一种Symbol,那就先简单了解一下吧~

一、Symbol是什么

Symbol是es6引入得一种新的原始数据类型,表示独一无二的值

二、Symbol的声明方法

let s = Symbol();
typeof s  // “symbol”,变量s是Symbol数据类型,而不是字符串之类的其他类型。

ES6 Symbol_第1张图片

:Symbol不能使用new命令,否则会报错,因为它是一个原始数据类型,不是对象,因此,它也不可以添加属性

如下图所示:
ES6 Symbol_第2张图片
三、Symbol的使用

  • Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分;
  • 如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,将其转为字符串,然后才生成一个 Symbol 值;
  • Symbol值不能与其他类型的值进行运算,会报错;
  • Symbol值可以显式转为字符串;
  • Symbol值也可以转为布尔值,但是不能转为数值。

小案例:
1-

var s1 = Symbol('foo');
console.log(s1);
console.log(s1.toString());

ES6 Symbol_第3张图片
2-

const objSy = {
    toString() {
        return 'abc';
    }
};
const sym = Symbol(objSy);
console.log(sym) 

ES6 Symbol_第4张图片
3- Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();

s1 === s2 // false

// 有参数的情况
var s1 = Symbol('foo');
var s2 = Symbol('foo');

s1 === s2 // false

四、作为属性名的Symbol

由于每一个Symbol值都是不相等的,这意味着Symbol值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。

var mySymbol = Symbol();

// 第一种写法
var a1 = {};
a1[mySymbol] = 'Hello!';

// 第二种写法
var a2 = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a3 = {};
Object.defineProperty(a3, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
console.log(a1[mySymbol]) // "Hello!"
console.log(a2[mySymbol]) // "Hello!"
console.log(a3[mySymbol]) // "Hello!"

五、属性名的遍历

Symbol 作为属性名,该属性不会出现在for…in、for…of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。这样的话,如果循环输出时不希望所有值全部输出,那我们就可以使用Symbol进行保护。

// 正常状况下
var objFor={name:'xiaoming',sex:'男',age:18};
for (let item in objFor){
    console.log(objFor[item]); // xiaoming 男 18
} 

// 使用Symbol时
let objForM={name:'小明',sex:'男'};
let age=Symbol();
objForM[age]=18;
for (let item in objForM){
    console.log(objForM[item]);  // xiaoming 男
} 
console.log(objForM); //{name: "小明", sex: "男", Symbol(): 18}

以上是Symbol的一些简单使用方法,更多内容可参考文档http://caibaojian.com/es6/symbol.html

你可能感兴趣的:(ES6)