Symbol

ES6用的并不多,在新的项目中,除了用了一些箭头函数,数组计算方法,块状作用域,其他的用的比较少,这里说一个比较少用的Symbol()方法

Symbol这个词很少听过,应该是后台的同学听说的比较多,前端我只在ES6中有接触过。

  • Symbol的中文意思是符号, 标志, 标记
  • <symbol>标签在SVG中,用来指代SVG小图标。

再这里,Symbol又是原生JavaScript的一个数据类型
undefinednullstringboolearnnumberobjectsymbol

Symbol本身又是一个方法。

1
typeof Symbol();//"symbol"

但是Symbol并不能像stringboolearnnumberobject那样作为构造函数使用

1
2
3
4
typeof Symbol();
/*Uncaught TypeError: Symbol is not a constructor
at new Symbol (<anonymous>)
at <anonymous>:1:1*/

重点:Symbol的作用

Symbol的作用非常的专一,换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符,防止对象属性冲突发生。

举个例子,公司新来一个同事,想了解关于她的更多信息,于是就询问Hr同事,扫地阿姨,于是得到类似这样信息:

1
2
3
4
5
6
7
8
9
let info1 = {
name: '张小小',
age: 24,
job: 'PHP工程师',
description: '平时喜欢做做瑜伽,人家有男朋友,你别指望了(HR描述)'
}
let info2 = {
description: '这小姑娘挺好的,挺热情的,嘿嘿嘿……(阿姨描述)'
}

然后汇集信息的时候:

1
2
3
4
5
6
7
8
let target = {};
Object.assign(target, info1, info2);
target = {
age:24,
job:"PHP工程师",
name:"张小小",
description:"这小姑娘挺好的,挺热情的,嘿嘿嘿……(阿姨描述)"
}

显然,你需要对这两个数据进行汇总,结果,就会发现,描述都用了同一个对象属性description,于是整合的时候,就容器冲突,覆盖,导致“人家有男朋友”这么重要的信息都没注意到。

但是,如果要是Symbol,则完全就不要担心这个问题了:

1
2
3
4
5
6
7
8
9
let info1 = {
name: '张小小',
age: 24,
job: 'PHP工程师',
[Symbol('description')]: '平时喜欢做做瑜伽,人家有男朋友,你别指望了(HR描述)'
}
let info2 = {
[Symbol('description')]: '这小姑娘挺好的,挺热情的,嘿嘿嘿……(阿姨描述)'
}

此时,我们对info1, info2对象进行复制,如下:

1
2
3
4
5
6
7
8
9
let target = {};
Object.assign(target, info1, info2);
target = {
age:24,
job:"PHP工程师",
name:"张小小",
Symbol(description):"平时喜欢做做瑜伽,人家有男朋友,你别指望了(HR描述)",
Symbol(description):"这小姑娘挺好的,挺热情的,嘿嘿嘿……(阿姨描述)",
}

所有的描述信息都被完完整整地保留了下来了。

因为Symbol()返回值是唯一的,也就是:

1
Symbol('description') === Symbol('description');    // 返回值是false

再重点:Symbol的语法(光知道作用不行啊)

语法如下:

Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

1
2
3
4
5
6
7
8
let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中,s1s2是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。

如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,将其转为字符串,然后才生成一个 Symbol 值。

1
2
3
4
5
6
7
const obj = {
toString() {
return 'abc';
}
};
const sym = Symbol(obj);
sym // Symbol(abc)

如果对象没有toString方法…

1
Symbol([object Object])

Symbol 值不能与其他类型的值进行运算,会报错。

1
2
3
4
5
6
let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

另外,Symbol 值也可以转为布尔值,但是不能转为数值。

1
2
3
4
5
6
7
8
let sym = Symbol();
Boolean(sym) // true
!sym // false
if (sym) {
// ...
}
Number(sym) // TypeError
sym + 2 // TypeError

作为属性名的 Symbol

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let mySymbol = Symbol();

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

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

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

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。

1
2
3
4
5
6
7
let s = Symbol();

let obj = {
[s]: function (arg) { ... }
};

obj[s](123);

同理 Symbol 值作为对象属性名时,不能用点运算符。

1
2
3
4
5
6
const mySymbol = Symbol();
const a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

Symbol 类型还可以用于定义一组常量,保证这组常量的值都是不相等的。

1
2
3
4
5
6
7
8
9
const log = {};

log.levels = {
DEBUG: Symbol('debug'),
INFO: Symbol('info'),
WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');
console.log(log.levels.INFO, 'info message');

下面是另外一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
const COLOR_RED    = Symbol();
const COLOR_GREEN = Symbol();

function getComplement(color) {
switch (color) {
case COLOR_RED:
return COLOR_GREEN;
case COLOR_GREEN:
return COLOR_RED;
default:
throw new Error('Undefined color');
}
}

常量使用 Symbol 值最大的好处,就是其他任何值都不可能有相同的值了,因此可以保证上面的switch语句会按设计的方式工作。

实例:消除魔术字符串

魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getArea(shape, options) {
let area = 0;

switch (shape) {
case 'Triangle': // 魔术字符串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}

return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

上面代码中,字符串Triangle就是一个魔术字符串。它多次出现,与代码形成“强耦合”,不利于将来的修改和维护。

常用的消除魔术字符串的方法,就是把它写成一个变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const shapeType = {
triangle: 'Triangle'
};

function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
}
return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

上面代码中,我们把Triangle写成shapeType对象的triangle属性,这样就消除了强耦合。

如果仔细分析,可以发现shapeType.triangle等于哪个值并不重要,只要确保不会跟其他shapeType属性的值冲突即可。因此,这里就很适合改用 Symbol 值。

1
2
3
const shapeType = {
triangle: Symbol()
};

上面代码中,除了将shapeType.triangle的值设为一个 Symbol,其他地方都不用修改。

属性名的遍历

Symbol 作为属性名,该属性不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。

Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

1
2
3
4
5
6
7
8
9
10
11
const obj = {};
let a = Symbol('a');
let b = Symbol('b');

obj[a] = 'Hello';
obj[b] = 'World';

const objectSymbols = Object.getOwnPropertySymbols(obj);

objectSymbols
// [Symbol(a), Symbol(b)]

另一个新的 APIReflect.ownKeys方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

1
2
3
4
5
6
7
8
let obj = {
[Symbol('my_key')]: 1,
enum: 2,
nonEnum: 3
};

Reflect.ownKeys(obj)
// ["enum", "nonEnum", Symbol(my_key)]
Symbol.for(),Symbol.keyFor()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true


Symbol.for("bar") === Symbol.for("bar")
// true

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


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

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
文章目录
  1. 1. 重点:Symbol的作用
    1. 1.0.1. Symbol的作用非常的专一,换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符,防止对象属性冲突发生。
  • 2. 再重点:Symbol的语法(光知道作用不行啊)
    1. 2.0.1. 语法如下:
      1. 2.0.1.1. 作为属性名的 Symbol
      2. 2.0.1.2. 实例:消除魔术字符串
      3. 2.0.1.3. 属性名的遍历
      4. 2.0.1.4. Symbol.for(),Symbol.keyFor()
  • |