wpf 为html 变量赋值_你不了解的ES6——解构赋值和模板字符串

你不了解的ES6

昨天说过了let和const，同时介绍了变量提升和JS变量存储的相关内容，不知道大家是否还记得？

传送门：你不了解的ES6——let/const(内含高能福利)

今天来聊一聊解构赋值和模板字符串，只说重点、常用内容，因为东西比较少，所以两个一次说完。

解构赋值

解构赋值，顾名思义，将原有结构进行分解，然后赋值。本质上是通过“模式匹配”的方式进行复制。

将解构赋值分为数组的解构赋值和对象的解构赋值两项内容讲解。

• 数组的解构赋值

举个例子：

let [a,b,c] = [1,2,3]console.log(a,b,c) //1,2,3let [d, ...arr] = [1,2,3,4,5]console.log(d, arr) // 1, [2,3,4,5]let [a, [b, [c]]] = [1, [2, [3]]]console.log(a, b, c) // 1, 2, 3

从上面的三个例子中不难总结出数组解构赋值的规律，上面也是最简单的解构赋值，变量之间都一一对应。如果有一个变量没有对应的值怎么办？不要紧，变量是可以自己带着值去进行解构的。也就是允许为变量设置默认值，看例子

let [a=1] = [2]console.log(a) //2let [a=1] = [undefined]console.log(a) //1

在给变量赋默认值后，只有当变量没有对应值或者对应值为 undefined 时，默认值才会生效。

所以对数组的解构赋值总结如下：

1. 一一对应赋值(按位置对应)
2. 无对应值的变量为 undefined
3. 无对应变量名的值会被舍弃
4. 不可遍历结构不能被解构
5. 允许为变量设置默认值，但被解构数据中对应值不存在或为undefined时，默认值才会生效

• 对象的解构赋值

与数组的解构赋值大同小异，因为数组元素没有名字，所以只能按照位置进行复制。但是对象不一样了，对象是键值对，因为对象的解构赋值会根据 key 进行取值、赋值操作。看例子：

let {name, company} = {company: '紫光云', name: 'Bob'}console.log(name, company) // Bob 紫光云

虽然上面例子中左右两个对象变量的顺序不一样，但是依然可以正确赋值。可以看出，对象的解构赋值是根据 key 进行的。这也是和数组的解构赋值最大的不同点，其余的包括嵌套赋值等用法都是一样的。

模板字符串

用一句话来说模板字符串的用处，我认为是：通常用于在JS代码中拼接要输出到页面的字符串内容或者HTML代码。

拼接字符串的传统写法：

$('#box').append( 'There are ' + person.count + 'persons' )

这种写法需要将固定文本用引号引起来，然后用好多++++将固定文本和要插入的变量拼起来，短的内容还好，如果内容比较长，估计大部分人会崩溃的。

而ES6新增的模板字符串，大大改善了这种情况，看代码：

$('#box').append(` There are ${person.count} persons ` )

从例子中可以看出来，ES6的写法要简单很多，数不清的+没有了，也少了很多引号。可以直接写html标签，可以用${}的方式插入变量。

关于模板字符串，总结如下：

1. 使用反引号(` `)标识
2. 可直接换行
3. 多行字符串格式会被保留
4. 通过 ${} 直接嵌入变量、进行计算、调用函数
5. 可以相互嵌套使用

今天的内容就是这些啦。如果大家有什么意见或建议，可以私信或直接评论留言，当然，如果有什么想要在以后的内容中讨论的，也可以告诉我~

纯手工码字，码字不易，如果觉得对你有帮助的话，点个赞再走呗~能关注一下再好不过啦。

(PS：欢迎点击了解更多进行搜索关注)

我们一起进步！