JS 解构、数组扩展符和模板字符串的常见用法 |
您所在的位置：网站首页 › 字符模板制作方法 › JS 解构、数组扩展符和模板字符串的常见用法 |
|
文章目录
解构1. 对象解构2. 数组解构
数组扩展符模板字符串
解构
1. 对象解构
想把对象中的属性赋值给变量时, 需要一次一次的赋值，很麻烦。而对象解构, 就是 把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。 (1) 对象属性赋值变量的传统写法： 对象解构 // 对象 let obj = { name: 'ares5k', age: 27 } // 用对象中的属性赋值（需要一个一个赋值） let name = obj.name let age = obj.age console.log('姓名：' + name + ' \t年龄：' + age)(2) 对象属性赋值变量的对象解构写法： 对象解构 // 对象 let obj = { name: 'ares5k', age: 27 } // 场景 1： 变量名与属性名相同时，自动匹配赋值 // 使用对象解构语法, 将 obj 的结构拆解开, 然后赋值给与其属性名对应的变量上 // 对象解构的语法就是声明变量时, 使用 {} 将变量括起来, 被括起来的变量会被对象属性匹配赋值 let {name, age} = obj console.log('姓名：' + name + ' \t年龄：' + age) // 场景 2：变量名与对象属性名不同时, 需要指定映射关系 // 冒号左侧是对象的属性, 冒号右侧是声明的变量 let {name: varName, age: varAge} = obj console.log('姓名：' + varName + ' \t年龄：' + varAge) 2. 数组解构与对象解构大同小异, 是为了方便把数组元素快速赋值给变量的功能。 (1) 数组元素赋值变量的传统写法： 数组解构 // 数组 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)(2) 数组元素赋值变量数组的解构写法： 数组解构 // 数组 let array = [1, 2, 3, 4, 5] // 数组解构赋值 let [a, b, c, d, e] = array console.log('' + a + b + c + d + e) 数组扩展符数组扩展符 ( … ) 就是把数组内容自动展开，可以更简洁的实现数组浅拷贝，数组拼接，伪数组转真数组等操作。 数组拼接 - 传统方式与扩展符方式对比: 数组扩展符 // 声明两个数组 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)数组浅拷贝 - 传统方式与扩展符方式对比: 数组扩展符 // 声明数组 let a = [1, 2, 3, 4, 5] // 传统方式实现数组浅拷贝 let b = a.concat() console.log(b) // 扩展符方式实现数组拼接 let c = [...a] console.log(c)伪数组转真数组 - 传统方式与扩展符方式对比: 数组扩展符 // 伪数组 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)) 模板字符串模板字符串可以让字符串拼接变得更简洁, 语法就是用 ( ESC键下面的 ` 键 ) 括起来。 我自己常用的场景有两个： (1) 变量拼接 (2) 字符串换行 原始方式：字符串拼接变量需要使用 ‘+’ 加号的方式，字符串换行需要使用 \n let text = document.querySelector('#userName') text.addEventListener('blur', (e) => { let output = '用户：' + e.target.value + '， 你好！\n' + '今天天气真好啊, 一起散步吧！！' window.alert(output) })模板字符串方式：变量拼接直接使用 ${}，换行直接回车。 let text = document.querySelector('#userName') text.addEventListener('blur', (e) => { let output = `用户：${e.target.value} ， 你好！ 今天天气真好啊, 一起散步吧！！` window.alert(output) }) |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |