forEach、for in、for of的區別對比

其實這三個方法我們在項目中經常用到，但是如果要你說出這三者的區別和各自的特點是什麼？我想肯定會有人會卡住在這了。反正我是被卡住了(此處手動狗頭)，下面就來記錄下這三者的區別和用法吧

一、forEach介紹

forEach詳細的介紹查看這裏

1.forEach() 方法對數組的每個元素執行一次給定的函數。

const arr = [1,2,3];
arr.forEach(callback) //callback表示指定的函數
callback(currentValue,index,[])

2.forEach執行後的返回值爲undefined

//返回值爲undefined
const arr = [1,2,3]
const temp_arr = arr.forEach(function(item){
	return item*2
}) 
temp_arr //undefined

3.forEach不改變原數組

const arr = [1,2,3]
const temp_arr = arr.forEach(function(item){
	return item*2
}) 
arr //[1,2,3]

4.forEach循環不會被中斷

const arr = [1,2,3];
let count = 0;
arr.forEach(function(item){
	if(item % 2 === 0){
		return;
	}
	count++;
})
//如果可以中斷的話，此時的count應爲1,而運行結果爲2
count // 2

5.想要實現返回篩選的結果可以結合filter

//找出能被2整除的數
const arr = [1,2,3,4,5,6,7,8,9];
const arr_temp = [];
arr.filter(item => item%2 === 0).forEach(item => {
	//此處寫要處理的邏輯
	arr_temp.push(item)
})
arr_temp//[2,4,6,8]

二、for in

for in詳細的介紹查看這裏

1.以任意順序遍歷一個對象的除Symbol以外的可枚舉屬性。

const arr = [1,2,3]
for(key in arr) {
	console.log(key)
}
// 0,1,2 爲數組的下標值
let str = "hello";
for(key in str){
	console.log(key)
}
//0,1,2,3,4 爲str的下標
const person = {
	name:"ssypp",
	sex:"男"
}
for(key in person){
	console.log(key)
}
//name,sex 爲對象的鍵值
//想要獲取對應的值可以使用中括號的形式
//arr[key]
//str[key]
//person[key]

2.for…in不應該用於迭代一個 Array，其中索引順序很重要。

for ... in是爲遍歷對象屬性而構建的，不建議與數組一起使用，數組可以用Array.prototype.forEach()和for ... of

3.for in的應用

它最常用的地方應該是用於調試，可以更方便的去檢查對象屬性（通過輸出到控制檯或其他方式）
########################################
在處理有key-value數據（比如屬性用作“鍵”），需要檢查其中的任何鍵是否爲某值的情況時，還是推薦用for ... in

三、for of

for of詳細介紹查看這裏

1.迭代一個可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）的，爲每個不同屬性的值執行語句

//array
let iterable = [10, 20, 30];
for (let value of iterable) {
    console.log(value);
}
//string
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
...

2.for…of與for…in的區別

無論是for…in還是for…of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。

for...in 語句以任意順序迭代對象的可枚舉屬性。

for...of 語句遍歷可迭代對象定義要迭代的數據。