前端技术总结四--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 对象中是否存在。

组合使用(ReflectProxy

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()消除尾部的空格,返回的都是新字符串

posted @ 2020-09-17 22:10  梁涛999  阅读(411)  评论(0编辑  收藏  举报