JavaScript数组方法--concat、push

时间:2021-12-07 19:02:07

利用了两天的时间,使用typescript和原生js重构了一下JavaScript中数组对象的主要方法,可以移步github查看。

这里,按照MDN上的文档顺序,再重新学习一下数组方法吧。

  • concat: concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
    给出的示例是:
    var array1 = ['a', 'b', 'c'];
    var array2 = ['d', 'e', 'f'];
    
    console.log(array1.concat(array2));
    

      期望输出:["a", "b", "c", "d", "e", "f"]。这也符合我们正常的使用方式。那么还有没有特殊的地方呢?
    1、由于concat()方法返回一个新数组,那么如果不传参数,会怎样呢?

    var array1 = ['a', 'b', 'c'];
    var arr3 = array1.concat()
    console.log(array1==arr3);   // false
    

      很明显,可以实现数组的浅拷贝。
    2、如果参数不是数组呢?

    var array1 = ['a', 'b', 'c'];
    var arr3 = array1.concat("3", true, null, undefined, {key: "value"})
    console.log(arr3); 
    

      输出结果:
    JavaScript数组方法--concat、push

    把所有参数都当做数组元素拼接到array1后面,并返回一个新的数组实例。
    想到了什么?这种情况是不是与push方法很像。区别在于push是修改原数组,concat是返回新数组。
    到这里,我们是不是可以尝试重构一下concat的方法呢?

    function concat() {
      if (!(arguments[0] instanceof Array)) throw new Error("请确保第一个参数类型为数组")
      var results = []
      for (var i = 0; i < arguments.length; i++) {
        if (!(arguments[i] instanceof Array)) {
          results[results.length] = arguments[i]
          break;
        }
        for (var j = 0; j < arguments[i].length; j++) {
          results[results.length] = arguments[i][j]
        }
      }
      return results
    }
    

      稍作解释的是,没有在数组原型上重构各种方法,仅仅是封装为一个个的函数,所以函数的第一个参数,都要求是需要操作的数组。

  • push:push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
    按照顺序而言,这里不应该是push的,但是既然在谈concat的时候,提到push了,那么就先来push吧!
    惯例,先看MDN给出的示例:

    var animals = ['pigs', 'goats', 'sheep'];
    
    console.log(animals.push('cows'));
    // expected output: 4
    
    console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows"]
    
    animals.push('chickens');
    
    console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]
    

     看结果:
    JavaScript数组方法--concat、push
    很容易理解,push修改的是原数组,并返回修改后的数组长度。
    同理,我们分别测试:
    1、不传参数

    var animals = ['pigs', 'goats', 'sheep'];
    var b = animals.push()
    console.log(b );  

    输出值为3,那么3是哪里来的呢?很明显就是animals.length,突然美滋滋的,下次再获取数组长度,是不是可以装X一下!!!
    2、传递多个不同类型的参数

    var animals = [];
    animals.push(['dogs', []],"3", true, null, undefined, {key: "value"})
    console.log(animals);
    

      查看结果:
    JavaScript数组方法--concat、push
    就是说不管什么类型的参数,一个参数都将作为一个元素,插入到原数组当中。
    那就重构一下push吧!第一个参数也是需要操作的数组!

    function push(arr) {
      if (!(arr instanceof Array)) throw new Error("请确保参数类型为数组")
      for (var i = 1; i < arguments.length; i++) {
        arr[arr.length] = arguments[i]
      }
      return arr.length
    }
    

     
    剩余的方法,期待后续了!