项目中关于解构的常用用法

SegmentFault

共 3951字,需浏览 8分钟

 ·

2022-06-24 18:03

作者:前端小智

简介:思否百万阅读,励志退休后,回家摆地摊的人。

来源:SegmentFault  思否社区 


在本文串,你将学到所有你需要知道的 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.halseyconsole.log(taylor)console.log(shawn)console.log(zayn)console.log(halsey)


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


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


const { taylor, shawn, zayn, halsey} = namesconsole.log(taylor)console.log(shawn)console.log(zayn)console.log(halsey)


这比以前好多了。


它是如何工作的呢?


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


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


数组解构?


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


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); // 3console.log(b); // 1


忽略一些返回值


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

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

默认值


let a, b;

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


用 Rest 参数创建子数组


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

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


对象解构



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


const anjan = {        name: '前端小智', age: 20}

const statement = ({name, age}) => {        return `My name is ${name}. I am ${age} years old.`
}statement(anjan)
// My name is 前端小智. I am 20 years old.


嵌套对象解构


const profile= { 
  name: 'Anjan'
  age: 20,  professional: {     profession: '前端开发',
  }
}

const {name, age, professional: {profession}} = profileconsole.log(professional) // 这句会报错console.log(profession) // 前端开发


默认值


const {a = 10, b = 5} = {a: 3};console.log(a); // 3console.log(b); // 5


嵌套对象和数组解构


const taylor = {
  name: 'Taylor Swift',
  age: 31,  address: {
      city: 'New York',
      country: 'USA',
  },
  albums: ['Lover''Evermore''Red''Fearless'],
}

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

console.log(name) // Taylor Swiftconsole.log(age) // 31console.log(city) // New Yorkconsole.log(lover) // Loverconsole.log(rest) // [ 'Evermore''Red''Fearless' ]


这就是关于 JS 所有你需要知道的 JS 解构知识点。




点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流,扫描下方”二维码“或在“公众号后台回复“ 入群 ”即可加入我们的技术交流群,收获更多的技术文章~

- END -


浏览 12
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报