解構賦值是一種快速為變量賦值的簡潔語法,本質上仍然是為變量賦值。
3.1數組解構
數組解構是 將數組的單元值快速批量賦值給一系列變量 的簡潔語法
1.基本語法:
(1)賦值運算符=左側的[ ]用于批量聲明變量,右側數組的單元值將被賦值給左側的變量
(2)變量的順序對應數組單元值的位置依次進行賦值操作
基本語法:典型應用交互2個變量
2.(1)變量多單元值少:
變量的數量大于單元值數量時,多余的變量將被賦值為undefined
(2)變量少單元值多
3.利用剩余參數解決變量少單元值多的情況:
4.防止有undefined傳遞單元值的情況,可以設置默認值:
允許初始化變量的默認值,且只有單元值為undefined時默認值才會生效
5.按需導入,忽略某些返回值:
6.支持多維數組的結構:
3.2對象解構
對象解構是將對象屬性和方法快速批量賦值給一系列變量的簡潔語法
一、基本語法
1.賦值運算符 = 左側的{ }用于批量聲明變量,右側對象的屬性值將被賦值給左側的變量
2.對象屬性的值將被賦值給與其屬性名相同的變量
3.注意解構的變量名不要和外面的變量名沖突否則報錯
4.對象中找不到與變量名一致的屬性時變量值為undefined
【例如】
<script>const obj = {uname: 'Kai',age: 18}// 解構的語法const { uname, age } = objconsole.log(uname) // Kaiconsole.log(age) // 18
</script>
二、給新的變量名賦值
可以從一個對象中提取變量并同時修改新的變量名
冒號表示 “什么值:賦值給誰”
三、數組對象解構
四、多級對象解構
3.3遍歷數組forEach方法(重點)
forEach()方法用于調用數組的每個元素,并將元素傳遞給回調函數
●主要使用場景: 遍歷數組的每個元素
●語法:
被遍歷的數組.forEach(function (當前數組元素,當前元素索引號) {// 函數體
})
【例如】
const arr = ['red', 'blue', 'pink']
arr.forEach(function (item, index) {console.log(item) // 依次打印數組每一個元素console.log(index) // 索引號
})
注意:
1.forEach主要是遍歷數組,更適合于遍歷數組對象
2.參數 當前數組元素是必須要寫的,索引號可選
3.4篩選數組filter 方法(重點)
filter()方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素
●主要使用場景: 篩選數組符合條件的元素,并返回篩選之后元素的新數組
●語法:
【例如】
<script>// 篩選數組中大于等于20的元素const arr = [10, 20, 30]const str = arr.filter(function (item, index) {return item >= 20})// const str = arr.filter(item => item >= 20)console.log(str) // [20,30]
</script>
●返回值:返回數組,包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數組
●參數: item 必須寫,index 可選
●因為返回新數組,所以不會影響原數組