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(){}
}
注意:成员名称的单引号不是必须的,最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误。
网友评论