ES6 (上)

小程序并不支持所有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
    }
  }

你可能感兴趣的:(ES6 (上))