解构
解构赋值概念
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量
数组解构的基本用法
我们先上代码:
const [ a, b, c, { name }, d = 4 ] = [1, 2, 3, { name: 'james' }]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(name) // james
console.log(d) // 4
数组解构的话,我们需要写一个和解构数组形式一样的数组去解构才能拿到对应的数据. 比如上边数组数据是 1, 2, 3, { name: 'james' }. 那么我们就也写一个数组,然后里边放入对应的变量去接数组里边的数据. 并且我们接收的时候可以设置一个默认值. 例d,右边数据只有四个,所以d是没办法赋到值得,所以我们打印出来的就是4
对象解构的基本用法
const { age: myAge, name } = { name: 'bob', age: 12 }
console.log(name) // bob
console.log(myAge) // 12
console.log(age) // age is not defined
对象解构的话, 我们也要写一个对象形式去包裹要接收的变量. 对象解构和数组不同,并不是根据顺序去解构, 而是根据对象的key去匹配的, 并且你如果不想用对象里边的key作为接收的变量的话, 可以使用 age: myAge 这种方式去自定义一个自己的变量名.
交换变量
以前我们如果需要把两个变量的值交换一下的话,需要引入第三个变量进行交换赋值. 但是es6之后,我们可以使用解构赋值的特性去解决这个问题
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
省略赋值
let name = [1, 2, 3, 4, 5, 6]
let [,,,,,last] = name
console.log(last) // 6
如果只需要解构某一个值,其他不需要的话,可以直接写一个,,然后根据顺序找到需要解构的地方,然后写上变量就行了.
For of 解构
const info = [
{ name: 'bob', parent: { name: 'james' } },
{ name: 'nancy', parent: { name: 'jack' } }
]
for (let { name: n, parent: { name: pName }} of info ) {
console.log(n, pName)
}
假如我们如上有一个数组,数组里边包含对象, 如果我们想要解构出来数据里边的name和它父级对象的name的话, 其实也和之前我们做对象同构一样, 写好指定的name, 然后可以给nme重新写一个简称.
模板字符串
描述
模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（`${expression}`）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）
以上是mdn对模板字符串的描述, 下面写一个例子:
const name = 'james'
const age = 25
const tpl = `我的名字叫${name}, 我今年${age}岁了.`
意义
以前我们没有模板字符串的时候, 我们如果需要拼接变量加上字符串的时候,写的很麻烦
const name = 'james'
const age = 25
const tpl = '我的名字叫' + name + ',我今年' + age + '岁了.'
// 如果我们需要加上换行符的话
const line = 'line1\nline2\n'
// 或者
const otherLine = 'line1 \
line2 \
line3 \
'
以前这几种如果需要换行的话,都会有一些问题. '\n' 换行不太直观, 如果在尾部用\的话,代码压缩后,是会有问题的. es6后,使用模板字符串,这些问题就都没有了. 它既直观又简洁,不需要加额外的符号去显示换行.
使用场景
除了简单的拼接字符串拼接外,一般我们会用它去写一些DOM结构,比如后台传递给我们一个json数据,需要把这个json数据渲染成html的一个列表
const json = [{name: 'bob'},{name: 'james'},{name: 'nancy'}]
const ul = `<ul>${json.map((user, index) => { return `<li>${index + 1}. ${user.name}</li>` })}`
console.log(ul) // <ul><li>1. bob</li>,<li>2. james</li>,<li>3. nancy</li>
</ul>`
带标签的模板字符串
let toUppercase = function (strings, ...values) {
let str = ''
for (let i = 0; i < values.length; i++) {
str += strings[i] + values[i].toUpperCase()
}
return str
}
let name = 'bob'
toUppercase`我叫${name}` // 我叫BOB
带标签的模板字符串相当于写一个函数,然后在函数里边对字符串进行一些操作. 返回一个新的字符串. 比如我写的这个toUppercase. 可以把写入进去的变量转成大写的.
实现一个简易的模板字符串
function tplStr(str) {
let newStr = str.replace(/\$\{([^\}]+)\}/g, function (match, values) {
return eval(values)
})
return newStr
}
const name = 'bob'
const str = 'hello ${name}'
let newStr = tplStr(str) // "hello bob"
其实模板字符串最核心就是把变量转成了变量的值, 所以如果写一个简易的模板字符串的话, 只需要写一个replace方法,然后把${xxx}里边的xxx找到,然后使用eval找到它的值,替换掉${xxx}去。
总结
我们今天复习了一下数组解构和对象解构的基本操作,以及数据如果使用解构来做数据的交换赋值,解构出来的变量如何重命名,如何设置默认值,如果写省略赋值等等. 然后我们还复习了一个模板字符串, 讲了一下它的简单使用,以及使用场景,以及高级一些的模板标签如何使用,最后我们自己实现了一个简易的模板字符串方法. 好了,今天就到这咯. 下次见啦~
