ES6 新數據類型 symbol

• 預熱

javascript有 6種 數據類型

1. undefined
2. null
3. 布爾值(Boolean)
4. 字符串(String)
5. 數值(Number)
6. 對象(Object)

而 symbol 爲ES6新增的數據類型。表示獨一無二的值，使用Symbol()定義(S大寫！)

• 理解symbol

那麼這個symbol究竟是個什麼東西，咱們看下面例子：

const a = Symbol()
const b = Symbol()
console.log(a==b) // false
複製代碼

在我理解，就是對a、b進行隨機賦值，而且永遠不會重複

再來一個例子

const b = Symbol();
let a = {};
a[b] = 'red';
console.log(a[b]); // red
console.log(a) // {Symbol(): "red"}
a = {
    [b]: 'blue',
    b: 'black'
}
console.log(a); // {b: "black", Symbol(): "blue"}
a.b = 'yellow'
console.log(a); //{b: "yellow", Symbol(): "blue"}
a[b] = 'black'
console.log(a); //{b: "yellow", Symbol(): "black"}
a['b'] = 'white'
console.log(a); // {b: "white", Symbol(): "black"}
複製代碼

咱們能夠看到，若是用Symbol()生成的symbol在對象中顯示的是Symbol()而不對定義的b， 而須要對symbol值進行修改則須要使用a[b];經過這裏咱們能夠看到symbol的一個使用好處就是不會被不經意的a.b修改了值

• symbol使用

1. 寫法

let mySymbol = Symbol();

// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';

// 第二種寫法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上寫法都獲得一樣結果
a[mySymbol] // "Hello!"
複製代碼

2. 添加描述

const sym = Symbol('name');
console.log(sym); // Symbol(name)
複製代碼

定義在Symbol()內添加描述 ES2019 提供方法descripttion

const sym = Symbol('name');
console.log(sym.description); // name
複製代碼

3. 賦值

let mySymbol = Symbol();

// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';

// 第二種寫法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上寫法都獲得一樣結果
a[mySymbol] // "Hello!"
複製代碼

4. 遍歷

Symbol 做爲屬性名，該屬性不會出如今for...in、for...of循環中，也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。可是，它也不是私有屬性，有一個Object.getOwnPropertySymbols方法，能夠獲取指定對象的全部 Symbol 屬性名 《ECMAscript 6入門》 ——阮一峯

若是要遍歷symbol則須要使用 Object.getOwnPropertySymbols 方法

const a = Symbol('a')
const b = Symbol('b')
const symList = {
    [a]: 1,
    [b]: 2
}
console.log(Object.getOwnPropertySymbols(symList)); // [Symbol(a), Symbol(b)]
複製代碼

Object.getOwnPropertyNames方法得不到Symbol屬性名;

不過，另外一個新的 API，Reflect.ownKeys方法能夠返回全部類型的鍵名，包括常規鍵名和 Symbol 鍵名。

5. Symbol.for()，Symbol.keyFor() 一開始咱們說過symbol的概念，symbol爲惟一的；可是咱們非要使用相同的symbol值呢； 這時候咱們就得用 Symbol.for() 了

const a = Symbol.for('c')
const b = Symbol.for('c')
console.log(a == b); // true
console.log(a); // Symbol(c)
複製代碼

獲取Symbol.for()定義的描述能夠經過 Symbol.keyFor() 來獲取，可是若是是經過Symbol()寫的描述就獲取不到了

const a = Symbol.for("c");
console.log(Symbol.keyFor(a)); // c
const b = Symbol("c");
console.log(Symbol.keyFor(b)); // undefined
複製代碼

6. 代碼中使用/使用場景 好比咱們要進行判斷，而判值提早定義爲常量

const a = 'NAME_A'
const b = 'NAME_B'
const c = 'NAME_C'
function Func(val) {
    switch (val) {
        case a:
            return 1
        case b:
            return 2
        case c:
            return 3
        default:
            return -1
    }
}
console.log(Func(a)); // 1
複製代碼

這裏咱們並不關心obj裏對象值是什麼此時咱們使用Symbol()

const a = Symbol('a')
const b = Symbol('b')
const c = Symbol('c')
function Func(val) {
    switch (val) {
        case a:
            return 1
        case b:
            return 2
        case c:
            return 3
        default:
            return -1
    }
}
console.log(Func(a)); // 1
複製代碼

that all