ES6的内置对象扩展及异步函数-ES6总结(二)

• 上一篇：ES6概念及相关新增语法-ES6总结(一)

1.ES6 的内置对象扩展

1.1 Array 的扩展方法

（1）扩展运算符 (展开语法)

• 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3,相当于下面的代码
console.log(1, 2, 3);

• 扩展运算符可以应用于合并数组

// 方法一   
let ary1 = [1, 2, 3];  
let ary2 = [3, 4, 5];  
let ary3 = [...ary1, ...ary2];  
// 方法二   
ary1.push(...ary2);

• 将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');
oDivs =[...oDivs];

（2）构造函数方法：Array.from()

• 将伪数组或可遍历对象转换为真正的数组

// 定义一个集合
let arrayLike = {
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
};

// 转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

• 方法还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrayLike = {
	"0": 1,
	"1": 2,
	"length": 2
}
let newAry = Array.from(arrayLike, item => item *2); 
console.log(newArr); // [2,4]

注意：如果是对象，那么属性需要写对应的索引。

（3）实例方法：find()

• 用于找出第一个符合条件的数组成员，如果没有找到返回 undefined

let ary = [{
	id: 1,
	name:'张三'
}, {
	id: 2,
	name:'李四'
}];

let target = ary.find((item, index) => item.id == 2); 
// 找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

（4）实例方法：findlndex()

• 用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1。

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2

（5）实例方法：includes()

• 判断某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false

1.2. String 的扩展方法

（1）模板字符串

• ES6新增的创建字符串的方式，使用反引号定义

let name = `这是一个模板字符串`;

• 模板字符串中可以解析变量

let name ='张三'；
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

• 模板字符串中可以换行

let result = {       
    name: 'zhangsan',       
    age: 20,      
    sex: '男'   
}   
let html = ` 
<div>      
	<span>${result.name}</span>
	<span>${result.age}</span>
	<span>${result.sex}</span>
</div> `;

• 在模板字符串中可以调用函数

const sayHello = function () {      
    return '哈哈哈哈 追不到我吧 我就是这么强大';  
};   
let greet = `${sayHello()} 哈哈哈哈`;  
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

（2）实例方法：startsWith() 和 endsWith()

• startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值。

• endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值。

let str = 'Hello world!';
str.startsWith('Hello'); // true
str.endsWith('!'); // true

（3）实例方法：repeat()

• repeat 方法表示将原字符串重复 n 次，返回一个新字符串。

'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"

1.3. Set 数据结构

ES6提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

• Set 本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();
console.log(s.size); // 0

• Set 函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]); // {1, 2, 3, 4} 可去重

• 数组去重：

const s3 = new Set(["a","a","b","b"]);
console.log(s3.size);
// 数组去重
const ary = [...s3];
console.log(ary);

（1）实例方法：

• add(value)：添加某个值，返回 Set 结构本身。

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

• has(value)：返回一个布尔值，表示该值是否为 Set 的成员。

• clear()：清除所有成员，没有返回值。

const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2); // 删除set结构中的2值
s.has(1); // 表示set结构中是否有1这个值返回布尔值
s.clear(); // 清除set结构中的所有值
// 注意：删除的是元素的值，不是代表的索引

（2）遍历

• Set 结构的实例与数组一样，也拥有 forEach 方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(value => console.log(value))

2. Promise

Promise 出现的目的是解决 Node.js 异步编程中回调地狱的问题。

Promise 本身是一个构造函数，要使用 promise 解决回调地狱的问题，需要使用 new 运算符创建 Promise 构造函数的实例对象。

在创建对象的时候需要传入一个匿名函数，匿名函数中有两个参数 resolve，reject。

语法示例：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (true) {
            resolve({name: '张三'});
        }else {
            reject('失败了');
        }
    }, 2000);
});
promise.then(result => console.log(result)) // {name: '张三'}
       .catch(error => console.log(error)); // 失败了

3. 异步函数

异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。

const fn = async () => {};
async function fn () {}

3.1 async 关键字

1. 普通函数定义前加 async 关键字 普通函数变成异步函数
2. 异步函数默认返回 promise 对象
3. 在异步函数内部使用 return 关键字进行结果返回，结果会被包裹的 promise 对象中 return 关键字代替了 resolve 方法
4. 在异步函数内部使用 throw 关键字抛出程序异常
5. 调用异步函数再链式调用 then 方法获取异步函数执行结果
6. 调用异步函数再链式调用 catch 方法获取异步函数执行的错误信息

3.2 await 关键字

1. await 关键字只能出现在异步函数中
2. await promise; await 后面只能写 promise 对象 写其他类型的API是不可以的
3. await 关键字可以暂停异步函数向下执行，直到 promise 返回结果

3.3 promisify 改造函数

const fs = require('fs');
// 改造现有异步函数api 让其返回promise对象 从而支持异步函数语法
const promisify = require('util').promisify;
// 调用promisify方法改造现有异步API 让其返回promise对象
const readFile = promisify(fs.readFile);

async function run () {
	let r1 = await readFile('./1.txt', 'utf8')
	let r2 = await readFile('./2.txt', 'utf8')
	let r3 = await readFile('./3.txt', 'utf8')
	console.log(r1)
	console.log(r2)
	console.log(r3)
}

run();