解构赋值

Frank
  • 前端进阶
  • ES6
  • 解构赋值
大约 5 分钟约 1378 字...

数组的解构赋值

解构赋值是什么?

解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量

const [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1,2,3

数组解构赋值的原理

  • 模式(结构)匹配
const [a, b, c] = [1, 2, 3] // 等号左右结构相同
  • 索引值相同的完成赋值

  • 不取的,可以直接用逗号跳过

eg:我们要取 3

const [, , c] = [1, 2, 3]
console.log(c) // 3

数组解构赋值的默认值

const [a = 1, b = 2] = []
  • 默认值的生效条件
    只有当一个数组成员严格等于(===)undefined 时,对应的默认值才会生效
const [a = 1, b = 2] = [3, null]
console.log(a, b) // 3,null
const [a = 1, b = 2] = [3]
console.log(a, b) // 1,2
  • 默认值表达式
    如果默认值是表达式,默认表达式是惰性求值的
const func = () => {
  console.log('我被执行了')
  return 2
}
const [x = fun()] = [1]
console.log(x) // 1

数组解构赋值的应用

  1. 常见的类数组的解构赋值
  • arguments
function func() {
  const [a, b] = arguments
  console.log(a, b)
}
func(1, 2)
  • nodeList
<body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <script>
    const [p1, p2, p3] = document.querySelectorAll('p')
    console.log(p1, p2, p3)
  </script>
</body>
  1. 函数参数的解构赋值
const arr = [1, 2]
const add = ([x, y]) => x + y
console.log(add(arr))
  1. 交换变量的值

es6 之前需要引入中间变量:

let x = 1
let y = 2
let temp = x
x = y
y = temp
console.log(x, y) //2,1

es6:

let x = 1
let y = 2
;[x, y] = [y, x]
console.log(x, y) // 2,1

对象的解构赋值

对象的解构赋值的原理

  1. 模式(结构)匹配
{}={}
  1. 属性名相同的完成赋值
const { age, username } = { username: 'alex', age: 18 }
console.log(age, username) // 18 "alex"
// 完整写法
// const{'age':age,'username':username}= {username:"alex",age:18}
// 取别名
//   const{age:age,username:uname}={username:"alex",age:18}
console.log(age, uname) // 18 "alex"

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。

对象的解构赋值的注意事项

  1. 默认值的生效条件
    对象的属性值严格等于 undefined 时,对应的默认值才会生效。
const { username = 'alex', age = 0 } = { username: 'alex' }
console.log(username, age) // 'alex', 0
  1. 默认值表达式

如果默认值是表达式,默认值表达式是惰性求值的

  1. 将一个已经声明的变量用于解构赋值
let x = 2
// let{x}={x:1} ❌
// {x}={x:1} ❌
;({ x } = { x: 1 })
console.log(x)
  1. 可以取到继承的属性
const { toString } = {}
console.log(toString) //继承自Object()

对象的解构赋值的应用

1.函数参数的解构赋值

const logPersonInfo = ({ age = 1, username = 'alex' }) => {
  console.log(age, username) // 18 , 'alex'
}
logPersonInfo({ age: 18 })
  1. 复杂的嵌套
const obj = {
  x: 1,
  y: [2, 3, 4],
  z: {
    a: 5,
    b: 4,
  },
}
//   const{x,y,z}=obj
//   console.log(x,y,z);
const {
  y: [, yy],
  y,
  z: { a: a1 },
} = obj
console.log(y, yy, a1)

其它数据类型的解构赋值

字符串的解构赋值

  1. 数组形式的解构赋值
const [a, b, , , c] = 'hello'
console.log(a, b, c) //  h e o
  1. 对象形式的解构赋值
const { 0: a, 1: b, length } = 'hello'
console.log(a, b, length) // h e 5

数值和布尔值的解构赋值

js 会先将等号右边的值转为对象

const { a = 1, toString } = 123
console.log(a, toString)

const { b = 1, toString } = true
console.log(b, toString)

undefined 和 null 的解构赋值

由于 undefined 和 null 无法转为对象,所以对它们进行解构赋值,都会报错

解构赋值常见的应用场景

交换变量的值

let x = 1
let y = 2
;[x, y] = [y, x] // tips:x 和 y 已经声明了,这里就不用再添加 let 等关键字声明了
console.log(x, y) // 2 1

交换后 x 的值为 2,y 的值为 1

从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,可以使用解构赋值,非常方便的取出这些值。

  1. 返回一个数组
function fun() {
  return [1, 2, 3]
}
let [a, b, c] = fun()
console.log(a, b, c) // 1 2 3
  1. 返回一个对象
function fun() {
  return {
    name: 'frank',
    age: 18,
  }
}
let { name, age } = fun()
console.log(name, age) // frank 18

函数参数的定义

可以方便地将一组参数与变量名对应起来

(1)参数是一组有次序的值

function f([x, y, z]) {
  console.log(x, y, z)
}
f([1, 2, 3])

传入函数的参数是数组时,可以对参数进行解构,获取数组中每一项的值

(2)参数是一组无次序的值

function f({ x, y, z }) {
  console.log(x, y, z)
}
f({
  z: 1,
  x: 2,
  y: 3,
})

传入函数的参数是对象时,可以对参数进行解构,获取对象中对应的属性值

指定函数参数的默认值

指定参数的默认值,就避免了在函数体内部再去判断传入的参数是否有值了

function foo({ x, y = 5 }) {
  console.log(x, y)
}
foo({}) // undefined 5
foo({ x: 1 }) // 1 5
foo({ x: 1, y: 2 }) // 1 2

遍历 Map 解构

解构赋值,获取键名和键值就非常方便

var map = new Map()
map.set('李四', '18')
map.set('张三', '20')
for (let [key, value] of map) {
  console.log(`${key}今年${value}`)
}

加载模块

这里也是用到了解构,可以让你引入的部分更加明确

import { x, y } from 'xxx'

提取 JSON 数据

解构赋值可以快速提取 JSON 数据的值

var jsonData = {
  name: '小慕',
  age: '18',
  data: [1, 2, 3, 4],
  status: 'OK',
}
let { name, age, data, status } = jsonData
console.log(name, age, data, status)
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1