js中数组常用方法的简单重构(部分),帮助你加快理解数组中常用方法

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

js中数组常用方法的简单重构(部分),帮助你加快理解数组中常用方法

Lawice   2020-03-29 我要评论
## `push` 将指定数字插入到数组的末尾,返回值为`新数组的长度` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; ary.length = 5; ary.push(1) ; ary = [1,2,3,4,5,1]; ary.length = 6; //方法重构: Array.prototype.myPush = function () { for (i = 0; i < arguments.length; i++) { this[this.length] = arguments[i]; } return this.length } ``` ## `pop` 将数组最后的元素删除,返回值为`删除掉的元素` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var num = ary.pop(); console.log(num); == 5 //方法重构: Array.prototype.myPop = function () { var num = this[this.length - 1]; this.length-- return num } ``` ## `unshift` 将指定的数字插入到元素的前面,返回值为`新数组的长度` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; ary.length = 5; ary.unshift(1) ; ary = [1,1,2,3,4,5]; ary.length = 6; //方法重构: Array.prototype.myUnshift = function () { var len = this.length; //用一个变量存储原来的数组的长度 this.length += arguments.length; //传入进来几个参数,数组的长度就增加传入进来的参数的长度 for (var i = 0; i < arguments.length; i++) { /* 整体需要进行几轮的循环,循环的轮数应该与传入进来的实参长度相等,因为第一轮的时候只是将数组整体往后面移了一个位置,想要前面能够有足够实参插入的长度,那么循环的轮数就是由实参的长度所确定的*/ for (var j = len; j > 0; j--) { /* 因为往前面插入,所以将数组的中原来的值往后移动,并且从最后一位开始移动才能使数组中的元素不被覆盖 */ this[j] = this[j - 1]; /* 让后面为空的元素等于前面的值,将数组的值依次往后移动 */ } len++; /* 内部循环完毕后,此时的原数组的最后一位已经往后移动了一位,如果还需要将数组往后继续进行移动的话,那么就应该从原数组的最后一位继续往后移动,所以此时的len就应该加一。如果不进行加一操作的话,会把后面的元素覆盖掉,并且整个数组将不会再往后移动,后面都是空元素 */ } return this.length } ``` ## `shift` 将数组的第一个元素删除并返回,返回值为`被删除的元素` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var num = ary.shift(); console.log(num); === 1 //方法重构: Array.prototype.myShift = function () { var num = this[0]; var len = this.length; for (var i = 0; i < len; i++) { this[i] = this[i + 1]; } this.length--; return num } ``` ## `concat` 将数组进行拼接,返回值是`拼接后的数组`(传入的参数中有数组,并且其中存在空元素,`空元素也会进行拼接`) ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var ary1 = ary.concat([1, 2, 3, , 4], {a:1}) console.log(ary1) === [1, 2, 3, 4, 5, 1, 2, 3, , 4, {a:1}] //方法重构: Array.prototype.myConcat = function () { var ary = this; for (var i = 0; i < arguments.length; i++) { if (arguments[i].constructor === Array) { for (var j = 0; j < arguments[i].length; j++) { ary[ary.length] = arguments[i][j]; } } else { ary[ary.length] = arguments[i]; } } return ary } ``` ## `join` 将数组用传入的参数进行拼接,返回值为`拼接后的字符串`(不传入参数,默认为`""`) ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var str = ary.join(); console.log(str) === "1,2,3,4,5" //方法重构: Array.prototype.myJoin = function () { var str = ""; if (arguments[0] === "" || arguments[0] === undefined) { for (i = 0; i < this.length - 1; i++) { str += this[i] + ","; } } else { for (i = 0; i < this.length - 1; i++) { str += this[i] + arguments[0]; } } str += this[this.length - 1]; return str } ``` ## `some` 第一个传入的参数为一个函数,该函数有三个参数,分别为`item、index、ary`,将该函数执行,返回执行结果,如果`结果中有一个true结束运行`,`没有true将一直查找`下去。返回值为`布尔值` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var bool = ary.some(function(item,index,ary){ return item > 4; })// true //方法重构: Array.prototype.mySome = function () { for (var i = 0; i < this.length; i++) { var bool = arguments[0](this[i], i, this); if (bool) return true; } return false; } ``` ## `every` 第一个传入的参数为一个函数,该函数有三个参数,分别为`item、index、ary`,将该函数执行,返回执行结果,如果`结果中有一个false结束运行`,`没有false将一直查找`下去。返回值为`布尔值` ```javascript //原方法示例 var ary = [1, 2, 3, 4, 5]; var bool = ary.every(function(item,index,ary){ return item > 1; })// false //方法重构 Array.prototype.myEvery = function () { for (var i = 0; i < this.length; i++) { var bool = arguments[0](this[i], i, this); if (!bool) return false; } return true; } ``` ## `slice` 可传入两个参数,第一个参数代表这`起始下标位置`,第二个参数选填,代表到这个`数字下标前结束`. 不传参数,`默认截取到末尾,参数也可为负数`. 返回值`截取的数组成的数组,原数组不变` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; ary.slice() ===> [1, 2, 3, 4, 5]; ary.slice(1,3) ===> [2, 3] ary.slice(-3,-1) ===> [3, 4] //方法重构: Array.prototype.mySlice = function () { /* 分为两种情况: 1、当arguments[1]为0时,或者为undefined时,此时有以下情况: 1、如果此时的arguments[1]是undefined时有以下情况: 1、当arguments[0]大于等于0时,从arguments位下标开始往后截取 2、当arguments[0]为undefined时,复制一份原数组 3、其他情况都返回空数组 2、当arguments[1]为true时,有以下情况: 1、正常情况下,当arguments[0]小于等于arguments[1]时,有以下情况 1、两个参数都是大于0的情况下(arguments[0]可等于0),从arguments[0]位下标开始复制到arguments[1]位下标前一位结束 2、两个参数都小于0时,此时的开始位置(arguments[0])和结束位置(arguments[1])应该都加上数组的长度 2、除去上面的情况,都为非正常情况,所以都返回空数组 */ var ary = []; if (arguments[1] > this.length) arguments[1] = this.length; //判断传入的第二个参数是否超出数组的长度,如果超出,则让它默认为数组的长度 if (!arguments[1]) { //当argumens为0或者不传时 if (typeof arguments[1] === 'undefined') { //判断当argumens[1]是否为undefined,如果是,进入此语句 if (arguments[0] >= 0) { //当argumens[0] for (var i = arguments[0]; i < this.length; i++) { ary[ary.length] = this[i]; } return ary } else if (typeof arguments[0] === 'undefined') { for (var j = 0; j < this.length; j++) { ary[ary.length] = this[i]; } return ary } } else return ary //除去上述情况都为非正常情况,返回空数组 } else { //否则当argument[1]>0时进入此语句 if (arguments[0] <= arguments[1]) { //正常情况下开始位置总会小于等于结束位置 if (arguments[0] >= 0 && arguments[1] > 0) { //第一种情况:两个都大于0时(arguments[0]可以等于0) for (var k = arguments[0]; k < arguments[1]; k++) { //直接复制 ary[ary.length] = this[k]; } return ary } else if (arguments[0] < 0 && arguments[1] < 0) { //第二种情况:两个都小于0时 for (var n = arguments[0] + this.length; n < arguments[1] + this.length; n++) { //首先需要将两个负的参数都加上数组的长度变为正 ary[ary.length] = this[n]; } return ary } else return ary //除去上述情况都为非正常情况,返回空数组 } else return ary //除去上述情况都为非正常情况,返回空数组 } } ``` ## `forEach` 将数组中的每一项进行遍历,`不遍历空元素`,`无返回值` ```javascript Array.prototype.myForEach = function () { var len = this.length-1; for (var item in this) { if (len === 0) break; arguments[0](this[item],item,this); len--; } } ``` ## `map` 将数组中的每一项进行遍历,返回一个`与原数组长度相同的数组` ```javascript // 原方法示例: var ary = [1, 2, 3, 4, 5]; ary.map(function(item,index,ary){ return item * 2 }) === [2,4,6,8,10] // 方法重构: Array.prototype.myMap = function () { var ary = []; ary.length = this.length; var len = ary.length-1; for (var item in this) { if (len === 0) break; ary[item] = arguments[0](this[item],item.this); len--; } return ary } ``` ## `filter` 第一个传入的参数为一个函数,函数中可传入三个参数,分别为`item、index、ary`,返回值是`一个由所有满足条件的元素所组成的数组` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; ary.filter(function(item,index,ary){ return item > 2 }) === [3,4,5] //方法重构: Array.prototype.myFilter = function () { var ary = []; for (var i = 0; i < this.length; i++) { var bool = arguments[0](this[i], i, this); if (bool) { ary[ary.length] = this[i]; } } return ary } ``` ## `reduce` 第一个传入的参数为一个函数,函数中可传入四个参数,分别为`value、item、index、ary`,返回`计算后第一个参数的值`,返回值为`一个值` 如果有传入第二个参数,那么`第一个参数的第一个参数的默认值就为它`,并且`第一个参数的第二个参数从数组的第0位起始`; 否则,未传入,那么`第一个参数的第一个参数就时数组的第0位`,并且`第一个参数的第二个参数从数组的第1位起始` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var num = ary.reduce(function(value,item,index,ary){ return value + item; }) console.log(num) === 15 //方法重构: Array.prototype.myReduce = function () { var initValue; var i = 0; if (arguments[1] || arguments[1] === 0) { initValue = arguments[1]; } else { initValue = this[0]; i++; } while (i < this.length) { initValue = arguments[0](initValue, this[i], i, this); i++; } return initValue; } ``` ## `reduceRight` 第一个传入的参数为一个函数,函数中可传入四个参数,分别为`value、item、index、ary`,返回`计算后第一个参数的值`,返回值为`一个值` 如果有传入第二个参数,那么`第一个参数的第一个参数的默认值就为它`,并且`第一个参数的第二个参数从数组的第length-1位起始`; 否则,未传入,那么`第一个参数的第一个参数就时数组的第length-1位`,并且`第一个参数的第二个参数从数组的第length-2位起始` ```javascript //原方法示例: var ary = [1, 2, 3, 4, 5]; var num = ary.reduceRight(function(value,item,index,ary){ return value + item; }) console.log(num) === 15 //方法重构: Array.prototype.myReduceRight = function () { var initValue; var i = this.length - 1; if (arguments[1] || arguments[1] === 0) { initValue = arguments[1]; } else { initValue = this[this.length - 1]; i--; } while (i >= 0) { initValue = arguments[0](initValue, this[i], i, this); i-- } return initValue } ```

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们