它接受一个字符串参数,作为该标识符的描述:
var sym = Symbol(“Discription”);
var temp = Symbol(“Discription”);
console.log(sym); //Symbol(Discription)
console.log(sym.valueOf()); //Symbol(Discription)
console.log(sym.toString()); //“Symbol(Discription)”
console.log(sym == temp); //false
描述符是用来帮助开发人员区别不同是 symbol,不具备其他意义, 所以 symbol 值只有toString()
和valueOf()
方法。
Symbol 作为一个基本类型存在于 js 中。这样,js 就有了6个基本类型: null
, undefined
, Boolean
, Number
, String
, Symbol
和1个复杂类型: Object
使用 Symbol 需要注意以下几点:
-
Symbol 和 null, undefined 一样不具有构造函数,不能用 new 调用。
-
Symbol 值不能转为数字,所以不能参与任何算术,逻辑运算
-
Symbol 虽然有 toString() 但 toString 得到的不是字符串,所以不能用于字符串链接,不能用于模板字符串
-
Symbol 可以转换为 Boolean, 用在条件语句中,但所有 Symbol 都是逻辑 true
-
Symbol 作为属性名时,该属性是公开的,不是私有的
Symbol用作属性名
这个应该不陌生了,和普通标识符用法类似,只是不能使用.
访问和定义,必须使用[]
:
var sym = Symbol(“abc”);
var fun = Symbol(“getSym”);
var a = {};
asym = 1;
var b = {
fun{
console.log(thissym);
}
};
var c = Object.defineProperty({}, sym, {value: 1});
asym; //1
bsym; //1
csym; //1
bfun; //1
当然也可以定义一些常量,就像英语中 Symbol 代表一种象征,一个符号:
var log = {
DEBUG: Symbol(‘debug’),
ERROR: Symbol(‘error’),
WARNING: Symbol(‘warning’),
}
需要注意,Symbol 属性只有Object.getOwnPropertySymbols(obj)
和 Reflect.ownKey(obj)
可以遍历到:
- Object.getOwnPropertySymbols(obj): 返回自身所有 Symbol 属性名的数组,包括不可枚举属性
- Reflect.ownKey(obj): 返回自身所有属性名数组,包括不可枚举属性和 Symbol 属性名
var sym = Symbol(“pro”);
var o = {
a: 1,
b: 2,
}
Object.getOwnPropertySymbols(o); //[Symbol(pro)]
Reflect.ownKeys(o); //[“a”, “b”, Symbol(pro)]
我们可以利用这个方法,构造一些非私有的内部变量:
var size = Symbol(‘size’);
class Collection{
constructor(){
this[size] = 0;
}
add(num){
this[this[size]] = item;
this[size]++;
}
static sizeOf(instance){
return instance[size];
}
}
var x = new Collection();
console.log(Collection.sizeOf(x)); //0
x.add(“foo”);
console.log(Collection.sizeOf(x)); //1
console.log(Object.keys(x)); //[‘0’]
console.log(Object.getOwnPropertyNames(x)); //[‘0’]
console.log(Object.getOwnPropertySymbols(x)); //[Symbol(size)]
Symbol的静态方法
- Symbol.for(“string”): 登记并重用一个 symbol 值
Symbol.for(“aa”) === Symbol.for(“aa”); //true
Symbol(“aa”) === Symbol(“aa”); //false
- Symbol.keyFor(symbol): 返回一个已登记的 Symbol 描述, 未登记的 Symbol 返回 undefined
var s1 = Symbol.for(“aa”);
var s2 = Symbol(“aa”);
Symbol.keyFor(s1); //“aa”
Symbol.keyFor(s2); //undefined
注意 Symbol 的登记是全局的:
iframe = document.createElement(‘iframe’);
iframe.src = String(window.location);
document.body.appendChild(iframe);
iframe.contentWindow.Symbol.for(“aa”) === Symbol.for(“aa”); //true
内置的 Symbol 值
ES6 提供了12个内置的 Symbol 值,这12个值,都是对象的,且都不可枚举、不可配置、不可修改。因为它们具有其特殊意义:
-
Symbol.hasInstance: 指向一个内部方法。判断对象是否某个构造函数的实例,instanceof 运算符会调用它
-
Symbol.isConcatSpreadable: 是一个数组对象属性。如果为 false 该属性在 concat 过程不会被展开。数组对象该属性默认值为 true, 类数组对象该属性默认值为 false
var arr = [3,4];
[1,2].concat(arr); //[1,2,3,4]
arr[Symbol.isConcatSpreadable] = false;
[1,2].concat(arr); //[1,2,[3,4]]
对于一个类而言,该属性必须返回 boolean 类型
class A1 extends Array{
return true;
}
}
class A2 extends Array{
return false;
}
}
let a1 = new A1();
a1[0] = 3;
a1[1] = 4;
let a2 = new A2();
a2[0] = 5;
a2[1] = 6;
[1,2].concat(a1).concat(a2); //[1, 2, 3, 4, 5, 6]
-
Symbol.species: 指向一个方法。将对象作为构造函数调用时,系统内部会调用这个方法。即,当 this.constructor[Symbol.species]存在时,以此为构造函数构建对象。
-
Symbol.match: 指向一个函数。当执行
str.match(obj)
的时候, 如果 obj 存在该属性,调用该方法并返回该方法的返回值
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
资料过多,篇幅有限
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-MFu8DUcg-1710769881559)]
最后
[外链图片转存中…(img-BImaK93g-1710769881560)]
[外链图片转存中…(img-2XkBOvaS-1710769881560)]
资料过多,篇幅有限
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。