js操作数组的方法(史上最全---22种方法)

528 阅读5分钟

1、join()

join()  数组-->字符串。默认逗号做分隔符
var arr = ['a','b','c'];
console.log(arr.join());       //输出:a,b,c
console.log(arr.join(""));     //输出:abc
console.log(arr.join("-"));    //输出:a-b-c

2、push() pop()

push()    末尾添加元素。
pop()     末尾删除元素。
var arr1 = ['a','b','c'];
var arr2 = arr1;

console.log(arr1.push('d','e'));     //输出:['a','b','c','d','e']
console.log(arr2.pop());       //输出:['a','b']

3、unshift() shift()

unshift()   头部添加元素。
shift()       头部删除元素。
var arr = ['c','d','e'];
var arr2 = arr;

console.log(arr.unshift('a','b'));   //输出:['a','b','c','d','e']
console.log(arr.shift());      //输出:['d','e']

4、sort()

sort()  数组排序。
var arr = [10,99,25,1,1000];
console.log(arr.sort());       //输出:[1,10,1000,25,99]

5、reverse():

reverse()  颠倒数组顺序
var arr = ['a','b','c'];
console.log(arr.reverse());    //输出:['c','b','a']

6、concat()

concat()  连接两个或多个数组。
var arr1 = [1,2];
var arr2 = [3,4];
var arr3 = [5,6];

var arr4 = arr1.concat(4,5);   //arr4 = [1,2,3,4],此处concat()用于连接数组中的值
var arr5 = arr1.concat(arr2);   //arr5 = [1,2,3,4], 此处concat()连接两个数组
var arr6 = arr1.concat(arr2,arr3));   //arr6 = [1,2,3,4,5,6], 此处concat()连接多个数组

7、slice()

slice() 截取部分数组。
var arr = ['a','b','c','d','e'];
console.log(arr.slice(2));    //['c','d','e']
console.log(arr.slice(1,3));  //['b','c','d']

8、splice():

splice()  向数组中指定位置添加/删除元素。参数说明:                                                           index(必选,添加/删除的位置);                                                                                   howmany(必选,要删除的个数);                                                                                 item1, ..., itemX(可选,要添加的元素);
var arr = ['a','a','b','b','b','c','c'];
console.log(arr.splice(2,3,'d','d','d','d'));//['a','a','d','d','d','d','c','c']
                                     //向索引为2的位置删除3个元素,并同时添加4个'd'元素进去

9、indexOf() lastIndexOf()

index()               字符首次出现的位置。
lastIndexOf()     字符最后出现的位置。
var arr = ['a','b','c','d','d','c','b','a'];
console.log(arr.indexOf('c'));            //2
console.log(arr.lastIndexOf('c'));        //5
console.log(arr.indexOf('c',2));          //2,从索引为2位置开始
console.log(arr.lastIndexOf('c',4));      //2,从索引为4位置开始
console.log(arr.indexOf("e"));            //-1,表示不存在

10、forEach():

foeach()循环遍历数组。参数顺序:                                                                                      遍历的内容、索引、数组本身。
var arr = ['a','b','c'];
arr.forEach(function(item,index,arr2){
    console.log(item+'|'+index+'|'+(arr===arr2));
})
//'a'|0|true
//'b'|1|true
//'c'|2|true

11、map()

map()指“映射”,数组每一项给定相同操作。
var arr = [1,2,3];
var arr2 = arr1.map(function(item){
    return item*item;
})
console.log(arr2);//[1,4,9]

12、filter()

filter()指“过滤”,返回过滤后的新数组。
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.filter(function(value,index){
    return index%3===0||value>=8;
})
console.log(arr2);//[1,4,7,8,9,10]

13、every():

every()   数组中必须每一项满足条件,返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.every(function(x){
    return x<10;
})
var arr3 = arr.every(function(x){
    return x<3;
})
console.log(arr2+" "+arr3);//输出:true false

14、some()

every()   数组中只要有一项满足条件,返回true。
var arr = [1,2,3,4,5];
var arr2 = arr.some(function(x){
    reture x>3;
})
var arr3 = arr.some(function(x){
    return x>10;
})
console.log(arr2+" "+arr3);//true false

15、reduce() reduceRight()

reduce()和reduceRight()迭代数组,返回一个最终值。参数顺序:                                      pre:上一次回调的值或初始值;                                                                                    cur:当前被处理的值;                                                                                                  index:当前值在数组中的索引;                                                                                    array:调用reduce方法的数组。
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(pre,cur,index,array){
    return pre+cur;
},10);//初始值10
console.log(sum);//结果:25

16、Array.from()

Array.from()   类似数组的对象|可遍历的对象 --> 数组
var arr = {'0':'a','1':'b','2':'c',length:3}
var arr2 = "hello";
console.log(Array.from(arr));     //['a','b','c']
console.log(Array.from(arr2));    //['h','e','l','l','']

17、Array.of():

Array.of()   一组值 --> 数组

var arr = Array.of(1,2,3);     //[1,2,3]

18、copyWith():

copyWith()  替换数组指定位置的值。
var arr = ['a','b','c'];
console.log(arr.copyWith(0,'d'));    //['d','b','c']

19、find() findIndex()

find()               查找目标元素。                                                                                      findIndex()      查找目标元素的索引。
var arr = [1,5,10,15];
arr.find(function(elem){
    return elem>9;
})//10
arr.findIndex(function(elem){
    return value>9;
})//2

var arr2 = [
    {name:'张三',gender:'男',age:19},
    {name:'李四',gender:'女',age:20},
    {name:'王五',gender:'嬲',age:21},
]
arr2.find((elem)=>{
    elem.name==='张三'
});//返回{name:'张三',gender:'男',age:19}

20、fill()

fill()   用给定值填充数组。
var arr = ['a','b','c','d','e'];
console.log(arr.fill('d'));//['d','d','d','d','d']
console.log(arr.fill('d',1,3));//['a','d','d','d','c']

21、enries、keys、values

用for...of循环遍历数组。区别是:                                                                                       keys()是对键名的遍历;                                                                                                 values是对键值的遍历,                                                                                                 entries是对键值对的遍历。
var arr = ['a','b'];
for(let index of arr.keys()){
    console.log(index);
}
//0
//1

for(let elem of arr.values()){
    console.log(elem);
}
//'a'
//'b'

for(let [index,elem] of arr.entries()){
    console.log(index+" "+elem);
}
//0 a
//1 b

22、includes()

include()   判断数组中是否包含给定值。
var arr = ['a','b','c'];
console.log(arr.includes('a'));     //true
console.log(arr.includes('d'));     //false