数组的常用方法及重构

194 阅读9分钟

数组的push、pop、unshift、shift及简单重构

1、push
var arr = [1,2,3,4];
var s = arr.push(5,6,7,8);
console.log(arr,s)
// arr = [1,2,3,4,5,6,7,8]   s = 8

push方法可以在其中添加若干个元素放到数组的尾部,返回值是新数组的长度。

利用push方法的返回值可以进行循环

var arr = [];
while(arr.push(1) < 10);
while(arr.push({}) < 10);//放入对象

若是用这种方法放入10个对象,他们之间不会拥有引用关系。

push的重构:

function push(arr) {
  for(var i = 1; i < arguments.length;i++){
      arr[arr.length] = arguments[i];
  }
  return arr.length;
}
2、pop
var arr = [1,2,3,4];
var s =arr.pop();//  arr = [1,2,3]  s = 4;

pop方法中没有任何参数,它是指删除数组尾部的一个元素,返回值为删除的元素。

利用pop方法进行循环:

var arr = [1,2,3,4];
while(arr.pop() !== 3);

可以利用pop删除到我们想让它删除到的地方。

arr.pop() 可能会出现三种 undefined;当数组为空时删除,当删除空字符串以及删除undefined返回值都会为undefined。

虽然pop方法运行速度比较慢,时间复杂度较高,但我们还是会常常用来删除数组中的一些对象。

while(arr.length > 0){
  arr[arr.length - 1] = null;
  arr.pop();
}

pop的重构:

function pop(arr){
  var ele = arr[arr.length - 1];
  if(arr.length > 0) arr.length--;
  return ele;
}
3、unshift
var arr = [1,2,3,4];
var s = arr.unshift(5,6);
// arr = [5,6,1,2,3,4] s = 6

unshift方法中可以添加若干个元素放入到数组的头部,返回值为数组的新长度。

unshift的重构:

function unshift(arr){
  var len = arguments.length - 1;
  for(var i = arr.lenght - 1;i >= 0;i--){
     arr[i+len] = arr[i];
     arr[i] = null
  }
  for(var j = 1; j < arguments.length;j++){
     arr[j -1] = arguments[j];
  }
  return arr.length
}
4、shift
var arr = [1,2,3,4]
var s = arr.shift();
// arr = [2,3,4]   s = 1;

shift方法是将数组头部的一个元素删除,并且返回这个元素,没有参数。

shift的重构:

function shift(arr){
    var ele = arr[0];
    for(var i = 1; i < arr.length;i++){
        arr[i-1] = arr[i];
    }
    return ele;
}
以上四个方法操作后原数组的引用关系不会发生改变。

数组的concat、join、splice、slice及简单重构

1、concat
var arr = [1,2,3,4];
var s = arr.concat(5,6,7,8) 
// s = [1,2,3,4,5,6,7,8]   arr = [1,2,3,4]
var t = arr.concat([5,6,7],[8,9]) // t = [1,2,3,4,5,6,7,8,9]

concat的方法会讲数组链接若干个数组或者元素,返回一个新的连接完成的数组,与原数组无引用关系。

concat的重构:

function concat(arr){
    var arr1 = [];
    for(var i = 0; i < arr.length ;i++)  arr1[i] = arr[i];
    if(arguments.length === 1) return arr1;
    for(var j = 1; j < arguments.length; j++ ){
        if(arguments[j] !== undefined && arguments[j] !== null && arguments[j].constructor === Array){
            for(var k = 0; k < arguments[j].length; k++){
                arr1[arr1.length] = arguments[j][k]
              }
            }else{
                arr1[arr.length] = arguments[j];
              }
      }   
    return arr1;
}
2、join
var arr = [1,2,3,4];
var str = arr.join("*") // 1*2*3*4

使用某个字符作为连接符,将所有数组的元素连接成为一个字符串并且返回这个字符串,如果连接符没有,默认以逗号连接。

join的重构

function join(arr,separator){
     if(separator === undefined) separator = ',';
     separator = String(separator);
     var str = '';
     for(var i = 0;i<arr.length;i++){
        if(i !== arr.length - 1) str+= arr[i] + separator;
        else str += arr[i]
     }
     return str;
}
3、splice

splice有三种用法:

1、将数组中从第几位开始删除多少个元素,并且返回被删除的元素组成的新数组

var arr = [1,2,3,4];
var arr1 = arr.splice(1,2);//从第一位开始删除两个元素
var arr2 = arr.splice(1)//从第一位开始删除到尾部
var arr3 = arr.splice(-1)//如果参数是负数,从后向前数开始删除
var arr4 = arr.splice(0)//如果没有参数 则返回一个空数组
var arr5 = arr.splice(-3,2)//从倒数第三个元素向后删除两个元素

2、将数组中从第几位开始删除多少个元素后,并且在该位置插入新的若干元素,返回删除元素组成的新数组。

var arr = [1,2,3,4];
var arr1 = arr.splice(1,2,5,6)//从第一位开始向后删除两个元素,并在该位置插入5,6替换,返回被删除的两个元素组成的新数组

3、在数组的第几位开始插入若干个元素,并且返回空的新数组。

var arr = [1,2,3,4];
var arr1 = arr.splice(1,0,5,6)//从第一位插入元素5,6。返回空数组。

splice的重构

function splice(arr,start,count){
   start = start || 0;
   arr1= [];
   arr2 = [];
  for(var i = 3;i < arguments.length;i++)arr1[arr1.length] =arguments[i]               
                    start = start < 0 ? (start + arr.legth < 0 ? 0 : start + arr.length) : (start > arr.length ? arr.length : start);
                    count = count > (arr.length - start) ? (arr.length - start) : count;
                    for(var j = start; j < (count+start); j++) arr2.push(arr[j]);
                    for(var k = start + count; k < arr.length; k++ )  arr[k - count] = arr[k];
                    arr.length = arr.length - count;
                    for(var n = arr1.length - 1; n>=0; n--){
                        for(var m = arr.length; m > start; m--) arr[m] = arr[m-1];
                        arr[start] = arr1[n];
                    } 
                    return arr2;   
                }
4、slice

slice是将数组从第几项开始到第几项结束复制在这些元素到新数组中,原数组不改变,返回新数组。

var arr = [1,2,3,4];
var arr1 = arr.slice(1,2)//复制从第一项到第二项,不包括结束这一项。
var arr2 = arr.slice(0) //复制数组
var arr3 = arr.slice(-2) // 从后向前数第二个元素到尾部所有元素复制

slice的重构

function slice(arr,start,end){
                    var arr1 = [];
                    start = start || 0;
                    end = end || arr.length;
                    if(start < 0) start += arr.length;
                    if(start < 0) start = 0;
                    if(end < 0) end += arr.length;
                    if(end > arr.length) end = arr.length;
                    for(var i = start; i < end;i++) arr1[arr1.length] = arr[i];
                    return arr1;
                }function slice(arr,start,end)

数组中的forEach和map

1、forEach

遍历数组,可以获取使用元素和下标,自动过滤空元素,空元素不遍历。

var arr = [1,2,3,4]
arr.forEach(function(item,index,arr){})

对比for in来说,不会遍历到数组的属性,对比for来说不会遍历到空元素;但是他有缺陷,会改变函数的this指向。

forEach重构:

function forEach(arr,fn){
    for(var i =0;i < arr.length;i++){
       if(i in arr) fn(arr[i],i,arr)
    }
}
2、map

遍历数组,并且使用return返回元素,这些被返回的元素会被放在一个新数组中,新数组的长度和元素组的相同。

var arr = [1,2,3,4,5]
var arr1 = arr.map(function(item,index,arr){
   return item + 10;
})

map的重构

function map(arr,fn){
     var arr1 = {};
     for(var i = 0; i< arr.length; i++){
         if( i in arr) arr1[i] = fn(arr[i],i,arr)
     }
     return arr1;
}

数组中indexOf和lastindexOf以及fill

1、indexOf

在数组中查找元素,并且返回这个元素的下标,如果没有找到则返回 -1.

var arr = [1,2,3,4,5];
arr.indexOf(5)

indexOf方法有两个参数,第一个参数为需要查找的元素,第二参数为从第几个下标值开始搜索。

var arr = [1,2,3,4,3,5]
arr.indexOf(3,4)//从下标值为4的数开始查找3这个元素

indexOf的简单重构

function indexOf(arr,search,index){
  if(index === undefined) index = 0;
  for(var i =index;i<arr.length;i++){
      if(arr[i] = search) return i;
  }
  return -1;
}
2、lastindexOf

和indexOf作用相同,参数也和indexOf相同,也是查找元素并返回这个元素的下标,没找到时返回 -1.

但是indexOf是从前向后依次寻找,lastindexOf是从后往前依次寻找。

var arr = [1,2,3,4];
arr.lastindexOf(3)
3、fill

fill用于数组的填充,他有三个参数,第一个参数为要填充的值,第二个参数为从什么时候开始,第三个参数为从什么时候结束。

fill只能用于有长度的数组,如果不给开始位置和结束为止,就会全部填满。

var arr = [1,2,3,4];
arr.fill(5) 

如果用这种方式填充对象,就会造成填充同一个引用地址的对象。

var arr = Array(6).fill({a:1})//同一个引用地址的对象

数组中的reserve和sort

1、reserve

当前数组按照倒装顺序将原数组颠倒,并且返回原数组。

var arr = [1,2,3,4];
var arr1 = arr.reverse();

reserve的重构:

function reverse(arr){
   var len = parseInt(arr.length/2);
   for(var i = 0; i < len; i++){
       var temp = arr[i];
       arr[i] = arr[arr.length - 1 - i;]
       arr[arr.length - i -1] = temp;
   }
   return arr;
}
2、sort

直接在原数组上进行排序

sort的用法:他可以对这个数组中的元素进行排序,元素可以是数字也可以是字符串或者对象。

var arr = [1,5,6,4,2,7,9,55,99,56,42];
arr.sort(function(a,b){
   return a - b;
})//从小到大进行排序
arr.sort(function(a,b){
   return b - a;
})//从大到小进行排序

sort方法简单模拟(冒泡排序)

function sort(arr) {
   var len = arr.length - 1;
   while(len > 0){
     for(var i = 0; i < arr.length - 1; i++){
       if(arr[i] > arr[i+1]){
          var temp = arr[i];
          arr[i] = arr[i+1];
          arr[i+1] = temp;
       }
     }
     len -- ;
   }
}

数组中的some、every、filter、reduce

1、some

遍历数组,判断数组中是否有满足的条件的,如果有直接跳出返回true,否则返回false。

var arr = [1,2,3,4,5];
var bool = arr.some(function(item,index,arr){
    return item > 4
})

some的重构

function some(arr,fn){
  for(var i = 0; i< arr.length; i++){
     if(i in arry && fn(arr[i],i,arr)) return true;
  }
  return false;
}
2、every

遍历数组,并且判断每个元素是否满足条件,如果不满足直接跳出返回false,否则返回true。

var arr = [1,2,3,4]
var bool = arr.every(function(item,index,arr){
    return item > 0;
})

every的重构

function every(arr,fn){
  for(var i = 0; i < arr.length; i++){
    if(i in arr &&  !fn(arr[i],i,arr)) return false;
  }
  return true;
}
3、filter

filter会将满足条件的元素放在一个新数组中,并返回这个新数组。

var arr = [1,2,3,4,5,6];
var arr1 = arr.filter(function(item){
   return item > 4;
})//将arr中大于4的元素放入到新数组中并用arr1来接受

filter的重构

function filter(arr,fn){
  var arr1 = [];
  if(arr.length === 0) return arr1; 
  for(var i = 0; i < arr.length; i++){
      if(fn(arr[i],i,arr)) arr1.push(arr[i]);
  }
  return arr1;
}
4、reduce

reduce方法中有三个参数,第一个为回调的函数,第二个值为value的初始值。

reduce方法最后会返回一个value,这个值可以是很多东西比如对象,数字,数组。

若value没有初始值,则它就是数组的第0个元素,而后面的item则会从下标为1开始遍历,第二次遍历运行时,value将会是上次函数运行的返回值。

当数组的每个元素遍历完成后将最后一次的返回值返回到外面的变量。

var arr = [1,2,3,4,5];
var s = arr.reduce(function(value,item){
     return value+= item;
})

reduce的重构

function reduce(arr,fn,initValue){
    var index = 0;
    if(initValue === undefined){
        initValue = arr[index];
        index = 1;
    }
    for(;index < arr.length;index++){
        initValue = fn(initValue,arr[index],index,arr);
    }
    return initValue;
}

注:上述所有重构方法只是为了更好的去了解数组中的方法,有些代码会存在一些BUG。