数组的常用的方法大全()

数组的增删改查操作:

1. 数组.push( 元素 )

 2. 数组.unshift( 元素 )

在数组首位添加一个或者多个元素

返回值 : 返回的是添加元素后数组的长度.

3. 数组.pop( 元素 )

let arr = [10,20,30,40,50]
const newArr =  arr.slice(2,5)// 2 <= 范围 < 5
    console.log( newArr )//[30,40,50]

常用方法:

7. 数组.concat( 数组 )

let arr = [10,20]
const newArr1 = arr.concat([60,70,80])
    console.log( newArr1 ) //[10,20,60,70,80]

8. 数组.join(‘分隔符’)

将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串

const nameArr = ['张三','李四']
    console.log( nameArr.join('&') )//张三&李四

9.数组.reverse(  )

翻转数组

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

10. 数组.sort(  )

可以对数组进行排序.

let dataArr = [
      {name:'张三',age:18},
      {name:'李四',age:22},
      {name:'王五',age:16},
      {name:'赵六',age:30},
    ]
    // 排序
    dataArr.sort( (a,b)=>{
      console.log( a,b )//数组中相邻的元素
      return a.age - b.age  // 从小到大排序
      return b.age - a.age  // 从大到小排序
    })
    console.log(dataArr)

遍历数组方法

11.数组.map(  )

12.数组.forEach(  )

arr.forEach(function(item,index){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
})

13.数组.filte(  )

filter方法: 有返回值, 过滤出符合条件的元素

<script>
        let arr = [
            {name:'商品1',select:false},
            {name:'商品2',select:true},
            {name:'商品3',select:false},
            {name:'商品4',select:true},
            {name:'商品5',select:false}
        ]
        /*
          1.根据条件筛选数组,将满足条件的元素放入新数组
            筛选数组元素  批量删除数组元素
          2.循环次数 === 数组长度
          3.回调函数内部返回值 
            return true : 满足条件,放入新数组
            return false : 不满足条件,不放入新数组
          4.方法自身返回值 无return返回值
        */

        // 需求 : 筛选用户选中的商品
        // const res = arr.filter( ( item,index ) => {
        //   if( item.select){
        //     return true
        //   }else {
        //     return false
        //   }
        // })
        // console.log(res);

        // 简写
        const res =arr.filter(item => item.select)
        console.log(res);

        // 需求 : 删除选中的商品(把true的剔除,保留false的商品)
        // 等价于 : 筛选用户没有选中的商品
        arr=arr.filter(item => !item.select)
        console.log(arr);
    </script>

14.数组.reduce(  )

<script>
        let arr = [10,20,30,40,50]
        // 数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
        // 经典应用 : 求累加和

        /*
        第一个参数 : (sum,item,index)=>{
            return 下一次的sum值
        }
        第二个参数 : sum初始值
            一定要传初始值,一般为0(不传遇到空数组就会报错)

        reduce自己返回值 : 最后一次sum结果
        */
    //    const res = arr.reduce((sum,item,index)=>{
    //     return sum + item
    //    },0)

       const res = arr.reduce( (sum,item,index) => sum + item , 0)
       console.log(res);
    </script>
————————

数组的增删改查操作:

1. 数组.push( 元素 )

 2. 数组.unshift( 元素 )

在数组首位添加一个或者多个元素

返回值 : 返回的是添加元素后数组的长度.

3. 数组.pop( 元素 )

let arr = [10,20,30,40,50]
const newArr =  arr.slice(2,5)// 2 <= 范围 < 5
    console.log( newArr )//[30,40,50]

常用方法:

7. 数组.concat( 数组 )

let arr = [10,20]
const newArr1 = arr.concat([60,70,80])
    console.log( newArr1 ) //[10,20,60,70,80]

8. 数组.join(‘分隔符’)

将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串

const nameArr = ['张三','李四']
    console.log( nameArr.join('&') )//张三&李四

9.数组.reverse(  )

翻转数组

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

10. 数组.sort(  )

可以对数组进行排序.

let dataArr = [
      {name:'张三',age:18},
      {name:'李四',age:22},
      {name:'王五',age:16},
      {name:'赵六',age:30},
    ]
    // 排序
    dataArr.sort( (a,b)=>{
      console.log( a,b )//数组中相邻的元素
      return a.age - b.age  // 从小到大排序
      return b.age - a.age  // 从大到小排序
    })
    console.log(dataArr)

遍历数组方法

11.数组.map(  )

12.数组.forEach(  )

arr.forEach(function(item,index){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
})

13.数组.filte(  )

filter方法: 有返回值, 过滤出符合条件的元素

<script>
        let arr = [
            {name:'商品1',select:false},
            {name:'商品2',select:true},
            {name:'商品3',select:false},
            {name:'商品4',select:true},
            {name:'商品5',select:false}
        ]
        /*
          1.根据条件筛选数组,将满足条件的元素放入新数组
            筛选数组元素  批量删除数组元素
          2.循环次数 === 数组长度
          3.回调函数内部返回值 
            return true : 满足条件,放入新数组
            return false : 不满足条件,不放入新数组
          4.方法自身返回值 无return返回值
        */

        // 需求 : 筛选用户选中的商品
        // const res = arr.filter( ( item,index ) => {
        //   if( item.select){
        //     return true
        //   }else {
        //     return false
        //   }
        // })
        // console.log(res);

        // 简写
        const res =arr.filter(item => item.select)
        console.log(res);

        // 需求 : 删除选中的商品(把true的剔除,保留false的商品)
        // 等价于 : 筛选用户没有选中的商品
        arr=arr.filter(item => !item.select)
        console.log(arr);
    </script>

14.数组.reduce(  )

<script>
        let arr = [10,20,30,40,50]
        // 数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
        // 经典应用 : 求累加和

        /*
        第一个参数 : (sum,item,index)=>{
            return 下一次的sum值
        }
        第二个参数 : sum初始值
            一定要传初始值,一般为0(不传遇到空数组就会报错)

        reduce自己返回值 : 最后一次sum结果
        */
    //    const res = arr.reduce((sum,item,index)=>{
    //     return sum + item
    //    },0)

       const res = arr.reduce( (sum,item,index) => sum + item , 0)
       console.log(res);
    </script>