ES6引入了對象分解的概念以及let,const,arrow函數之類的其他東西。對象解構是JavaScript中非常有用的功能。它廣泛用于React之類的前端框架以及Node.js之類的后端服務中。本文旨在為您提供有關對象分解的一些知識。
解構意味著從數組或對象中提取數據。通過解構,我們可以將復雜的對象或數組分解為較小的部分。解構還使我們能夠一次從一個對象或數組中提取多個數據。它還提供了設置屬性默認值(如果尚未設置)的功能。
要了解對象解構的概念,我們需要以計數為例。
假設我們有一個具有以下鍵值屬性的對象,
let person = {
firstName: "Captain",
lastName: "Nemo"
}
在ES6之前,要使用這些值,我們需要編寫如下代碼,
const firstName = person.firstName;
const lastName = person.lastName;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
這是一個很小的對象,但是想象一下我們有一個很大的對象,它具有許多鍵值對,然后要訪問屬性,我們的代碼將非常重復,并且我們不想違反DRY的上帝!😅
為了解決此問題,ES6為我們提供了解構的能力。使用解構,我們可以使用以下代碼輕松提取屬性,
const { firstName, lastName } = person;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
如果您是第一次看到此內容,可能會感到困惑。當我第一次看到語法時,我想到的第一個問題是,為什么花括號在左邊?是塊嗎?還是對象?
實際上,兩者都不是。這就是解構語法的樣子。
基本上,這只是說
從名為person的對象中給我一個名為firstName的變量和一個名為lastName的變量。
當我們使用嵌套對象時,對象分解會變得更加方便。
想象一下下面的物體,
const person = {
firstName: "Captain",
lastName: "Nemo",
address: {
street: "1234 Ave",
city: "Antilaw State",
zip: 1234
}
}
要使用舊方法訪問元素,代碼將過于重復并且看上去很臟。
console.log(person.firstName);
console.log(person.lastName);
console.log(person.address.street);
console.log(person.address.city);
console.log(person.address.zip);
現在,讓我們來看一下ES6對象的分解,
const { firstName, lastName, address: { street, zip, city } } = person;
console.log(firstName);
console.log(lastName);
console.log(street);
console.log(city);
console.log(zip);
顯然,這是訪問元素的更好方法。而且,我們必須寫更少的行。
我在Eloquent JavaScript書中讀到一句優美的名言,寫更少的代碼。在這里,
Tzu-li和Tzu-ssu夸耀其最新計劃的規模。慈利說:“二十萬行,不算評論!” 慈肅回答說:“ Pssh,我的已經差不多一百萬行了。” 元媽大師說:“我最好的節目有五百行。” 聽到此消息后,慈濟和慈秀得到了啟發。
元媽大師,《編程之書》
現在,我們需要將提取的屬性存儲到自定義變量。我們還可以通過對象分解來做到這一點。假設我們要將對象的firstName
元素存儲person
到名為的變量中,first
并將其存儲lastName
到的變量中last
。這可以使用以下代碼來實現,
const { firstName: first, lastName: last } = person;
console.log(first);
console.log(last);
是的,我們還可以僅提取所需的元素。在上面的代碼中,我們僅從對象中提取firstName
和lastName
。
在本文開頭,我告訴您我們也可以對數組使用解構。怎么樣?
這是一個例子
假設一個數組包含3個科目的學生分數。
const scores = [85, 90, 74];
我們可以使用以下代碼輕松地破壞分數,
const [maths, geography, biology] = scores;
console.log(maths);
console.log(geography);
console.log(biology);
因此,使用array literal
左側的簡單代碼,我們可以對數組進行解構。數組元素將存儲在我們定義的局部變量中。每個局部變量都將與相應的數組元素映射。
我認為本文使用ES6中使用的解構已使您頗為了解。如果本文對您有所幫助或您有反饋,請在下面評論。我希望收到您的來信。😊
面向初學者的JavaScript中的對象分解 轉載http://www.hxslwl.com/appboke/46141.html
熱門源碼