ECMAScript6常用api介绍与使用

ES6新增常用API

1.1. 数字

1.1.1. 预览

名称宿主类型作用isIntegerNumbermethod是不是整数，小数点后为0的也算，比如2.0isNaNNumbermethod是不是NaNisFiniteNumbermethod是不是非无穷的数字parseIntNumbermethod字符串转整数，原本全局的方法的转移parseFloatNumbermethod字符串转浮点数，原本全局的方法的转移

1.1.1.1. 演示

• Number.isInteger

  Number.isInteger(100); // trueNumber.isInteger(100.0); // trueNumber.isInteger(100.1); // false

• Number.isNaN

  Number.isNaN(123); // falseNumber.isNaN(NaN); // trueNumber.isNaN("abc"); // falseNumber.isNaN([ 'a', 'b', 'c' ]); // false

• Number.isFinite

  Number.isFinite(100); // trueNumber.isFinite(Infinity); // falseNumber.isFinite("100"); // false

• Number.parseInt

  Number.parseInt("100.123", 10); // 100Number.parseInt("100.123", 2); // 4Number.parseInt("100.123", 8); // 64Number.parseInt("100.123", 16); // 256

• Number.parseFloat与parseInt用法一致。

1.2. 字符串

1.2.1. 预览

名称宿主类型作用fromCodePointStringmethod通过Unicode码点求字符，支持大于0xFFFF编码字符codePointAtString.prototypemethod获取指定下标字符的Unicode码点，支持大于0xFFFF编码字符atString.prototypemethod获取指定下标的字符，可正确获取大于0xFFFF编码的字符includesString.prototypemethod是否包含指定字符串startsWithString.prototypemethod起始位置是否包含指定字符串endsWithString.prototypemethod结束位置是否包含指定字符串repeatString.prototypemethod重复字符串多次

1.2.1.1. 演示

• String.fromCodePoint

String.fromCodePoint(97); // "a"String.fromCodePoint(0x61); // "a"String.fromCodePoint(19968); // "一"String.fromCodePoint(0x4e00); // "一"

• String.prototype.codePointAt

let str = 'ABCD一二三四';str.codePointAt(0); // 65str.codePointAt(4); // 19968

• String.prototype.at 浏览器还不支持,忽略

let str = 'ABCD一二三四';str.at(0); // "A"str.at(4); // "一"

• String.prototype.includes
  1. 要检测的字符串 { string }
  2. 起始位置 { number }

let str = 'abcde';str.includes('abc'); // truestr.includes('bcd'); // truestr.includes('bcd', 2); // false

• String.prototype.startsWith
  1. 要检测的字符串 { string }
  2. 起始位置 { number }

let str = 'abcde';str.startsWith('abc'); // truestr.startsWith('bcd'); // falsestr.startsWith('bcd', 1); // true

• String.prototype.endsWith
  1. 要检测的字符串 { string }
  2. 结束位置,包头不包尾 { number }使用与上面的starsWith一致

• String.prototype.repeat

"abc".repeat(3); // "abcabc""123".repeat(4); // "123123123123"

1.3. 数组

1.3.1. 预览

名称宿主类型作用fromArraymethod类数组转真数组findArray.prototypemethod寻找第一个符合条件的值，类似的filter方法找全部findIndexArray.prototypemethod寻找第一个符合条件的值的下标fillArray.prototypemethod重置数组中的值

1.3.1.1. 演示

• Array.from
  1. 类数组
  2. 与map功能一样的回调

let likeArray = { 0: 'aa', 1: 'bb', 2: 'cc', length: 3 }Array.from(likeArray); // [ 'aa', 'bb', 'cc' ]let lis = document.querySelectorAll('li');Array.from(lis); // [ li, li, li, ... ]let str = 'abc';Array.from(str); // [ 'a', 'b', 'c' ]let nums = '123';Array.from(nums, v => v * v); // [ 1, 4, 9 ]

• Array.prototype.find

[11, 22, 33, 44].find(v => v % 2 === 0); // 22[11, 22, 33, 44].find(v => v > 50); // undefined

• Array.prototype.findIndex

[11, 22, 33, 44].find(v => v % 2 === 0); // 22[11, 22, 33, 44].find(v => v > 50); // undefined

• Array.prototype.fill
  1. 重置默认值 { any }
  2. 起始位置 { number }
  3. 结束位置,包头不包尾 { number }

let arr = new Array(5);arr.fill(1); // [ 1, 1, 1, 1, 1 ]arr.fill(10, 2, 4); // [ 1, 1, 10, 10, 1 ]

1.4. 对象

1.4.1. 预览

名称宿主类型作用isObjectmethod全等运算符的方法实现，但NaN与NaN相等，-0与+0不等assignObjectmethod对象浅拷贝keysObjectmethod获取自身所有可枚举的keyvaluesObjectmethod获取自身所有可枚举的valueentriesObjectmethod获取自身所有可枚举的key与valuegetPrototypeOfObjectmethod获取对象继承的原型setPrototypeOfObjectmethod设置对象继承的原型

1.4.1.1. 演示

• Object.is

Object.is(123, "123");  // falseObject.is(-0, 0);  // falseObject.is(NaN, NaN);  // true

• Object.assign
  1. 目标对象
  2. 被拷贝对象

let o1 = { a: 1, b: 2 };let o2 = { c: 3, d: 4 };Object.assign(o1, o2); // o1 => { a:1, b: 2, c:3, d: 4 }

• Object.keysES5

let obj = { a: 11, b: 22, c: 33 };Object.keys(obj); // [ 'a', 'b', 'c' ]

• Object.values

let obj = { a: 11, b: 22, c: 33 };Object.values(obj); // [ 11, 22, 33 ]

• Object.entries

let obj = { a: 11, b: 22, c: 33 };Object.entries(obj); // [ [ 'a', 11 ], [ 'b', 22 ], ['c', 33] ]

• Object.getPrototypeOf

let arr = [];Object.getPrototypeOf(arr);  // Array.prototype

• Object.setPrototypeOf

let arr = [];Object.setPrototypeOf(arr, { a: 11, b: 22 });arr.a        // 11arr.slice  // undefined

1.5. Set

• 新增的构造函数, 可创建新的数据结构, 结构类似与数组, 特点是值唯一

1.5.1. 预览

名称宿主类型作用sizeSetproperty集合成员数量addSet.prototypemethod添加某个值deleteSet.prototypemethod删除某个值hasSet.prototypemethod是否存在某个值clearSet.prototypemethod清空所有值forEachSet.prototypemethod遍历值

1.5.1.1. 演示

• size

let numSet = new Set([2, 4, 6, 2, 4, 6]);  // { 2, 4, 5 }numSet.size  // 3

• add

let numSet = new Set([2, 4, 6]);numSet.add(4);  // { 2, 4, 6 }numSet.add(8)   // { 2, 4, 6, 8 }

• delete

let numSet = new Set([10, 20, 30]);numSet.delete(10);  // { 20, 30 }

• has

let numSet = new Set([10, 20, 30]);numSet.has(20);  // truenumSet.has(50);  // false

• clear

let numSet = new Set([10, 20, 30]);numSet.clear();  // {}

• forEach
  1. 用来接收值的回调 { function }
  2. 回调中的this指向 { any }

let numSet = new Set([10, 20, 30]);numSet.forEach(v => console.log(v));

• 支持for of

let numSet = new Set([10, 20, 30]);for(let v of numSet) {    console.log(v);          // 10, 20, 30}

• 合并数据并去重

let arr1 = [ 1, 3, 5 ];let arr2 = [ 5, 7, 9 ];new Set([ ...arr1, ...arr2 ]);  // { 1, 3, 5, 7, 9 }

1.6. Map

• 新增的构造函数, 可创建新的数据结构, 结构类似与对象, 特点是key值可以为对象

1.6.1. 预览

名称宿主类型作用sizeMapproperty集合成员数量setSet.prototypemethod通过key,value形式添加新值getSet.prototypemethod通过key取值deleteSet.prototypemethod通过key删除值hasSet.prototypemethod是否存在某个keyclearSet.prototypemethod清空所有值forEachSet.prototypemethod遍历值

1.6.1.1. 演示

• size

let numMap = new Map([    [new Date(), 100],    [{}, 200]]);numMap.size  // 2

• set与get

let obj = { name: '张三', age: 21 };let map = new Map();map.set(obj, '我不认识李四');map.get(obj)   // '我不认识李四'

• delete

let fibs = [1, 1, 2, 3, 5, 8];let map = new Map();map.set(fibs, '这是');map.delete([1, 1, 2, 3, 5, 8]);  // falsemap.delete(fibs);                  // true

• has

let date = new Date();let map = new Map();numSet.has(date);  // falsenumSet.set(date, '明月几时有,把酒问青天');numSet.has(date);  // true

• clear

let numMap = new Map([    [new Date(), 100],    [{}, 200]]);numMap.clear()  // {}

• forEach
  1. 用来接收值的回调 { function }
  2. 回调中的this指向 { any }

let numMap = new Map([    [new Date(), 100],    [{}, 200]]);numMap.forEach((v, k) => console.log(v, k));

• 支持for of

let numMap = new Map([    [new Date(), 100],    [{}, 200]]);for(let v of numMap) {    console.log(v);          // 100, 200}

1.7. Promise

• Promise：承诺、约定的意思，主要用于异步执行流程的管理
• 它可以解决传统异步解决方案中，回调嵌套过深不利于维护的问题

1.7.1. 演示

• 假定我们有这样一个需求：某人和青梅竹马的芳芳约定，如果十年后她还没嫁，就嫁给我
• 这个需求中就含有异步逻辑的处理，芳芳要不要嫁给我需要等待10年后才会知晓
• 这里我们通过Promise来尝试实现这个需求：
  1. 使用promise管理一个10年约定
  2. 添加10年后的处理逻辑

1.7.1.1.1. 第一步

• Promise自身是一个构造函数，我们可以new它创建实例
• 然后传入一个函数，里面编写异步操作的代码

let engagement = new Promise(function(yes, no) {    // 定义10年期限，期限到后芳芳没嫁，就调yes，否则调no    // 这里的yes与no方法是Promise实例提供给我们的    setTimeout(function() {        yes();    }, 1000 * 10);});

1.7.1.1.1.1. 第二步

• 上面的代码在10年期限到来时，并没有写处理逻辑，而是通过调用Promise实例提供的方法告知最终结果
• 因为Promise实例知道最终的结果，所以它专门提供了一个then方法让我们来添加处理逻辑

// then接收两个回调，第一个是成功回调，第二个是失败回调(可选)engagement.then(  () => console.log('太开心了，芳芳终于嫁给了我'),  () => console.log('我最终还是错过了芳芳'));

1.7.1.1.1.2. 后续处理

• 使用Promise后你会发现我们异步操作与后续的处理逻辑是分开编写的
• 而且我们可以通过then方法多次添加后续的处理逻辑
• 即时异步操作结束了，我们还是可以调用then

// 只传入成功回调engagement.then(    () => console.log('芳芳终于嫁给我了，我要带她环游世界！'));// 如果只想指定失败回调，可以通过catch方法来添加engagement.catch(    () => console.log('我的世界开始变得暗淡无光'));

1.7.1.2. 小结

• 使用Promise管理异步操作，异步逻辑与结果处理是分开编写的，这有利于我们程序的解耦，让程序更好维护
• then方法后续仍可以调用，是因为每个Promise实例都有一个状态记录异步操作执行的进度，即时异步操作结束了，这个记录仍然存在
  • pending状态，代表正在执行异步操作，实例刚创建时的状态
  • resolved状态，代表异步代码执行完毕，调用yes方法后的状态
  • rejected状态，代表异步代码执行完毕，调用no方法后的状态

1.8. 控制异步操作流程

1.8.1. 普通做法

• 通过编写嵌套的异步回调来控制代码的执行流程

setTimeout(function() {    console.log('第一个计时器回调执行，开启第二个');    setTimeout(function() {        console.log('第二个计时器回调执行，开启第三个');        setTimeout(function() {            console.log('第三个计时器回调执行');        }, 2000);    }, 2000);}, 2000);

1.8.1.1. Promise做法

• 通过then方法的链式调用控制代码的执行流程

// 创建一个promise实例，用于控制第二个计时器的执行new Promise(function(yes, no) {    setTimeout(function() {        console.log('第一个计时器回调执行，开启第二个');        yes();    }, 2000);})// 第二个执行，并创建返回一个新的promise实例，用于控制第三个计时器的执行.then(function() {    return new Promise(function(yes, no) {        setTimeout(function() {            console.log('第二个计时器回调执行，开启第三个');            yes();        }, 2000);    });})// 第三个执行，如没第四个，就不用再返回新的promise实例控制后续执行了.then(function() {    setTimeout(function() {        console.log('第三个计时器回调执行');    }, 2000);});

1.9. Promise封装与传参

1.9.1. 封装promise版本的定时器

• 如果同一件异步操作将来可能多次使用，可以考虑封装一个方法，便于复用

function pmsTimeout(time, data) {    return new Promise(function(yes, no) {        setTimeout(function() {            yes(data);        }, time);    });}pmsTimeout(2000).then(function() {    console.log('通过then方法来添加定时器的回调逻辑，实现解耦');});pmsTimeout(4000).then(function() {    console.log('封装后使用方便不少');});

1.9.1.1. 数据传递

• 另外yes与no方法还可以传递一些参数给then中的回调

function pmsTimeout(time) {    return new Promise(function(yes, no) {        setTimeout(function() {            yes('给小伙来个士力架');        }, time);    });}pmsTimeout(2000).then(function(data) {    console.log(data);  // '给小伙来个士力架'});

1.9.1.2. 进阶

• 我们把普通异步操作封装成promise版本时，可以让使用者指定数据

function pmsTimeout(time, data) {    return new Promise(function(yes, no) {        setTimeout(function() {            yes(data); // 用户传什么我就给then回调什么        }, time);    });}pmsTimeout(2000, '老大').then(function(data) {    console.log(`${ data }没钱吃饭`);    return pmsTimeout(3000, '老二');}).then(function(data) {    console.log(`${ data }没钱穿衣`);    return pmsTimeout(4000, '老三');}).then(function(data) {    console.log(`${ data }个长不大`);});

1.10. asyncES7

• 使异步操作变得更加简洁清晰
• 使用它控制Promise执行流程，简直没谁了

1.10.1. 顺序执行定时器

function pmsTimeout(time, data) {    return new Promise(function(yes, no) {        setTimeout(function() {            yes(`Hello ${ data }`); // 数据小做处理        }, time);    });}async function asyncTimeout() {    let data = null;    data = await pmsTimeout(1000, '大娃');    console.log(data);    data = await pmsTimeout(2000, '二娃');    console.log(data);    data = await pmsTimeout(3000, '三娃');    console.log(data);    data =await pmsTimeout(4000, '四娃');    console.log(data);}// 开启幸福生活asyncTimeout();

1.10.1.1. 顺序进行数据请求

async function asyncFetch() {    let response = null, data = null;    response = await fetch('abc.json');    data =  response.ok && await response.json();    console.log(data);    response = await fetch('react.js');    data = response.ok && await response.text();    console.log(data);}// 开启幸福生活asyncFetch();