JavaScript 数组(数组的增删和数组排序)

一、数组方法

1.数组操作

push()

向数组末尾添加元素,返回新数组长度

    //添加单个元素
    // let arr = ['JS', 'Java', 'C++']
    // let newArrLength = arr.push('PHP')
    // console.log(arr)//['JS', 'Java', 'C++', 'PHP']
    // console.log(newArrLength)//4

    //添加多个元素
    let arr = ['JS', 'Java', 'C++']
    let newArrLength = arr.push('PHP', 'Go')
    console.log(arr)//['JS', 'Java', 'C++', 'PHP', 'Go']
    console.log(newArrLength)//5

pop() 

数组末尾删除一个元素,返回被删除的元素

    // let arr = ['JS', 'Java', 'C++']
    // let element = arr.pop()
    // console.log(arr)//['JS', 'Java']
    // console.log(element)//C++

    // 数组没有元素返回 undefined
    let arr = []
    let element = arr.pop()
    console.log(arr)//[]
    console.log(element)//undefined

unshift()

数组头部添加元素,返回新数组长度

    //添加单个元素
    // let arr = ['JS', 'Java', 'C++']
    // let newArrLength = arr.unshift('PHP')
    // console.log(arr)//['PHP', 'JS', 'Java', 'C++']
    // console.log(newArrLength)//4

    //添加多个元素
    let arr = ['JS', 'Java', 'C++']
    let newArrLength = arr.unshift('PHP', 'Go')
    console.log(arr)//['PHP', 'Go', 'JS', 'Java', 'C++']
    console.log(newArrLength)//5

shift()

数组头部删除一个元素,返回被删除的元素

    // let arr = ['JS', 'Java', 'C++']
    // let element = arr.shift()
    // console.log(arr)//['Java', 'C++']
    // console.log(element)//JS

    // 数组没有元素返回 undefined
    let arr = []
    let element = arr.shift()
    console.log(arr)//[]
    console.log(element)//undefined

splice()

可给数组删除、添加、替换元素,改变原数组

返回被删除元素组成的数组,没有删除元素则为空数组

参数:操作起始位置、删除的元素个数、添加的元素

  <script>
    // // 1.删除元素
    // let arr = ['JS', 'Java', 'C++', 'PHP']
    // let resArr = []
    // resArr = arr.splice(1, 2)
    // // 原数组直接改变
    // console.log(arr);//['JS', 'PHP']
    // // 方法返回值为被删除的元素所构成的数组
    // console.log(resArr)//['Java', 'C++']


    // // 2.添加元素
    // let arr = ['JS', 'Java', 'C++', 'PHP']
    // resArr = arr.splice(0, 0, 'Python', 'TS')
    // console.log(arr)//['Python', 'TS', 'JS', 'Java', 'C++', 'PHP']
    // console.log(resArr)//[]

    // 3.替换元素(删除元素的同时添加新元素)
    let arr = ['JS', 'Java', 'C++', 'PHP']
    resArr = arr.splice(1, 2, 'Python', 'TS')
    console.log(arr)//['JS', 'Python', 'TS', 'PHP']
    console.log(resArr)//['Java', 'C++']

  </script>

2.数组排序

sort()

对数组进行排序,修改原数组,返回排序后的数组

默认按字符串顺序升序排序

    let arr = [0, 2, 8, 10, 25]
    let res = arr.sort()
    console.log(res)//[0,10,2,25,8]
    console.log(res === arr)//true

sort() 方法可传入一个比较函数自定义比较规则。

比较函数传入两个参数:新数和旧数。返回正数则新数排在旧数之后,返回负值则新数排在旧数之前,返回 0 则相等。

 //升序
    function compareAsc(a, b) {
      return a - b
    }
    //降序
    function compareDes(a, b) {
      return b - a
    }
    // 任意排序
    function compareRandom(a, b) {
      return 0.5 - Math.random()
    }
    let arr = [0, 52, 8, 25, 10]
    console.log(arr.sort(compareAsc))// [0, 8, 10, 25, 52]
    console.log(arr.sort(compareDes))// [52, 25, 10, 8, 0]
    // 随机排序数组
    console.log(arr.sort(compareRandom))//[52, 0, 10, 25, 8]
    console.log(arr.sort(compareRandom))//[10, 8, 25, 0, 52]


    // 根据对象属性排序
    let cars = [
      { type: 'Benz', year: 2021 },
      { type: 'Lexus', year: 2022 },
      { type: 'BMW', year: 2023 },
    ]
    // 根据对象属性排序
    console.log(cars.sort(function (a, b) {
      let x = a.type.toLowerCase()
      let y = b.type.toLowerCase()
      if (x < y) {
        return -1
      }
      if (x > y) {
        return 1
      }
      return 0
    }))

reverse()

反转数组,改变原数组

    let arr = ['red', 'blue', 'green']
    console.log(arr.reverse())// ['green', 'blue', 'red']

3.数组迭代

forEach()

遍历数组,对每个元素执行传入的函数。相当于使用 for 循环遍历数组。

forEach() 没有返回值不会改变原数组

    let arr = [1, 44, 3, 2]
    let count = 0
    let res = arr.forEach((item, index, arr) => {
      count += item
    })
    console.log(res)//undefined
    console.log(count)//50

filter()

过滤数组,返回符合条件的元素组成的新数组。不改变原数组。

传入一个筛选函数,筛选函数 3 个参数:元素、索引、数组

    let arr = [5, 23, 66, 520, 77]
    let res = arr.filter((item, index, arr) => item > 50)
    console.log(res)//[66, 520, 77]

map()

对数组每个元素执行传入的函数,返回每个执行结果组成的数组。不改变原数组。

    let arr = [1, 3, 5, 7]
    let res = arr.map((item, index, arr) => item * 3)
    console.log(res)// [3, 9, 15, 21]

every()

检查数组每个元素是否都满足条件,若返回 true,则 every() 方法返回 true。若有一个元素返回 false,则 every() 方法返回 false

一旦遇到元素返回 false,则停止后续遍历

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.every((item, index, arr) => item < 2)) // false
    console.log(arr.every((item, index, arr) => item > 0)) // true

some()

检查数组是否存在元素满足条件,若有一个元素返回 true,则 some() 方法返回 true

一旦遇到元素返回 true,则停止后续遍历

let arr = [4, 5, 6, 7, 8]
arr.some((item, index, arr) => item === 6) // true

reduce()

遍历数组,生成一个最终返回值,可用于条件统计。

reduce() 方法可传入 2 个参数:归并函数、初始值。其中初始值可选,若不传,则默认初始值为数组第一个元素,从数组第二个元素开始遍历。

归并函数可传入 4 个参数:上一个归并值、元素、索引、数组本身。

// 数组元素累加
let arr = [1, 2, 3, 4, 5]
arr.reduce((pre, cur, index, arr) => pre + cur) // 15
arr.reduce((pre, cur, index, arr) => pre + cur, 10) // 25

reduceRight()

效果与 reduce() 方法相同,只是方向相反,从右往左遍历。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值