【ES6+】005-ES6新特性：Symbol、迭代器、生成器

訾博ZiBo

发布于 2025-01-06 17:00:35

4900

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、Symbol

1、Symbol概述

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型；

参考文章：https://blog.csdn.net/fesfsefgs/article/details/108354248

Symbol 特点：

Symbol 的值是唯一的，用来解决命名冲突的问题；
Symbol 值不能与其他数据进行运算；
Symbol 定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名；

2、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>symbol</title>
</head>
<body>
    <script>
        //创建Symbol
        let s = Symbol();
        // console.log(s, typeof s);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
		console.log(s2==s3); // false
        //Symbol.for 创建
        let s4 = Symbol.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');
		console.log(s4==s5); // true
        //不能与其他数据进行运算
        //    let result = s + 100;
        //    let result = s > 100;
        //    let result = s + s;

        // USONB  you are so niubility 
        // u  undefined
        // s  string  symbol
        // o  object
        // n  null number
        // b  boolean

    </script>
</body>
</html>

3、Symbol创建对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol创建对象属性</title>
</head>
<body>
    <script>
        // 向对象中添加方法 up down
        let game = {
            name:'俄罗斯方块',
            up: function(){},
            down: function(){}
        };
		
		// 我们要往game对象里面添加方法，但是怕game对象已经存在
		// 同名方法，所以我们这时使用到了Symbol
        
		// 方式一
        // 声明一个对象
        let methods = {
            up: Symbol(),
            down: Symbol()
        };

        game[methods.up] = function(){
            console.log("我可以改变形状");
        }

        game[methods.down] = function(){
            console.log("我可以快速下降!!");
        }

        console.log(game);

        // 方式二
        let youxi = {
            name:"狼人杀",
            [Symbol('say')]: function(){
                console.log("我可以发言")
            },
            [Symbol('zibao')]: function(){
                console.log('我可以自爆');
            }
        }
		
        console.log(youxi);
		
		// 如何调用方法？？？ 讲师没讲，这是弹幕说的方法
		let say = Symbol('say');
		let youxi1 = {
		    name:"狼人杀",
		    [say]: function(){
		        console.log("我可以发言")
		    },
		    [Symbol('zibao')]: function(){
		        console.log('我可以自爆');
		    }
		}
		youxi1[say]();
        
    </script>
</body>
</html>

4、Symbol内置值

概述：

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；

方法：

内置Symbol的值	调用时机
Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。
Symbol.species	创建衍生对象时，会使用该属性
Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace	当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search	当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。
Symbol.split	当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator	对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用 toString 方法时，返回该方法的返回值
Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

特别的： Symbol内置值的使用，都是作为某个对象类型的属性去使用；

演示：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Symbol内置属性</title>
	</head>
	<body>
		<script>
			class Person{
			    static [Symbol.hasInstance](param){
			        console.log(param);
			        console.log("我被用来检测类型了");
			        return false;
			    }
			}

			let o = {};

			console.log(o instanceof Person);

			const arr = [1,2,3];
			const arr2 = [4,5,6];
			// 合并数组：false数组不可展开，true可展开
			arr2[Symbol.isConcatSpreadable] = false;
			console.log(arr.concat(arr2));
		</script>
	</body>
</html>

运行结果：

二、迭代器

1、概述

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；

2、特性

ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费；

原生具备 iterator 接口的数据(可用 for of 遍历)：

Array；
Arguments；
Set；
Map；
String；
TypedArray；
NodeList；

3、工作原理

创建一个指针对象，指向当前数据结构的起始位置；
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
每调用 next 方法返回一个包含 value 和 done 属性的对象；

注：需要自定义遍历数据的时候，要想到迭代器；

4、代码示例及相关说明

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>迭代器</title>
	</head>
	<body>
		<script>
			// 声明一个数组
			const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];

			// 使用 for...of 遍历数组
			for(let v of xiyou){
			    console.log(v);
			}

			let iterator = xiyou[Symbol.iterator]();

			// 调用对象的next方法
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());
			
			// 重新初始化对象，指针也会重新回到最前面
			let iterator1 = xiyou[Symbol.iterator]();
			console.log(iterator1.next());
		</script>
	</body>
</html>

运行结果：

5、迭代器自定义遍历对象

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>迭代器自定义遍历数据</title>
	</head>
	<body>
		<script>
			// 声明一个对象
			const banji = {
				name: "终极一班",
				stus: [
					'xiaoming',
					'xiaoning',
					'xiaotian',
					'knight'
				],
				[Symbol.iterator]() {
					// 索引变量
					let index = 0;
					// 保存this
					let _this = this;
					return {
						next: function() {
							if (index < _this.stus.length) {
								const result = {
									value: _this.stus[index],
									done: false
								};
								// 下标自增
								index++;
								// 返回结果
								return result;
							} else {
								return {
									value: undefined,
									done: true
								};
							}
						}
					};
				}
			}

			// 遍历这个对象 
			for (let v of banji) {
				console.log(v);
			}
		</script>
	</body>
</html>

运行结果：

三、生成器

1、概述

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同；

2、基本使用

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成器</title>
	</head>
	<body>
		<script>
			// 生成器其实就是一个特殊的函数
			// 异步编程  纯回调函数  node fs  ajax mongodb
			// yield：函数代码的分隔符
			function* gen() {
				console.log(111);
				yield '一只没有耳朵';
				console.log(222);
				yield '一只没有尾部';
				console.log(333);
				yield '真奇怪';
				console.log(444);
			}

			let iterator = gen();
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());

			console.log("遍历：");
			//遍历
			for(let v of gen()){
			    console.log(v);
			}
		</script>
	</body>
</html>

运行结果：

3、生成器函数的参数传递

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成器函数的参数传递</title>
	</head>
	<body>
		<script>
			function * gen(arg){
				console.log(arg);
				let one = yield 111;
				console.log(one);
				let two = yield 222;
				console.log(two);
				let three = yield 333;
				console.log(three);
			}
			let iterator = gen("AAA");
			console.log(iterator.next()); // 会执行yield 111;
			// next()方法是可以传入参数的，传入的参数作为第一条(上一条)语句yield 111的返回结果
			console.log(iterator.next("BBB")); // 会执行yield 222;
			console.log(iterator.next("CCC")); // 会执行yield 333;
			console.log(iterator.next("DDD")); // 继续往后走，未定义;
		</script>
	</body>
</html>

运行结果：

4、生成器函数实例1

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成器函数实例1</title>
	</head>
	<body>
		<script>
			// 异步编程 文件操作 网络操作（ajax，request） 数据库操作
			// 需求：1s后控制台输出111 再过2s后控制台输出222 再过3s后控制台输出333
			// 一种做法：回调地狱
			// setTimeout(()=>{
			// 	console.log(111);
			// 	setTimeout(()=>{
			// 		console.log(222);
			// 		setTimeout(()=>{
			// 			console.log(333);
			// 		},3000)
			// 	},2000)
			// },1000)
			// 另一种做法
			function one(){
				setTimeout(()=>{
					console.log(111);
					iterator.next();
				},1000)
			}
			function two(){
				setTimeout(()=>{
					console.log(222);
					iterator.next();
				},1000)
			}
			function three(){
				setTimeout(()=>{
					console.log(333);
					iterator.next();
				},1000)
			}
			
			function * gen(){
				yield one();
				yield two();
				yield three();
			}
			
			// 调用生成器函数
			let iterator = gen();
			iterator.next();
		</script>
	</body>
</html>

运行结果：

5、生成器函数实例2

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成器函数实例2</title>
	</head>
	<body>
		<script>
			// 模拟获取: 用户数据 订单数据 商品数据
			function getUsers(){
				setTimeout(()=>{
					let data = "用户数据";
					// 第二次调用next，传入参数，作为第一个的返回值
					iterator.next(data); // 这里将data传入
				},1000);
			}
			function getOrders(){
				setTimeout(()=>{
					let data = "订单数据";
					iterator.next(data); // 这里将data传入
				},1000);
			}
			function getGoods(){
				setTimeout(()=>{
					let data = "商品数据";
					iterator.next(data); // 这里将data传入
				},1000);
			}
			
			function * gen(){
				let users = yield getUsers();
				console.log(users);
				let orders = yield getOrders();
				console.log(orders);
				let goods = yield getGoods();
				console.log(goods); // 这种操作有点秀啊！
			}
			let iterator = gen();
			iterator.next();
		</script>
	</body>
</html>