项目中关于解构的常用用法,我都帮你整理好了

在本文串,项目你将学到所有你需要知道的中关整理 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 {  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); // 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: 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}} = 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: 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 Swift console.log(age) // 31 console.log(city) // New York console.log(lover) // Lover console.log(rest) // [ Evermore, Red, Fearless ] 

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

作者:Ruphaa 译者:前端小智

来源:dev 原文:https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5

网站模板
滇ICP备2023000592号-31