常用的数组api

HQ8806

已于 2022-10-04 22:09:41 修改

阅读量87

点赞数

文章标签： javascript 前端 vue.js

于 2022-06-09 15:20:53 首次发布

本文链接：https://blog.csdn.net/LJM51200/article/details/125175510

版权

2.1 slice（）

查找元素的方法：indexOf() includes() find()

1.join()

将一个数组转为字符串,返回的是一个字符串,也可以说它是split的逆操作

<script>
    let arr = ["张三","李四","王五"] 
    alert(arr.join(","))  //张三,李四,王五
    console.log(arr.join("|")); // 张三|李四|王五
  </script>

拼接成字符串返回的是字符串

2.split()

是把一串字符(根据某个分隔符)分成若干个元素存放在一个数组里即切割成数组的形式

用简短的话概述就是： 将一个字符串切割成数组返回的是一个数组

 <script>
    //let arr = "12+10+8" 
    let arr = "王五+赵四"
    let res = arr.split("+")
    console.log(res); //['王五','赵四'] ['12','10','8']
  </script>

2.1slice

slice截取不会改变原数组

slice（0）// 代表从索引下标为0开始截取,一直截取到最后

slice（2,5）代表从下标为2开始截取，一直截取到下标为5，但是呢，下标为5的那个数，就不能截取

 <script>
    let arr = [1,2,3,4,5,6,7]
    console.log(arr.slice(2)); // 3,4,5,6,7
    console.log(arr.slice(2,5)); // 3,4,5
    console.log(arr.slice(0)); // 1,2,3,4,5,6,7
  </script>

3.sort()

对数组进行排序

 <script>
    let arr = [10,20,30,5,8,4]
    let  arr1 =  arr.sort(function (a,b) {
      //从小到大
      return a-b
      // 从大到小
      //return b-a
    })
    console.log(arr1);
  </script>
复制代码

return a-b 是从小到大排序

return b-a 是从大到小排序

参数是一个回调函数 function(a,b) return a-b /b-a

4.unshift()

在数组前面添加一个或者多个数组元素，返回的是新的数组长度

前面添加返回数组的长度

5.push()

在数组的最后面添加一个或多个数组元素,返回数组的最新长度

 <script>
    let arr = [10,20,30] //创建一个数组
    let str = arr.push(40,50) 
    console.log(str); // 5
  </script>
复制代码

最后面添加返回值,数组的长度

6.pop()

删除数组的最后一项,同时减少数组的length值,返回被删除的项

<script>
   let arr = [10,20,30]
   let str = arr.pop()  // 取最后一项
   console.log(str);    // 30
   console.log(arr.length);  // 2
  </script>
复制代码

删除最后一项

7.shift()

删除数组的第一项,同时减少数组的length值,返回被删除的项

8.splice()

插入,删除或替换数组的元素 常用修改原来数组的内容

传入三个参数,分别是开始位置、0（要删除的元素数量）、插入的元素，返回的是一个空数组

 <script>
    let arr = [10,20,30] //创建一个数组
    let res = arr.splice(1,0,5,8)
    console.log(arr);  // 10,5,8,20,30
    console.log(res);  // [] 空数组
  </script>
复制代码

如果传入两个参数 :第一个参数就是开始位置第二个参数就是要删除的元素数量

9.concat()

连接数组

 <script>
    let arr = [10,20,30] //创建一个数组
    let res = arr.concat(1,"code",[5,8,"red"])
    console.log(arr);  // 10,20,30
    console.log(res);  // 10,20,30,1,'code',5,8,'red'
  </script>
复制代码

查找元素的方法：indexOf() includes() find()

10.indexOf()

索引值/下标返回要查找的元素在数组中的位置，如果没找到则返回-1

 <script>
    let arr = [10,20,30,4,2,8] //创建一个数组
    console.log(arr.indexOf(20));  // 1
     console.log(arr.indexOf(5));  // -1
  </script>
复制代码

11.includes

查看这个数组里有没有包含所需的元素，找到返回true，否则false

 <script>
    let arr = [10,20,30,4,2,8] //创建一个数组
    console.log(arr.includes(20));  // true
    console.log(arr.includes(5));  // false
  </script>
复制代码

12.find()

返回第一个匹配的元素 find()对于空数组,函数是不会执行的,如果没有符合条件的元素返回undefined 第一个参数必需,代表当前元素,index:当前元素的索引值,arr:当前元素所属的数组对象

  <script>
    let arr = [
    { name : "张三" ,age : 18},
    {name : "李四" ,age : 20 }
    ] 
     const obj = arr.find((value ,index ,array) => value.age >19 ) 
     console.log(obj);  // name : '李四' ,age : 20
  </script>
复制代码