ECMAScript6相关实用特性

Posted 2020-10-21 叶家伟的博客

本文总结ECMAScript6相关实用特性

目录

let和const
箭头函数
class
对象字段
模板字符串
解构赋值
函数参数扩展
迭代器for...of
模块加载
map和weakmap
set和weakset
对象代理
Symbol数据类型
类型方法的扩展
Promise规范

---

1. let和const

   let 声明变量 
   const 声明常量
   两者没有作用域提升

2. 箭头函数

   箭头函数不存在this调用模式的问题，函数在哪儿定义的this就是这个上下文
   var fn = () => { console.log(this); }

3. class

   基本使用
       class Demo {
           constructor(a, b) { // 构造函数
               this.a = a; // 实例属性
               this.b = b;
           }
           get myA () { // getter
               return this.a;
           }
           fn() { // 自定义函数
               console.log(11);
           }
           static staticFn() { // 静态函数
               console.log(22);
           }
       } 
       const demo = new Demo(1, 2);
       console.log(demo.b);
       console.log(demo.myA);
       demo.fn();
       Demo.staticFn();
   类继承
       子类没有构造函数
           class Demo1 extends Demo {
               fn() {
                   console.log(this.a);
               }
           }
           const demo1 = new Demo1(1);
           demo1.fn();
       子类有构造函数
           class Demo1 extends Demo {
               constructor(a, b) { 
                   super(a, b)
               }
               fn() {
                   console.log(this.a);
                   super.fn(); // 父类中的方法
               }
           }
           const demo1 = new Demo1(1);
           demo1.fn();

4. 对象字段

   var handler = ‘aa‘
   var obj = {
       __proto__: {}, // 设置原型对象
       handler, // 对象字段简写
       toString() { // 重写toString方法，使用super调用原型中的方法
           return "d " + super.toString();
       },
       [ ‘prop_‘ + (() => 42)() ]: 42 // 字段名，使用表达式计算
   };

5. 模板字符串

   var a = 11, b = 22;
   var str = ` ${a} + ${b} = ${a + b} `;

6. 解构赋值

   数组解构 var [a, , b] = [1,2,3]; // a -> 1 b -> 3
   对象解构
       var {a: a1, b: b1, c: {d: c1}} = {
           a: 1, b: 2, c: { d: 3 }
       }; // a1 -> 1 b1 -> 2 c1 -> 3 
       简写
       var {a, b, c: {d}} = {
           a: 1, b: 2, c: { d: 3 }
       }; // a -> 1 b -> 2 c -> 3 
   函数解构
       function fn({a}){
           console.log(a); // 1
       }
       fn({a: 1});

7. 函数参数扩展

   默认值
       function fn(a, b=10){ // b如果没传默认10
           console.log(a + b);
       }
       fn(1);
   参数rest
       function fn(a, ...b){
           console.log(a + b.length); // b接受剩余参数，生成一个数组
       }
       fn(1, 2, 3, 4, 5);
   参数spread
       function fn(a, b, c){
           console.log(a + b + c);
       }
       fn(...[1,2,3]);

8. 迭代器for...of

   能够使用迭代器for...of进行迭代的结构必定是iterable结构
   最基本的iterable结构
       function* fn() {
           yield 1;
           yield 2;
           yield 3;
       }
       for(let item of fn()) {
           console.log(item);
           break; // 关闭迭代器
       }
   内置iterable结构：数组，字符串，map，set...
   使用generators
       写法一
           function* fn() {
               let [prev, curr] = [0, 1];
               while(true) {
                   [prev, curr] = [curr, prev + curr];
                   yield curr;
               }
           }
           for(let item of fn()) {
               console.log(item);
               if(item >= 1000) {
                   break;
               }
           }
       写法二
           var obj = {
               [Symbol.iterator]: function* fn() {
                   let [prev, curr] = [0, 1];
                   while(true) {
                       [prev, curr] = [curr, prev + curr];
                       yield curr;
                   }
               }
           }
           for(let item of obj) {
               console.log(item);
               if(item >= 1000) {
                   break;
               }
           }
       原始写法
           let obj = {
               [Symbol.iterator]() {
                   let pre = 0, cur = 1;
                   return {
                       next() {
                           [pre, cur] = [cur, pre + cur];
                           return {
                               done: false,
                               value: cur
                           }
                       }
                   }
               }
           }
           for (var item of obj) {
               if (item > 1000) break;
               console.log(item);
           }

9. 模块加载

   导出
       test.js
           export function fn () {}
           export let a = 1;
       test1.js
           export * from ‘test.js‘ // 导出test.js中所有成员
           export let b = 2;
       test2.js
           export default {}
   导入
       import { fn, a } from "test.js"
       import * as obj from "test.js"
       import obj from "test2.js"

10. map和weakmap

    map
        [[ 1, ‘one‘ ],[ 2, ‘two‘ ]] 这种结构就是map，相当于是对象的另一种表现形式
        基本使用
            var map = new Map();
            map.set("name", "ye");
            map.set("age", "11");
            console.log(map.get("name"));
            console.log(map.size);
        遍历map
            遍历键值对
                for(var [key, value] of map) {
                    console.log(key + "|" + value);
                }
                等价于
                for(var [key, value] of map.entries()) {
                    console.log(key + "|" + value);
                }
            遍历键
                for(var key of map.keys()){
                    console.log(key);
                } 
            遍历值
                for(var value of map.values()){
                    console.log(value);
                }
    weakmap
        weakmap和map类似，只不过键必须是引用类型
        基本使用
            var key = {}
            var wMap = new WeakMap();
            wMap.set(key, "ye");
            console.log(wMap.get(key));
            wMap.delete(key);
            console.log(wMap.has(key));

11. set和weakset

    set
        和数组类似，不过成员是不重复的
        基本使用
            const set = new Set([1,2,3,4,5]);
            set.add(6);
            console.log(set.size);
            set.delete(6);
            console.log(set.has(6));
        遍历set
            const set = new Set([1,2,3,4,5]);
            for(let item of set) {
                console.log(item);
            }
            let arr = Array.from(set); // set转化成array
    WeakSet 和set类似，不过成员时引用  
        const wSet = new WeakSet();
        var obj = {}
        wSet.add(obj);
        wSet.delete(obj);
        console.log(wSet.has(obj));

12. 对象代理

    对象代理的作用就像土豪的管家一样
    基本使用
        var obj = {
            a: 11
        }
        var guanjia = new Proxy(obj, {
            // 代理处理函数
            get: function(target, name) {
                console.log(target, name); // target是原对象，name是属性名
                return name
            }
        })
        console.log(guanjia.a);
    in操作符使用
        var guanjia = new Proxy(obj, {
            get: function(target, name) {
                return name in target? target[name]: "没有此属性"
            }
        })
        console.log(‘b‘ in guanjia); false // 属性是否存在
        console.log(guanjia.‘b‘); "没有此属性"
    给函数写代理
        var fn = function() {
            console.log("函数");
        }
        var guanjia = new Proxy(fn, {
            apply: function(target, ...args) {
                // 调用fn之前触发
                target();
                console.log(args[1]);
            }
        })
        guanjia("a", "b", "c");

13. Symbol数据类型

    Symbol用来获取一个独一无二的值
    const symbol = Symbol("myFirstSymbol");
    console.log(typeof symbol); // symbol
    console.log(symbol.toString()); // Symbol(myFirstSymbol)
    注意：symbol作为对象的属性，无法使用for...in遍历，另外JSON.stringify对此属性也无法访问

14. 类型方法的扩展

    Number.isInteger(1.1) 判断是否是整数
    "abcd".includes("cd"); 字符串是否包含指定字符
    "abc".repeat(3); 字符串重复
    Array.from(new Set()); 转数组
    Array.of(1); 创建数组
    [0, 0, 0, 0].fill(7, 1); 数组填充，第一参数是要填充的元素，第二个参数是开始填充的索引
    [1, 2, 3, 3].find(x => x == 3); 找出第一个满足添加的元素
    [1, 2, 3, 3].findIndex(x => x == 3); 找出第一个满足添加的元素的索引

15. Promise规范

    function fn (duration = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve("执行成功" + duration);
            }, duration)
        })
    }
    fn(1000).then(data => {
        console.log(data);
        return fn(1000);
    }).then(() => {
        throw new Error("故意抛出的错误");
    }).catch(err => {
        return Promise.all([fn(1000), fn(2000)]);
    }).then(data => {
        console.log(data);
    })