目录
一、Symbol
ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
1.Symbol 创建
（1）Symbol 数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。
第一种：
let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");
console.log(a === b);//false
第二种：
let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
console.log(s3===s4) //true?
?（2）Symbol 数据类型不能与其他数据类型运算。
Let c = a+100;//Cannot convert a Symbol value to a number直接报错
?（3）Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。
2.Symbol内置值
ES6除了定义自己使用的Symbol值以外，还提供了11个内置的Symbol值，指向语言内部使用的方法。
1：Symbol.hasInstance：当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。
2：Symbol.isConcatSpreadable：对象的Symbol.isConcatSpreadable属性等于一个bool值，表示该对象用于Array.prototype()时，是否可以展开。
3：Symbol.unscopables：该对象指定了使用with关键字时，哪些属性会被with环境排除。
4：Symbol.match：当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值。
5：Symbol.replace：当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值。
6：Symbol.search：当该对象被str.search(myObject)方法调用时，会返回该方法的返回值。
7：Symbol.split：当该对象被str.split(myObject)方法调用时，会返回该方法的返回值。
8：Symbol.iterator：对象进行for ... of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器。
9：Symbol.toPrimitive：该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
10：Symbol.toStringTag：在该对象上调用toString方法时，返回该方法的返回值。
11：Symbol.species：创建衍生对象时，会使用该属性。
3.Symbol使用场景
let Person = {
realname: '张三',
age: 18
}
let Method = {
say: Symbol(),
play: Symbol(),
}
Person[Method.say] = () => {
console.log('会说话');
}
Person[Method.play] = () => {
console.log('打游戏');
}
const keys = Reflect.ownKeys(Person); //获得所有的key
const sysbolKeys = Object.getOwnPropertySymbols(Person); //获得symbol的keys
console.log(sysbolKeys);
Person[sysbolKeys[0]](); //调用方法 会说话
Person[sysbolKeys[1]](); //调用方法 打游戏给对象添加方法，不予对象属性冲突。
?二、迭代器
1.定义
迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作，ES6新增遍历方式for...of。原生具备lterator接口的数据有：Array，Arguments，Set，Map，String，NodeList。
2.原理
创建一个指针对象，指向数据结构的起始位置，第一次调用==next（）==方法，指针自动指向数据结构第一个成员，接下来不断调用next（），指针一直往后移动，直到指向最后一个成员，没调用next（）返回一个包含value和done属性的对象。
let arr = ["a","b","c"];
let myIte = arr[Symbol.iterator]();//arr本身就具备迭代器接口，拿到这个iterator接口
console.log(myIte.next());//{value: "a", done: false}
console.log(myIte.next());//{value: "b", done: false}
console.log(myIte.next());//{value: "c", done: false}
console.log(myIte.next());//{value: "undefined", done: true}
?3.迭代器使用场景
遵循面向对象思想，自定义遍历数据。
const Stu = {
title: "web2209",
persons: ["张三", "李四", "王五"],
[Symbol.iterator]() {
let i = 0;
return {
next: () => {
if (i < this.persons.length) {
const Obj = { value: this.persons[i], done: false };
i++;
return Obj;
} else {
return { value: undefined, done: true };
}
}
}
}
}
const Myite = Stu[Symbol.iterator]();
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
// 遍历对象的值
// for(let v of Stu){
// console.log(v);
// }
?三、生成器
1.定义
生成器本身是一个特殊的函数，生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数不同。
function * ride(num){
console.log("函数执行了...");
yield num*2;
console.log("第二步...");
yield num*4;
console.log("第三步...");
yield num*8;
console.log("函数执行end...");
}
2.生成器调用
执行生成器函数，返回的是一个迭代器对象，通过iterator.next()调用执行函数内语句,用yield 的分隔符让语句分段执行。
function * ride(num){
console.log("函数执行了...");
yield num*2;
console.log("第二步...");
yield num*4;
console.log("第三步...");
yield num*8;
console.log("函数执行end...");
}
const myride = ride(10);//生成器函数调用的时候 会生成一个迭代器对象
console.log(myride.next());
console.log(myride.next());
console.log(myride.next());
console.log(myride.next());
?3.生成器传参
next('BBB')传入的参数作为上一个next方法的返回值。
function * ride(num){
let a1 = yield num*2;
console.log(a3);
let a2 = yield a1*4;
console.log(a3);
let a3 = yield a2*8;
console.log(a3);
}
const myride = ride(10);
myride.next();
console.log(myride.next(20));//a1就是20
console.log(myride.next(30));//a2就是30
console.log(myride.next(40));//a3就是40
4.生成器的应用?
点击按钮，加载数据....，数据加载完成后隐藏（加载数据文字）
<body>
<p id="tip"></p>
<p id="msg"></p>
<button class="btn">查询</button>
<script>
let tip = document.getElementById('tip');
let msg = document.getElementById('msg');
let btn = document.querySelector('.btn');
function step_1(){
setTimeout(()=>{
let msg = '正在加载数据...' ;
getinfo.next(msg);
},1000)
}
function step_2(){
setTimeout(()=>{
let data = '加载成功！' ;
getinfo.next(data)
},1000)
}
function step_3(){
tip.innerHTML = '';
}
function * info(){
let mark = yield step_1();//把正在加载数据输入到页面中
tip.innerHTML = mark;
let data = yield step_2();//页面输出加载成功
msg.innerHTML = data;
yield step_3(); //清楚加载页面
//注：当代码运行到定时器时，默认把定时器内容等级向下
}
const getinfo = info();
btn.addEventListener('click',()=>{
getinfo.next();
})
</script>