02.ES6对象解构

简介: 02.ES6对象解构

对象解构

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

// Destructure properties into variables
const { id, title, date } = note

等价于以下代码:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

console.log(id)
console.log(title)
console.log(date)

起个别名

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

console.log(noteId)

复合对象

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

console.log(`${firstName} ${lastName}`)

上面代码不可以访问author对象,需要下面这么做:

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note
console.log(author)

还可以这样

const { length } = 'A string'
console.log(length)

8

数组解构

const date = ['1970', '12', '01']
// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]
console.log(year)
console.log(month)
console.log(day)

const date = ['1970', '12', '01']
// Destructure Array values into variables
const [year, month, day] = date
console.log(year)
console.log(month)
console.log(day)

// Skip the second item in the array
const [year, , day] = date
console.log(year)
console.log(day)

嵌套数组

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

// Destructure nested items
const [one, two, [three, four], five] = nestedArray
console.log(one, two, three, four, five)

复杂对象析构,并添加变量

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note
console.log(date)
console.log(firstName)
console.log(writingTag)


目录
相关文章
|
7月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
ES6学习(2)解构赋值
ES6学习(2)解构赋值
|
3月前
ES6解构赋值
本文介绍了ES6中解构赋值的用法,包括对象和数组的解构,展示了如何从复杂数据结构中提取需要的变量,以及使用重命名和嵌套解构来简化代码。
41 0
ES6解构赋值
|
6月前
|
JSON JavaScript 前端开发
ES6 解构赋值详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
198 58
ES6 解构赋值详解
|
4月前
es6 的解构赋值
【8月更文挑战第22天】
24 3
|
5月前
ES6 解构赋值【详解】
ES6 解构赋值【详解】
30 0
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
88 0
|
7月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
|
JSON 数据格式
ES6系列笔记-解构赋值
ES6系列笔记-解构赋值
73 1
ES6语法: 解构赋值
ES6语法: 解构赋值
65 0