數組方法ES5 + ES6

 


 

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}===🍔`);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章