關於遍歷，看這篇文章就足夠了【find()、findIndex()、forEach()、splice()、slice()詳解】

在日常寫JS邏輯的時候，有小夥伴經常問及我一些遍歷相關的邏輯，很多都是很基礎性的知識點，只不過需要組合一下就可以實現效果。所以，我覺得還是有必要舉幾個例子來說明一下這幾個js常用的方法，find()、findIndex()、forEach()、splice()、slice()這幾個方法是我平時碰到的自己處理以及別人問及我，最常被問到的幾個方法。

首先，構造一些json數據

    let all_schools = [
      { id: 1, name: "民辦陽浦小學" },
      { id: 5, name: "逸夫小學" },
      { id: 6, name: "宏星小學" },
      { id: 8, name: "盛大花園小學" }
    ]
    let target_schools = [
      { area: "徐彙區", id: 1, name: "民辦陽浦小學" },
      { area: "松江區", id: 5, name: "逸夫小學" },
      { area: "虹口區", id: 8, name: "盛大花園小學" }
    ]

find() 方法

[MDN find()](Array.prototype.find() - JavaScript | MDN)

find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

 let defa = target_schools.find((target_school, index) => {
   return target_school
 })
 console.log(defa) 
 // {area: "徐彙區", id: 1, name: "民辦陽浦小學"}
 console.log(defa.id) // 1 

findIndex() 方法

[MDN findIndex()](Array.prototype.findIndex() - JavaScript | MDN)

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

// 通過reverse()和find(), 找到目標學校中最後一個學校項
let last_school = target_schools.reverse().find((target_school, index) => {
   return target_school
 })
 console.log(defa) 
 // {area: "虹口區", id: 8, name: "盛大花園小學"}

// 找到目標學校中最後一個學校的id
let index = all_schools.findIndex(function (element) {
  return element.id == last_school.id
})
console.log(index) // 2

// 如
var array1 = [5, 12, 8, 130, 44];
let iddx = array1.findIndex((ele) => {
    return ele > 13
}) 
console.log(iddx) // 3

forEach() 方法

[MDN forEach()](Array.prototype.forEach() - JavaScript | MDN)

forEach() 方法對數組的每個元素執行一次提供的函數。通俗點講就是把你想取的數據取出來

1、
// 取出單個數組中的內容
target_schools.forEach((target_school, index) => {
  console.log(target_school)
})
// {area: "徐彙區", id: 1, name: "民辦陽浦小學"}
// {area: "松江區", id: 5, name: "逸夫小學"}
// {area: "虹口區", id: 8, name: "盛大花園小學"}

2、
// 取出單個數組內的單個id
target_schools.forEach((target_school, index) => {
  console.log(target_school.id)
})
// 1 5 8

3、
// 把取出的id值統一存進一個數組中
let getSchoolIdArray = []
target_schools.forEach((ele) => {
    getSchoolIdArray.push(`${ele.id}`)
})
console.log(getSchoolIdArray)
// ["1", "5", "8"]
// [1, 5, 8] 如果不想要string, 就去掉模板字符串即可
// 如：getSchoolIdArray.push(target_schools[i].id);

4、
// 其實如果想要拿到數組裏的某一項值，存到一個空數組中。**除了forEach， 其實for就可以做到**，但是forEach看起來更簡潔
let getSchoolIdArray = []
for (let i=0; i< target_schools.length; i++) {
  getSchoolIdArray.push(`${target_schools[i].id}`);
}
["1", "5", "8"]
// [1, 5, 8] 如果不想要string, 就去掉模板字符串即可

【實例說明】獲取兩個對象中相同的部分，取出來

例:
A：[“1”, “5”, “6”, “8”]
B：[“1”, “5”, “8”]
得到： [“1”, “5”, “8”]

    // 第一種方法,for寫法
    var A = ["1", "5", "6", "8"];
    var B = ["1", "5", "8"];
    var result = new Array();
    for (var i = 0; i < A.length; i++) {
      if (B.indexOf(A[i]) > -1) {
        for (var j = 0; j < B.length; j++) {
          if (A[i] == B[j]) {
            result.push(A[i]);
            break;
          }
        }
      }
    }
    console.log(result); //  ["1", "5", "8"]

    // 第二種寫法, forEach寫法
    var A = ["1", "5", "6", "8"];
    var B = ["1", "5", "8"];
    var result = []
	  A.forEach((a,index) => {
		if(B.indexOf(a) > -1) {
			B.forEach((b,idx) => {
				if(a == b) {
					result.push(a)
				}
			})
		}
	})
     console.log(result) //  ["1", "5", "8"]
     // 這裏再一次證實了 使用forEach可以使得代碼更簡潔, 可讀性更好

【實例說明】取出每個對象中，數組的集合，並判斷兩個對象中相同的元素，給其設置爲true

例:
A，[“1”, “5”, “6”, “8”]
B，[“1”, “5”, “8”]
得到： 5== 5 || 8==8 設置爲true

let selectedSchoolIDS = []
// 遍歷 target_schools 取出 id
target_schools.forEach(element => {
   selectedSchoolIDS.push(`${element.id}`)
});
// ["1", "5", "8"]

let allSchoolIDS = []
// 遍歷 all_schools 取出 id
this.props.all_schools.forEach(ele => {
	allSchoolIDS.push(`${ele.id}`)
});
// ["1", "5", "6", "8"]

let list = Array(all_schools ? all_schools.length : 0).fill(true)

// 雙層遍歷，尋找兩個數組中相同的id，如果相等設爲false，下面的子項element和ele單項元素都是id
allSchoolIDS.forEach((element, index) => {
	selectedSchoolIDS.forEach((ele, idx) => {
	  if (element == ele) {
	        // 如果兩個數組中有彼此相同的id值，相同的部分需要執行的邏輯操作
            // 將allSchoolIDS中的單項設爲false, 如： list[index] = false
	  }
	})
})

splice() 方法

[MDN slice()](Array.prototype.splice() - JavaScript | MDN)

splice() 方法通過刪除或替換現有元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。

splice()方法支持很多的參數, 但其關鍵點也就是前兩個元素上.

var numbers = ['1', '2', '3', '4'];
numbers.splice(1, 2, '8'); 
console.log(numbers) // ['1', '8', '4']
// 記憶口訣: 從第 X 位開始刪除 Y 個元素，插入“Z”個相應的元素就可以了
// 上面的例子可以理解爲, 從第1位開始刪除2個元素, 插入'8'

// 如:
var numbers = ['1', '2', '3', '4'];
numbers.splice(0, 1, '4', '7'); 
// 從第0位開始刪除1個元素, 插入'4', '7'
console.log(numbers) // ['4', '7', '2', '3', '4'];

var numbers = ['1', '2', '3', '4'];
// 從第二項開始刪除所有的元素
numbers.splice(2); // ['1', '2']
// 相信經過上面的例子講解之後, 即使splice()方法裏有再多的參數,你應該都知道如何處理了

slice() 方法

[MDN slice()](Array.prototype.slice() - JavaScript | MDN)

slice() 方法返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。

既然說到了splice() 方法就不得不說一下slice() 方法

var numbers = ['1', '2', '3', '4'];
console.log(numbers.slice(1, 3)); // ["2", "3"]
// 記憶口訣: 從 X 位開始到 Y 位結束(不包括Y), 刪除X到Y之間(不包括Y)的值

學習方法： 懂得再多的理論，記憶只能存在腦中一段時間。時間一長，不翻出來思考，不多做題，是不可能達到永久性記憶的。所以，學習要向牛一樣，學會反芻。這樣才能把知識的營養吸收的更徹底。

希望對你 有所幫助。