【ES6+】005
【ES6+】005
一、Symbol1、Symbol概述ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型；参考文章：Symbol 特点： Symbol 的值是唯一的，用来解决命名冲突的问题；
Symbol 值不能与其他数据进行运算；
Symbol 定义的对象属性不能使用for…in循环遍历 ，但
【ES6+】005
1、Symbol概述
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型；
参考文章：
Symbol 特点：
- Symbol 的值是唯一的，用来解决命名冲突的问题；
- Symbol 值不能与其他数据进行运算；
- Symbol 定义的对象属性不能使用for…in循环遍历 ，但是可以使用 来获取对象的所有键名；
2、基本使用
代码语言：javascript代码运行次数：0运行复制<!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();
// cole.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s = Symbol('尚硅谷');
cole.log(s2==s); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
cole.log(s4==s5); // true
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
// USOB you are so niubility
// u undefined
// s string symbol
// o object
// n null number
// b boolean
</script>
</body>
</html> 、Symbol创建对象属性
代码语言：javascript代码运行次数：0运行复制<!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(){
cole.log("我可以改变形状");
}
game[methods.down] = function(){
cole.log("我可以快速下降!!");
}
cole.log(game);
// 方式二
let youxi = {
name:"狼人杀",
[Symbol('say')]: function(){
cole.log("我可以发言")
},
[Symbol('zibao')]: function(){
cole.log('我可以自爆');
}
}
cole.log(youxi);
// 如何调用方法？？？ 讲师没讲，这是弹幕说的方法
let say = Symbol('say');
let youxi1 = {
name:"狼人杀",
[say]: function(){
cole.log("我可以发言")
},
[Symbol('zibao')]: function(){
cole.log('我可以自爆');
}
}
youxi1[say]();
</script>
</body>
</html>4、Symbol内置值
概述：
除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；
方法：
内置Symbol的值 | 调用时机 |
|---|---|
Symbol.hasInstance | 当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法 |
Symbol.isConcatSpreadable | 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.()时，是否可以展开。 |
Symbol.species | 创建衍生对象时，会使用该属性 |
当执行 (myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。 | |
Symbol.replace | 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。 |
Symbol.search | 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。 |
Symbol.split | 当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。 |
Symbol.iterator | 对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器 |
该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。 | |
Symbol. toStringTag | 在该对象上面调用 toString 方法时，返回该方法的返回值 |
Symbol. unscopables | 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。 |
特别的： Symbol内置值的使用，都是作为某个对象类型的属性去使用；
演示：
代码语言：javascript代码运行次数：0运行复制<!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){
cole.log(param);
cole.log("我被用来检测类型了");
return false;
}
}
let o = {};
cole.log(o instanceof Person);
ct arr = [1,2,];
ct arr2 = [4,5,6];
// 合并数组：false数组不可展开，true可展开
arr2[Symbol.isConcatSpreadable] = false;
cole.log((arr2));
</script>
</body>
</html>运行结果：
1、概述
遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；
2、特性
ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费；
原生具备 iterator 接口的数据(可用 for of 遍历)：
- Array；
- Arguments；
- Set；
- Map；
- String；
- TypedArray；
- odeList；
、工作原理
- 创建一个指针对象，指向当前数据结构的起始位置；
- 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
- 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
- 每调用 next 方法返回一个包含 value 和 done 属性的对象；
注：需要自定义遍历数据的时候，要想到迭代器；
4、代码示例及相关说明
代码示例：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>迭代器</title>
</head>
<body>
<script>
// 声明一个数组
ct xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for(let v of xiyou){
cole.log(v);
}
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
cole.log(());
cole.log(());
cole.log(());
cole.log(());
cole.log(());
// 重新初始化对象，指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
cole.log(());
</script>
</body>
</html>运行结果：
5、迭代器自定义遍历对象
代码实现：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>迭代器自定义遍历数据</title>
</head>
<body>
<script>
// 声明一个对象
ct banji = {
name: "终极一班",
stus: [
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
// 索引变量
let index = 0;
// 保存this
let _this = this;
return {
next: function() {
if (index < _this.stus.length) {
ct result = {
value: _this.stus[index],
done: false
};
// 下标自增
index++;
// 返回结果
return result;
} else {
return {
value: undefined,
done: true
};
}
}
};
}
}
// 遍历这个对象
for (let v of banji) {
cole.log(v);
}
</script>
</body>
</html>运行结果：
1、概述
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同；
2、基本使用
代码实现：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成器</title>
</head>
<body>
<script>
// 生成器其实就是一个特殊的函数
// 异步编程 纯回调函数 node fs ajax mongodb
// yield：函数代码的分隔符
function* gen() {
cole.log(111);
yield '一只没有耳朵';
cole.log(222);
yield '一只没有尾部';
cole.log();
yield '真奇怪';
cole.log(444);
}
let iterator = gen();
cole.log(());
cole.log(());
cole.log(());
cole.log(());
cole.log("遍历：");
//遍历
for(let v of gen()){
cole.log(v);
}
</script>
</body>
</html>运行结果：
、生成器函数的参数传递
代码实现：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成器函数的参数传递</title>
</head>
<body>
<script>
function * gen(arg){
cole.log(arg);
let one = yield 111;
cole.log(one);
let two = yield 222;
cole.log(two);
let three = yield ;
cole.log(three);
}
let iterator = gen("AAA");
cole.log(()); // 会执行yield 111;
// next()方法是可以传入参数的，传入的参数作为第一条(上一条)语句yield 111的返回结果
cole.log(("BBB")); // 会执行yield 222;
cole.log(("CCC")); // 会执行yield ;
cole.log(("DDD")); // 继续往后走，未定义;
</script>
</body>
</html>运行结果：
4、生成器函数实例1
代码实现：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成器函数实例1</title>
</head>
<body>
<script>
// 异步编程 文件操作 网络操作（ajax，request） 数据库操作
// 需求：1s后控制台输出111 再过2s后控制台输出222 再过s后控制台输出
// 一种做法：回调地狱
// setTimeout(()=>{
// cole.log(111);
// setTimeout(()=>{
// cole.log(222);
// setTimeout(()=>{
// cole.log();
// },000)
// },2000)
// },1000)
// 另一种做法
function one(){
setTimeout(()=>{
cole.log(111);
();
},1000)
}
function two(){
setTimeout(()=>{
cole.log(222);
();
},1000)
}
function three(){
setTimeout(()=>{
cole.log();
();
},1000)
}
function * gen(){
yield one();
yield two();
yield three();
}
// 调用生成器函数
let iterator = gen();
();
</script>
</body>
</html>运行结果：
5、生成器函数实例2
代码实现：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成器函数实例2</title>
</head>
<body>
<script>
// 模拟获取: 用户数据 订单数据 商品数据
function getUsers(){
setTimeout(()=>{
let data = "用户数据";
// 第二次调用next，传入参数，作为第一个的返回值
(data); // 这里将data传入
},1000);
}
function getOrders(){
setTimeout(()=>{
let data = "订单数据";
(data); // 这里将data传入
},1000);
}
function getGoods(){
setTimeout(()=>{
let data = "商品数据";
(data); // 这里将data传入
},1000);
}
function * gen(){
let users = yield getUsers();
cole.log(users);
let orders = yield getOrders();
cole.log(orders);
let goods = yield getGoods();
cole.log(goods); // 这种操作有点秀啊！
}
let iterator = gen();
();
</script>
</body>
</html>运行结果：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 09:25:29
推荐阅读
| 留言与评论（共有 8 条评论） |
| 本站网友 基督教音乐网 | 15分钟前 发表 |
| [Symbol('zibao')] | |
| 本站网友 海拉尔房屋出租 | 13分钟前 发表 |
| 'xiaotian' | |
| 本站网友 小米股价暴跌 | 11分钟前 发表 |
| "狼人杀" | |
| 本站网友 祛痘印的方法 | 6分钟前 发表 |
| 返回该对象的默认遍历器该对象被转为原始类型的值时 | |
| 本站网友 卫格尔 | 18分钟前 发表 |
| 传入的参数作为第一条(上一条)语句yield 111的返回结果 cole.log(("BBB")); // 会执行yield 222; cole.log(("CCC")); // 会执行yield ; cole.log(("DDD")); // 继续往后走 | |
| 本站网友 鉴别玉 | 10分钟前 发表 |
| done | |
| 本站网友 鹿回头 | 7分钟前 发表 |
| 直到指向最后一个成员； 每调用 next 方法返回一个包含 value 和 done 属性的对象； 注：需要自定义遍历数据的时候 | |