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

本文链接：https://blog.youkuaiyun.com/ougaii_/article/details/144745155

文章目录

解构
- 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.name
  let age = obj.age
  console.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} = obj
  console.log('姓名：' + name + ' \t年龄：' + age)

  // 场景 2：变量名与对象属性名不同时, 需要指定映射关系
  // 冒号左侧是对象的属性, 冒号右侧是声明的变量
  let {name: varName, age: varAge} = obj
  console.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] = array
  console.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>