智能行业网站模板,WordPress星评插件,市场调研公司有哪些,凉山州建设银行官方网站文章目录 解构1. 对象解构2. 数组解构 数组扩展符模板字符串 解构 1. 对象解构 想把对象中的属性赋值给变量时, 需要一次一次的赋值#xff0c;很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。
(1) 对象属性赋值变量的传统写法… 文章目录 解构1. 对象解构2. 数组解构 数组扩展符模板字符串 解构 1. 对象解构 想把对象中的属性赋值给变量时, 需要一次一次的赋值很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。
(1) 对象属性赋值变量的传统写法
!doctype html
html langen
headmeta charsetUTF-8title对象解构/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) 对象属性赋值变量的对象解构写法
html langen
headmeta charsetUTF-8title对象解构/title
/head
body
script// 对象let obj {name: ares5k,age: 27}// 场景 1 变量名与属性名相同时自动匹配赋值// 使用对象解构语法, 将 obj 的结构拆解开, 然后赋值给与其属性名对应的变量上// 对象解构的语法就是声明变量时, 使用 {} 将变量括起来, 被括起来的变量会被对象属性匹配赋值let {name, age} objconsole.log(姓名 name \t年龄 age)// 场景 2变量名与对象属性名不同时, 需要指定映射关系// 冒号左侧是对象的属性, 冒号右侧是声明的变量let {name: varName, age: varAge} objconsole.log(姓名 varName \t年龄 varAge)
/script
/body
/html2. 数组解构
与对象解构大同小异, 是为了方便把数组元素快速赋值给变量的功能。 (1) 数组元素赋值变量的传统写法
html langen
headmeta charsetUTF-8title数组解构/title
/head
body
script// 数组let array [1, 2, 3, 4, 5]// 传统方式逐个赋值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) 数组元素赋值变量数组的解构写法
html langen
headmeta charsetUTF-8title数组解构/title
/head
body
script// 数组let array [1, 2, 3, 4, 5]// 数组解构赋值let [a, b, c, d, e] arrayconsole.log( a b c d e)
/script
/body
/html数组扩展符 数组扩展符 ( … ) 就是把数组内容自动展开可以更简洁的实现数组浅拷贝数组拼接伪数组转真数组等操作。
数组拼接 - 传统方式与扩展符方式对比:
html langen
headmeta charsetUTF-8title数组扩展符/title
/head
body
script// 声明两个数组let a [1, 2, 3, 4, 5]let b [6, 7, 8, 9, 10]// 传统方式实现数组拼接let c a.concat(b)console.log(c)// 扩展符方式实现数组拼接let d [...a, ...b]console.log(d)
/script
/body
/html数组浅拷贝 - 传统方式与扩展符方式对比:
html langen
headmeta charsetUTF-8title数组扩展符/title
/head
body
script// 声明数组let a [1, 2, 3, 4, 5]// 传统方式实现数组浅拷贝let b a.concat()console.log(b)// 扩展符方式实现数组拼接let c [...a]console.log(c)
/script
/body
/html伪数组转真数组 - 传统方式与扩展符方式对比:
html langen
headmeta charsetUTF-8title数组扩展符/title
/head
body
div/div
div/div
script// 伪数组let divs document.getElementsByTagName(div)console.log(Array.isArray(divs))// 传统方式转换成真数组let a [].slice.call(divs)console.log(Array.isArray(a))// 扩展符方式转换成真数组let b [...divs]console.log(Array.isArray(b))
/script
/body
/html模板字符串 模板字符串可以让字符串拼接变得更简洁, 语法就是用 ( ESC键下面的 键 ) 括起来。
我自己常用的场景有两个 (1) 变量拼接 (2) 字符串换行
原始方式字符串拼接变量需要使用 ‘’ 加号的方式字符串换行需要使用 \n
!doctype html
html langen
headmeta charsetUTF-8title/title
/head
body
label foruserName/labelinput iduserName typetext/
scriptlet text document.querySelector(#userName)text.addEventListener(blur, (e) {let output 用户 e.target.value 你好\n 今天天气真好啊, 一起散步吧window.alert(output)})
/script
/body
/html模板字符串方式变量拼接直接使用 ${}换行直接回车。
!doctype html
html langen
headmeta charsetUTF-8title/title
/head
body
label foruserName/labelinput iduserName typetext/
scriptlet text document.querySelector(#userName)text.addEventListener(blur, (e) {let output 用户${e.target.value} 你好
今天天气真好啊, 一起散步吧window.alert(output)})
/script
/body
/html
