ES6相关实用特性

本文总结ECMAScript6相关实用特性

基本使用

    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();

对象字段

var handler = 'aa'

var obj = {

    __proto__: {}, // 设置原型对象

    handler, // 对象字段简写

    toString() { // 重写toString方法，使用super调用原型中的方法

        return "d " + super.toString();

    },

    [ 'prop_' + (() => 42)() ]: 42 // 字段名，使用表达式计算

};

模板字符串

var a = 11, b = 22;

var str = ` ${a} + ${b} = ${a + b} `;

解构赋值

数组解构 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});

函数参数扩展

默认值

    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]);

迭代器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);

        }

模块加载

导出

    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"

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));

set和weakset

set

    和数组类似，不过成员是不重复的，如果添加重复的值无效

    基本使用

        const set = new Set([1,2,3,4,5]);

        set.add(6);

        set.add(6); // 无效

        console.log(set.size);

        set.delete(6);

        console.log(set.has(6));

        set.clear(); // 清空set

    遍历set

        const set = new Set([1,2,3,4,5]);

        for(let item of set) {

            console.log(item);

        }

        set.forEach((a,b,c) => {

            // a,b都表示元素，c表示set本身

            console.log(a, b, c);

        })

    set转化成array

        let arr = Array.from(set);

        let arr = [...set];

WeakSet 和set类似，不过成员是引用

    const wSet = new WeakSet();

    var obj = {}

    wSet.add(obj);

    wSet.delete(obj);

    console.log(wSet.has(obj));

对象代理

对象代理的作用就像土豪的管家一样

基本使用

    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");

Symbol数据类型

Symbol用来获取一个独一无二的值

const symbol = Symbol("myFirstSymbol"), symbol1 = Symbol("myFirstSymbol");

console.log(typeof symbol); // symbol

console.log(symbol.toString()); // Symbol(myFirstSymbol)

console.log(symbol === symbol1) // false

const symbol2 = Symbol.for("myFirstSymbol"), symbol3 = Symbol.for("myFirstSymbol");

console.log(symbo2 === symbol3) // true

注意：symbol作为对象的属性，无法使用for...in遍历，另外JSON.stringify对此属性也无法访问

类型方法的扩展

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); 找出第一个满足添加的元素的索引

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);

})

async和await

async和await就是用同步的方式来写异步

(async ()=>{

    await new Promise((resolve, reject) => {

        setTimeout(function() {

            console.log("执行成功1");

            resolve();

        }, 2000)

    });

    console.log("执行成功2");

})()

输出结果：

    执行成功1

    执行成功2

fetch

fetch("http://localhost:8000/test", {

    method: 'GET'

}).then(res => res.json()).then(data => {

    console.log(data);

}).catch(data => {

    console.log(data);

})

秒客网

ES6相关实用特性

本文总结ECMAScript6相关实用特性

目录

相关文章