美文网首页
【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合集 ES6 ES6新特性原生实现一个promiseSymbol 实例 JavaScript读...

  • 【Javascript】ES新用法

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

  • 目录引导

    JavaScript(ES5) JavaScript概述JavaScript 语言核心 ES6 -- ES9 ES...

  • 资料参考

    sass用法指南--阮一峰ES6入门Flex布局教程Javascript标准参考教程css网格布局

  • Promise 对象

    一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...

  • ES6 常用函数 记一次分享内容

    ES6 新特性 简介: ECMAScript 6.0(以下简称 ES6)是 JavaScript 新一代标准,加入...

  • ES6对象展开符

    JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了许多新特性。...

  • Node.js笔记七:es6

    Node.js笔记七:es6 es6是javascript的新一代语法规范,现在很多新的库都是基于新的es6语法规...

  • 初识ES6

    ES6在ES5的基础上增加了许多新功能和新用法,使JavaScript更加倾向于面向对象的语言了。 前端知识的更新...

  • JavaScript ES12新特性抢先体验

    JavaScript ES2021 (ES12)新特性 在上一篇文章中,我们介绍了ES2020的相关九大特性,里面...

网友评论

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

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