JavaScript中的迭代方法和这些方法的重构

目录

一、迭代方法

1.forEach方法

2.every方法

5.map方法  

二、重构迭代方法

1.重构forEach方法

2.重构every方法

3.重构some方法

4.重构filter方法

5.重构map方法

---

一、迭代方法

1.forEach方法

  作用：循环遍历数组元素 for循环升级版 
  参数：function(item,index,arr){}      返回值：无       不修改原数组

var arr = ['tom','jack','larry','terry'];
arr.forEach(function(item,index,arr){
  /**
   * item--->数组每一项
   * index--->数组每一项所对应的下标
   * arr--->数组本身
   */
  console.log(item,index,arr);
});

代码运行结果如下：

2.every方法

  作用：检测数组元素是否符合表达式 只要有一项不符合直接返回false并且跳出循环    如果全部符合则返回true
  参数：function(item,index,arr){}      返回值:true或者false        不修改原数组

var arr = [1,2,3,4,5];
var res = arr.every(function(item,index,arr){
  console.log('every')
  return item>0
});
console.log(res,arr);

代码运行结果如下：

3.some方法

  作用：检测数组元素是否符合表达式 只要有一项符合返回true 跳出循环 全部不符合返回false
  参数：function(item,index,arr){}      返回值：true或者false       不修改原数组

var arr = [1,2,3,4,5];
var res = arr.some(function(item,index,arr){
  console.log('some')
  return item>5
});
console.log(res,arr)

代码运行结果如下：

4.filter方法

  作用：过滤符合满足条件数组元素组成新数组  
  参数：function(item,index,arr){}      返回值：返回符合条件新数组      不修改原数组

var arr = [1,2,3,4,5];
var res = arr.filter(function(item,index,arr){
  return item>2
});
console.log(res,arr);

代码运行结果如下：

5.map方法  

  作用：映射 对每一个数组元素进行操作 
  参数：function(item,index,arr){}      返回值：返回操作后的新数组        不修改原数组

var arr = [1,2,3,4,5];
var data = [
  {
    id:1,
    name:'zhangsan'
  },
  {
    id:2,
    name:'lisi'
  },
  {
    id:3,
    name:'wangwu'
  }
];
var res1 = data.map(function(item){
  return item.name
});
console.log(res1);
var res = arr.map(function(item,index,arr){
  return item+5;
});
console.log(res,arr);

代码运行结果如下：

---

二、重构迭代方法

1.重构forEach方法

重写myForEach实现与forEach一样的功能

var arr = [1,2,3,4,5];
Array.prototype.myForEach = function(callback){
  // callback--->function(){}
  for(var i=0;i<arr.length;i++){
    callback(arr[i],i,arr)
  }
};
arr.myForEach(function(item,index,arr){
  console.log(item,index,arr)
});

代码运行结果如下：

 

2.重构every方法

重写myEvery实现与every一样的功能

Array.prototype.myEvery = function(callback){
  for(var i=0;i<arr.length;i++){
    // 把函数调用当作条件的判断
    if(!callback(arr[i],i,arr)){
      return false
    }
  }
  return true
}
var arr = [1,2,3,4,5];
var res = arr.myEvery(function(item,index,arr){
  return item>1
});
console.log(res,arr);

代码运行结果如下：

 

3.重构some方法

重写mySome实现与some一样的功能

Array.prototype.mySome = function(callback){
  for(var i=0;i<arr.length;i++){
    // 只要有一个满足条件 直接返回true
    if(callback(arr[i],i,arr)){
      return true
    }
  }
  return false
}
var arr = [1,2,3,4,5];
var res = arr.mySome(function(item,index,arr){
  return item > 5
});
console.log(arr,res);

代码运行结果如下：

4.重构filter方法

重写myFilter实现与filter一样的功能

Array.prototype.myFilter = function(callback){
  var newArr = [];
  for(var i=0;i<arr.length;i++){
    if(callback(arr[i],i,arr)){
      // newArr.push(arr[i])
      newArr[newArr.length] = arr[i]
    }
  }
  return newArr
}
var arr = [1,2,3,4,5];
var res = arr.myFilter(function(item,index,arr){
  return item>4
});
console.log(res,arr);

代码运行结果如下：

 

5.重构map方法

重写myMap实现与map一样的功能

Array.prototype.myMap = function(callback){
  var newArr = [];
  for(var i=0;i<arr.length;i++){
    newArr[newArr.length] = callback(arr[i],i,arr)
  }
  return newArr
};
var arr = [1,2,3,4,5];
var res = arr.myMap(function(item,index,arr){
  return item + 5
});
console.log(res,arr)

代码运行结果如下：

---