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

女爷i 2023-09-30 23:52 13阅读 0赞

**目录**

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 }

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

更多详情可以前往：[箭头函数 - JavaScript | MDN (mozilla.org)][- 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:phillzou@gmail.com}
    onLoad(options) {
      // es5获取值
      let wechat = options.wechat;
      let email = options.email;
      // es6获取值
      let {wechat, email} = options;
    }

## 8.Promise风格的调用 ##

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

以后在云开发中，如果出现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的语法了，小编进行了一个简单的收集和总结，希望可以和各位看官一起进步呀！加油加油！！！![743ab6e5c9424c13a5e5cfb77a433f0b.jpeg][]

[- JavaScript _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arrow_functions#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
[743ab6e5c9424c13a5e5cfb77a433f0b.jpeg]: https://img-blog.csdnimg.cn/743ab6e5c9424c13a5e5cfb77a433f0b.jpeg