JS系列之数组迭代

80 阅读4分钟

1.every()

用途:用于检测数组所有元素是否都符合指定条件
参数:函数接收三个参数,第一个是当前数据项,第二个是当前数据下标,第三个是数组本身
返回值:Boolean

说明:如果数组中检测到有一个元素不满足,则整个表达式返回false ,且剩余的元素不会再进行检测,如果所有元素都满足条件,则返回 true。

注意:every() 不会对空数组进行检测,空数组返回true。

var aBill = [1,2,3,4]
var result = aBill.every(function(item,index,array){
  return item < 2;
})

2.some()

用途:用于检测数组中的元素是否满足指定条件
参数:同上
返回值:Boolean

说明:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,如果没有满足条件的元素,则返回false。

注意:some() 不会对空数组进行检测,空数组返回false。

var aBill = [1,2,3,4]
var result = aBill.some(function(item,index,array){
return item == 2;
})

3.filter()

用途:筛选符合条件的项
参数:同上
返回值:Array

说明:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

var aBill = [1,2,3,4]
var result = aBill.filter(function(item,index,array){
	return item <= 2;
})

4.map()

用途:循环每一项
参数:同上
返回值:Array

说明:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

注意:常用于遍历数组对象的某个字段组合成新数组

var aBill = [
  { age: 12, name: "Tome" },
  { age: 19, name: "Lone" }
];
var result = aBill.map(function(item,index,array){
	return item.name;
})
//["Tome","Lone"]

5.reduce()

用途:累加值
参数:total是前一次返回的数据,后三个参数相同
返回值:Number

说明:接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.

var aBill = [1,2,3,4]
var s= aBill.reduce(function(total,item,index,array){
	return total + item;
})

6.reduceRight()

用途:累加值
参数:total是前一次返回的数据,后三个参数相同
返回值:Number

说明:reduceRight是从数组的末尾向前将数组中的数组项做累加,reduce是从数组开头到结尾累加

var aBill = [1,2,3,4]
var s= aBill.reduceRight(function(total,item,index,array){
	return total + item;
})

7.forEach()

用途:循环每项
参数:同上
返回值:无

说明:用于调用数组的每个元素,并将元素传递给回调函数

跳出循环的操作:抛出错误 throw Error(We've found the target element.)

var aBill = [1,2,3,4]
aBill.forEach(function(item,index,array){
  this.demo = item * 2;
})


//跳出循环
 function getItemById(arr, id) {
  var item = null;
  try {
    arr.forEach(function (curItem, i) {
      if (curItem.id == id) {
        item = curItem;
        throw Error();
      }
    });
  } catch (e) {}
  return item;
}

8.其他循环

说明:
for 循环、while 循环和 d-while 循环的时间最少;
for-of 循环的时间稍长;
forEach 循环、map 循环和 reduce 循环 3 者的数据差不多,但比 for-of 循环的时长更长一点;
for-in 循环所需要的时间最多;

9.for-in/for-of

总结:
for in适合遍历对象,for of适合遍历数组。
for in遍历的是数组的索引,对象的属性,以及原型链上的属性

总之,for...in 循环主要是为了遍历对象而生,不适用于遍历数组 for...of 循环可以用来遍历数组、类数组对象,字符串、Set、Map 以及 Generator 对象

循环数组:for in 输出的是数组的index下标,而for of 输出的是数组的每一项的值

let result = [
  { id: 1000, name: "Tome" },
  { id: 2000, name: "John" },
];

for (const key in result) {
  if (Object.hasOwnProperty.call(result, key)) {
    console.log(key, result[key]); //0,{id: 2000,name: "John"}
  }
}

for (const iterator of result) {
  console.log(iterator); //{id: 2000,name: "John"}
}

for (const [key, item] of result.entries()) {
  console.log(key, item); //0,{id: 2000,name: "John"}
}

循环对象:for in 可以遍历对象,for of 不能遍历对象,只能遍历带有iterator接口的,例如Set,Map,String,Array

let result = { id: 1000, name: "Tome" };

for (const key in result) {
  if (Object.hasOwnProperty.call(result, key)) {
    console.log(key, result[key]); //id,1000
  }
}

for (const iterator of result) {
  console.log(iterator); // 报错 Uncaught TypeError: object is not iterable
}

//也可以使用 Object.entries(obj) 方法将对象的键名生成一个数组,然后遍历这个数组
for (const [key,item] of Object.entries(result)) {
  console.log(key,item); //id,1000
}

10.find()和findIndex()(ES6新增)

findIndex()返回的是第一个返回条件的值的索引值

用途:查找某项
参数:同上
返回值:无

说明:find()用于查找数组中符合条件的第一个元素信息,如果没有符合条件的元素,则返回undefined,对于空数组,函数是不会执行的。

var aBill = [{id:1000,age:20,},{id:2000,age:30,}]
var oValue = aBill.find(function(item,index,array){
  return item.id == 1000
})
//oValue->{id:1000,age:20}