关于遍历，看这篇文章就足够了【find()、findIndex()、forEach()、splice()、slice()详解】...-CSDN博客

在日常写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)的值
复制代码

学习方法：懂得再多的理论，记忆只能存在脑中一段时间。时间一长，不翻出来思考，不多做题，是不可能达到永久性记忆的。所以，学习要向牛一样，学会反刍。这样才能把知识的营养吸收的更彻底。

希望对你有所帮助。