学习TypeScrip13（symbol类型）

扶苏1002

已于 2024-04-17 13:56:17 修改

阅读量602

点赞数 9

分类专栏： TypeScript 文章标签：学习 javascript 前端

于 2024-04-17 13:44:58 首次发布

本文链接：https://blog.csdn.net/qq_44741577/article/details/137869723

版权

TypeScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的Symbol类型，包括其创建、唯一性、作为对象属性、不可遍历、获取symbol属性、迭代器功能以及各种内置方法的应用，还提到了TypeScript中的泛型。

摘要由CSDN通过智能技术生成

1. Symbol

自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。
symbol类型的值是通过Symbol构造函数创建的。

参数

可以传递参做为唯一标识只支持 string 和 number类型的参数

let sym1 = Symbol();
let sym2 = Symbol('key'); // 可选的字符串key

2. Symbol的值是唯一的

const s1 = Symbol();
const s2 = Symbol();
// s1 === s2 =>false

3. 用作对象属性的键

let sym = Symbol();

let obj = {
	[sym]: 'value',
};

console.log(obj[sym]); // "value"

4. 使用symbol定义的属性，是不能通过如下方式遍历拿到的

for in 遍历
Object.keys 遍历
getOwnPropertyNames
JSON.stringfy

const symbol1 = Symbol('666');
const symbol2 = Symbol('777');
const obj1 = {
	[symbol1]: '小满',
	[symbol2]: '二蛋',
	age: 19,
	sex: '女',
};
// 1 for in 遍历
for (const key in obj1) {
	// 注意在console看key,是不是没有遍历到symbol1
	console.log(key);
}
// 2 Object.keys 遍历
Object.keys(obj1);
console.log(Object.keys(obj1));
// 3 getOwnPropertyNames
console.log(Object.getOwnPropertyNames(obj1));
// 4 JSON.stringfy
console.log(JSON.stringify(obj1));

5. 如何获取symbol定义的属性

Object.getOwnPropertySymbols拿到具体的symbol 属性，对象中有几个就会拿到几个
Reflect.ownKeys可以拿到对象的所有属性

// 1 拿到具体的symbol 属性,对象中有几个就会拿到几个
Object.getOwnPropertySymbols(obj1);
console.log(Object.getOwnPropertySymbols(obj1));
// 2 es6 的 Reflect 拿到对象的所有属性
Reflect.ownKeys(obj1);
console.log(Reflect.ownKeys(obj1));

6. Symbol.iterator迭代器和其语法糖for of

支持遍历大部分类型迭代器 arr nodeList argumetns set map 等

var arr = [1, 2, 3, 4];
let iterator = arr[Symbol.iterator]();

console.log(iterator.next()); //{ value: 1, done: false }
console.log(iterator.next()); //{ value: 2, done: false }
console.log(iterator.next()); //{ value: 3, done: false }
console.log(iterator.next()); //{ value: 4, done: false }
console.log(iterator.next()); //{ value: undefined, done: true }

我们平时开发中不会手动调用iterator，他是有语法糖的就是for of，记住 for of 是不能循环对象的因为对象没有iterator

for (let value of map) {
	console.log(value);
}

数组解构的原理其实也是调用迭代器的

var [a, b, c] = [1, 2, 3];

var x = [...xxxx];

那我们可以自己实现一个迭代器让对象支持for of

const obj = {
	max: 5,
	current: 0,
	[Symbol.iterator]() {
		return {
			max: this.max,
			current: this.current,
			next() {
				if (this.current == this.max) {
					return {
						value: undefined,
						done: true,
					};
				} else {
					return {
						value: this.current++,
						done: false,
					};
				}
			},
		};
	},
};
console.log([...obj]);

for (let val of obj) {
	console.log(val);
}