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

馮馮墨墨發表於2019-03-31
Index

在日常寫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)的值
複製程式碼

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

希望對你 有所幫助。

相關文章