总结：js 高级 ECMAScript 6（es6新特性）(下)

ECMASript 6 新特性(ES6)

1.11 迭代器

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

1. ES6 创造了一种新的遍历命令 for…of 循环， Iterator 接口主要供 for…of 消费
2. 原生具备 iterator 接口的数据(可用 for of 遍历)

• Array

const arr = ["唐僧","孙悟空","猪八戒","沙和尚"]
//用for....in遍历
for(array in arr){
  consle.log(array);  //for..in打印输出的是键名:1  2  3  4
}

//用for....of遍历 
for(array of arr){
  consle.log(array);  //for..of打印输出的是键值:唐僧  孙悟空  猪八戒  沙和尚
}

• Arguments

• Set

• Map

• String

• TypedArray

• NodeList

3. 工作原理
   a) 创建一个指针对象，指向当前数据结构的起始位置
   b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
   c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
   d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
   
   注: 需要自定义遍历数据的时候，要想到迭代器。

//自定义遍历数据
//声明一个对象（对象的遍历）
        const banji = {
            name: "终极一班",
            stus: [
                'xiaogao',
                'xiaozhang',
                'xiaojia',
                'xiaoli'
            ],
            [Symbol.iterator]() {  //对象中没有就自己创建一个
                //索引变量
                let index = 0;
                //解决内部this指向问题，也可以直接用箭头函数
                let _this = this;  
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false };
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                        //控制遍历完的情况
                            return {value: undefined, done: true};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        for (let v of banji) {
            console.log(v);  //打印输出  xiaogao  xiaozhang  xiaojia  xiaoli
        }

1.12 生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

function * gen(){
   yield '一只没有耳朵';
   yield '一只没有尾巴';
   yield '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

1. " * " 的位置没有限制
2. 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到
   yield 语句后的值
3. yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next
   方法，执行一段代码
4. next 方法可以传递实参，作为 yield 语句的返回值

1.13 Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，
用来封装异步操作并可以获取其成功或失败的结果。

1. Promise 构造函数: Promise (excutor) {}
2. Promise.prototype.then 方法
3. Promise.prototype.catch 方法

Promise的基本语法

        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve  读取成功用resolve
                // resolve(data);
                let err = '数据读取失败';
                //读取失败用reject
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        })

1.14 Set

ES6 提供了新的数据结构 Set（集合） 。它类似于数组，但成员的值都是唯
一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

1. size 返回集合的元素个数
2. add 增加一个新元素，返回当前集合
3. delete 删除元素，返回 boolean 值
4. has 检测集合中是否包含某个元素，返回 boolean 值
5. clear 清空集合，返回 undefined

//创建一个空集合
let s = new Set(); //Set类型是对象
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

/*
set实例
*/
let arr = [1,2,3,3,,4,6,3,5,7];
//1.数组去重
let result = [...new Set(arr)]; 
consle.log(result);   //现在result中就是[1,2,3,4,5,6,7]

//2.交集
let arr2 = [4,5,2,6]
let result1 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
consle.log(result1);   //现在result1中就是[2,4,5,6]

//3. 并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);

 //4. 差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
 console.log(diff);

2.14. Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。 但是“键”
的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 Map 也实现了
iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。 Map 的属
性和方法：

1. size 返回 Map 的元素个数
2. set 增加一个新元素，返回当前 Map
3. get 返回键名对象的键值
4. has 检测 Map 中是否包含某个元素，返回 boolean 值
5. clear 清空集合，返回 undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
['name','尚硅谷'],
['slogon','不断提高行业标准']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

1.16 class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。基本上， ES6 的 class 可以看作只是
一个语法糖，它的绝大部分功能， ES5 都可以做到，新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：

1. class 声明类
2. constructor 定义构造函数初始化
3. extends 继承父类
4. super 调用父级构造方法
5. static 定义静态方法和属性
6. 父类方法可以重写

//父类
class Phone {
//构造方法
constructor(brand, color, price) {
this.brand = brand;
this.color = color;
this.price = price;
}
//对象方法
call() {
console.log('我可以打电话!!!')
}
}
//子类
class SmartPhone extends Phone {
constructor(brand, color, price, screen, pixel) {
super(brand, color, price);
this.screen = screen;
this.pixel = pixel;
}
//子类方法
photo(){
console.log('我可以拍照!!');
}
playGame(){
console.log('我可以玩游戏!!');
}
//方法重写
call(){
console.log('我可以进行视频通话!!');
}
//静态方法
static run(){
console.log('我可以运行程序')
}
static connect(){
console.log('我可以建立连接')
}
}
//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088,
'4.7inch','500w');
//调用子类方法
iPhone6s.playGame();
//调用重写方法
iPhone6s.call();
//调用静态方法
SmartPhone.run();

1.17 数值扩展

1.17.1 二进制和八进制

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。

1.17.2 Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN

1.17.3 Number.parseInt() 与Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。

1.17.4 Math.trunc

用于去除一个数的小数部分，返回整数部分。

1.17.5 Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

1.18 对象扩展

ES6 新增了一些 Object 对象的方法

1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
3. proto、 setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

1.19 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

1.19.1 模块化的好处

模块化的优势有以下几点：

1. 防止命名冲突
2. 代码复用
3. 高维护性

1.19.2 模块化规范产品

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、 Browserify
2. AMD => requireJS
3. CMD => seaJS

1.19.3 ES6 模块化语法

模块功能主要由两个命令构成： export 和 import。
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

喜欢的朋友点个赞，蟹蟹，有问题可以留言哦

相关推荐：wantLG的《普歌-码上鸿鹄团队复习总结：node.js快速入门(环境安装、模块化等)》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队复习总结：js 高级 ECMAScript 6（es6新特性）(下)》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。