项目中JS解构的常用用法总结

目录
文章目录隐藏
  1. 为什么 JS 中存在解构?
  2. 它是如何工作的呢?
  3. 数组解构?
  4. 数组解构
  5. 对象解构

本文你将学到所有你需要知道在项目中使用的 JS 解构知识点。

为什么 JS 中存在解构?

这是一个普通的对象,包含 4 个名称。

const names = {
    taylor: '码云',
    shawn: '前端博客',
    zayn: '小码',
    halsey: '前端教程',
}

现在,如果让你手动打印所有名称到控制台,你可能会这样做:

console.log(names.taylor)
console.log(names.shawn)
console.log(names.zayn)
console.log(names.halsey)

如果采用这种的方式确实有点烦人,怎样才能让它变得更优雅呢?

const taylor = names.taylor
const shawn = names.shawn
const zayn = names.zayn
const halsey = names.halsey

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)

看起来好多了,但是我们仍然在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性呢?

这样会更好,这就是对象解构帮助我们的地方,所以我们可以这样做:

const { taylor, shawn, zayn, halsey} = names

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)

现在比之前好多了。

它是如何工作的呢?

这很简单。我们只是从对象中取出属性并将它们存储在一个变量中。默认情况下,变量名与属性名相同。所以我们可以这样写:

数组解构?

数组解构与对象的解构类似,但有一些区别。我们知道数据被存储在一个带有索引的数组中。它们是有顺序的。因此,在进行解构时,我们必须保持顺序。比如:

const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [lover, ever] = albums
// Lover Evermore

而且,数组也没有值的属性。所以,可以直接给出你想要的任何变量名称。

我们继续看看对象和数组解构的一些用例。

数组解构

交换变量

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

忽略一些返回值

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

默认值

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

用 Rest 参数创建子数组

const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [, ...albums2] = albums

console.log(albums2) // ['Evermore', 'Red', 'Fearless']

对象解构

从作为函数参数传递的对象中解构字段

const anjan = {
    name: '码云笔记', age: 4
}

const statement = ({name, age}) => {
    return `My name is ${name}. I am ${age} years old.`
}

statement(anjan)
// My name is 码云笔记. I am 4 years old.

嵌套对象解构

const profile= { 
  name: '码云', 
  age: 4,
  professional: {
     profession: '前端开发',
  }
}

const {name, age, professional: {profession}} = profile

console.log(professional) // 这句会报错
console.log(profession) // 前端开发

默认值

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

嵌套对象和数组解构

const taylor = {
  name: '前端小码',
  age: 30,
  address: {
      city: 'beijing',
      country: 'china',
  },
  albums: ['Lover', 'Evermore', 'Red', 'Fearless'],
}

const {
  name,
  age,
  address: { city },
  albums: [lover, ...rest],
} = taylor

console.log(name) // 前端小码
console.log(age) // 30
console.log(city) // beijing
console.log(lover) // Lover
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]

好了,本文分享到这里,以上就是关于 JS 所有你需要知道的 JS 解构知识点,希望对大家有用。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 项目中JS解构的常用用法总结

发表回复