鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統(tǒng)將于今天下午正式登場，官方在發(fā)布會之前也已經(jīng)正式給出了可升級的機型產(chǎn)品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
解構(gòu)賦值：是一種特殊的語法，它使可以將數(shù)組或?qū)ο蟆安鸢睘榈揭幌盗凶兞恐校驗橛袝r候使用變量更加方便。解構(gòu)操作對那些具有很多參數(shù)和默認值等的函數(shù)也很奏效。
下面是一個將數(shù)組解構(gòu)到變量中的。
例：
<script> // 有一個存放了名字和姓氏的數(shù)組 let arr = ["Ilya", "Kantor"] // 解構(gòu)賦值 // sets firstName = arr[0] // and surname = arr[1] let [firstName, surname] = arr; alert(firstName); // Ilya alert(surname); // Kantor</script>
現(xiàn)在就可以針對這些變量進行操作，而不是針對原來的數(shù)組元素。
當(dāng)與 split 函數(shù)（或其他返回值是數(shù)組的函數(shù)）結(jié)合使用時，看起來就更優(yōu)雅了：
let [firstName, surname] = "Ilya Kantor".split(' ');這種語法叫做“解構(gòu)賦值”，因為它通過將結(jié)構(gòu)中的各元素復(fù)制到變量中來達到“解構(gòu)”的目的。但數(shù)組本身是沒有被修改的。
如果不只是要獲得第一個值，還要將后續(xù)的所有元素都收集起來 — 可以使用三個點 "..." 來再加一個參數(shù)來接收“剩余的”元素：
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];alert(name1); // Juliusalert(name2); // Caesar// 請注意，`rest` 的類型是數(shù)組alert(rest[0]); // Consulalert(rest[1]); // of the Roman Republicalert(rest.length); // 2
rest 的值就是數(shù)組中剩下的元素組成的數(shù)組。不一定要使用變量名 rest，也可以使用其他的變量名，只要確保它前面有三個點，并且在解構(gòu)賦值的最后一個參數(shù)位置上就行了。
如果賦值語句中，變量的數(shù)量多于數(shù)組中實際元素的數(shù)量，賦值不會報錯。未賦值的變量被認為是 undefined。
let [firstName, surname] = [];alert(firstName); // undefinedalert(surname); // undefined
如果想要一個“默認”值給未賦值的變量，可以使用 = 來提供：
// 默認值let [name = "Guest", surname = "Anonymous"] = ["Julius"];alert(name); // Julius（來自數(shù)組的值）alert(surname); // Anonymous（默認值被使用了）
默認值可以是更加復(fù)雜的表達式甚至可以是函數(shù)調(diào)用，這些表達式或函數(shù)只會在這個變量未被賦值的時候才會被計算。
使用了 prompt 函數(shù)來提供兩個默認值，但它只會在未被賦值的那個變量上進行調(diào)用：
// 只會提示輸入姓氏let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];alert(name); // Julius（來自數(shù)組）alert(surname); // 輸入的值解構(gòu)賦值同樣適用于對象。
let {var1, var2} = {var1:…, var2:…}在等號右側(cè)有一個已經(jīng)存在的對象，想把它拆開到變量中。等號左側(cè)包含了對象相應(yīng)屬性的一個“（pattern）模式”。
在簡單的情況下，等號左側(cè)的就是 {...} 中的變量名列表。
例 ：
let options = { title: "Menu", width: 100, height: 200};let {title, width, height} = options;alert(title); // Menualert(width); // 100alert(height); // 200
屬性 options.title、options.width 和 options.height 值被賦給了對應(yīng)的變量。變量的順序并不重要，下面這個代碼也奏效：
// 改變 let {...} 中元素的順序let {height, width, title} = { title: "Menu", height: 200, width: 100 }就像數(shù)組或函數(shù)參數(shù)一樣，默認值可以是任意表達式甚至可以是函數(shù)調(diào)用。它們只會在未提供對應(yīng)的值時才會被計算/調(diào)用。
如果對象擁有的屬性數(shù)量比提供的變量數(shù)量還多，該怎么辦？
可以只取其中的某一些屬性，然后把“剩余的”賦值到其他地方嗎？
可以使用剩余模式（pattern），就像對數(shù)組那樣。一些較舊的瀏覽器不支持此功能（例如，使用 Babel 對其進行填充），但可以在現(xiàn)代瀏覽器中使用。
例：
let options = { title: "Menu", height: 200, width: 100};// title = 名為 title 的屬性// rest = 存有剩余屬性的對象let {title, ...rest} = options;// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}alert(rest.height); // 200alert(rest.width); // 100
注：
變量都是在賦值中通過正確方式聲明的：let {…} = {…}。當(dāng)然，也可以使用已有的變量，而不用 let，但這里有一個陷阱。
解構(gòu)賦值語法：可以把所有參數(shù)當(dāng)作一個對象來傳遞，然后函數(shù)馬上把這個對象解構(gòu)成多個變量：
// 傳遞一個對象給函數(shù)let options = { title: "My menu", items: ["Item1", "Item2"]};// ……然后函數(shù)馬上把對象展開成變量function showMenu({title = "Untitled", width = 200, height = 100, items = []}) { // title, items – 提取于 options， // width, height – 使用默認值 alert( `${title} ${width} ${height}` ); // My Menu 200 100 alert( items ); // Item1, Item2}showMenu(options);同樣可以使用帶有嵌套對象和冒號映射的更加復(fù)雜的解構(gòu)：
let options = { title: "My menu", items: ["Item1", "Item2"]};function showMenu({ title = "Untitled", width: w = 100, // width goes to w height: h = 200, // height goes to h items: [item1, item2] // items first element goes to item1, second to item2}) { alert( `${title} ${w} ${h}` ); // My Menu 100 200 alert( item1 ); // Item1 alert( item2 ); // Item2}showMenu(options);
完整語法和解構(gòu)賦值是一樣的：
function({ incomingProperty: varName = defaultValue})注：
對于參數(shù)對象，屬性 incomingProperty 對應(yīng)的變量是 varName，默認值是 defaultValue。
這種解構(gòu)假定了 showMenu() 函數(shù)確實存在參數(shù)。如果想讓所有的參數(shù)都使用默認值，那應(yīng)該傳遞一個空對象：
showMenu({}); // 不錯，所有值都取默認值showMenu(); // 這樣會導(dǎo)致錯誤可以通過指定空對象 {} 為整個參數(shù)對象的默認值來解決這個問題：
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) { alert( `${title} ${width} ${height}` );}showMenu(); // Menu 100 200運行結(jié)果：
整個參數(shù)對象的默認是 {}，因此總會有內(nèi)容可以用來解構(gòu)。
本文基于JavaScript基礎(chǔ)，介紹了解構(gòu)賦值，數(shù)組解構(gòu)，介紹了常見的數(shù)組操作，對象結(jié)構(gòu)。在實際應(yīng)用中需要注意的點，遇到的難點，提供了詳細的解決方法。
使用JavaScript語言，能夠讓讀者更好的理解。代碼很簡單，希望能夠幫助讀者更好的學(xué)習(xí)。
本文鏈接：http://www.tebozhan.com/showinfo-26-94583-0.html盤點JavaScript中解構(gòu)賦值，數(shù)組解構(gòu)常用的數(shù)組操作
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號