前端技术总结四--ES6篇

ES6相关

1、    es6 symbol

       ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let sy = Symbol("key1");   let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}

 

2、    es6 Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值：字符串、对象、函数、NaN。包括set(),get()方法。

       let myMap=new Map([
              ['(',')'],
              ['[',']'],
              ['{','}']
       ]);
    if (myMap.has(ch)) {
      console.log(myMap.get(ch));
    }

 

3、    es6 Set对象

Set 对象允许存储任何类型的唯一值，无论是原始值或者是对象引用。作用数组去重、数组合并等。

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]  直接输出mySet，是set对象。

 

4、    es6 proxy代理

       Proxy代理可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式。

       Proxy 对象由两个部分组成： target（目标对象）， handler（代理的指定行为）。

       作用：拦截读取、拦截函数调用、拦截删除、拦截new、拦截原型等。

       应用场景：1、数据校验。2、设置不可读不可写属性。3、创建通用dom。

 

5、   es6 Reflect反射  （观察者模式应用）

       Reflect可以用于获取目标对象的行为，它与Object类似，它的方法与Proxy 是对应的。

A、   Reflect.get(target, name, receiver) 查找并返回target对象的name属性。

B、   Reflect.set(target, name, value, receiver) 赋值

C、   Reflect.has(obj, name) 是 name in obj 指令的函数化，用于查找 name 属性在 obj 对象中是否存在。

组合使用（Reflect与Proxy）

let exam = {name: "Tom",age: 24}
let handler = {
    get: function(target, key){
        return Reflect.get(target,key); //等同于retrun target[key];
    },
    set: function(target, key, value){
        Reflect.set(target, key, value);
    }
}
let proxy = new Proxy(exam, handler)
proxy.name = "Jerry"  proxy.name // "Jerry"

 

6、    es6 Iterator迭代器

       迭代器是一个接口，只要数据结构暴露了一个iterator的接口，那就可以完成迭代。ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。通过一个键为Symbol.iterator 的方法来实现。

       迭代器是带有特殊接口的对象。含有next()方法，调用返回包括value（当前位置的值）和done（是否迭代完）的对象，当done为true的时候，调用next就无效了。

       可迭代的对象：Array、Map、Set、String、TypedArray、函数中的 arguments 对象、NodeList 对象。普通对象不能迭代。

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
it.next();// >{value: "zero", done: false} 

调用迭代器的场合

1)      解构赋值

2)      扩展运算符

3)      Generator 函数中的 yield* 表达式

4)      or..of

5)      Array.from

6)      Map()、Set()、WeakMap()、WeakSet()

7)      Promise.all()//任务并行

8)      Promise.race()//任务竞赛

for of的特点

1)      有着同 for...in 一样的简洁语法，但是没有 for...in 那些缺点

2)      不同于 forEach 方法，它可以与 break、continue 和 return 配合使用

3)      提供了遍历所有数据结构的统一操作接口

 

7、    es6 Promise对象

这种“承诺将来会执行”的对象在JS中称为Promise对象。

       function test(resolve, reject) {
              var timeOut = Math.random() * 2;
              setTimeout(function () {
                     if (timeOut < 1) {resolve(‘timeOut’);}
                     else {reject(‘error’);}
              }, timeOut * 1000);
       }

       new Promise(test).then(function (result) {
               console.log('成功：' + result);
       }).catch(function (reason) {
               console.log('失败：' );
       });

在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱。代码阅读性差。

Promise.all()  这两个任务是可以并行执行的

Promise.race() 多个异步任务是为了容错，只需要获得先返回的结果即可。

 

8、    es6 Generator（生成器）

Generator函数，可以通过yield关键字，把函数的执行流挂起。Generator有两个区分于普通函数的部分：

一是在 function 后面，函数名之前有个 * ；

二是函数内部有yield表达式。

调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。

function* func(){
    yield '1';
    yield '2';
    return '3';
}
var f=new func();
f.next();// {value: "1", done: false}
f.next();// {value: "2", done: false}
f.next();// {value: "3", done: true}
f.next();// {value: undefined, done: true}

应用：1、逐行读取文本文件；2、控制流管理；3、利用 Generator 函数，可以在任意对象上部署 Iterator 接口。

 

9、    es6 async/await函数

async/await使得异步代码看起来像同步代码。

async 函数返回一个Promise对象，可以使用then方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
  }
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。await关键字只能用在async定义的函数内。

await针对所跟不同表达式的处理方式：

• Promise 对象：await会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。

与Promise的区别

1)      Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码。

2)      async await与Promise一样，是非阻塞的。

3)      async函数就相当于自执行的Generator函数。遵循的是Generator 函数的语法糖。它不能用于普通的回调函数。

async必须以一个Promise对象开始 ，所以async通常是和Promise结合使用的。直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰。

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}

async function helloAsync(){
await testAwait();
     await testAwait();
     console.log("helloAsync");
 }
helloAsync();

 

10、 es6 字符串扩展

       includes(), startsWith(), endsWith() 返回布尔值，都支持第二个参数，表示开始搜索的位置。

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

       padStart()用于头部补全，padEnd()用于尾部补全。

       trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格，返回的都是新字符串