常用数组方法

常用数组方法

目录

1.push

2.unshift

3.pop

4.shift

5.splice

6.join

*7.slice

8.indexOf

9.concat ...展开运算符

10.reverse

11.sort

12.reduce

13.forEach

14.map

15.filter

16.some

17.every

18.find

19.findIndex

20.includes

---

1.push

 // push 往数组后面添加一个或者多个元素

    const arr1 = ['张飞', '赵云', '吕布', '马超']

    arr1.push('刘备')

    console.log(arr1) // ['张飞', '赵云', '吕布', '马超', '刘备']

2.unshift

 // unshift 数组前面添加一个或者多个元素

    const arr3 = ['张飞', '赵云', '吕布', '马超']

    arr3.unshift('aa', 'bb')

    console.log(arr3) // ['aa', 'bb', '张飞', '赵云', '吕布', '马超']

3.pop

 // pop 删除数组最后一个元素

    const arr2 = ['张飞', '赵云', '吕布', '马超']

    arr2.pop()

    console.log(arr2) // ['张飞', '赵云', '吕布', '马超', '刘备']

4.shift

 // shift 数组最前面删除一个元素

    const arr4 = ['张飞', '赵云', '吕布', '马超']

    arr4.shift()

    console.log(arr4) // ['赵云', '吕布', '马超']

5.splice

// splice 在数组的任意位置添加或者删除任意个元素

// splice

// 参数1：开始下标

// 参数2：删除几个元素

// 剩余参数：都用于添加

// splice(start, deleteCount, ...element)

    const arr5 = ['张飞', '赵云', '吕布', '马超']

    arr5.splice(2, 1, '貂蝉') // 下标为2的位置元素删除，添加'貂蝉'

    console.log(arr5) //  ['张飞', '赵云', '貂蝉', '马超']

    arr5.splice(1, 0, 'aa', 'bb') // 下标为1的位置，开始添加'aa','bb'

    console.log(arr5) // ['张飞', 'aa', 'bb', '赵云', '貂蝉', '马超']

6.join

// 拼接 可以把一个数组拼接成字符串

    const arr6 = ['张飞', '赵云', '吕布', '马超']

    console.log(arr6.join('-'))

    const str = arr6.join(',')

    console.log(str)

7.slice

// slice(begin, end) 从数组中截取一部分内容到新数组中，原数组不变

// 从begin开始截取，到end结束，，，包含begin，不包含end

// begin: 默认从0开始 end: 默认到结束 可以是负数

    const arr7 = ['张飞', '赵云', '吕布', '马超']

    const list1 = arr7.slice(1, -1)

    console.log(list1)

    const list2 = arr7.slice(1, 3)

    console.log(list2)

8.indexOf

// indexOf: 可以获取到某个元素在数组第一次出现中的索引，如果没有，返回-1

    const arr8 = ['张飞', '赵云', '吕布', '马超', '赵云']

    console.log(arr8.indexOf('吕布'))

    arr8.splice(arr8.indexOf('吕布'), 1) // 删除吕布这个元素

    console.log(arr8)

    const idx1 = arr8.indexOf('曹操')

    console.log(idx1)

    const list = arr8.slice(arr8.indexOf('吕布'))

    console.log(list)

    const idx2 = arr8.findIndex((item) => item === '吕1布')

    console.log(idx2)

9.concat ...展开运算符

// concat 合并多个数组 ES6之后，这个语法可以不用了

    const arr = [1, 2, 3]

    const arr1 = [4, 5, 6]

    console.log(arr.concat(arr1))

    console.log([...arr, ...arr1])

    const list = arr.concat(arr1)

    console.log(list)

    const list = [...arr, ...arr1]

    console.log(list)

10.reverse

// reverse 翻转一个数组

const arr = [1, 2, 3, 4]

console.log(arr.reverse())

11.sort

// sort 对数组进行排序

    const arr = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10, 15, 11]

// 函数：如果返回负数 不换位置 如果返回0 不换位置 返回正数 换位置

 arr.sort(function (a, b) {
      // if (a <script b) {
      //   return 1
      // }
      // if (a === b) {
      //   return 0
      // }
      // if (a > b) {
      //   return -1
      // }
      return b - a
    })​

    arr.sort((a, b) => a - b)    // 升序

    console.log(arr)

    arr.sort((a, b) => b - a)   // 降序

    console.log(arr)

12.reduce

// reduce 求和

    // arr.reduce(函数, 总和)

    const arr = [1, 2, 3, 4, 5]

    arr.reduce((sum, item, index) => {

      console.log(sum + item, item, index)

      return sum + item

    }, 0)

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

    console.log(res)

    求数组中所有元素的和

    let total = 0

    arr.forEach((item) => {

      total += item

    })

    console.log(total)

   //  total 每次计算的和

    const res = arr.reduce(function (total, item, index) {

      console.log(total, item, index)

      return total + item

    }, 0)

    console.log(res)

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

    console.log(res)

    // 1. 求商品的总价格

    // 2. 求商品的平均数量

    const goods = [{

        id: '手机',

        price: 10000,

        count: 800

      },

      {

        id: '电脑',

        price: 6000,

        count: 1000

      },

      {

        id: '外套',

        price: 100,

        count: 8000

      },

      {

        id: '背包',

        price: 400,

        count: 100

      }

    ]

    const total = goods.reduce(

      (total, item) => total + item.price * item.count,

      0

    )

    console.log(total)

    // 商品按照价格排序

    goods.sort((a, b) => b.count - a.count)

    console.log(goods)

13.forEach

// forEach 单纯的遍历数组

    const arr9 = ['张飞', '赵云', '吕布', '马超', '赵云']

    arr9.forEach((item, index) => console.log(item, index))

14.map

// map 遍历数组，且返回一个数组

    let res1 = arr9.map(item => item + '将军')

    console.log(res1)

15.filter

// filter 遍历数组，进行过滤，返回满足条件的数组

    let arr10 = [1, 3, 5, 1, 6, 7, 8, 1, 6, 8]

    let res2 = arr10.filter(item => item > 2)

    console.log(res2)

16.some

// some 判断数组，，，只要有一个或者多个满足条件，返回true

    let arr10 = [1, 3, 5, 1, 6, 7, 8, 1, 6, 8]

    let res3 = arr10.some(item => item === 3)

    console.log(res3)

17.every

// every 判断数组 所有的都满足条件，返回true

    let arr10 = [1, 3, 5, 1, 6, 7, 8, 1, 6, 8]

    let res4 = arr10.every(item => item > 3)

    console.log(res4)

18.find

// find 查找元素，查找第一个满足条件的元素

    let arr10 = [1, 3, 5, 1, 6, 7, 8, 1, 6, 8]

    console.log(arr10.find(item => item > 5))

19.findIndex

// findIndex 查找下标，查找第一个满足条件的元素的下标

    let arr10 = [1, 3, 5, 1, 6, 7, 8, 1, 6, 8]

    console.log(arr10.findIndex(item => item > 5))

20.includes

// includes: 判断数组是否包含某个元素

    const arr = ['张飞', '赵云', '吕布', '马超']

    console.log(arr.includes('吕布'))