js数组方法整理

常用的数组方法

Array.push()    //向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。
Array.pop()     //删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。
Array.unshift()     //向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。
Array.shift()       //删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。
Array.concat(arr1,arr2...)  //合并两个或多个数组，生成一个新的数组。原数组不变。
Array.join()        //将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
Array.reverse()     //将数组倒序。原数组改变。
Array.sort(func)        //对数组元素进行排序。按照字符串UniCode码排序，原数组改变。
Array.slice(start,end)  //从start开始，end之前结束，不到end；如果不给end值，从start开始到数组结束。start可以给负值，-1表示数组最后位置，-2表示倒数第二个，以此类推，顾前不顾后。
Array.splice(index,howmany,arr1,arr2...)      //删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2...数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。
Array.forEach(func)     //用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。
Array.map(func)     //原数组的每一项执行函数后，返回一个新的数组。原数组不变。(原数组里为对象，直接操作数组本身，是会改变数组的)
Array.find(func)      //find 返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。
Array.findIndex(func)      //findIndex 方法的用法与 find 方法很类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。可识别 NaN 
Array.filter(func)      //过滤数组，返回一个满足要求的数组 
Array.every(func)       //对数组中的每一项进行判断，若都符合则返回true，否则返回false。
Array.some(func)        //对数组中的每一项进行判断，若都不符合则返回false，否则返回true。
Array.reduce(func)  //reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
Array.from()        //快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。只要一个对象有length，Array.from就能把它变成一个数组，返回新的数组，而不改变原对象。
Array.fill()        //使用给定值，填充一个数组。
Array.includes()    //方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。可识别 NaN 

新旧方法对比

sort排序 reverse数组倒序

var arr = [1,3,5,4,1,2,3,6,7]
//从小到大
arr.sort((a,b) => a-b);
console.log(arr)     //[1, 1, 2, 3, 3, 4, 5, 6, 7]
//从大到小
arr.sort((a,b) => b-a);
console.log(arr)     //[7, 6, 5, 4, 3, 3, 2, 1, 1]
//倒序
var arr = [1,3,5,4,1,2,3,6,7]
arr.reverse();
console.log(arr)     //[7, 6, 3, 2, 1, 4, 5, 3, 1]

forEach和map

forEach和map的作用类似，都是循环数组去做一些事情，区别在于map会返回一个新数组，而forEach不会返回

例如一个班级中每个人年龄都加1

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { id: 4, age: 19 },
]
//旧写法
for(let i=0;i<arr.length;i++){
    arr[i].age++;
}
console.log(arr);  

//forEach
var newArr = arr.forEach((it)=>{
    it.age++;
    return it
})
console.log(arr,newArr);   //[] undefined

//map
var newArr = arr.map((it) => {
    it.age++;
    return it
})
console.log(arr,newArr);        //[] []

every和some

在没有every和some之前，做一些数组的判断，都是用for循环来做的，现在可以简洁一下代码了

例如说检查一组年龄，是否有大于25岁的

var age = [17,24,26,25,24];
//旧写法
var flag = false;
for(let i=0;i<age.length;i++){
    if(age[i]>25){
        flag = true;
    }
}
console.log(flag);

//every 全满足返回true否则为false 
//是否全部小于等于25
var flag = age.every(it => it<=25)
console.log(flag);      //false  表明有大于25的

//some  满足其一即返回true否则为false可  
//是否有大于25
var flag = age.some(it => it>25)
console.log(flag);      //true  表明有大于25的

filter方法的使用

filter:过滤, 和map一样，也会返回新数组，保留哪些返回true的元素
例如筛选出年龄大于25岁的学生

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { id: 4, age: 19 },
]
//旧写法
var newArr = [];
for(let i=0;i<arr.length;i++){
    if(arr[i].age>25){
        newArr.push(arr[i]);
    }
}
console.log(newArr);    //[{id: 3, age: 26}]

//filter
var newArr = arr.filter(it => it.age>25)
console.log(newArr);    //[{id: 3, age: 26}]

find和findIndex includes和indexOf

find 返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。

findIndex的话则是返回下标，如果所有成员都不符合条件，则返回 -1。可识别 NaN

//查找数组中第一个20岁的值
var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 20 },
    { id: 4, age: 26 },
    { id: 5, age: 20 },
    { id: 6, age: 19 },
]
//旧写法
var obj = {};
for(let i=0;i<arr.length;i++){
    if(arr[i].age == 20){
        obj = arr[i];
        break
    }
}
console.log(obj);    //{id: 3, age: 20}

//find
var obj = arr.find(it => it.age == 20);
console.log(obj);    //{id: 3, age: 20}
//需要注意的是 find只会返回第一个符合条件的那一项，filter则是返回所有符合的项组成的新数组

//findIndex
var index = arr.findIndex(it => it.age == 20);
var obj = arr[index];
console.log(obj);    //{id: 3, age: 20}

与findIndex类似，indexOf也是返回的数组下标，通常用于判断数组里是否存在指定值，一般用于简单数组，如果返回的不是-1则说明数组中有这一项 includes则直接返回Boolean值，true则表示有，而且includes可以判断NaN，indexOf不行

//判断数组中是否有20
var arr = [11,24,26,20,10,20]
console.log(arr.indexOf(20) != -1)      //true
console.log(arr.includes(20))   //true
arr.push(NaN)
console.log(arr.indexOf(NaN) != -1)      //false
console.log(arr.includes(NaN))   //true

在检查对象数组中是否存在某个值的时候一般来说不使用indexOf和include，一般都是用find 或者fitter实现

from

Array.from() 可以用于把有length属性的对象生成一个新数组 所以可以用他来新建数组 也可以结合Set来做数组的去重

var arr = [1,2,3,3,4,1,5]
//旧方法去重
var newArr = [];
for(let i=0;i<arr.length;i++){
    if(newArr.indexOf(arr[i]) == -1){
        newArr.push(arr[i]);
    }
}
console.log(newArr)     //[1, 2, 3, 4, 5]

//Set+from      Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。
var newArr = Array.from(new Set(arr));
console.log(newArr)     //[1, 2, 3, 4, 5]