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>