数组方法重构与迭代

Posted 流走的年华

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组方法重构与迭代相关的知识，希望对你有一定的参考价值。

数组方法重构

1.Array.prototype.pop()

(1) pop()方法用于删除数组的最后一个元素并返回删除的元素。
    注意：此方法会改变数组的长度！
    语法：array.pop()
    返回值：所有类型  返回删除的元素
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.pop();
    console.log(fruits);
    //fruits 结果输出：Banana,Orange,Apple
(2) 重构pop()方法
    Array.prototype.myPop = function(){
        if(this.length==\'\'){
            return undefined;
        }else{
            var result = this[this.length-1];
            this.length--;
            return result;
        }
    }

    var arr = [1,2,3,4,5];
    console.log(arr);
    var result = arr.myPop();
    console.log(result);
结果如图：![图片.png](/img/bVcUyCl)

2.Array.prototype.push()

(1)push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
    注意：新元素将添加在数组的末尾，此方法改变数组的长度
    语法：array.push(item1, item2, ..., itemX)
    返回值：Number  数组新长度
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      // push()  添加元素到末尾  参数是要添加的元素 返回值是修改之后数组的长度【改变原数组】
      fruits.push("Kiwi")
      console.log(fruits);
      //fruits 结果输出：Banana,Orange,Apple,Mango,Kiwi
(2)push()方法重构    
    Array.prototype.myPush = function(){
        for(var i = 0; i<arguments.length; i++){
            this[this.length]=arguments[i];
        }
    }
    var arr = [1,2,3,4,5];
    console.log(arr);
    var result = arr.myPush(\'a\');
    console.log(result);
    结果如图：![图片.png](/img/bVcUyCC)

3.Array.prototype.shift()

(1) shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
    注意：此方法改变数组的长度！    
    返回值：任何类型（*）  数组原来的第一个元素的值（移除的元素）。
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.shift()
    console.log(fruits);
    //fruits结果输出:Orange,Apple,Mango
(2) shift()方法重构
    Array.prototype.myShift = function(){
        var result = this[0];
        for(var i=0; i<this.length; i++){
            this[i]=this[i+1];
        }
        this.length--;
        return result;
    }
    var arr = [1,2,4,5];
    console.log(arr);
    var result = arr.myShift();
    console.log(result);
    console.log(arr);
    结果如图：![图片.png](/img/bVcUyCV)

4.Array.prototype.myUnshift()

(1)unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
    注意：该方法将改变数组的数目
    语法：array.unshift(item1,item2, ..., itemX)
    参数：item1,item2,...,itemX  描述：可选。向数组起始位置添加一个或者多个元素
    返回值：Type 描述 Number 数组新长度
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      fruits.unshift("Lemon","Pineapple");
      console.log(fruits)
      //fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango
(2)unshift() 方法重构
    Array.prototype.myUnshift = function(){
        var sum = this.length+arguments.length;
        for(var i=sum; i>0; i--){
            if(i>arguments.length){
                this[i-1]=this[i-1-arguments.length];
            }else{
                this[i-1]=arguments[i-1];
            }
        }
        return sum;
    }
    var arr = [1,2,3,4,5];
    console.log(arr);
    var result = arr.myUnshift(\'a\',\'b\',\'c\');
    console.log(result);
    console.log(arr);
结果如图：![图片.png](/img/bVcUyDM)

迭代方法重构

1.Array.prototype.forEach()

(1)forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
    注意: forEach() 对于空数组是不会执行回调函数的。
    语法：array.forEach(function(currentValue, index, arr), thisValue)
    参数：
参数描述
function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。
thisValue可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值
参数描述
currentValue必需。当前元素
index可选。当前元素的索引值。
arr可选。当前元素所属的数组对象。
    返回值：undefined
    var numbers = [4, 9, 16, 25];
    numbers.forEach(function (number, index) {
      console.log(index + \' -- \' + number);
    })
    // 0 -- 4
    // 1 -- 9
    // 2 -- 16
    // 3 -- 25
(2) forEach()方法重构
    Array.prototype.myForEach = function(fun,){
        for(var i=0; i<this.length; i++){
            fun(this[i],i,this);
        }
    }
    var arr = [1,2,3];
    var result = arr.myForEach(function(){
        console.log(item,index,arr);
    });
    console.log(result);

2.Array.prototype.every()

(1)every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
   every() 方法使用指定函数检测数组中的所有元素：
      a.如果数组中检测到有一个元素不满足，则整个表达式返回 *false* ，且剩余的元素不会再进行检测。     
      b.如果所有元素都满足条件，则返回 true。
    注意： every() 不会对空数组进行检测。every() 不会改变原始数组。
    语法：array.every(function(currentValue,index,arr), thisValue)
    参数：
参数描述
function(currentValue, index,arr)*必须。函数，数组中的每个元素都会执行这个函数 函数参数见下表
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"
参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
    返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false。
    检测数组 *ages* 的所有元素是否都大于等于 18 :
    var ages = [32, 33, 16, 40];

    var result = ages.every(function (age) {
          return age >= 18
    })
    console.log(result);//输出结果为:false
(2)every()方法重构
    Array.prototype.myEvery = function(fun,obj){
        for(var i=0; i<this.length; i++){
            if(!(obj?fun.bind(obj)(this[i]):fun(this[i]))){
                return false;    
            }
        }
        return true;
    }
    var arr = [1,2,3,4,5];
    var result = arr.myEvery(function(item){
        console.log(this);//指向全局
        return item>1;//短路原则
    },{name:\'zhangsan\'})//第二个对象存在时this指向这个对象
    console.log(result);

3.Array.prototype.some();

(1)some() 方法用于检测数组中的元素是否满足指定条件（函数提供）
   some() 方法会依次执行数组的每个元素：
        a.如果有一个元素满足条件，则表达式返回*true* , 剩余的元素不会再执行检测。
        b.如果没有满足条件的元素，则返回false。
    注意： some() 不会对空数组进行检测。some() 不会改变原始数组。
    语法：array.some(function(currentValue,index,arr),thisValue)
    参数：
参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数见下表
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"
参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
    返回值：布尔值。如果数组中有元素满足条件返回 true，否则返回 false。
    //检测数组中是否有元素大于 18:
    var ages = [32, 33, 16, 40];

    var result = ages.some(function (age) {
          return age >= 18
    })
    console.log(result);//输出结果为:true
(2)some()方法重构
    Array.prototype.mySome = function(fun,obj){
        for(var i=0; i<this.length; i++){
            if(obj?fun.bind(obj)(this[i]):fun(this[i])){
                return true;
            }
        }
        return false;
    }
    var arr = [1,2,3,4,5];
    var result = arr.mySome(function(item){
        console.log(this);
        return item>1;
    },{name:\'zhangsan\'});
    console.log(result);

4.Array.prototype.filter()

(1)filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
    注意： filter() 不会对空数组进行检测。 filter() 不会改变原始数组。
    语法：array.filter(function(currentValue,index,arr), thisValue)
    参数：
参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数见下表
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"
参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
    返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
    //返回数组 *ages* 中所有元素都大于 18 的元素: 
    var ages = [32, 33, 16, 40];

    var result = ages.filter(function (age) {
          return age >= 18
    })
    console.log(result);//输出结果为:[ 32, 33, 40 ]
(2)filter()方法重构
    Array.prototype.myFilter = function(fun,obj){
        var result = [];
        for(var i=0; i<this.length; i++){
            if(obj?fun.bind(obj)(this[i]):fun(this[i])){
                result.push(this[i]);
            }
        }
        return result;
    }
    var arr = [1,2,3,4,5];
    var result = arr.myFilter(function(item){
        console.log(this);
        return item>2;
    },{name:\'zhangsan\'});
    console.log(result);

5.Array.prototype.map()

(1)map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
   map() 方法按照原始数组元素顺序依次处理元素。
   注意：map() 不会对空数组进行检测。map() 不会改变原始数组。
   语法：array.map(function(currentValue,index,arr), thisValue)
   参数：
参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数见下表
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
    返回值:返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
    //返回一个数组，数组中元素为原始数组的平方根:
      var numbers = [4, 9, 16, 25];
      var result = numbers.map(function (number) {
            return Math.sqrt(number)
      })
      console.log(result);//输出结果为:[ 2, 3, 4, 5 ]
      Array.prototype.myMap = function(fun,obj){
          var result = [];
          for(var i=0; i<this.length; i++){
              result.push(obj?fun.bind(obj)(this[i]):fun(this[i]));
          }
          return result;
      }
      var arr = [1,2,3,4,5];
      var result = arr.myMap(function(item){
          console.log(this);//全局对象
          return item+1;//新数组 数组元素+1
      },{name:\'zhangsan\'})//此时this指向name
      console.log(result);

以上是关于数组方法重构与迭代的主要内容，如果未能解决你的问题，请参考以下文章

如何重构这个 Java 代码片段

代码组织与重构原则

VSCode自定义代码片段—— 数组的响应式方法

VSCode自定义代码片段10—— 数组的响应式方法

如何在UL中迭代使用appendChild和片段LI？

如何重构仅使用循环和简单数组的代码？