ES6 study notes the Symbol

New data types Symbol

1 Overview

ES5 name of the object properties are strings, which is likely to cause conflict attribute names. For example, you use an object provided by others, but want to add new methods (mixin mode) for this object name of the new approach is likely to conflict with existing methods. If there is a mechanism to ensure that the name of each property is unique enough, thus preventing the conflict from the fundamental attribute names. That's why Symbol of ES6 introduced.

ES6 introduces a new primitive data type Symbol, represents a unique value. It is the seventh data types JavaScript language.

2. Simple usage

• The simplest statement

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

• Each one is unique

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

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

Sometimes, we want to re-use the same Symbol value, Symbol.for ways to do this. It accepts a string argument, then there is no search parameter to the value of the name as a Symbol. If so, it returns the value of the Symbol, otherwise new and returning a string with the name of Symbol value.

let a=Symbol.for('fw')
let b=Symbol.for('fw')
console.log(a===b);//true

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

Since Symbol () is not written registration mechanisms, so each call will return a different value.
Symbol.keyForMethod returns the value of a key Symbol type registered.

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

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

Symbol 4. As the attribute name

Since each Symbol values ​​are not equal, which means Symbol values ​​can be used as an identifier for the attribute name of the object, you can guarantee the property of the same name does not appear. This is useful for an object by a plurality of modules, one key can be prevented from being carelessly rewritten or overwritten.

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

Note that, Symbol value as an object name attribute, not by the dot operator.

• 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

Scene 5. (Example)

• The old wording

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

• The new wording

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 });

reference

ECMAScript 6 Getting Started