JavaScript数组常用方法

北轴

已于 2023-07-07 15:10:24 修改

阅读量45

点赞数

文章标签： javascript 前端笔记

于 2023-07-06 23:34:12 首次发布

本文链接：https://blog.csdn.net/HYi_wei/article/details/131585348

版权

1.push()

往数组最后面追加元素，可以一次追加多个。

<script>
    const arr = [1, 2, 3]
    arr.push(4, 5, 6)
    console.log(arr)  // [1, 2, 3, 4, 5, 6]
</script>

2.unshift()

往数组最前面追加元素，可以一次追加多个。

<script>
    const arr = [1, 2, 3]
    arr.unshift(4, 5, 6)
    console.log(arr)  // [4, 5, 6, 1, 2, 3]
</script>

3.splice()

删除数组中任意个元素，有两个参数。

数组名.splice( 下标，删除的个数）

<script>
    const arr = [1, 2, 3, 4, 5, 6]
    arr.splice(2,3)
    console.log(arr)  // [1, 2, 6]
</script>

4.sort()

可以将数组排序，参数是一个函数。

<script>
    const arr1 = [1, 4, 5, 2, 3, 6]
    const arr2 = [1, 4, 5, 2, 3, 6]

    arr1.sort((a, b) => a - b) //升序
    console.log(arr1)  // [1, 2, 3, 4, 5, 6]

    arr2.sort((a, b) => b - a) //降序
    console.log(arr2)  // [6, 5, 4, 3, 2, 1]
</script>

5.map()

遍历并处理数组元素，返回一个新的数组，不影响原数组。

<script>
    const arr = [1, 2, 3, 4, 5, 6]

    const newArr = arr.map((item, index) => item * 10) //每个元素乘以10
    console.log(newArr)  // [10, 20, 30, 40, 50, 60]
</script>

6.forEach()

遍历数组的每个元素，适用于遍历对象数组，没有返回值。

<script>
    const arr = ['red', 'green', 'pink']
    const result = arr.forEach((item, index) => {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })
    //console.log(result)   undefined
</script>

7.reduce()

累计器，返回函数累计处理的结果，经常用于求和。

arr.reduce( function( 累计值，当前值 ){ 函数体 }，起始值）

<script>
    //简单数组累加
    const arr1 = [1, 2, 3]
    const sum = arr1.reduce((prev, item) => prev + item, 0)
    console.log(sum) // 6

    //将数组对象里的属性值累加
    const arr2 = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 20000
    }]
    
    const money = arr2.reduce((prev, item) => prev + item.salary, 0)
    console.log(money)  // 40000
</script>

8.filter()

筛选数组中符合条件的，返回新的数组，不影响原数组。

<script>
    //简单数组筛选 筛选出大于等于20的数
    const arr1 = [10, 15, 20, 30, 35]
    const newArr1 = arr1.filter(item => item >= 20)
    console.log(newArr1) //[20, 30, 35]

    //根据数组对象里的属性值筛选   salary >= 20000
    const arr2 = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 20000
    }]
    
    const newArr2 = arr2.filter( item => item.salary >= 20000)
    console.log(newArr2)  // [{name: '王五',salary: 20000}]
</script>

9.join()

把数组中所有的元素拼接成一个字符串。

<script>
    const arr1 = [10, 15, 20, 30, 35]
    const str1 = arr1.join('')
    console.log(str1) // 1015203035

    const arr2 = [2023, 7, 6]
    const str2 = arr2.join('-') //引号里是连接符
    console.log(str2) // 2023-7-6
</script>

10.find()

查找数组中满足条件的第一个元素，返回这个元素值。

<script>
    const arr1 = [10, 15, 20, 30, 35]
    const arrValue1 = arr1.find( item => item === 20)
    console.log(arrValue1) // 20

    const arr2 = [
      {
        name: '张三',
        age: 19
      },
      {
        name: '李四',
        age: 23
      }
    ]
    const arrValue2 = arr2.find( item => item.name === '李四')
    console.log(arrValue2)  // { name: '李四', age: 23 }
</script>

11.every()

检查数组中所有的元素是否满足条件，返回true或false。

<script>
    const arr = [10, 20, 30]
    const flag = arr.every(item => item >= 20)
    console.log(flag) //false
</script>

补充数组的静态方法

1.Array.from()

把伪数组转换成真数组。

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    console.log(lis)  // lis是一个伪数组
    
    const newArr = Array.from(lis)
    newArr.pop() // 真数组才可以使用pop()方法
    console.log(newArr)
  </script>
</body>

补充数组的扩展方法

1.求数组的最大值和最小值

自定义方法，max()，min()。

//1.最大值
Array.prototype.max = function () {
     return Math.max(...this)
}
// 2. 最小值
Array.prototype.min = function () {
     return Math.min(...this)
}

const arr = [2, 4, 10, 3, 40]
console.log(arr.max()) // 40
console.log(arr.min()) // 2

2.数组求和

自定义并封装，sum()。

Array.prototype.sum = function () {
      return this.reduce((prev, item) => prev + item, 0)
}

const arr = [1, 2, 3, 4, 5]
console.log(arr.sum()) // 15

北轴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript数组常用方法

1.push()往数组最后面追加元素，可以一次追加多个。<script> const arr = [1, 2, 3] arr.push(4, 5, 6) console.log(arr) // [1, 2, 3, 4, 5, 6]</script>2.unshift()往数组最前面追加元素，可以一次追加多个。<script> const arr = [1, 2, 3] arr.unshift(4, 5,
复制链接

扫一扫