// 执行 next() ,会返回对象,{value,done}
// { value :xx , done:true or false} value表示迭代的值,done表示迭代是否结束
// 定义一个迭代器
function chef(foods){
let i = 0;
return {
next(){
let done = ( i>=foods.length );
let value = !done ? foods[i++] : undefined;
return {
value:value,
done:done
}
}
}
}
let wanghao = chef(["西红柿","鸡蛋"]); // 现在wanghao 就是那个迭代器
console.log(wanghao.next()); // { value: '西红柿', done: false }
console.log(wanghao.next()); // { value: '鸡蛋', done: false }
console.log(wanghao.next()); // { value: undefined, done: true }
// 迭代器实际上就是一个函数,可以遍历不同结构的集合
// 这个obj 只有定义 Symbol.iterator这个迭代器接口,才能遍历
let obj = {
start:[1,2,3],
end:[7,8,9],
[Symbol.iterator](){
let self= this;
let index = 0;
let arr = self.start.concat(self.end);
let len = arr.length;
// 必须返回一个{},执行 next(),返回一个对象{value:xxx, done: true or false},针对每一次的遍历
return {
next(){
if(index < len){
return {
value:arr[index++],
done:false
}
}else{
return {
value:arr[index++],
done:true
}
}
}
}
}
}
for( let key of obj){
console.log(key) // 1 2 3 7 8 9
}
2.【 Generators 生成器 】创建迭代器
Generator 是异步编程的更高级的解决方式【除了 回调,Promise】
// 定义一个生成器
function* chef(foods){
for(var i=0;i
let obj = {};
obj[Symbol.iterator] = function* (){
yield 1;
yield 2;
yield 3;
}
for ( let value of obj){
console.log('value',value);
// value 1
// value 2
// value 3
}
应用场景有:状态机
// 状态机
let state= function* (){
while(1){
yield "a";
yield "b";
yield "c";
}
}
let status = state();
console.log(status.next()); // { value: 'a', done: false }
console.log(status.next()); // { value: 'b', done: false }
console.log(status.next()); // { value: 'c', done: false }
console.log(status.next()); // { value: 'a', done: false }
3.【 类 Classes】
class Chef{
// 基于这个类创建的实例会自动执行 constructor 初始化,初始化属于该类的属性
constructor (food){
this.food = food;
this.dish = [];
}
eat(){
console.log(this.food);
}
// 添加静态方法,是不需要实例化就可以调用的方法,只有 自己类 可以调用
static cook(food){
console.log(food);
}
// 得到 某个值
get menu(){
return this.dish;
}
// set 定义一个 menu 设置器,这里是把 dish 推送到 this.dish
set menu(dish){
this.dish.push(dish);
}
}
let xiaohong = new Chef("苹果");
xiaohong.eat(); // 苹果
// get set 用法
let wanghao = new Chef();
console.log(wanghao.menu = "披萨"); // 披萨
console.log(wanghao.menu = "西红柿炒鸡蛋"); // 西红柿炒鸡蛋
console.log(wanghao.menu); // [ '披萨', '西红柿炒鸡蛋' ]
// static 静态方法使用
Chef.cook("蒸香肠"); // 蒸香肠
4.【继承 extends】
// 父类
class Person{
constructor(name,birthday){
this.name = name,
this.birthday = birthday
}
intro(){
return `${this.name},${this.birthday}`
}
}
// 子类
class Chef extends Person{
constructor(name,birthday){
// 继承父类的属性
super(name,birthday);
}
}
let zhoushiqin = new Chef("zhoushiqin","1996-7-18")
console.log(zhoushiqin.intro()) // zhoushiqin,1996-7-18
5.【 Set 】一堆东西的集合 相当于数组,但是***Set里面的内容不能重复***
*** 可以用于数组或者字符串的去重 ***
let dessert = new Set(["蛋糕","冰激凌","啤酒","蛋糕"]);
dessert.add("苹果");
dessert.add("苹果");
console.log(dessert); // Set { '蛋糕', '冰激凌', '啤酒', '苹果' }
console.log(dessert.size); // 4
console.log(dessert.has("啤酒")); // true
dessert.delete("苹果");
console.log(dessert); // Set { '蛋糕', '冰激凌', '啤酒' }
dessert.forEach( item =>{
console.log(item) // 蛋糕 冰激 凌啤酒
})
6.【 Map 】相当于对象,可以实现 对象 作为 key-value对项目的 key,除了对象,字符串,函数也可以作为 key
let food = new Map();
let fruit = {},
cook = function(){},
dessert = "甜点";
console.log(food); // Map {}
food.set(fruit,"黄桃");
console.log(food); // Map { {} => '黄桃' }
food.set(cook, "炒鸡蛋");
food.set(dessert, "甜甜圈");
console.log(food); // Map { {} => '黄桃', [Function: cook] => '炒鸡蛋', '甜点' => '甜甜圈' }
console.log(food.size); // 3
console.log(food.get(fruit)); // 黄桃
console.log(food.get(cook)); // 炒鸡蛋
food.delete(dessert);
console.log(food.has(dessert)); // false
food.forEach((value,key) =>{
console.log(`${key} = ${value}`); // [object Object] = 黄桃 function(){} = 炒鸡蛋
})
food.clear();
console.log(food) // Map {}
7.【JS 定义模块 Module】根据需要定义模块
babel转换 ,使用 export 导出模块,在需要使用模块的地方 import 导入模块
export 可以导出 变量,对象,函数,类
export default 默认导出
在导入 默认导出的东西时,不需要加 {}