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個方法就能知足幾乎全部的應用場景。消滅循環從我作起，加油！