js中数组常用方法的简单重构(部分)，帮助你加快理解数组中常用方法
Lawice 人气:0
## `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
}
```
加载全部内容