# JavaScript Array 陣列操作方式 ###### tags: `JavaScript` ## forEach / map / filter / find / some / every / sort / reduce ### Array.forEach(函數) 對每個元素執行動作 * 將陣列元素一個一個抓出來 * 帶入函數執行 * 陣列元素如果是物件可以變更 * 會修改原陣列,不會產生新陣列 ```javascript= // example const books = [ { name: '字典', price: 500, discount: 0.8 }, { name: '小說', price: 500, discount: 0.6 }, { name: '課本', price: 500, discount: 0.9 } ] books.forEach(function(book){ book.total = book.discount*book.price console.log(book.total) // (印三次) 400 300 450 }) console.log(books) // 引數book就是從陣列抓出來每一個的本體 // console.log(books) 印出 : // [ // { name: '字典', price: 500, discount: 0.8, total: 400 }, // { name: '小說', price: 500, discount: 0.6, total: 300 }, // { name: '課本', price: 500, discount: 0.9, total: 450 } // ] // 原陣列會被新增 total 屬性 // e.g. 在書本資料集中,為所有書本新增優惠資訊(屬性) ``` <br> --- ### Array.map(函數) 執行結果存到新陣列 * 將陣列元素一個一個抓出來 * 將執行結果存成另一個陣列 ```javascript= // example 將陣列中的數值取出平方 numbers = [1, 2, 3, 4, 5, 6] const new_array = numbers.map(function(num){ return num * num }) console.log(numbers) // 原陣列不會被修改 console.log(new_array) // 新陣列 // 引數num就是從陣列抓出來每一個的本體 // e.g. 將會員物件取出成名字陣列 ``` **map常用在物件壓縮與轉換,只抽取或計算必要資訊並產生新物件** <br> --- ### Array.filter(函數) 留下符合條件的元素 根據函數回傳值(True / False),決定要不要把元素複製到新陣列 ```javascript= // example numbers = [1, 2, 3, 4, 5, 6] const new_array = numbers.filter(function(num){ return num > 3 }) console.log(numbers) // 原陣列不會被修改 console.log(new_array) // [4, 5, 6] // 引數num就是從陣列抓出來每一個的本體 // e.g. 留下價格 > 400的書 / 男性的乘客 / 有關鍵字的文章 ``` <br> --- ### Array.find(函數) 找到第一個符合條件的元素 根據函數回傳值(True / False) 傳回第一個符合條件的元素 **(非陣列!)** ```javascript= dnas = ['ATC', 'AGC', 'AAA', 'TTG'] const findTg = dnas.find(function(dna){ return dna.indexOf('TG') > -1 }) console.log(findTg) // 'TTG' // 引數dna就是從陣列抓出來每一個的本體 // e.g. 找到id是23的書 / 找到第一個得分>50的球員 ``` <br> --- ### Array.some(函數) 判斷有元素符合條件 其中有元素符合條件回傳true,否則false e.g. 清單中有跟關鍵字一樣名字的物件 <br> --- ### Array.every(函數) 判斷所有元素都符合條件 每一個元素都符合條件回傳true,否則false e.g. 清單中所有會員都有驗證 <br> --- ### Array.sort(函數) 根據大小排序陣列 根據函數回傳值排列陣列 e.g. 根據年齡排列會員資料 ```javascript= // example members = [{year: 27},{year: 14},{year: 50}] const sortMembers = members.sort(function(a, b){ return a.year - b.year }) console.log(sortMembers) // [{year: 14}, {year: 27}, {year: 50}] ``` <br> --- ### Arrau.reduce(函數, 初始值) 根據規則縮減陣列 * **有帶暫存器版本的 forEach** 根據取出每個值與暫存做運算,回傳結果 e.g. 把書籍價錢加到暫存裡 -> 總價 ```javascript= books = [{price: 10}, {price: 20}, {price: 30}] const total = books.reduce(function(total, a){ return total + a.price }, 0) console.log(total) // 60 ```