关于数组你需要知道的xx种方法

1.数组常用方法

    1.增删改查

        arr.push(...元素) : 往数组后面添加元素,,返回数组长度

        arr.unshift(...元素) : 往数组前面添加元素,返回数组长度

        arr.pop() : 删除数组最后一个元素,返回删除的那个元素

        arr.shift() : 删除数组第一个元素,返回删除的那个元素

        arr.splice(开始下标,删除几个元素,...在删除位置插入元素)

        arr.slice(起始下标,结束下标) : 查询指定范围的元素

 */

    let arr = [10, 20, 30, 40, 50]
        let res = arr.push(60, 70, 80)
        console.log(arr)//[10,20,30,40,50,60,70,80]
        console.log(res)//8

2.arr.join('分隔符') : 把数组元素拼接成字符串

const nameArr = ['陈奕迅','王菲']
console.log( nameArr.join('&') ) //陈奕迅&王菲

3.arr.concat(数组)  : 连接数组

   应用场景: 移动端列表 上拉加载更多

let arr = [10,20,30,40,50]
 const newArr1 = arr.concat([60,70,80])
 console.log(newArr1);

4.arr.reverse() : 翻转数组

arr.reverse()
console.log( arr ) // [50, 40, 30, 20, 10]

 5. arr.sort() : 数组排序

 let dataArr = [
            {name:'小二',age:22},
            {name:'张三',age:12},
            {name:'李四',age:18},
            {name:'王五',age:23},
            {name:'赵六',age:28},
            {name:'刘七',age:17}
        ]
        // 排序
        dataArr.sort( (a,b) =>{
            console.log(a,b) //数组中相邻的元素
            return a.age - b.age
        })
        console.log(dataArr);

2.数组的map方法

        /* 
        1.map应用场景：利用某种规则映射得到一个新数组
            说人话：遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组
        2.注意点：
            a. 循环次数  ===  数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. map函数返回的新数组长度  ==  原数组长度
            c. 回调函数中一定要return，返回的是当前遍历的元素值
                * 如果不return，新数组中每一个元素都变成了undefined
         */

 

let arr = [23, 31, 60, 88, 90, 108, 260];
        //(1)需求：数组中每一个元素+1
        /**
        * @description: 数组map遍历
        * @param {Function}:回调函数 (元素,下标)=>{ return 新元素 }
        * @return: 返回一个新数组
        */
        let arr1 = arr.map((value, index) => {
            return value + 1;//让每一个元素的值+1
        });

        console.log(arr1);

3.数组的forEach方法

        /* 
        1.forEach应用场景：用于遍历数组，相当于for循环另一种写法
        2.注意点：
            a. 回调函数执行次数  == 数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. forEach函数没有返回值
            c. 回调函数不需要return
                * 就算手动return，也不会结束循环
         */

let arr = [
            { name: '商品1', select: false },
            { name: '商品2', select: false },
            { name: '商品3', select: truee },
            { name: '商品4', select: false },
        ]

        arr.forEach((item, index) => {
            item.select = true
        })
        console.log(arr)

4.数组的filter方法

         /* 
        1.filter应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组
            例如：找出数组中的偶数
        2.注意点：
            a. 回调函数执行次数  == 数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. filter函数返回的新数组长度  !=  原数组长度
            c. 回调函数一定要return, 返回一个布尔类型值
                结果为true: 当前遍历元素就会添加到新数组中
                结果为false：当前遍历元素不会添加到新数组中
         */

let arr = [
            { name: '商品1', select: false },
            { name: '商品2', select: false },
            { name: '商品3', select: true },
            { name: '商品4', select: false },
            { name: '商品5', select: true },
        ]
        // 找出商品为true的
        const res = arr.filter(item => item.select)
        console.log(res)


        // 批量删除
        arr = arr.filter(item => !item.select)
        console.log(arr)

5.数组reduce方法

        /* 
        1. reduce作用： 为每一个元素执行一次回调，并得到回调最终的结果
        2. reduce语法:  数组.reduce( (sum,item,index)=>{} , sum初始值 )
            回调返回值: 下一次循环sum的结果
            reduce自身返回值: 最后一次sum的结果
        */

        

      
//求和
       let arr = [11,22,33,44]

       const res = arr.reduce( (sum,item) => sum + item , 0 )

       console.log(res)