sort / reverse
主要用於排序,會影響原來數組。const arr = [1, 2, 3] arr.sort(); // 正序 arr.reverse(); // 反序 arr.sort(() => 0.5 - Math.random()); // 亂序
splice
編輯元素,會影響原來數組
// splice(目標下標, 刪除多少元素, 插入元素); const arr = [1, 2, 3] console.log(arr, arr.splice(0, 0, '我')) // ['我', 1, 2, 3] // 增加元素 console.log(arr, arr.splice(0, 1, '我')) // ['我', 2, 3] // 替換元素,返回被替換元素 console.log(arr, arr.splice(0, 1)) // [2, 3] // 刪除目標下標元素,返回被刪除元素
slice
根據指定開始結束截取數組,不會影響原來數組
const arr = [1, 2, 3, 4, 5, 6] console.log(arr.slice(0, 2)); // [1, 2] // 截取段
map
返回處理後的元素,不會影響原來數組
const arr = [ { name: 'tom', age: 17 }, { name: 'anne', age: 16 }, { name: 'jack', age: 18 }, ] // 返回數組,數組的元素爲原始數組元素調用函數處理後的值 console.log(arr.map(item => item.name)); // ['tom', 'anne', 'jack']
filter / find
過濾數組元素,不會影響原來數組
const arr = [1, 2, 3, 2] // filter: 返回數組,循環所有元素,返回所有符合條件的元素 console.log(arr.filter(item => item === 2)); // [2, 2] // find: 返回單個元素,只要有一個元素符合條件立即結束循環並返回元素 console.log(arr.find(item => item === 2)); // 2
some / every
是否存在元素,不會影響原來數組some運行過程:
return true : 立即結束循環,最終結果爲true
return false : 繼續循環,直到所有元素都遍歷一次,如果遍歷所有元素都是false,最終結果爲false
every運行過程:
return true : 繼續循環,直到所有元素都遍歷一次,如果遍歷所有元素都是ture,最終結果爲true
return false : 立即結束循環,最終結果爲false
const arr = [1, 2, 3] // some:只要有一項返回true,則返回true console.log(arr.some(item => item === 2)); // true // every:必須所有項返回true,才返回true;一旦有一項返回flase,就返回flase console.log(arr.every(item => item >= 2)); // flase
shift / unshift / pop
編輯數組,會影響原來數組
const arr = [1, 2, 3] // shift: 刪除數組第一個元素並返回刪除元素 console.log(arr, arr.shift()); // [2, 3], 1
// unshift: 向數組的開頭添加一個元素,並返回數組長度 const arr = [1, 2, 3] console.log(arr, arr.unshift(0)); // [0, 1, 2, 3], 4
const arr = [1, 2, 3] // 刪除數組最後一個元素並返回刪除的元素 console.log(arr, arr.pop()); // [1, 2], 3
join:
指定分隔符連接數組元素,不填任何符號就默認用逗號,會影響原來數組
const arr = [1, 2, 3] console.log(arr.join("-")); // 1-2-3
for of / for in
遍歷數組,不會影響原來數組
// for of 拿到是數組對象value,主要用作遍歷數組、類數組對象,字符串、Set、Map 以及 Generator 對象 const arr = [ { name: 'tom', age: 17 }, { name: 'anne', age: 16 }, { name: 'jack', age: 18 }, ] for (const item of arr) { console.log(item); } // 通過entries獲得下標與元素 for (const [i, item] of arr.entries()) { console.log(i, item); }
// for in 拿到是數組對象key,主要用作遍歷對象 // 跳出這次循環:return // forEach沒有跳出整個循環的方法,但可以用異常的方式來跳出,可這種方法太不友好 const obj = { name: 'tom', age: 17 } for (const key in obj) { const item = obj[key] console.log(key, item); }
forEach
// 常用於遍歷數組,循環無法中途跳出,break return 都無效 // 語法: array.forEach(callbackFn(item, index, arr), thisValue) // 參數: item-當前元素 index-下標 arr-被循環數組 thisValue-執行回調函數 callbackFn 時,用作 this 的值 const arr = [ { name: 'tom', age: 17 }, { name: 'anne', age: 16 }, { name: 'jack', age: 18 }, ] arr.forEach((item, index, arr) => { console.log(item, index, arr); })
reduce / reduceRight
一篇寫的很好的reduce教程:https://www.cnblogs.com/amujoe/p/11376940.html
reduce主要用於循環數組進行累計、累加
reduceRight與reduce用法相同,只是遍歷順序相反
// 做漢堡包爲例子 const list = [ { name: '生菜', icon: '🥬' }, { name: '西紅柿', icon: '🍅' }, { name: '酸黃瓜', icon: '🥒' }, { name: '奶酪', icon: '🧀' }, { name: '牛肉餅', icon: '🥩' }, { name: '麪包', icon: '🍞' }, ] const init = { name: '麪包', icon: '🍞' } // 語法: array.reduce((prev, cur, index, arr)=>{}, init); // 參數 // init 初始值 // arr 被循環數組 // prev 上一次調用回調返回值或者初始值 // cur 當前元素 // index 當前元素下標, 若有 init 值,則下標爲0否則爲1 const hamburger = list.reduce((prev, cur, index, arr) => { // console.log(prev, cur, index, arr); console.log(prev, cur); return { name: `${prev.name}/${cur.name}`, icon: `${prev.icon}${cur.icon}`, } }, init); console.log(`${hamburger.icon}===🍔`);