新的数据类型Symbol

1. 概述

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型。

2.简单的用法

最简单的声明

let a=Symbol();

console.log(a);//Symbol()

每一个都是独一无二

let a=Symbol()

let b=Symbol()

console.log(a===b)//false

3.Symbol.for()，Symbol.keyFor()

有时，我们希望重新使用同一个 Symbol 值，Symbol.for方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。

let a=Symbol.for('fw')

let b=Symbol.for('fw')

console.log(a===b);//true

Symbol("bar") === Symbol("bar")//false

由于Symbol()写法没有登记机制，所以每次调用都会返回一个不同的值。Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key。

let s1 = Symbol.for("foo");

Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");

Symbol.keyFor(s2) // undefined

4.作为属性名的 Symbol

由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖。

let testKey=Symbol();

// 第一种写法

let a={};

a[testKey]='hello world';

// 第二种

let a={

    [testKey]:'hello world'

}

// 第三种

let a={};

Object.defineProperty(a,testKey,{value:'hello world'})

// 以上写法得到同样的结果

console.log(a[testKey]);//hello world

注意，Symbol 值作为对象属性名时，不能用点运算符。

demo1

const mySymbol = Symbol();

const a = {};

a.mySymbol = 'Hello!';

a[mySymbol] // undefined

a['mySymbol'] // "Hello!"

demo2

let a=Symbol('symbolA');

let obj={

    [a]:1,

    a:2

}

// 各种写法的结果

obj.a   //2

obj['a']//2

obj[a]  //1

5.使用场景(实例)

旧写法

function getArea(shape, options) {

    let area = 0;

    switch (shape) {

        case 'Triangele':

            area = options.w * options.h / 2;

            break;

        case 'Squire':

            area = options.w * options.h;

            break;

            /**more code */

    }

    return area;

}

getArea('Squire',{w:10,h:2});//20

新写法

const shapeType = {

    Triangle: Symbol(),

    Squire: Symbol()

}

function getArea(shape, options) {

    let area = 0;

    switch (shape) {

        case shapeType.Triangle:

            area = options.w * options.h / 2;

            break;

        case shapeType.Squire:

            area = options.w * options.h;

            break;

        /**more code */

    }

    return area;

}

getArea(shapeType.Squire, { w: 10, h: 2 });

参考

ECMAScript 6 入门

巴特西

ES6学习笔记之Symbol

新的数据类型Symbol

1. 概述

2.简单的用法

3.Symbol.for()，Symbol.keyFor()

4.作为属性名的 Symbol

5.使用场景(实例)

参考

最新文章

热门文章