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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,753评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,668评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,090评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,010评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,054评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,806评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,484评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,380评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,873评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,838评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,499评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3赞 374
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2赞 356

推荐阅读更多精彩内容

  • JavaScript(ES6) - Generator
    简介 基本概念 Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍...
    呼呼哥阅读 1,076评论 0赞 4
  • ES6中的Generator函数
    在此处先列下本篇文章的主要内容 简介 next方法的参数 for...of循环 Generator.prototy...
    醉生夢死阅读 1,448评论 3赞 8
  • 你不可不知的ES6
    本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯！ babel babel负责将JS高级语法转义，...
    Devildi已被占用阅读 1,987评论 0赞 4
  • 坚持还是放弃
    每天都会面对这样的一个选择，是坚持还是放弃！有些事坚持了，会成功！但是有些事情却并非如此！也许放弃才是最完美的结局...
    yan0421阅读 177评论 0赞 1
  • 1
    炭烧樱桃阅读 132评论 0赞 0