微信扫一扫打赏支持

JS数组常用方法---2、push方法使用及原理

JS数组常用方法---2、push方法使用及原理

一、总结

一句话总结：

push方法的作用是向数组末尾添加一个或多个元素，参数是要push到数组的元素，返回值是数组新的长度，push方法会影响原数组
push方法的原理就是动态的获取传递给push方法的参数，然后依次循环遍历的加到原数组后面
push方法
作用：向数组末尾添加一个或多个元素
参数：element1, ..., elementN
返回值：数组新的长度（length）
是否影响原数组：肯定影响


//简单实现push方法
Array.prototype.push1=function () {
  //通过遍历把参数加到原数组里面去
  for (let i in arguments){
      this[this.length]=arguments[i];
      //如果this是对象的话，我们就手动的对这个对象的length属性加1
      if(Object.prototype.toString.call(this).slice(8,-1)=='Object'){
          this.length++;
      }
  }
  return this.length;
};

 

 

1、调用数组方法另外的形式（除了 arr.方法名 外）？

1、Array.prototype.push.apply(vegetables, moreVegs);
2、[].push.call(this, elem);

 

 

2、push方法的原理？

push方法的原理就是动态的获取传递给push方法的参数，然后依次循环遍历的加到原数组后面
//简单实现push方法
Array.prototype.push1=function () {
  //通过遍历把参数加到原数组里面去
  for (let i in arguments){
      this[this.length]=arguments[i];
      //如果this是对象的话，我们就手动的对这个对象的length属性加1
      if(Object.prototype.toString.call(this).slice(8,-1)=='Object'){
          this.length++;
      }
  }
  return this.length;
};

 

 

 

 

 

二、push方法使用及原理

博客对应课程的视频位置：2、push方法使用及原理
https://www.fanrenyi.com/video/25/216

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>push方法</title>
  6 </head>
  7 <body>
  8 <!--
  9 
 10 push方法
 11 作用：向数组末尾添加一个或多个元素
 12 参数：element1, ..., elementN
 13 返回值：数组新的长度（length）
 14 是否影响原数组：肯定影响
 15 
 16 
 17 调用数组方法另外的形式（除了 arr.方法名 外）
 18 1、Array.prototype.push.apply(vegetables, moreVegs);
 19 2、[].push.call(this, elem);
 20 
 21 push方法的原理
 22 push方法的原理就是动态的获取传递给push方法的参数，然后依次循环遍历的加到原数组后面
 23 
 24 
 25 -->
 26 <script>
 27     //1、push的基本使用
 28     // let arr=[1,2,3];
 29     // let new_length=arr.push(4);
 30     // //arr.push(5,6,7);
 31     // console.log(new_length);
 32     // console.log(arr);
 33 
 34     //2、合并两个数组
 35     // var vegetables = ['parsnip', 'potato'];
 36     // var moreVegs = ['celery', 'beetroot'];
 37     //
 38     // // 将第二个数组融合进第一个数组
 39     // // 相当于 vegetables.push('celery', 'beetroot');
 40     // Array.prototype.push.apply(vegetables, moreVegs);
 41     //
 42     // console.log(vegetables);
 43     // // ['parsnip', 'potato', 'celery', 'beetroot']
 44 
 45     //3、像数组一样使用对象
 46     // var obj = {
 47     //     length: 0,
 48     //
 49     //     addElem: function addElem (elem) {
 50     //         // obj.length is automatically incremented
 51     //         // every time an element is added.
 52     //         [].push.call(this, elem);
 53     //     }
 54     // };
 55     //
 56     // // Let's add some empty objects just to illustrate.
 57     // obj.addElem({});
 58     // obj.addElem({});
 59     // console.log(obj.length);
 60     // // → 2
 61     // console.log(obj);
 62 
 63     //4、简单实现push方法
 64     Array.prototype.push1=function () {
 65         //console.log(this);
 66         //console.log(arguments);
 67         //通过遍历把参数加到原数组里面去
 68         for (let i in arguments){
 69             this[this.length]=arguments[i];
 70             //如果this是对象的话，我们就手动的对这个对象的length属性加1
 71             if(Object.prototype.toString.call(this).slice(8,-1)=='Object'){
 72                 this.length++;
 73             }
 74         }
 75         //console.log(this);
 76         return this.length;
 77     };
 78     // let arr=[1,2,3];
 79     // let new_length=arr.push1(4,5,6);
 80     // //arr.push1(7);
 81     // console.log(new_length);
 82     // console.log(arr);
 83 
 84 
 85     //5、合并两个数组（使用我们自己创建的push方法）
 86     // var vegetables = ['parsnip', 'potato'];
 87     // var moreVegs = ['celery', 'beetroot'];
 88     //
 89     // // 将第二个数组融合进第一个数组
 90     // // 相当于 vegetables.push('celery', 'beetroot');
 91     // Array.prototype.push1.apply(vegetables, moreVegs);
 92     //
 93     // console.log(vegetables);
 94     // // ['parsnip', 'potato', 'celery', 'beetroot']
 95 
 96 
 97     //6、像数组一样使用对象（使用我们自己创建的push方法）
 98     // var obj = {
 99     //     length: 0,
100     //
101     //     addElem: function addElem (elem) {
102     //         // obj.length is automatically incremented
103     //         // every time an element is added.
104     //         [].push1.call(this, elem);
105     //     }
106     // };
107     //
108     // // Let's add some empty objects just to illustrate.
109     // obj.addElem({});
110     // obj.addElem({});
111     // console.log(obj.length);
112     // // → 2
113     // console.log(obj);
114 
115 </script>
116 </body>
117 </html>

 

 

 
posted @ 2020-05-04 23:00  范仁义  阅读(4220)  评论(0)  编辑  收藏  举报