前端开发系列035-基础篇之Symbol符号类型

本文介绍ES6新增加的数据类型 `Symbol` , 包括基本使用、注意事项以及常用内置 Symbol等。

Symbol 类型介绍

Symbol 是 ES6提供的新特性，表示一种新的原始数据类型，我们可以称之为符号类型，它是 JavaScript 语言中的第七种数据类型，在使用上类似于字符串。JavaScript 语言的数据类型有：null undefined boolean number string object Symbol。

console.log(typeof 123);      /* number */
console.log(typeof "abc");    /* string */
console.log(typeof true);     /* boolean */
console.log(typeof null);     /* object */
console.log(typeof undefined);/* undefined */
console.log(typeof {});       /* object */
console.log(typeof []);       /* object */
console.log(typeof Symbol()); /* symbol */

Symbol 类型的意义在于符号类型的数据总是一个独一无二的值，这可以解决对象混入(Mixin)时候因为成员名冲突而导致的覆盖问题。此外，需要注意 Symbol 是基本数据类型值，因此不支持通过 new 以构造函数的方式来调用。

/* Symbol符号类型数据的创建方式 */
/* 1.第一种创建方式 */
let s1 = Symbol();
let s2 = Symbol();
console.log(s1 == s2, s1, s2);
/* 输出：false Symbol() Symbol() */

/* 2.第二种创建方式 */
/* 注解：在创建数据的时候传入一个字符串类似于名字 */
let s3 = Symbol("a");
let s4 = Symbol("b");
let s5 = Symbol("b");

console.log(s3, s4, s5, s3 == s4, s4 == s5);
/* 输出：Symbol(a) Symbol(b) Symbol(b) false false */

/* Symbol解决了什么问题？ */
/* 演示代码-01 */
let o1 = {name:"zs",age:18}
let o2 = {name:"lw",address:"BeiJing"};
Object.assign(o1,o2);
console.log(o1);
/* 输出：{ name: 'lw', age: 18, address: 'BeiJing' } */
/* 注解：我们在把 o2 成员混入到 o1 对象中的时候 name键值对因为已经存在所以发生了覆盖。 */

/* 演示代码-02 */
let obj1 = { [Symbol("name")]: "zs", age: 18 }
let obj2 = { [Symbol("name")]: "lw", address: "BeiJing" };
Object.assign(obj1, obj2);
console.log(obj1);

/* 输出： */
/*
{ age: 18,
  address: 'BeiJing',
  [Symbol(name)]: 'zs',
  [Symbol(name)]: 'lw'
}
*/

我们知道，在以前对象的键名只能是字符串，当 ES6 引入 Symbol 之后，这也意味着普通对象的 key [属性名] 支持string和Symbol两种类型。不过，需要注意符号类型数据作为对象属性来存储数据的时候有一些小的注意点，下面通过代码来展示这些不同。

/* 符号类型数据作为对象的 key */
/* 方式(1) */
let o1 = { name: "Yong" };
o1[Symbol()] = "Hi@";
console.log(o1) /* { name: 'Yong', [Symbol()]: 'Hi@' } */

/* 注意：无法通过下面这种方式来读取，因为是两个不同的数据 */
console.log(o1[Symbol()]); /* undefined */

/* 方式(2) */
let mySymbol = Symbol();
let o2 = { name: "Yong" };
o2[mySymbol] = "Hello@";
console.log(o2) /* { name: 'Yong', [Symbol()]: 'Hello@' } */

/* 方式(3) */
let symbol_pro = Symbol();
let symbol_fnc = Symbol();

let o3 = {
    name: "Yong",
    [symbol_pro]: "Nice to meet u",
    [symbol_fnc]() {
        console.log("调用了函数——symbol_fnc")
    }
};
console.log(o3); /*{name: 'Yong', [Symbol()]:'Nice to meet u', [Symbol()]: [Function]}}*/
console.log(o3[symbol_pro]); /* Nice to meet u */
o3[symbol_fnc]();            /* 调用了函数——symbol_fnc */

/* 注解：不能直接以点语法的方式来访问符号类型的属性值 */
console.log(o3.symbol_pro); /* undefined */

/* 方式(4) */
let o4 = {name:"Yong"};
let sym = Symbol();
Object.defineProperty(o4, sym, { value: "Xia" });
console.log(o4[sym], o4);  /* Xia { name: 'Yong' } */

现在我们知道了 Symbol的特性以及基本使用，其中最重要的一点那就是 Symbol 类型的数据是独一无二的，可是在某些时候我们可能想要对符号类型的数据进行复用，这种情况可以考虑使用Symbol.for方法来创建。 Symbol.for接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol值，如果有那么句直接返回这个已经存在的 Symbol值，如果没有那么就会新建并返回一个以该字符串作为名称的 Symbol值。

/* (1) Symbol.for()  */
/* 1.每次都会创建不同的符号类型数据 */
let s1 = Symbol("foo");
let s2 = Symbol("foo");
console.log(s1, s2, s1 == s2); /* Symbol(foo) Symbol(foo) false */

/* 2.注册以复用(s3 和 s4实际是同一个值) */
let s3 = Symbol.for("test");
let s4 = Symbol.for("test");
console.log(s3, s4, s3 == s4); /* Symbol(test) Symbol(test) true */

/* (2) Symbol.keyFor()
该方法返回一个已经登记的 Symbol类型值的 key，
如果指定的符号类型数据未登记(不是通过 Symbol.for() 来创建，那么将返回 undefined) */

console.log(Symbol.keyFor(s3), Symbol.keyFor(s4)) /* test test */
console.log(Symbol.keyFor(s1), Symbol.keyFor(s2)) /* undefined undefined */

Symbol 类型的数据( 键值对 )并不适用于普通的遍历。

let o = {
    id: "41",
    name: "Yong",
    [Symbol("age")]: 18,
    [Symbol("address")]: "QuJin"
}

/* 通过for...in 循环遍历 */
for (const k in o) {
    console.log(k, o[k])
}

/* 打印输出： for...in循环并不能遍历符号类型数据
id 41
name Yong */

console.log(Object.keys(o));                  /* [ 'id', 'name' ] */
console.log(Object.getOwnPropertyNames(o));   /* [ 'id', 'name' ] */
console.log(Object.getOwnPropertySymbols(o)); /* [ Symbol(age), Symbol(address) ] */
console.log(Reflect.ownKeys(o));
 /* [ 'id', 'name', Symbol(age), Symbol(address) ] */

内置的 Symbol

我们除了可以通过 Symbol() 来创建自定义的符号类型数据外，ES6还为我们提供了内置的 Symbol 值，这些值指向 JavaScript 语言内部使用的方法，下面先简单列出这些内置的 Symbol 值。

Symbol.match              字符串相关方法...
Symbol.replace
Symbol.search
Symbol.split
Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables
Symbol.hasInstance        当使用 instanceof 运算符的时候会调用该方法以判断对象是否为构造函数的实例。
Symbol.isConcatSpreadable 布尔类型值，决定 Array.prototype.concat() 是否可以展开。
Symbol.species            当实例化的时候内部会调用该方法，用于提供 this 来创建实例对象。
Symbol.iterator           指向默认的遍历器方法，对象在进行for...of循环的时候会调用该方法。

这里简单通过代码来演示和验证Symbol.hasInstance | Symbol.isConcatSpreadable 的使用。

/* 1.Symbol.hasInstance */
function Person(name, age) {
    this.name = name;
    this.age = age;
}

/* [Function: [Symbol.hasInstance]] */
console.log(Person[Symbol.hasInstance])

let p = new Person("Yong", 18);
console.log(p instanceof Person)            /* true */
console.log(Person[Symbol.hasInstance](p)); /* true */
/* 注解：检查 p 对象的原型对象是否在 Person 的原型链上面 */
/* 当执行 p instanceof Person 的时候，内部实际调用的是 Person[Symbol.hasInstance](p) */

/* 2.Symbol.isConcatSpreadable */
let arr1 = [3, 2, 1];
let arr2 = ["abc", "def"];
arr2[Symbol.isConcatSpreadable] = true;
let result = arr1.concat(4, arr2, 456);
console.log(result);

/* 当arr2[Symbol.isConcatSpreadable] = true; */
/* result == [ 3, 2, 1, 4, 'abc', 'def', 456 ] */

/* 当arr2[Symbol.isConcatSpreadable] = false; */
/* result == [ 3, 2, 1, 4, ['abc', 'def'], 456 ] */