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>