[TOC] #### 1. 什么是數組 --- 數組是一種將多個數據存儲在單個變量名下的優雅方式 數組是一組數據的集合，其中每個數據被稱作數組的元素，在數組中可以存放任意數據類型的數據 特別注意: JS 中并沒有數組這個數據類型，JS 中的數組也是對象，通過 typeof 關鍵字可證明這個結論 #### 2. JS 數組定義 --- 創建數組的三種方式 ```javascript // 隱式創建，又稱為字面量創建 var arr = ['html', 'css', 'js'] // 直接實例化 var arr = new Array() var arr = new Array('react', 'vue') // 指定數組長度 var arr = new Array(3) ``` #### 3. JS 數組 length --- 數組對象有一個 length 屬性，即數組中元素的個數，這個屬性是可以修改的。若將 length 屬性修改為小于當前數組元素個數，則造成數據丟失；若將 length 屬性設置為 0，即可清空數組 ```javascript const arr = ['html', 'css', 'js', 'vue'] arr.length = 2 console.log(arr) //['html', 'css'] arr.length = 0 console.log(arr) //[] ``` 字符串對象也有 length 屬性，但是它不能被修改，嚴格模式下會直接報錯，非嚴格模式下不報錯，但也不會修改成功 ```javascript // 開啟嚴格模式 // 'use strict' let str = 'liang' // 修改字符串的 length 屬性無效 // 在嚴格模式下會拋出異常,后面代碼不再執行 str.length = 3 console.log(str, str.length) // liang 5 ``` #### 4. JS 數組遍歷 --- ##### 普通遍歷 ```javascript const arr = ['html', 'css', 'js', 'vue'] // for 循環語句 for (let index = 0; index < arr.length; index++) { console.log(index, arr[index]); } // 數組方法 forEach arr.forEach(item => { console.log(item) }) // for...of 循環語句 for (const item of arr) { console.log(item); } ``` ##### array.map() 適用于需要 **對數組進行重新組裝，生成新數組** 的場景 循環處理數組中的每個元素，返回一個處理后的新數組，它不會修改原數組 ```javascript // 所有數組元素加 3 再返回 const arr = [70, 62, 91, 57] const res = arr.map(item => item += 3) console.log(res) // [73, 65, 94, 60] // 提取數組對象中的 id，并且組裝為一個新數組返回 const user = [ { id: 1, name: 'html' }, { id: 2, name: 'vue' }, { id: 3, name: 'react' }, ] const ids = user.map(item => item.id) console.log(ids) // [1, 2, 3] ``` ##### array.reduce() 數組方法 `array.reduce()` 可以用于統計多維數組中某個字段的和 ```javascript const arr = [ { name: '語文', score: 80 }, { name: '數學', score: 90 }, { name: '英語', score: 70 } ] // res = 0 + 80 + 90 + 70 = 240 const res = arr.reduce((total, item) => total += item.score, 0) ``` ##### array.filter() 數組方法 `array.filter()` 用于過濾數組 ```javascript const arr = [ { name: '語文', score: 80 }, { name: '數學', score: 90 }, { name: '英語', score: 70 }, { name: '物理', score: 60 }, ] // 只留下滿足 score >= 80 的元素,不會修改原數組 const res = arr.filter(item => item.score >= 80) ``` ##### array.every() 數組方法 `array.every()` 用于檢測數組所有元素是否都滿足指定條件 ```javascript const arr = [ { name: '語文', score: 80 }, { name: '數學', score: 90 }, { name: '英語', score: 75 }, ] // 所有 score 都大于 70 才返回true // 需要特別注意的是當 arr 為空數組時也返回 true const bool = arr.every(item => item.score > 70) ``` ##### array.some() 數組方法 `array.some()` 用于檢測數組中是否有元素滿足指定條件 ```javascript const arr = [ { name: '語文', score: 80 }, { name: '數學', score: 90 }, { name: '英語', score: 75 }, ] // 存在 score 大于 75 時, 停止遍歷并返回 true // 當 arr 為空數組時, 返回 false const bool = arr.some(item => item.score > 75) ``` ##### array.find() 數組方法 `array.find()` 用于獲取數組中滿足指定條件的第一個元素的值 數組方法 `array.findIndex()` 用于獲取數組中滿足指定條件的第一個元素的值的索引 ```javascript const arr = [ { name: '語文', score: 75 }, { name: '數學', score: 82 }, { name: '英語', score: 60 } ] const res = arr.find(item => item.score > 80) // { name: '數學', score: 75 } const index = arr.findIndex(item => item.score > 80) // 1 ``` #### 5. JS 數組元素操作 --- 數組方法在項目中的使用頻率非常高，列舉出最常用的一些方法 ```javascript let arr = ['html'] // 往數組尾部追加元素 arr.push('css') // 往數組頭部追加元素 arr.unshift('vue') ```