关于遍历，看这篇文章就足够了【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)的值
复制代码

学习方法： 懂得再多的理论，记忆只能存在脑中一段时间。时间一长，不翻出来思考，很少作题，是不可能达到永久性记忆的。因此，学习要向牛同样，学会反刍。这样才能把知识的养分吸取的更完全。

但愿对你 有所帮助。