小程序并不支持所有ES6,文档有介绍。
以下是已测试可以在小程序上使用的ES6新用法
ES6模块功能
以前常用require文件引入,ES6后推荐模块引入
ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。
export default 在模块端不起名字,引用端起任意名称
//config.js 根目录
export const config={
app_url="www.xxx.com",
app_name="ABC"
}
let fun=function(){
}
export {fun} //export写上面或最下面都是一样的
//export {config,fun}
// util/request.js
import {config,fun} from '../config.js' //import时不要采用绝对路径
//如果引入的是类,需要先实例化后使用 let aclass=new aclass
//也可以直接继承类,无需实例化
class request{
aaa(){
console.log(config.app_url);
}
}
ES6模板字符串
let a=123
console.log(`${a}456`) //结果123456,注意这里不是单引号‘’而是``
b(){
return 'bbb'
}
console.log(`${this.b()}456`) //结果bbb456,注意这里不是单引号‘’而是``
ES6扩展运算符
var arr = {
'a': '我是a',
'b': '我是b',
'c': '我是c',
}
this.setData({
goods:arr //wxml中用{{goods.a}}
})
this.setData({
...arr //wxml中可直接用{{a}} ...扩展运算符
})
扩展运算符另一种用法
function test3(...arg) {
for (let v of arg) {
console.log('res',v);
}
}
test3(1, 2, 3, 4, 'a');//传的是多个值
function test2(arg) {
for (let v of arg) {
console.log('res',v);
}
}
test2([1, 2, 3, 4, 'a']);//传的是1个数组
ES6 简化
箭头函数简化
success:(res)=>{console.log()}
success:res=>console.log() //如果参数只有一个,可以不写括号,如果函数内部只有一段也可以不写大括号
if(title==true){ abc='123'} //常用方法
title && abc='123' //简洁写法,ES5也支持
ES6 新增函数
Includes()函数
在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方面是没问题,就是不够语义化。另一个问题是不能判断是否有NaN的元素。
ES6提供了Array.includes()函数判断是否包含某一元素,除了不能定位外,解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素,对NaN一样能有有效。
promise和async await
callback:多层回调让代码糟糕,无return
promise: return、多个异步等待合并
async await : 更高效,但小程序暂不支持。是ES2017规范
回调函数是函数无法保存状态所以不能return
promise是对象,可以保存状态,所以能return
1、实例化promise对象
2、异步代码写在函数中
3、共分为3种状态pending fulfilled rejected;进行中、已成功、已失败;
4、一开始就是进行中状态,一旦状态变成已成功或失败,那么状态就凝固了,不会再变成其他状态。
5、调用结果
const promise=new Promise((resolve,reject)=>{
wx.xxx({
seccess:(res)=>{
resolve(res)
},fail:(error)=>{
reject(error)
}
})
})
promise.then(
(res)=>{
},(error)=>{
}
)
解构赋值
解构是一种打破数据结构,将其拆分为更小部分的过程
onLoad(){
{
let a, b,c,rest;
[a, b] = [1, 2];
console.log(a, b); //1 2
[a, b] = [b, a];
console.log(a, b); //2 1
[a, b, ...rest] = [1, 2, 3, 4, 5, 6];
console.log(a, b, rest); //1 2 [3,4,5,6]
({ a, b } = { a: 3, b: 4 }) //两边对象键名需一一对应
console.log(a, b); //3 4
({ a, c } = { a: 3, b: 4 }) //不对应则返回undefind
console.log(a, c); //3 undefined
function f() {
return [1, 2, 3, 4, 5]
}
[a, , ...b] = f();
console.log(a, b); //1 [3,4,5]
let metaData = {
title: 'abc',
test: [{
title: 'test',
desc: 'description'
}]
}
console.log(metaData.title); //abc
let { title: esTitle, test: [{ title: cnTitle }] } = metaData;
//console.log(test); //报错
console.log(esTitle, cnTitle);//abc test
}
}