江蘇外貿(mào)型網(wǎng)站制作搜索引擎原理
文章目錄
- 解構(gòu)
- 1. 對象解構(gòu)
- 2. 數(shù)組解構(gòu)
- 數(shù)組擴展符
- 模板字符串
解構(gòu)
1. 對象解構(gòu)
想把對象中的屬性賦值給變量時, 需要一次一次的賦值，很麻煩。而對象解構(gòu), 就是把對象的結(jié)構(gòu)拆解開, 然后把拆解后的屬性自動賦值給匹配的變量。
(1) 對象屬性賦值變量的傳統(tǒng)寫法：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>對象解構(gòu)</title>
</head>
<body>
<script>// 對象let obj = {name: 'ares5k',age: 27}// 用對象中的屬性賦值（需要一個一個賦值）let name = obj.namelet age = obj.ageconsole.log('姓名：' + name + ' \t年齡：' + age)
</script>
</body>
</html>
(2) 對象屬性賦值變量的對象解構(gòu)寫法：
<html lang="en">
<head><meta charset="UTF-8"><title>對象解構(gòu)</title>
</head>
<body>
<script>// 對象let obj = {name: 'ares5k',age: 27}// 場景 1： 變量名與屬性名相同時，自動匹配賦值// 使用對象解構(gòu)語法, 將 obj 的結(jié)構(gòu)拆解開, 然后賦值給與其屬性名對應(yīng)的變量上// 對象解構(gòu)的語法就是聲明變量時, 使用 {} 將變量括起來, 被括起來的變量會被對象屬性匹配賦值let {name, age} = objconsole.log('姓名：' + name + ' \t年齡：' + age)// 場景 2：變量名與對象屬性名不同時, 需要指定映射關(guān)系// 冒號左側(cè)是對象的屬性, 冒號右側(cè)是聲明的變量let {name: varName, age: varAge} = objconsole.log('姓名：' + varName + ' \t年齡：' + varAge)
</script>
</body>
</html>
2. 數(shù)組解構(gòu)
與對象解構(gòu)大同小異, 是為了方便把數(shù)組元素快速賦值給變量的功能。
(1) 數(shù)組元素賦值變量的傳統(tǒng)寫法：
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)組解構(gòu)</title>
</head>
<body>
<script>// 數(shù)組let array = [1, 2, 3, 4, 5]// 傳統(tǒng)方式逐個賦值let a = array[0]let b = array[1]let c = array[2]let d = array[3]let e = array[4]console.log('' + a + b + c + d + e)
</script>
</body>
</html>
(2) 數(shù)組元素賦值變量數(shù)組的解構(gòu)寫法：
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)組解構(gòu)</title>
</head>
<body>
<script>// 數(shù)組let array = [1, 2, 3, 4, 5]// 數(shù)組解構(gòu)賦值let [a, b, c, d, e] = arrayconsole.log('' + a + b + c + d + e)
</script>
</body>
</html>
數(shù)組擴展符
數(shù)組擴展符 ( … ) 就是把數(shù)組內(nèi)容自動展開，可以更簡潔的實現(xiàn)數(shù)組淺拷貝，數(shù)組拼接，偽數(shù)組轉(zhuǎn)真數(shù)組等操作。
數(shù)組拼接 - 傳統(tǒng)方式與擴展符方式對比:
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)組擴展符</title>
</head>
<body>
<script>// 聲明兩個數(shù)組let a = [1, 2, 3, 4, 5]let b = [6, 7, 8, 9, 10]// 傳統(tǒng)方式實現(xiàn)數(shù)組拼接let c = a.concat(b)console.log(c)// 擴展符方式實現(xiàn)數(shù)組拼接let d = [...a, ...b]console.log(d)
</script>
</body>
</html>
數(shù)組淺拷貝 - 傳統(tǒng)方式與擴展符方式對比:
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)組擴展符</title>
</head>
<body>
<script>// 聲明數(shù)組let a = [1, 2, 3, 4, 5]// 傳統(tǒng)方式實現(xiàn)數(shù)組淺拷貝let b = a.concat()console.log(b)// 擴展符方式實現(xiàn)數(shù)組拼接let c = [...a]console.log(c)
</script>
</body>
</html>
偽數(shù)組轉(zhuǎn)真數(shù)組 - 傳統(tǒng)方式與擴展符方式對比:
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)組擴展符</title>
</head>
<body>
<div></div>
<div></div>
<script>// 偽數(shù)組let divs = document.getElementsByTagName('div')console.log(Array.isArray(divs))// 傳統(tǒng)方式轉(zhuǎn)換成真數(shù)組let a = [].slice.call(divs)console.log(Array.isArray(a))// 擴展符方式轉(zhuǎn)換成真數(shù)組let b = [...divs]console.log(Array.isArray(b))
</script>
</body>
</html>
模板字符串
模板字符串可以讓字符串拼接變得更簡潔, 語法就是用 ( ESC鍵下面的 ` 鍵 ) 括起來。
我自己常用的場景有兩個：
(1) 變量拼接
(2) 字符串換行
原始方式：字符串拼接變量需要使用 ‘+’ 加號的方式，字符串換行需要使用 \n
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<label for="userName"></label><input id="userName" type="text"/>
<script>let text = document.querySelector('#userName')text.addEventListener('blur', (e) => {let output = '用戶：' + e.target.value + '， 你好！\n' +'今天天氣真好啊, 一起散步吧！！'window.alert(output)})
</script>
</body>
</html>
模板字符串方式：變量拼接直接使用 ${}，換行直接回車。
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<label for="userName"></label><input id="userName" type="text"/>
<script>let text = document.querySelector('#userName')text.addEventListener('blur', (e) => {let output = `用戶：${e.target.value} ， 你好！
今天天氣真好啊, 一起散步吧！！`window.alert(output)})
</script>
</body>
</html>