美文网首页
【Javascript】ES新用法

【Javascript】ES新用法

作者: 嘻洋洋 | 来源:发表于2019-08-26 10:24 被阅读0次

    1. ES6之Object.assign()

    用于合并/复制对象的属性:Object.assign(target, source_1, ..., source_n)
    (1)合并对象

    //调用微信小程序公共接口
    function wxx(method, param = {}) {
        return new Promise(function (resolve, reject) {
            // success和fail是所有接口共有的,所以单独抽出来,单个调用的时候合并。
            wx[method](Object.assign(param, {
                success: res => resolve(res),
                fail: res => reject(res)
            }))
        })
    }
    

    (2)为对象添加属性和方法

    //将x属性和y属性添加到Point类的对象实例
    class Point {
      constructor(x, y) {
        Object.assign(this, {x, y});
      }
    }
    

    (3)浅拷贝
    Object.assign() 只是一级属性复制(深拷贝),比浅拷贝多深拷贝了一层而已。

    const obj1 = {a: {b: 1}};
    const obj2 = Object.assign({}, obj1);
     //修改obj1 
    obj1.a.b = 2;
    console.log(obj2.a.b)  //输出2
    

    曲线深拷贝:对象转成json字符串,然后又将字符串转回对象

    const obj1 = JSON.parse(JSON.stringify(obj));
    

    属性a的内部有任何变化,都会在目标对象上呈现出来。
    (4) 同名属性的替换
    如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

    2. ES5之Object.keys()

    Object.keys() 与 Object.getOwnPropertyNames()方法可以检索对象的所有属性名称,返回所有的可枚举属性名称,而后者则返回所有属性名称。

    3.ES6中 export与export default的区别

    • 在一个文件或模块中,export、import可以有多个,export default仅有一个。
    • 通过export方式导出,在导入时要加{ },按需导出,export default则不需要。
    • export default与普通的export不要同时使用。

    export default 的用法举例:

    // 输出export-default.js
    export default function () {
    console.log('foo');
    }
    // 或者写成
    function foo() {
    console.log('foo');
    }
    export default foo;
    //引入 import-default.js,直接修改名字
    import customName from './export-default';
    customName(); // 'foo'
    
    

    export的用举例:

    //输出
    var f = 'Miel';
    var name = 'Jack';
    var data= 1988;
    export {f, name, data};
    //引入:如果想在引用时改变名称,可以通过 as
    import {f, name as xingming, data} from './testA';
    
    

    使用babel 的转换,es6 的模块系统最终还是会转换成 commonjs 的规范。混合使用 es6 的模块和 commonjs 的规范是没有问题的,因为最终都会转换成 commonjs。

    //appconf.js :公共配置,commonjs规范
    module.exports = {
      __BASE_SERVER__:"https://wx.hao123.com"
    }
    //request.js文件使用公共配置,ES6
    import {
      __BASE_SERVER__
    } from '../appconf.js'
    

    4. ES6解构赋值

    在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码,如:

    let options = {
        repeat: true,
        save: false
    };
    // 从对象中提取数据
    let repeat = options.repeat,
    save = options.save;
    

    ES6添加了解构功能,获取数据更加简便:

    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    

    5. ES7的Async/Await

    同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。
    (1) 基础概念
    async:它作为一个关键字放到函数前面,用于表示函数是一个异步函数。async 函数返回的是一个promise 对象
    await:await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果。

    /**
     * 封装微信相关的异步接口,返回Promise对象
     */
    function wxx(method, param = {}) {
        return new Promise(function (resolve, reject) {
            //API异步调用
            wx[method](Object.assign(param, {
                success: res => resolve(res),
                fail: res => reject(res)
            }))
        })
    }
    

    await关键字只能在async函数中使用。并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。当在async函数中,运行遇到await时,就会等待await后面的函数运行完毕,而不会直接执行next code。

      async goodsInit(skuid,isGoodsStock=true) {
        let { groupInfo, goodsInfo,shareCodePath} = await this.API.goodsDetail(skuid);
        if (!goodsInfo) { 
          return super.alert({
            content: "该商品已下市",
            icon: "info",
            click: () => {
              this.goback()
            }
          })
        }
    

    (2) 失败时的处理(reject )
    promise 返回的 resolve 对象可能用 await 去接,但是 reject 无法用 await 接收到,所以要用 try catch 去处理。
    (3)多个异步函数组合执行,保持同步

    //removeCache,getApiToken,getSys都是异步函数
      onLaunch: async function () {
       console.log("num:1");
        await storage.removeCache("apiToken");
        await this.getApiToken();
        await this.getSys();
        console.log("num:3");
      }
      async getSys () {
        let res = await WXX.getSystemInfo();
        console.log("num:2");
        //设置变量值
        this.globalData.sysInfo = res;
      },
    

    最终输出:num:1,num:2,num:3

    6.ES6基础之——对象之属性简洁表达

    (1)ES6中允许使用变量来作为属性和方法,书写更简便。

    const foo = "bar";
    const baz = { foo}
    console.log(baz);   {foo:"bar"}
    //等同于
    const baz = {foo : foo};
    //微信小程序
    this.setData({ groupInfo, goodsInfo,shareCodePath});
    

    (2) 对象里面添加一个方法,它的值是一个函数,可以简写

    //以前的做法:
    let books = {
        study:function(){
        }
    };
    //简写
    let books = {
        study(){
        }
    };
    

    7.ES6函数默认参数

    在ES6中,可以为函数的参数指定默认值,定义了默认值的参数,应该是函数的尾参数,如果非尾部的参数设置默认值,实际上这个参数是没法省略的。参数数变量是默认声明的,所以不能用let或const再次声明。

    function log(x, y = 'World') {
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello
    
    function f(x,y =3, z = 33) {
        return x+y+z
    }
    console.log(f(1,2)) //36
    

    知识拓展

    (1)对象字面量
    定义:不用js的new操作符创建实例。

    var person={
        name:'小王',
        age:18,
        _pri:233,
        study:function(){}
    } 
    

    注意:成员名称的单引号不是必须的,最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误。

    相关文章

      网友评论

          本文标题:【Javascript】ES新用法

          本文链接:https://www.haomeiwen.com/subject/shunsctx.html