關於遍歷，看這篇文章就足夠了【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)的值
複製代碼

學習方法： 懂得再多的理論，記憶只能存在腦中一段時間。時間一長，不翻出來思考，很少作題，是不可能達到永久性記憶的。因此，學習要向牛同樣，學會反芻。這樣才能把知識的養分吸取的更完全。

但願對你 有所幫助。