记录前端常用、好用的数组方法

1、数组扁平化：arr.flat(depth)

depth 可选参数

使用示例：

let arr = [1,2,[3,[4,[5,6]]]

// depth为3
let arrFlat1 = arr.flat(3)
console.log(arrFlat1) // [1, 2, 3, 4, 5, 6]

// depth不填
let arrFlat2 = arr.flat()
console.log(arrFlat2) // [1,2,3,[4,[5,6]]] //结果相当于depth为1

// 当不确定数组有多少层时，depth为Infinity，可扁平化到最深层
let arrFlat3 = arr.flat(Infinity)
console.log(arrFlat3) // [1, 2, 3, 4, 5, 6]

// 当数组里面有空值时，flat会过滤掉 空(empty)
const arr2 = [1,2,[3], ,''] // [1, 2, 3, '']

2、常用来判断是否为数组的方法

// 1、Array.isArray
Array.isArray([]) // true
Array.isArray([1，2，3]) // true 
Array.isArray(new Array()) // true
Array.isArray('') // false

// 2、判断类型的万能方法
Object.prototype.toString.call(arr) === '[object Array]'

3、arr.reduce(func,init)

接收两个参数，第一个参数为函数，第二个参数为初始值

arr.reduce((pre,cur,index,arr)=>{

   pre为初始值，或计算后的返回值(必传)；cur为当前元素(必传)；

   index为当前元素索引(可选)；arr为当前元素所属的对象(可选);init为传递给函数的初始值(可选)

},init)

使用示例：

let arr = [1,2,3,3,4,5,6,1,2]
// 0、输出数组中最大值的下标
function fn(arr){
    return arr.reduce(
        (pre,cur,index,arr) => {
            return cur > arr[pre] ? index:pre
        },0
    )
}
fn(arr)//6

// 1、数组去重
let arrReduce = arr.reduce((pre,cur,index)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }else{
        return pre
    }
},[])
console.log(arrReduce) // [1, 2, 3, 4, 5, 6]


// 2、累加
//2-1:
let arrReduce = arr.reduce((pre,cur,index)=>{
    console.log('pre-',pre)
    console.log('cur-',cur)
    console.log('index-',index)
    return pre + cur
},0)
console.log(arrReduce) // 27
//2-2
let arrReduce = arr.reduce((pre,cur,index)=>{
    console.log('pre-',pre)
    console.log('cur-',cur)
    console.log('index-',index)
    return pre + cur
})
console.log(arrReduce) // 27
2-1与2-2结果一样，但是console.log输出的内容不一样
解释：当init有值时，pre就是init值，即为初始值，
    当init没值时，pre就为第一个元素的值，cur当前元素就为第二个元素的值，index为当前元素的索引


// 3、统计数组中每个元素出现次数
let arr1 = ['王','王','王','大','发','大','大']
let arr1Reduce = arr1.reduce((pre,cur)=>{
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})
console.log(arr1Reduce) // {王: 3, 大: 3, 发: 1}


// 4、数组扁平化
let arr2 = [1,2,3,[4,5,[6,7,8,[9]]]]
function arr2Reduce(arr){
    return arr.reduce((pre,cur)=>{
        return pre.concat(Array.isArray(cur)?this.arr2Reduce(cur):cur)
    },[])
}
arr2Reduce(arr2) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

注意点：

let arr = [1,2,3,3,4,5,6,1,2]

let arrReduce = arr.reduce((pre,cur,index)=>{
    return pre + cur
},0)

3.1、当init有值时，pre就是init值，即为初始值，如上pre的值为0,cur的值为1
当init没值时，pre就为第一个元素的值，cur为当前元素即为第二个元素的值，index为当前元素的索引.如上，不传第二个参数0时，pre的值就为1，cur值为2

3.2、每一次执行，pre的值都是上一次return的值。

如上arrReduce是求arr数组里面的和.

第一次执行时，pre为0，cur为1
第二次执行时，pre为1(0+1，上次return的值)，cur为2
第三次执行时，pre为3(1+2，上次return的值)，cur为3
第四次执行时，pre为6(3+3，上次return的值)，cur为3
以此类推，当最后一次执行时，pre为0+1+2+3+3+4+5+6+1=25，cur为2.

4、arr.map(function(item,index,arr))

const arr = [
{ id: 1, name: '橘右京',job: 1 },
{ id: 2, name: '娜可露露',job: 2 },
{ id: 3, name: '鲁班七号',job: 3 },
{ id: 4, name: '云中君',job: 2 },
{ id: 5, name: '干将莫邪',job: 5 },
{ id: 6, name: '不知火舞',job: 5 },
{ id: 7, name: '沈梦溪',job: 5 }]

const getIds = arr.map((item) => {
    return item.id
})
console.log('getIds',getIds)//[1, 2, 3, 4, 5, 6, 7]

5、arr.filter(function(item,index,arr))

const arr = [
{ id: 1, name: '橘右京',job: 1 },
{ id: 2, name: '娜可露露',job: 2 },
{ id: 3, name: '鲁班七号',job: 3 },
{ id: 4, name: '云中君',job: 2 },
{ id: 5, name: '干将莫邪',job: 5 },
{ id: 6, name: '不知火舞',job: 5 },
{ id: 7, name: '沈梦溪',job: 5 }]

const getjob = arr.filter((item) => {
    return item.job > 1
})
console.log('getjob---',getjob)
/* getjob---[
    { id: 2, name: '娜可露露',job: 2 },
    { id: 3, name: '鲁班七号',job: 3 },
    { id: 4, name: '云中君',job: 2 },
    { id: 5, name: '干将莫邪',job: 5 },
    { id: 6, name: '不知火舞',job: 5 },
    { id: 7, name: '沈梦溪',job: 5 }
] */

6、arr.every(function(item,index,arr))

let arr = [
    {name:'张三',flag:true,num:0},
    {name:'张四',flag:false,num:5},
    {name:'张五',flag:false,num:7}
]
isAll:{    // isAll为计算属性
    get(){
        return this.arr.every((t) => {
            return t.flag
            // return t.num > 4
        })
    },
    set(){
        // ...
    },
}

注意：

1、函数内部return的值为布尔值 ：
t.flag若全为true，则isAll返回true
若有一个为false，则isAll返回false
总结：return true : 全部元素都满足条件，return false : 有元素不满足条件

2、every()方法不会改变原来数组

7、arr.find(function(item,index,arr))

let arr = [10,20,30,40,50];    
            
let result= arr.find(function(item,index,arr){
    return item>20;
});
console.log(result) // 30

返回的是第一个满足条件的元素，需要注意的是不是返回下标