ES6学习二
Iterator遍历器
1、概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
2、作用：
（1）为各种数据结构，提供一个统一的、简便的访问接口；
（2）使得数据结构的成员能够按某种次序排列
（3）ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。
3、工作原理：
创建一个指针对象(遍历器对象)，指向数据结构的起始位置。
第一次调用next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
- value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
- 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
...
Generator函数
Generator函数
1、概念：
- ES6提供的解决异步编程的方案之一
- Generator函数是一个状态机，内部封装了不同状态的数据，
- 用来生成遍历器对象
- 可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
2、特点：
- function 与函数名之间有一个星号
- 内部用yield表达式来定义不同的状态
例如：
function* generatorExample(){
let result = yield 'hello'; // 状态值为hello
yield 'generator'; // 状态值为generator
}
- generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑
- 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
- 再次调用next方法会从上一次停止时的yield处开始，直到最后
- yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。
async函数
1、概念： 真正意义上去解决异步回调的问题，同步流程表达2、异步操作
3、本质： Generator的语法糖
4、语法：
async function foo(){
await 异步操作;
await 异步操作；
}
5、特点：
（1）不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
（2）返回的总是Promise对象，可以用then方法进行下一步操作
（3）async取代Generator函数的星号*，await取代Generator的yield
（4）语意上更为明确，使用简单，经临床验证，暂时没有任何副作用
class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_class</title>
</head>
<body>
</body>
<!--
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
-->
<script type="text/javascript">
/*
function Person(name, age){
this.name = name;
this.age = age;
}
let person = new Person('kobe', 40);
console.log(person);
*/
//定义一个人物的类
class Person{
// 类的构造方法
constructor(name, age){
this.name = name;
this.age = age;
}
// 类的一般方法
showName(){
console.log('调用父类的方法');
console.log(this.name, this.age);
}
}
let person = new Person('kobe', 40);
console.log(person);
// person.showName();
// 子类
class StarPerson extends Person{
constructor(name, age, salary){
super(name, age);
this.salary = salary;
}
// 父类的方法重写
showName(){
console.log('调用子类的方法');
console.log(this.name, this.age, this.salary);
}
}
let sp = new StarPerson('wade', 36, 152450000);
console.log(sp);
sp.showName();
</script>
</html>
字符串扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_字符串扩展</title>
</head>
<body>
<!--
1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数
-->
<script type="text/javascript">
let str = 'asdfohsvckxnlck';
// console.log(str.includes('t'));
// console.log(str.includes('a'));
// console.log(str.startsWith('a'));
// console.log(str.endsWith('k'));
console.log(str.repeat(5));
</script>
</body>
</html>
数值扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_数值扩展</title>
</head>
<body>
<!--
1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分
-->
<script type="text/javascript">
console.log(0b1010);//10
console.log(0o56);//46
console.log(Number.isFinite(123));//true
console.log(Number.isFinite(Infinity));//flase
console.log(Number.isNaN(NaN));//true
console.log(Number.isInteger(123));//true
console.log(Number.isInteger(123.456));//false
console.log(Number.isInteger(123.0));//true
console.log(Number.parseInt('123abc456'));//123
console.log(Number.parseInt('a123abc456'));//NaN
console.log(Math.trunc('123.123'));//123
</script>
</body>
</html>
数组扩展
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_数组扩展</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
-->
<script type="text/javascript">
let btns = document.getElementsByTagName('button');
Array.from(btns).forEach(function(item, index){
console.log(item);
})
let arr = Array.of(1, 4, 'abc', true);
console.log(arr);
let arr2 = [2,3,4,2,5,7,3,6,5];
let result = arr2.find(function(item, index){
return item > 4;
});
console.log(result);//5
result = arr2.findIndex(function(item, index){
return item > 4;
});
console.log(result);//4
</script>
</body>
</html>
对象扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_对象扩展</title>
</head>
<body>
<!--
1. Object.is(v1, v2)
* 判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)
* 将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
let obj2 = {};
obj2.__proto__ = obj1;
-->
<script type="text/javascript">
console.log(0 == -0);//true
console.log(NaN == NaN);//false
console.log(Object.is(0, -0));//false
console.log(Object.is(NaN, NaN));//true
let obj = {};
let obj1 = {username:'iverson', age:43};
let obj2 = {sex: '男'};
Object.assign(obj, obj1, obj2);
console.log(obj);
let obj3 = {};
let obj4 = {money: 5000000};
obj3.__proto__ = obj4;
console.log(obj3);
console.log(obj3.money);
</script>
</body>
</html>
对象的深度克隆
1、数据类型：
数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
基本数据类型：
特点： 存储的是该对象的实际数据
对象数据类型：
特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;
3、克隆数据：对象/数组
（1）区别： 浅拷贝/深度拷贝
（2）判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
（3）知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用
(4)常用的拷贝技术
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
4). 浅拷贝包含函数数据的对象/数组
5). 深拷贝包含函数数据的对象/数组
4、拷贝数据：
（1）基本数据类型：
拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
（2）对象/数组：
拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据
5、拷贝数据的方法：
（1）直接赋值给一个变量 //浅拷贝
（2）Object.assign() //浅拷贝
（3）Array.prototype.concat() //浅拷贝
（4）Array.prototype.slice() //浅拷贝
（5）JSON.parse(JSON.stringify()) //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了
6、浅拷贝（对象/数组）：
特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全
7、深拷贝（深度克隆）
特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据
Set和Map数据结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_Set和Map数据结构</title>
</head>
<body>
<!--
1. Set容器 : 无序不可重复的多个value的集合体
* Set()
* Set(array)
* add(value)
* delete(value)
* has(value)
* clear()
* size
2. Map容器 : 无序的 key不重复的多个key-value的集合体
* Map()
* Map(array)
* set(key, value)//添加
* get(key)
* delete(key)
* has(key)
* clear()
* size
-->
<script type="text/javascript">
let set = new Set([1,2,4,5,2,3,6]);
console.log(set);
set.add(7);
console.log(set.size, set);
set.delete(3);
console.log(set);
console.log(set.has(8));//false
console.log(set.has(7));//true
set.clear();
console.log(set);
let map = new Map([['aaa', 'username', 25], [36, 'age']]);
console.log(map);
map.set(78, 'haha');
console.log(map);
let value = map.get(78)
console.log(value);
map.delete(36);
console.log(map);
</script>
</body>
</html>
for_of循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_for_of循环</title>
</head>
<body>
<!--
for(let value of target){}循环遍历
1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组
-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
let arr = [1,2,3,4,5,5,6,2];
let arr1 = [];
let set = new Set(arr);
for(let i of set){
console.log(i);
arr1.push(i);
}
console.log(arr1);
let map = new Map([['aaa', 'username', 25], [36, 'age']]);
for(let i of map){
console.log(i);
}
</script>
</body>
</html>
