理解Symbol标识符

初识

​Symbol​是ES6出现的新的数据类型，主要作用是创建唯一标识，避免出现变量命名冲突。

const s1 = Symbol('ErMao')
const s2 = Symbol('ErMao')

console.log(s1 === s2) // false

‍

提升

用作对象的属性

由于Symbol的唯一性，常被用于对象属性的键，避免出现对象属性名冲突被覆盖的情况。

const ErMao = Symbol('name')
const YiMao = Symbol('name')

const nameObj = {
	[ErMao]:'ErMao',
	[YiMao]:'YiMao'
}

console.log(nameObj[ErMao])

上面的两个变量ErMao​和YiMao​都有相同的描述name​，这么写就可以避免使用相同name造成的对象覆盖问题。但是这种方式似乎无济于事，直接使用变量名作为对象属性不就好了吗？所以一般也不会直接这么使用。

衍生

const names = [Symbol('name'),Symbol('name')]

const nameObj = {
	[name[0]]:'ErMao',
	[name[1]]:'YiMao'
}
console.log(nameObj[name[0]])

不直接命名了，通过数组的方式获取到对应的Symbol，获取值的方式也能直接使用数组的方式进行。

隐藏属性

通过Symbol命名的对象属性，通过遍历操作的方式无法获取到，例如：for...in​、Object.keys()​。可以使用Object.getOwnPropertySymbols()获取。

const SECRET = Symbol('secret')

const user = {
  name: 'ErMao',
  [SECRET]: 'hidden-info'
}

console.log(Object.keys(user)) // ["name"]

‍

进阶

全局Symbol注册表

通过使用Symbol.for()的方式，全局注册并共享该symbol。这样的方式，如果拥有一个字典，在任何地方，需要某个变量定义为全局Symbol，指向的都是同一个值。

const ERMAO_VERSION = Symbol.for('version')
const YIMAO_VERSION = Symbol.for("version")

console.log(ERMAO_VERSION === YIMAO_VERSION) // true

通过Symbol.keyfor()可以获取到对应的symbol描述

console.log(Symbol.keyfor(ERMAO_VERSION)) //'version'

‍

自定义对象的行为

内置 Symbol	作用
​Symbol.iterator	使对象可迭代（for...of）
​Symbol.toStringTag	修改对象的[object xxx]输出
​Symbol.hasInstance	自定义instanceof行为
​Symbol.toPrimitive	控制对象的类型转换行为
​Symbol.asyncIterator	定义对象的异步迭代器
​Symbol.isConcatSpreadable	定义数组在 Array.prototype.concat 中是否可展开
​Symbol.species	定义派生对象时使用的构造函数
​Symbol.toPrimitive	定义对象转换为原始值时的行为
​Symbol.unscopables	定义对象在 with 语句中哪些属性不可用

内置Symbol为javascript提供了扩展性和可定制性。

‍

总结

Symbol作为ES6出现的新的数据类型，提供了更加安全规范的唯一标识符的方式，避免了对象属性变量名的冲突。常会在一些框架库中找到有关Symbol的代码，例如React。

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {renameElementSymbol} from 'shared/ReactFeatureFlags';

// ATTENTION
// When adding new symbols to this file,
// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'

// The Symbol used to tag the ReactElement-like types.
export const REACT_LEGACY_ELEMENT_TYPE: symbol = Symbol.for('react.element');
export const REACT_ELEMENT_TYPE: symbol = renameElementSymbol
  ? Symbol.for('react.transitional.element')
  : REACT_LEGACY_ELEMENT_TYPE;
export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');
export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');
export const REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider'); // TODO: Delete with enableRenderableContext
export const REACT_CONSUMER_TYPE: symbol = Symbol.for('react.consumer');
export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
export const REACT_FORWARD_REF_TYPE: symbol = Symbol.for('react.forward_ref');
export const REACT_SUSPENSE_TYPE: symbol = Symbol.for('react.suspense');
export const REACT_SUSPENSE_LIST_TYPE: symbol = Symbol.for(
  'react.suspense_list',
);
export const REACT_MEMO_TYPE: symbol = Symbol.for('react.memo');
export const REACT_LAZY_TYPE: symbol = Symbol.for('react.lazy');
export const REACT_SCOPE_TYPE: symbol = Symbol.for('react.scope');
export const REACT_DEBUG_TRACING_MODE_TYPE: symbol = Symbol.for(
  'react.debug_trace_mode',
);
export const REACT_OFFSCREEN_TYPE: symbol = Symbol.for('react.offscreen');
export const REACT_LEGACY_HIDDEN_TYPE: symbol = Symbol.for(
  'react.legacy_hidden',
);
export const REACT_TRACING_MARKER_TYPE: symbol = Symbol.for(
  'react.tracing_marker',
);

export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
  'react.memo_cache_sentinel',
);

export const REACT_POSTPONE_TYPE: symbol = Symbol.for('react.postpone');

const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
const FAUX_ITERATOR_SYMBOL = '@@iterator';

export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<any> {
  if (maybeIterable === null || typeof maybeIterable !== 'object') {
    return null;
  }
  const maybeIterator =
    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
    maybeIterable[FAUX_ITERATOR_SYMBOL];
  if (typeof maybeIterator === 'function') {
    return maybeIterator;
  }
  return null;
}

export const ASYNC_ITERATOR = Symbol.asyncIterator;