3.9 语法进阶

2020-10-9 糖果小宝小程序学习

在写复杂应用和函数的时候，掌握一些es6的语法写起来会更加简洁顺畅，而小程序也支持es6的语法，在这一章我们会把es6的语法和小程序结合起来，让你通过实战也能感受到它的方便之处。

3.8.1 模板字符串

要将多个字符串连接起来，可以使用加号+来用作字符串的拼接，如果变量比较多，是不是很麻烦？我们还可以使用模板字符串，模板字符串使用反引号来表示（在电脑键盘esc按键下面）。要在模板字符串中嵌入变量，需要将变量名写在 ${} 之中。

比如我们在url链接里需要使用变量，我们可以在控制台进行打印如下代码：

 

	const month = 9 const day = 10 const url1 =`http://api.juheapi.com/japi/toh?month=${month}&day=${day}` const url2 ='http://api.juheapi.com/japi/toh?month='+month+'&day='+day console.log(url1) console.log(url2)

3.8.2 解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将值从数组Array和对象Object中提取出来，按照对照的位置，赋值给其他变量。

 

	let title = res.data.title let body=res.data.body let image=res.data.image let share_url=res.data.share_url

比如我们想从res.data对象里面提取title、body、image、share_url，可以用上面的方法一个个赋值，但是这就显然有点麻烦，我们可以用如下方法，把res.data的对应值给取出来：

 

	let { title, body, image, share_url}=res.data

我们可以在console控制台打印一下下面的例子以加深理解：

 

	//对象的解构赋值 const {name,address,title} = {name:"李东bbsky",address:"深圳",title:"杂役"} console.log(`${name}、${address}、${title}`) const [a,b,c] = [12,23,45] console.log(`a的值是：${a}，a、b、c相加的结果是：${a+b+c}`)

返回一个res对象并从res对象里面提取值是我们调用小程序API经常会遇到的事情，因此解构赋值使用也就非常常见了。

3.8.3 扩展运算符

扩展运算符（展开运算符、展开语法）可以用于数组和对象，用于对象的作用是取出对象的所有可遍历属性，然后拷贝到当前对象之中；用于数组主要就是展开数组。

1、扩展运算符用于对象

我们可以在console控制台打印了解看customer对象是如何将user对象里面的值都拷贝过来，以及如何合并对象（重复的属性会被覆盖）：

 

	const user = {name:"李东bbsky",address:"深圳",title:"杂役"} const post = {title:"为什么要学习小程序云开发",tags:["小程序","云开发"],name:"小云"} const customer = {...user} const author = {...user,...post} console.log(customer) console.log(author)

2、扩展运算符用于数组

扩展运算符用于数组可以展开数组，在拷贝数组以及合并数组时，非常方便，在console控制台打印一下查看效果：

 

	const movielist = ["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"] const series = ["琅琊榜","陈情令","庆余年"] const program = [...movielist,...series] console.log(["泰坦尼克号",...movielist]) console.log(program)

3.8.4 回调函数与回调函数的写法

经过之前的学习，相信大家对回调函数success、fail有了一定的认识，那什么是回调函数呢？简单一点说就是：回调Callback是指在另一个函数执行完成之后被调用的函数。success、fail就都是在小程序的API函数执行完成之后，才会被调用，而success和fail它们本身也是函数，也能返回数据。而复杂一点说，就是回调函数本身就是函数，但是它们却被其他函数给调用，而调用函数的函数被称为高阶函数。

1、传入参数获取执行结果

在技术文档里可以看到几乎所有小程序的API都有success、fail、complete回调函数，success为接口调用成功的回调函数，fail为接口调用失败的回调函数，complete为接口调用结束的回调函数（调用成功、失败都会执行），原因在于这些API大多数是异步API。异步API的执行结果需要通过 Object类型的参数中传入的对应回调函数获取：

 

	wx.getNetworkType({
	success(res) { //传入res来获取回调函数的结果，res是对象 console.log(res)
	},
	fail(err){ //传入err来获取回调函数的结果，err也是对象 console.log(err)
	},
	complete(msg){//传入msg来获取回调函数的结果，msg也是对象 console.log(msg)
	}
});

以上回调函数的写法如果使用箭头函数，它的形式如下:

res =>

2、异步与同步

我们前面也提及过异步，那什么会有异步呢？因为JavaScript是单线程的编程语言，就是从上到下、一行一行去执行代码，类似于排队一样一个个处理，第一个不处理完，就不会处理后面的。但是遇到网络请求、I/O操作（比如上面的读取图片信息）以及定时函数（后面会涉及）以及类似于成功反馈的情况，等这些不可预知时间的任务都执行完再处理后面的任务，肯定不行，于是就有了异步处理。

把要等待其他函数执行完之后，才能执行的函数（比如读取图片信息）放到回调函数里，先不处理，等图片上传成功之后再来处理，这就是异步。比如wx.showToast()消息提示框，可以放到回调函数里，当API调用成功之后再来显示提示消息。回调函数相当于是异步的一个解决方案。

3、Promise调用方式

从基础库2.10.2版本起，小程序的异步API除了支持。当接口参数 Object对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行。Promise调用方式的写法的如下：

res =>

尽管callback的写法也是ok的，但是我们更加推荐使用这种写法，不过要使用这种写法首先要注意你的基础库的版本是否设置为2.10.2以上。在后面云开发的部分，我们会更多的采用这种写法。

3.8.5 模块化与格式化

我们可以把一些用于特定目的的类或函数库抽离成一个单独的js文件，作为一个模块（module）。模块可以相互加载，并可以使用 export 和 import 来交换功能，从另一个模块调用一个模块的函数。

1、模块化与引入模块

为了统一管理，通常建议将抽离的js文件放到一个指定的文件夹里，比如utilis文件夹。使用开发者工具在小程序根目录新建一个utils文件夹，再在文件夹下新建base.js文件，结构如下：

 

	miniprogram // 小程序根目录 ├── pages //存放页面的文件夹 └── images //存放图片的文件夹 └── style //存放css样式的文件夹  └── utils //存放模块的文件夹 │   └── base.js

然后再在base.js里输入以下代码，这里module.exports用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

function sayHello(name)

然后我们再来在lifecyle.js里导入module.exports标记的模块，并调用函数与对象：

 

	const base = require('../../utils/base.js') console.log("base里的user对象",base.user) console.log("调用base里的函数",base.sayHello("李东bbsky"))

« 第4章云函数入门 | 3.8 用户登录与信息获取»

发表评论：

我的知识记录分享