Array对象的方法实现（1）----Array.prototype.push和Array.prototype.concat（实现常规参数的功能）...-白红宇

Array对象的方法实现（1）----Array.prototype.push和Array.prototype.concat（实现常规参数的功能）...

阅读量：5049 次

发布时间：2019-06-12

本文共 5854 字，大约阅读时间需要 19 分钟。

1，Array对象的push方法

push 用于向数组的末尾添加一个或多个元素，并返回新的长度;改变原数组的长度，将新的值添加在数组的尾部

语法：array.push(item1, item2, ..., itemX);

注意：1，该方法的返回值是改变后的数组长度。2，原数组会改变。

Array.prototype._push = function(item){    //获取链接数组的参数param，同时用JSON可以深度拷贝数组    let param = arguments, new_arr = JSON.parse(JSON.stringify(this)),len = new_arr.length;    for(var i = 0;i < param.length; i++){	this[i + len] = param[i];    }    return this.length;}var pushArr = [1,2,3,4],pushArr0 = [1,2,3,4];console.log(pushArr.push(8,9,10));console.log(pushArr);console.log(pushArr0._push(8,9,10));console.log(pushArr0);

输出都是改变后的数组长度7和改变后的数组[1,2,3,4,8,9,10]

_push方法需要注意的是：

（1，在当前数组添加元素的位置，是从this.length开始

（2，最后返回的是数组改变后的长度

（3，len必须放在循环外，如果放在循环内部，就会导致每次this.length是改变后的值（特别注意）

2，Array对象的concat方法

concat 用于链接两个或多个数组，不改变原数组，返回一个新的数组

语法：array.concat(arr2,arr3,...,arrX);

注意：1，返回一个新的数组。2，不改变原来的数组

Array.prototype._concat = function(arr){    //获取链接数组的参数param，同时用JSON可以深度拷贝数组    let param = arguments, new_arr = JSON.parse(JSON.stringify(this));				    for(let i = 0; i < param.length; i++){//遍历传入参数（数组）的个数	for(let k = 0; k < param[i].length; k++){//遍历当前参数（数组）的每一个值，同时将值放入新建数组	    new_arr._push(param[i][k]);        }    }    return new_arr;//返回新建数组（多个数组链接完后的数组）}

var hege = ["Cecilie", "Lone"];var stale = ["Emil", "Tobias", "Linus"];var kai = ["Robin"];var kai2 = ["Robin2"];console.log(hege.concat(stale,kai));console.log(hege);console.log(hege._concat(stale,kai,kai2));console.log(hege);

arr.concat输出结果：

["Cecilie", "Lone","Emil", "Tobias", "Linus","Robin"]["Cecilie", "Lone"]

arr._concat输出结果：

["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Robin2"]["Cecilie", "Lone"]

_concat方法需要注意的是：

（1，因为不改变元素组，所以需要用一个新的数组来接受

（2，先遍历传入的参数个数，再遍历每个参数

（3，返回的是新创建的数组

3，Array对象的copyWithin方法

copyWithin 用于从数组的指定位置拷贝元素到数组的另一个指定位置中

语法：array.copyWithin(target, start, end);

注意：1，返回一个数组。2，原数组改变

Array.prototype._copyWithin = function(target, start, end){    //获取链接数组的参数param，同时用JSON可以深度拷贝数组    let param = arguments, new_arr = arr = JSON.parse(JSON.stringify(this));				    if(param.length >= 2){	for(let i = 0; i < new_arr.length; i++){	    if(param[2]){	        if(i >= param[0] && i < param[0] + (param[2] - param[1])){		    this[i] = arr[param[1]];		    param[1]++;	        }	    }else{		if(i >= param[0] && i < this.length){		    this[i] = arr[param[1]];		    param[1]++;		}	    }							}    }    return this;}			var copyArr = [1,2];var copyArr0 = [1,2];console.log(copyArr.copyWithin(1,0));console.log(copyArr);console.log(copyArr0._copyWithin(1,0));console.log(copyArr0);

arr.copyWithin和arr._copyWithin输出：

[1, 1][1, 1][1, 1][1, 1]

_copyWithin方法需要注意的是：

（1，判断传入参数的个数，如果是3，也就是param[2]有效

（2，判断开始复制的起始位置

（3，改变的是数组本身

修改后的_copyWithin方法：

Array.prototype._copyWithin0 = function(target, start, end){	//获取链接数组的参数param，同时用JSON可以深度拷贝数组Array	let param = arguments, new_arr = arr = JSON.parse(JSON.stringify(this)),len = this.length;		if(param.length >= 2 && (this[param[1]] || this[param[1]] === 0 || this[param[1]] === false)){		if(param[2] || param[2] === 0 || param[2] === false){			for(var i = param[0];i < param[0] + param[2] - param[1];i++){				this[i] = arr[param[1]++];			}		}else{			for(var i = param[0];i < len - param[0] - 1;i++){				this[i] = arr[param[1]++];			}		}	}	return this;}

注意：

（1，添加this[param[1]]有效，同时 this[param[1]] === 0和this[param[1]] === false的判断

（2，添加param[2] === 0和param[2] === false的判断

（3，将遍历放到判断内部，减少遍历的次数

这个方法的判断还有很多不足，如果有发现的大神，请指正一下，谢谢！

有点误人子弟，_push和_concat方法，我测过了，逻辑没问题。

Mozilla：

Array.prototype.copyWithin = function(target, start/*, end*/) {    // Steps 1-2.    if (this == null) {      throw new TypeError('this is null or not defined');    }    var O = Object(this);    // Steps 3-5.    var len = O.length >>> 0;    // Steps 6-8.    var relativeTarget = target >> 0;    var to = relativeTarget < 0 ?      Math.max(len + relativeTarget, 0) :      Math.min(relativeTarget, len);    // Steps 9-11.    var relativeStart = start >> 0;    var from = relativeStart < 0 ?      Math.max(len + relativeStart, 0) :      Math.min(relativeStart, len);    // Steps 12-14.    var end = arguments[2];    var relativeEnd = end === undefined ? len : end >> 0;    var final = relativeEnd < 0 ?      Math.max(len + relativeEnd, 0) :      Math.min(relativeEnd, len);    // Step 15.    var count = Math.min(final - from, len - to);    // Steps 16-17.    var direction = 1;    if (from < to && to < (from + count)) {      direction = -1;      from += count - 1;      to += count - 1;    }    // Step 18.    while (count > 0) {      if (from in O) {        O[to] = O[from];      } else {        delete O[to];      }      from += direction;      to += direction;      count--;    }    // Step 19.    return O;  };

step1-2：判断this是否为空，如果为空，抛出错误，同时用object方法返回this对象

step3-5：对length取整

step6-8：获取relativeTarget，同时通过判断relativeTarget来获取to的值

step9-11：获取relativeStart，同时通过判断relativeStart来获取from的值

step12-14：获取relativeEnd，同时通过判断relativeEnd来获取final的值

step15：获取需要拷贝的个数count

step16-17：定义遍历参数从下向上direction = 1，如果从上向下遍历（direction = -1同时将to和from重新赋值从数组的最后一位开始）

step18：while循环count>0，进行循环。如果from存在则拷贝，如果不存在就删除，count--,同时对to和from处理

step19：返回O对象

通过上边代码，我发现我写的代码太嫩了，考虑的太不全面了，不过先写着，慢慢学习，我相信多年过后来看自己的代码，总会看到进步。太难了，基本的都考虑不全面！！！