微信小程序——ES6语法简介

目录

1.小程序使用ES6语法的新特性

2.箭头表达式

3.模板对象

4.定义函数

5.类

6.定义静态方法

7.解构赋值

8.Promise风格的调用

9.变量定义


1.小程序使用ES6语法的新特性

ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。

小程序在很久之前就支持了ES6了,因此在小程序的开发中,我们可以适当的使用ES6中的一些新特性,来简化代码,高效开发。

在使用微信开发者工具调试之前,记得先勾选上es6转es5选项,这样工具才会将es6语法进行转换。

2.箭头表达式

有时候,函数作为一个参数变量传进去的时候,为了简化他的写法,我们可以使用箭头函数来实现。

做前端开发的,开始阶段基本会遇到 this闭包 带来的坑————一些异步操作中,回调函数中丢失了当前函数的上下文对象,导致异步操作完成后,更新原有上下文失败。为了避免这个问题,以前大家都是自己用变量保存一个闭包外部上下文的引用,取的名字可能千奇百怪:
that/_this/$this/self…在异步操作完成后的回调中,通过调取这个闭包外层的变量,达到更新回调前函数上下文对象的目的。

ES6 中增加了 箭头表达式,效果和匿名函数相似,但箭头表达式更为简练,且内部执行时的 this 与外侧一致,不再需要每次都额外增加变量引用了。

微信小程序里,对每个页面编写的代码逻辑,都作为生命周期钩子函数(如:onLoad, onShow, onUnload)和自定义函数(如:各类组件回调函数)写在 AppService 内。

这两种函数内,this 都指向当前 Page 对象,在这些函数里做的各种异步操作,回调内的 this 基本都应该仍然保持为当前 Page 对象。在这个情况下,使用箭头表达式可以减少重复的工作、也减少遗漏 this 时出错的几率。

原来的代码:

wx.request({
    url: "http://www.baidu.com/",
    success: function(res){
        // 做一些事情
    }
})

使用箭头函数的代码:

wx.request({
    url: 'http://www.baidu.com/',
    success: res => {
        //做一些事情
    }
})

箭头函数基础语法:

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

箭头函数更短的表达方式:

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
}); // 返回数组:[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时,可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

更多详情可以前往:箭头函数 - JavaScript | MDN (mozilla.org)

3.模板对象

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,这样就避免了使用大量的(+)来拼接字符串。例如下面的代码:

var wechat = '1349571206zmy';
var qq = '1349571206',
// es5
console.log('my wechat is ' + wechat + ' and my qq is ' + qq);
// es6
console.log(`my wechat is ${wechat} and my qq is ${qq}`);

4.定义函数

基本用法(默认参数要在非默认参数后面)

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注意点:使用函数默认参数时,不允许有同名参数。

// 不报错
function fn(name,name){
 console.log(name);
}
 
// 报错
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
 console.log(name+","+age);
}

只有在未传递参数,或者参数为 undefined 时,才会使用默认参数,null 值被认为是有效的值传递。

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null

函数参数默认值存在暂时性死区,在函数参数默认值表达式中,还未初始化赋值的参数值无法作为其他参数的默认值。

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined

在函数的定义中存在用不定参数来表示不确定参数个数,形如,...变量名,由...加上一个具名参数标识符组成。具名参数只能放在参数组的最后,并且有且只有一个不定参数。

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

5.类

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。例如定义一个基础类,来封装微信小程序常用的方法,让代码有更高的复用性,也使代码更加简洁。与传统语言相似,支持继承。

// base.js
class Api {
  // 显示toast
  showToast(title, type='none', duration=1000, mask=false) 
    wx.showToast({
      title: title,
      icon: type,
      duration: duration,
      mask: mask
    });
  }
  // ...
  // 导出
  export {
    Api
  };
}

定义好类后,可以在其他的js中进行调用。

// index.js
// 引用
import {Base} from 'base';
const base = new Base();
// ...
// 在函数中调用
onLoad() {
  base.showToast('toast');
}

6.定义静态方法

在定义方法的时候,可以使用static关键字定义静态方法,静态方法是只属于类的,不属于对象的。示例代码如下:

class Utils{
  constructor(){}
  static timeFormat(time){
    // 时间格式化的代码
  }
}
 
// 直接调用
Utils.timeFormat("2019/1/1")

以上定义了一个timeFormat的方法,并且在这个方法前面加了一个static关键字,所以他就是一个静态方法了,那么以后在使用这个方法的时候直接通过类名就可以调用了

7.解构赋值

结解构就是按照一定模式,从数组和对象中提取变量进行赋值,通过解构我们可以让赋值更优雅便捷。例如下面的代码:

// options={wechat:134957126zmy, email:[email protected]}
onLoad(options) {
  // es5获取值
  let wechat = options.wechat;
  let email = options.email;
  // es6获取值
  let {wechat, email} = options;
}

8.Promise风格的调用

在云开发中,提供的API有大量的Promise方式调用,在这里就简单的讲解一下Promise的实现原理,看以下代码:


const p = new Promise(function(resolve,reject){
    // 如果执行以下代码,那么会执行下面的then函数
    setTimeout(() => {
        resolve("success");
    },1000);
    // 如果执行以下代码,那么会执行下面的catch函数
    setTimeout(() => {
        reject("fail")
    },1000);
    // 如果以上两个代码都执行,那么只会调用下面的then方法,因为resolve的调用在前面。
});
 
p.then((res) => {
  console.log(res);
}).catch((error) => {
  console.log(error);
});

以后在云开发中,如果出现then和catch,就知道分别对应的是成功的回调以及失败的回调

9.变量定义

9.1.定义变量新关键词——let:

let跟var一样,也是用来定义变量,但是他比var更加的安全,体现在以下两点:

9.1.1.不会出现变量提升的问题

console.log(a);
var a = 10;

按道理变量a是在打印的后面定义的,但是以上的代码并不会出错,而是会打印undefined,因为var会把变量a提升到代码最开始的地方进行定义,但是如果使用let就不会出现这种问题了。

console.log(b);
let b = 10;

此时再去打印的时候,就直接会抛出一个错误ReferenceError: b is not defined.,这才是正确的方式。

9.1.2.只在当前代码块内有效

for(var i=0;i<=3;i++){
    console.log(i);
}
console.log(i);

按道理来说i在for循环结束后,应该就不能够再使用了,但是我们下面再打印i的时候,会发现打印的结果是3而不是抛出异常,这在一些情况下也会产生莫名其妙的错误。但是let就不会出现这种情况了,如果我们这里将var替换成let,此时再打印i的时候,就会抛出错误ReferenceError: i is not defined

9.2.定义常量关键词——const:

const是用来定义常量的,常量是一旦定义好了以后,就不能够再修改了。比如以下代码:

const PI = 3.14;
PI = 3 // 会抛出异常

const只是用来限制指向的内存地址不能改变,但是如果这个内存地址上的数据改变了,是可以的。或者说得直白一点,就是指向的如果是一个可变的容器,容器中的数据改变了,那么是允许的。比如以下代码:

const mylist = [1,2,3];
mylist.push(4);
console.log(mylist);

以上代码后面会打印一个[1,2,3,4]的数组。

10.总结

以上就是在微信小程序里面常用的ES6的语法了,小编进行了一个简单的收集和总结,希望可以和各位看官一起进步呀!加油加油!!!

猜你喜欢

转载自blog.csdn.net/wct040923/article/details/130304663