【ES6知识】Iterator迭代器与 class类

文章目录

- 一、Iterator迭代器
- - 1.1 基础知识概述
  - 1.2 工作原理
  - 1.3 Symbol.iterator
  - 1.4 Generator函数来实现Symbol.iterator接口
- 二、ES6 Class 类
- - 2.1 概述
  - 2.2 ES6中的继承
  - 2.3 面向对象应用 - React

一、Iterator迭代器

1.1 基础知识概述

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

ES6创造了一种新的遍历命令：for…of 循环，Iterator 主要供 for…of 使用。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

原生具备了 Iterator 接口的数据结构：

Array 数组
TypedArray 定型数组（一类指定元素类型的数组，不是实际的数组类型。创建的实例将在内存中创建一个数组缓冲区）
String 字符串
Arguments 参数（实参）对象
NodeList 节点列表
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 }

1.2 工作原理

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

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"]
}

现在想要拿到 obj 对象中 arr 数组的数据。由于 Object 并没有内置 Iterator ，所以使用 for…of 遍历时，控制台报错。

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"]
}
for(value of obj){
    console.log(value)
}
//Uncaught TypeError: obj is not iterable

至于对象没有布置 iterator 接口的原因，不知道大家有没有看根据《你一生的故事》拍成的电影“降临"，片中出现的外星语言是一门非线性的语言。而我们说的数组，Map 等结构中的成员都是有顺序的，即都是线性的结构，而对象，各成员并没有一个确定的顺序，所以遍历时先遍历谁后遍历谁并不确定。所以，给一个对象部署 iterator 接口，其实就是对该对象做一种线性转换。如果你有这种需要，就需要手动给你的对象部署 iterator 接口。如下：

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"],
    [Symbol.iterator](){
        let index =0
        let _this = this
          return {
             next:function(){
                 if(index < _this.arr.length){
                      return { value:_this.arr[index++], done:false}      
                 }else{
                    return {value:undefined,done:true}
                 }
          	}
        }
    }
}
for(value of obj){
  console.log(value)
}
//1 2 3 4 "壹" "贰" "叁" "肆"

可以看到，Symbol.iterator会返回一个对象，这就是一个遍历器对象，而作为遍历器对象，其必须具备的特征就是必须具备next()方法。

1.3 Symbol.iterator

在这里插入图片描述

这个符号可以是任意对象上的一个专门属性，语言机制会自动的在这个属性上寻找一个方法，这个方法会构造一个迭代器来迭代这个对象的值，这个方法就是 next 方法，… 展开和 for/of 循环会自动使用它，**我们可以自定义 Symbol.iterator 属性为任意对象值定义自己的迭代器逻辑，它将覆盖默认的迭代器。**相当于定义了一种元编程行为，提供给 Javascript 其他部分（运算符和循环结构）在处理定义的对象时使用。

在 JS 中迭代器对象实现了可迭代协议，迭代器对象由 Symbol.iterator 属性的值返回。
Symbol.iterator 属性的值是一个函数，它返回一个迭代器对象。
迭代器指的是拥有 next 方法的对象。
该next方法必须返回一个带有 value 和 done 的对象。

1.4 Generator函数来实现Symbol.iterator接口

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
 
[...yieldIterator] // [1, 2, 3]

注意，yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

其它调用到遍历器的操作还有解构赋值、扩展操作符、其它任何接受数组作为参数的场合

for…of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如）
Promise.all()
Promise.race()

一旦当你给你的结构部署了iterator接口，那么恭喜你，你可以使用for…of来遍历你的结构了！

二、ES6 Class 类

2.1 概述

ES6之前，类和构造函数是同一个东西，并且调用的函数需要外挂（通过构造函数调用原型进行定义）。这对于面向对象语言很不友好，所以ES6中提供了类的概念。

class类、constructor构造器区别开来
class类中直接定义方法（原型方法、静态方法、实例方法）

class People {
    // 静态方法
    static sayHello(){
        return "Hello ES6继承！！";
    }

    // 通过 constructor 定义类的构造函数
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 实例方法
        this.sayHi = function(){
            return "你好"
        }
    }

    // 原型方法，不需要 function 声明
    eat() {
        return "是人就得喝水...";
    }
}

// 通过 new 关键子定义一个类的对象
var p = new People("汉武帝", 1000, '男');

2.2 ES6中的继承

extends 用于继承的关键字
super 用于执行父类（超类、基类）中的构造函数

// 通过关键字 class 定义基类
class People {
    // 静态方法
    static sayHello(){
        return "Hello ES6继承！！";
    }

    // 通过 constructor 定义类的构造函数
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 实例方法
        this.sayHi = function(){
            return "你好"
        }
    }

    // 原型方法，不需要 function 声明
    eat() {
        return "是人就得喝水...";
    }
}


class Doctor extends People {
    constructor(name, age, sex, clothes) {
        super(name, age, sex);

        this.clothes = clothes;
    }

    behavior() {
        return "救死扶伤";
    }
}

// 通过 new 关键子定义一个类的对象
var p = new People("汉武帝", 1000, '男');
var d = new Doctor("李时珍", 700, '男', '白大褂');

2.3 面向对象应用 - React

组件化 - class
JSX（JS拓展版） == babel == browser.js
下载 react.js , react-dom.js，browser.js ，并引入到项目中
script 标签类型 type = “text/babel”，且不可以省略

HTML代码：

<div id="div1"></div>

JS代码：

<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script src="./libs/browser.js"></script>
<script type="text/babel">
	// 自定义组件
	class Item extends React.Component{
		constructor(...args){
			super(...args)
		}
		
		render(){
			// 返回固定的值
			// return <li>123</li>
			// 返回通过属性动态传递的值
			return <li>{this.props.str}</li>
		}
	}
	
	class List extends React.Component{
		constructor(...args){
			super(...args)
		}
		
		render(){
		  	/*
		  	let aItems = [];
			for(let i = 0; i < this.props.arr.length; i++){
				aItems.push(<Item str={this.props.arr[i]}></Item>)
			}
			return <ul>
				// 数组映射
				{aItems}
			</ul>
			*/
			
			// map 优化
			let aItems = this.props.arr.map(a => <Item str={a}></Item>);
			/*			
			return <ul>
				{this.props.arr.map(a => <Item str={a}></Item>)}
			</ul>
			*/
			return <ul>
				{aItems}
			</ul>
		}
	}
	
	window.onload = function(){
		let oDiv = document.getElementById('div1');
		
		ReactDOM.render(
			// 常规标签渲染
			// <span>123</span>,
			// 自定义组件渲染
			<List arr="{['abc','def',ghi]}"></List>,
			oDiv
		)
	}
</script>