JavaScript数组相关的方法（超全）

爱笑_
130 阅读5分钟

数组方法

改变原数组的方法

push,pop,shift,unshift,sort,reverse,splice

  • push() 在数组末尾添加数字
var arr = [5,3,6,2,4,7,8,10];
arr.push(2);
console.log(arr);//[5,3,6,2,4,7,8,10,2]
  • pop() 剪切数组最后一位数 不管括号中传入的参数是多少,都会 剪切最后一位
var arr = [5,3,6,2,4,7,8,10];
arr.pop();
console.log(arr);// [5, 3, 6, 2, 4, 7, 8]
  • unshift() 在数组的首位加入数字
var arr = [5,3,6,2,4,7,8,10];
arr.unshift(0);
console.log(arr);// [0, 5, 3, 6, 2, 4, 7, 8, 10]
  • shift() 删除数组首位的数字
var arr = [5,3,6,2,4,7,8,10];
arr.shift(0);
console.log(arr);// [3, 6, 2, 4, 7, 8, 10]
  • reverse() 逆转数组顺序
var arr = [5,3,6,2,4,7,8,10];
arr.reverse();
console.log(arr);//[10, 8, 7, 4, 2, 6, 3, 5]
  • splice(1,2,9) 从索引为1开始截取长度为2的切片,然后在接口处添 加新的数据9
var arr = [5,3,6,2,4,7,8,10];
arr.splice(1,2,9);
console.log(arr);//[5,9,2,4,7,8,10]
  • sort() 把无序数组有序排列(按照ASSIC码排列)
var arr = [5,3,6,2,4,7,8,10];
arr.sort();
console.log(arr);//[10, 2, 3, 4, 5, 6, 7, 8]

是不是非常疑惑明明是数组有序排列，那为什么10排在最前面？因为数组元素比较的是第一位，例如8和10比较实际上是8和1在比较，1的ASSIC编码小自然就在前面。

var arr = [5,3,6,2,4,7,8,10];
arr.sort().reverse();//把无序数组降序排列
console.log(arr);//[8, 7, 6, 5, 4, 3, 2, 10]

是不是非常疑惑明明是数组降序排列，那为什么10排在最后面？因为数组元素比较的是第一位，例如8和10比较实际上是8和1在比较。

不可改变原数组的方法

concat,join->split,toString,slice

var arr1 = [2,3,4,5,6,7];
var arr2 = [5,6,7,9,2];
  • arr1.concat(arr2) 把数组arr2拼接在数组arr1的后面
arr1.concat(arr2);
console.log(arr1.concat(arr2));// [2, 3, 4, 5, 6, 7, 5, 6, 7, 9, 2]
  • toString() 把数组转换成字符串
var arr1 = [2,3,4,5,6,7];
console.log(arr1.toString());//2,3,4,5,6,7
  • arr1.slice(1,3) 从数组下标为1的位截取到数组下标为3的位 即[1,3),包含第一位，不包含第三位，返回截取的数组。
var arr1 = [2,3,4,5,6,7];
console.log(arr1.slice(1,3));//[3, 4]
​
var arr = [1,4,6,8,12];
​
var arrCopy1 = arr.slice(1);    
console.log(arrCopy1);  // [4, 6, 8, 12]
​
var arrCopy2 = arr.slice(0,4);  
console.log(arrCopy2);  // [1, 4, 6, 8] 
​
var arrCopy3 = arr.slice(1,-2);
console.log(arrCopy3);  // [4, 6] 
​
var arrCopy4 = arr.slice(-5,4);
console.log(arrCopy4);  // [1, 4, 6, 8]
​
var arrCopy5 = arr.slice(-4,-1)
console.log(arrCopy5);  // [4, 6, 8]
console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变)
  • arr1.join('~') 把数组之间的元素用~进行连接
var arr1 = [2,3,4,5,6,7];
console.log(arr1.join('~'));//2~3~4~5~6~7
  • str.split('~') 把字符串str根据'~' 拆分成数组 join与split互逆
var arr1 = [2,3,4,5,6,7];
var str = arr1.join('~');
str.split('~');//[2,3,4,5,6,7]

5个迭代方法

forEach()、map()、filter()、some()、every()

forEach()

  • forEach()对数组进行遍历循环，这个方法没有返回值。
Array.forEach(function(currentValue,index,arr){
    //do Something
},thisValue)
元素含义
currentValue必选，当前元素
index可选，当前元素索引
arr可选，当前元素的数组对象
thisValue可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会赋值给this
<script>
    var Arr = [1,4,7,10];
    Arr.forEach(function(currentValue, index, arr){
        console.log(index+"--"+currentValue+"--"+(arr === Arr));        
    })
    // 输出：
    // 0--1--true
    // 1--4--true
    // 2--7--true
    // 3--10--true  
</script>

map()

  • map()指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
Array.map(function(currentValue,index,arr){
    //do Something
},thisValue)

map方法实现数组中每个数求平方：

<script>
    var arr = [1,4,8,10];
    var arr2 = arr.map(function(currentValue){
        return currentValue*currentValue;
    });
    console.log(arr2);  // [1, 16, 64, 100]
</script>

filter()

  • filter() “过滤”功能，方法创建一个新数组, 筛选出符合条件的元素放到新数组里面
Array.filter(function(currentValue,index,arr){
    //do Something
},thisValue)

filter方法实现筛选排除掉所有小于5的元素：

<script>
    var arr = [1,4,6,8,10];
    var result1 = arr.filter(function(currentValue){
        return currentValue>5;
    });
    console.log(result1);  // [6, 8, 10]
    var result2 = arr.filter(function(currentValue){
        return currentValue>"5";
    });
    console.log(result2);  // [6, 8, 10]
</script>

map()函数支持弱等于（==），而并非全等于（===）。

every()

  • every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
Array.every(function(currentValue,index,arr){
    //do Something
},thisValue)

var arr = [1,3,5,6,7,9];
var result1 = arr.every(function(currentValue){
    return currentValue < 12;
});
console.log(result1);   //true
​
var result2 = arr.every(function(currentValue){
    return currentValue > 2;
});
console.log(result2);   //false

some()

  • some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就可返回true。
Array.every(function(currentValue,index,arr){
    //do Something
},thisValue)

var arr = [1,3,5,6,7,9];
var result1 = arr.some(function(currentValue){
    return currentValue < 4;
});
console.log(result1);   //true
​
var result2 = arr.every(function(currentValue){
    return currentValue > 10;
});
console.log(result2);   //false

2个归并方法

reduce()和reduceRight()

reduce()和reduceRight() 累加器和反向累加器，它们接收两个参数，第一个参数是每一项调用的函数（函参分别为：初始值、当前值、索引值、当前数组），函数需要返回一个值作为下一次迭代的初始值。第二个参数是迭代初始值（此参数可选），如果此参数缺省，那么迭代的次数将会减少一次，初始值为数组的第一项。

reduce() 从数组的第一项开始逐个遍历到最后。

reduceRight() 从最后一项逐个遍历到第一项。

语法：

Arr.reduce(function(total,cur,index,arr){
    //do something
},initialValue)
​
Arr.reduceRight(function(total,cur,index,arr){
    //do something
},initialValue)
参数含义
total必选，初始值或计算结束后的返回值
cur必选，当前元素
index可选，当前元素索引
arr可选，当前元素所属的数组对象
initialValue可选，传递给函数的初始值

例：实现数组求和

var arr = [1,2,3,4,5];
var result1 = arr.reduce(function(total,cur,index,arr){
    console.log("total:"+total+",cur:"+cur+",index:"+index);
    return total+cur;
});
console.log("结果："+result1);
    // 输出
    // total:1,cur:2,index:1
    // total:3,cur:3,index:2
    // total:6,cur:4,index:3
    // total:10,cur:5,index:4
    // 结果：15
​
var result2 = arr.reduce(function(total,cur,index,arr){ 
    console.log("total:"+total+",cur:"+cur+",index:"+index);
    return total+cur;
},10);
    console.log("结果："+result2);
    // 输出
    // total:10,cur:1,index:0
    // total:11,cur:2,index:1
    // total:13,cur:3,index:2
    // total:16,cur:4,index:3
    // total:20,cur:5,index:4
    // 结果：25
​

2个索引方法

indexOf()和lastIndexOf()

indexOf()查找项在数组中首次出现的位置并返回其索引值，若没找到则返回-1。

indexOf() 从数组的开头（索引位0）向后查找

lastindexOf() 从数组的末尾（索引位length-1）向前查找

indexOf(item,start)、lastindexOf(item,start)

参数含义
item必须，查找的元素。
start可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]或者array[length-1]开始检索。
var arr = [1,4,7,10,7,18,7,26];
console.log(arr.indexOf(7));        // 2
console.log(arr.lastIndexOf(7));    // 6
console.log(arr.indexOf(7,4));      // 4
console.log(arr.lastIndexOf(7,2));  // 2
console.log(arr.indexOf(5));        // -1
avatar
文章
阅读
粉丝