当前位置：首页 > news >正文

JS 解构、数组扩展符和模板字符串的常见用法

news 2025/7/5 2:15:39

文章目录

解构
- 1. 对象解构
- 2. 数组解构
数组扩展符
模板字符串

解构

1. 对象解构

想把对象中的属性赋值给变量时, 需要一次一次的赋值，很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。

(1) 对象属性赋值变量的传统写法：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</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 lang="en">
<head><meta charset="UTF-8"><title>对象解构</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>
</html>

2. 数组解构

与对象解构大同小异, 是为了方便把数组元素快速赋值给变量的功能。

(1) 数组元素赋值变量的传统写法：

<html lang="en">
<head><meta charset="UTF-8"><title>数组解构</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 lang="en">
<head><meta charset="UTF-8"><title>数组解构</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 lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</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 lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</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 lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</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 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>