JavaScript数组常用方法总结

最新推荐文章于 2023-07-11 16:20:03 发布

少年梦fire

最新推荐文章于 2023-07-11 16:20:03 发布

阅读量453

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/linjinhuo/article/details/91354465

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中数组的多种方法。包括判断数组的isArray()，返回字符串表示的toLocaleString()等，操作栈和队列的push()、pop()等，重排序的reverse()、sort()，以及连接、剪切、插入删除的concat()、slice()、splice()等方法，还有搜索和判断包含的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   //定义数组如下
   var itemList = [
        {key: 1, label: 'Java', content: 'Java编程语言'},
        {key: 2, label: 'C++', content: 'C++编程语言'},
        {key: 3, label: 'C#', content: 'C#编程语言'}
    ];
   var courses = ["语文","数学","英语"];

1.Array.isArray()
ES5新增的方法，用于判断值是否是数组。

    console.info(Array.isArray(itemList));//true
    console.info(Array.isArray([])); //true
    console.info(Array.isArray("[]"));//false

2.toLocaleString()、toString()、valueOf()
这些方法返回数组的字符串表示形式，中间用逗号分隔开拼接成一个字符串。

    console.info(courses.toLocaleString()); //语文,数学,英语
    console.info(courses.toString());//语文,数学,英语
    console.info(courses.valueOf());// ["语文", "数学", "英语"]

3.join()
用参数作为分隔符来构建包含所有数组项的字符串。

console.info(courses.join("#")); //语文#数学#英语

4.push()和pop()
push和pop是操作数据结构栈（后进先出）的方法，对栈进行插入和移除。push()方法可以接收任意数量的参数，把参数逐个添加到数组末尾，并返回修改后数组的长度。而pop()方法从数组末尾移除最后一项并减少数组的长度，然后返回移除的项。

    var newLen = courses.push("地理", "生物");
    console.info(newLen);//5

    var item = courses.pop();
    console.info(courses.length); //4
    console.info(item);//生物

5.shift()和unshift()方法
shift()能够移除数组中的第一个项并返回该项，同时数组长度length减一，与pop移除方向相反,是一个操作队列(先进先出)的方法。
队列是在列表的末端添加数据，从列表的前端移除数据。

    var newLen = courses.push("地理", "生物");
    console.info(newLen);//5
    console.info(courses); //["语文", "数学", "英语", "地理", "生物"]

    var item = courses.shift();
    console.info(courses.length); //4
    console.info(item); //语文

unshift()是在数组前端添加任意个项并返回新数组的长度，与push()添加方向相反。
在这里插入图片描述

    var newLen = courses.unshift("地理", "生物");
    console.info(newLen);//5
    console.info(courses);//["地理", "生物", "语文", "数学", "英语"]

    var item = courses.pop();
    console.info(item);//英语

6.reverse()和sort()
reverse()和sort()是用来重排序的方法，reverse()会反转数组项的顺序。
sort默认按升序排列数组项，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串来确定如何排序。

    var num = [1, 2, 3, 4, 5, 6,10];
    num.reverse();
    console.info(num); //[10,6, 5, 4, 3, 2, 1]
------------------------------
    var num = [1, 2, 3, 4, 5, 6, 10];
    num.sort();
    console.info(num); //[1, 10, 2, 3, 4, 5, 6]

sort方法可以接收一个比较函数作为参数，用来确定哪个值位于哪个值的前面。
比较函数接收2个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果2个参数相等则返回0，
如果第一个参数应该位于第二个参数之后则返回一个正数。

    var num = [1, 2, 3, 4, 5, 6, 10];

    num.sort((val1, val2) => {
        if (val1 < val2) {
            return -1;
        } else if (val1 == val2) {
            return 0;
        } else {
            return 1;
        }
    });
    console.info(num);[1, 2, 3, 4, 5, 6, 10]
  //实现逆序排序
  itemList.sort((arg1, arg2) => {
        if (arg1.key < arg2.key) {
            return 1;
        } else if (arg1.key > arg2.key) {
            return -1;
        } else {
            return 0;
        }
    });
 console.info(itemList);
 //结果为：
 [
 {key: 3, label: "C#", content: "C#编程语言"},
 {key: 2, label: "C++", content: "C++编程语言"},
  {key: 1, label: "Java", content: "Java编程语言"}
 ]

7.concat()和slice()、splice()方法
concat的意思是连接合并的意思，concat()方法是基于当前数组中的所有项创建一个新数组,将接收到的参数添加到新数组的末尾，然后返回这个新数组。如果没有传递参数，只是复制当前数组创建副本并且返回。

  var  subArr= [
      {key: 6, label: 'Python', content: 'Python编程语言'},
      "物理"
  ];

  var newArr = itemList.concat(subArr);
  console.info(newArr);
  console.info(itemList);
  结果为：
  [
   {key: 1, label: "Java", content: "Java编程语言"},
   {key: 2, label: "C++", content: "C++编程语言"},
   {key: 3, label: "C#", content: "C#编程语言"},
   {key: 6, label: "Python", content: "Python编程语言"},
   "物理"
  ]
  原来的itemList数组保持不变。
  [
   {key: 1, label: "Java", content: "Java编程语言"},
   {key: 2, label: "C++", content: "C++编程语言"},
   {key: 3, label: "C#", content: "C#编程语言"}
]

slice的意思是切下、割开、剪切的意思。也是基于当前数组项返回子数组(新数组)，slice()可以接收一个或者2个参数，即剪切的开始位置和结束位置(和java的String类的substring方法有点像)。
如果只有一个参数，返回从该参数指定位置开始到当前数组末尾的所有项。
如果是2个参数，返回开始位置和结束位置之间的项，但是不包含结束位置的项。slice()也不会影响原始数组。

   //截取索引1到末尾的项
  let subList = itemList.slice(1);
  console.info(subList);
  结果为:
   [
   {key: 2, label: "C++", content: "C++编程语言"},
   {key: 3, label: "C#", content: "C#编程语言"}
]
  //截取从索引0位置开始，不包含索引2位置,（截取索引：0，1）
  let slice = itemList.slice(0,2);
  console.info(slice);
  结果为：
   [
   {key: 1, label: "Java", content: "Java编程语言"},
   {key: 2, label: "C++", content: "C++编程语言"}
]

splice()方法是在数组中插入或者删除数据项的通用方法。
如果是删除：可以删除任意数量的项，需要2个参数：要删除的第一项的位置和要删除的项数。
如果是插入：可以在指定位置插入任意数量的项，需要指定3个参数：起始位置、要删除的项目(0)和要插入的项。
splice()方法会返回一个数组，这个数组包含从原始数组中删除的项，如果没有删除就返回一个空数组。

    //从索引1开始删除1个数据项
    let delArr = itemList.splice(1,1);
    console.info(delArr);
    //结果为：[ {key: 2, label: "C++", content: "C++编程语言"} ]
    console.info(itemList);
    //结果为：
    [
   {key: 1, label: "Java", content: "Java编程语言"},
   {key: 3, label: "C#", content: "C#编程语言"}
    ]

    //把索引为1的项删除掉 再插入1项
    let delArr = itemList.splice(1, 1, {key: 6, label: "Pyton", content: "Python 编程语言"});
    console.info(delArr);
    console.info(itemList);
    结果为：[ {key: 2, label: "C++", content: "C++编程语言"} ]
     [
   {key: 1, label: "Java", content: "Java编程语言"},
   {key: 6, label: "Pyton", content: "Python 编程语言"}，
   {key: 3, label: "C#", content: "C#编程语言"}
    ]

8.IndexOf()和lastIndexOf()
indexOf()和lastIndexOf()搜索整个数组中具有给定值的元素,返回搜索到的第一个元素的索引值如果没有找到
就返回-1.indexOf()方法从头至尾搜索，而lastIndexOf()则相反。2个方法第一个参数是需要搜索的值，第二个是可选的，指定
从哪个位置开始搜索，如果省略就从头开始搜索。

   let index = courses.indexOf("英语");
    console.info(index);
    //结果为：2

9.ES6的includes()方法
includes()方法用于判断数组是否包含给定的值，返回一个布尔值。
第一个参数是要搜索的值，第二个参数是搜索的起始位置，如果第二个参数是负数，则从末尾开始搜索。

    let exists = courses.includes("语文");
    console.info(exists); //结果为 true