JS遍歷方法總結

CV程式設計師發表於2018-12-13
JS

來來來，新鮮出爐的js遍歷總結，比我菜的都看一下。保你戒掉迴圈，告別模稜兩可，達到靈活運算元據的高潮。

for迴圈

const data = ["a", "b", "c", "d"];
for (let i = 0, len = data.length; i < len; i++) {
  console.log(i);// 0 1 2 3
  console.log(data[i]);// a b c d 
}
複製程式碼

適用範圍：Array、String
點評：效能最高但不夠優雅

forEach

const data = ["a", "b", "c", "d"];
data.forEach((v, i) => {
  console.log(v);// a b c d 
  console.log(i);// 0 1 2 3
})
複製程式碼

適用範圍：Array、Set、Map
點評：無法中途跳出迴圈，break命令或return命令都不能奏效。

for...in

const data = { key1: "a", key2: "b", key3: "c" };
for (let key in data) {
  console.log(key); // key1 key2 key3 
  console.log(data[key]); // a b c   
}
const data = ["a", "b", "c", "d"];
for (let index in data) {
  console.log(index); // 0 1 2 3  
}
複製程式碼

適用範圍：Array、Object、String
點評：會列舉原型屬性，就是說會遍歷來自繼承物件的可列舉屬性

for...of

const data = ["a", "b", "c", "d"];
for (let item of data) {
  console.log(item); // a b c d  
}
複製程式碼

適用範圍：Array、String、Set、Map
點評：ES6新增的作為遍歷所有資料結構的統一的方法。唯一的缺點也許就是相容性了吧。

Array.filter()

返回一個新陣列，陣列中的元素為原始陣列中符合條件的所有項。

//篩選出包含_mgt的項
const limits = ["member_mgt", "member_audit", "recommend_mgt", "dictionary_mgt"]
const result = limits.filter(item => {
  return item.indexOf("_mgt") > -1
})
console.log(result)// [ 'member_mgt', 'recommend_mgt', 'dictionary_mgt' ]
複製程式碼

適用於想從源資料中篩選/提取出指定資料的業務場景。

Array.map()

返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。

//陣列中所有值轉大寫
const limits = ["member_mgt", "member_audit", "recommend_mgt", "dictionary_mgt"]
const result = limits.map(item => {
  return item.toLocaleUpperCase()
})
console.log(result)// [ 'MEMBER_MGT','MEMBER_AUDIT','RECOMMEND_MGT','DICTIONARY_MGT' ]
複製程式碼

適用於要對源資料進行加工或修改的業務場景

Array.some()

檢測所有元素是否滿足條件，並返回一個Boolean值。 如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。如果沒有滿足條件的元素，則返回false。

//判斷是否有member_mgt的許可權
const limits = ["member_mgt", "member_audit", "recommend_mgt", "dictionary_mgt"]
const result = limits.some(item => {
  return item === "member_mgt"
})
console.log(result)// true
//這個效果其實等同於limits.includes("member_mgt") 這裡只是為了舉例
複製程式碼

Array.every()

檢測所有元素是否滿足條件，並返回一個Boolean值。 如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false ，且剩餘的元素不會再進行檢測。如果所有元素都滿足條件，則返回 true。

//判斷陣列中的值是否均為字串
const limits = ["member_mgt", "member_audit", "recommend_mgt", "dictionary_mgt"]
const result = limits.every(item => {
  return typeof item === "string"
})
console.log(result)// true
複製程式碼

總結髮言

  • 其實，支援物件遍歷的方法只有for...in，不過可以通過Object.keys()、Object.values()、Object.entries()等方法將物件轉成陣列後再操作。
  • 其實，遍歷的目的無外乎是對資料進行篩選、重組抑或是判斷，只要熟練使用陣列的那4個方法就能滿足幾乎所有的應用場景。消滅迴圈從我做起，加油！

相關文章