JS数组几种常见的操作方法集合

最新推荐文章于 2024-09-20 11:02:45 发布

前端攻城狮·左大

最新推荐文章于 2024-09-20 11:02:45 发布

阅读量1k

点赞数 6

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

本文链接：https://blog.csdn.net/weixin_46719868/article/details/115656474

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

ps：本篇博文为了方便阅读，变量都用的方法名，大家不要效仿尽量规范

常见四件套 shift unshift pop push

1.shift （删前）
删除数组的第一项并返回删除元素的值，注意如果数组为空则返回undefined

var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var shift = oldArray.shift();
      console.log(this.oldArray, this.shift);

打印结果
在这里插入图片描述
2.unshift（增前）
将参数添加到数组的前面并返回数组的长度

    var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var unshift = oldArray.unshift("D", "D");
      console.log(this.oldArray, this.unshift);
//注：此方法在ie6.0下
// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
// 一般需要用返回值时可用splice代替

打印结果
在这里插入图片描述

3.pop （删尾）
删除原数组的最后一项，并返回删除元素的值，如果是空值则返回undefined

   var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var pop = oldArray.pop();
      console.log(this.oldArray, this.pop);

打印结果
在这里插入图片描述
4.push（增尾）
将参数添加到原数组的最后一项，并返回数组的长度

var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var push = oldArray.push("H", "H", "H");
      console.log(this.oldArray, this.push);

打印结果
在这里插入图片描述

比较容易记混的 slice splice

1.slice（切割）
返回原数组从指定的下标开始到指定的下标结束
PS：不改变原数组

 var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var slice = oldArray.slice(2, 4);   //第一个参数是开始的下标，第二个参数是结束的下标
      console.log(this.oldArray, this.slice);

打印结果
在这里插入图片描述
2.多功能splice（插入，切割）
// splice(start,deleteCount.val1,val2,…):从start开始删除deleteCount项
// 并从该位置起插入val1,val2,…
PS：改变原数组

 var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var splice = oldArray.splice(2, 4, "H", "H"); //从下标为2的开始，切割4项元素，在下标为2后插入“H”，“H”
      console.log(this.oldArray, this.splice);

打印结果
在这里插入图片描述

数组の旋转跳跃我闭着眼~~哎，就是玩

翻转拼接排序分割

1.reverse（翻转）
将数组翻转并改变原数组的排序

 var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var reverse = oldArray.reverse(); //从下标为2的开始，切割4项元素，在下标为2后插入“H”，“H”
      console.log(this.oldArray, this.reverse);

打印结果
在这里插入图片描述
2.concat（拼接）
意思很好理解吧！将两个数组怼到一起（强怼的瓜 em…应该也很好吃）

 var oldArray = ["z", "u", "o", "z", "h", "o", "n", "g", "m", "i", "n"];
      var concat = oldArray.concat("强扭的的瓜虽然不甜但是俺就是想把它扭下来"); 
      console.log(this.oldArray, this.concat);

打印结果
在这里插入图片描述
3.sort（排序）
按指定的顺序将数组排序

<script>
      var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
      var sort = oldArray.sort();
      console.log(this.oldArray, this.sort);
    </script>

打印结果
在这里插入图片描述
请注意，上面的代码没有按照数值的大小对数字进行排序，是按照字符编码的顺序进行排序，要实现这一点，就必须使用一个排序函数
升序：

  var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
      function sortNumber(a, b) {
        return a - b;
      }
      var sort = oldArray.sort(sortNumber);
      console.log(this.oldArray, this.sort);

打印结果
在这里插入图片描述
降序：

  var oldArray = [8, 1, 2, 5, 4, 3, 65, 4, 588, 6];
      function sortNumber(a, b) {
        return b - a;
      }
      var sort = oldArray.sort(sortNumber);
      console.log(this.oldArray, this.sort);

打印结果
在这里插入图片描述
这里定义的函数可以这样记 a到z是升序 z到a是降序就很好理解了

4.join（数组转字符串）
方法指接收一个参数：即默认为逗号分隔符（）

  var oldArray = [1, 2, 3, 4, 5, 6];
      var join = oldArray.join("☆");
      console.log(this.oldArray, this.join);

打印结果
在这里插入图片描述

ES5数组新增方法

2个索引方法：indexOf（）与lastIndexOf（）
两个方法返回的都是要查找的元素在数组中首次出现的位置如果没有则返回-1
indexOf是从array[0]开始检索
lastIndexOf（）是从array[array.length-1]开始说白了就是倒着检索

正向检索 indexOf

var oldArray = ["D", "a", "z", "u", "o"];
      var indexOf = oldArray.indexOf("u");
      console.log(this.oldArray, this.indexOf);

打印结果
在这里插入图片描述
反向检索 lastInsexOf（）

   var oldArray = ["D", "a", "z", "u", "o"];
      var lastIndexOf = oldArray.lastIndexOf("D");
      console.log(this.oldArray, this.lastIndexOf);

在这里插入图片描述
检索失败

 var oldArray = ["D", "a", "z", "u", "o"];
      var lastIndexOf = oldArray.lastIndexOf("W");
      console.log(this.oldArray, this.lastIndexOf);

在这里插入图片描述

5个迭代方法：forEach()、map()、filter()、some()、every()

这几个语法个人感觉大同小异都不会改变原数组
1.foreach（）
item：当前数组下的每一项元素
index：下标

var oldArray = ["D", "a", "z", "u", "o"];
      var foreach = oldArray.forEach((item, index) => {
        console.log(item, index);
      });

在这里插入图片描述

 var oldArray = ["D", "a", "z", "u", "o"];
      var foreach = oldArray.forEach((item, index) => {
        let newArray = item + "---哦吼";
        console.log(newArray);
      });

在这里插入图片描述
2.map（映射）
map()：指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var oldArray = ["D", "a", "z", "u", "o"];
      var map = oldArray.map((item, index) => {
        return item + "---哦吼";
      });
      console.log(this.oldArray, this.map);

在这里插入图片描述
3.filter（过滤）常用
“过滤”功能，方法创建一个新数组,过滤出所有符合条件的元素形成新的数组

     var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var filter = oldArray.filter((item, index) => {
        return item > 4;
      });
      console.log(this.oldArray, this.filter);

在这里插入图片描述
4.every（）
判断数组中的每一项元素是否都满足条件相当于&&符只有都满足才返回true

有不满足条件的
 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var every = oldArray.every((item, index) => {
        return item > 4;
      });
      console.log(this.oldArray, this.every);

在这里插入图片描述

满足条件的
 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var every = oldArray.every((item, index) => {
        return item > 0;
      });
      console.log(this.oldArray, this.every);

在这里插入图片描述
5.some（）
判断数组中的每一项中是否有满足条件的元素相当于||符有一个符合条件就返回true

var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var some = oldArray.some((item, index) => {
        return item > 4;
      });
      console.log(this.oldArray, this.some);

在这里插入图片描述
都不满足条件时返回false

 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var some = oldArray.some((item, index) => {
        return item > 10;
      });
      console.log(this.oldArray, this.some);

在这里插入图片描述

ES6数组新增方法（注意浏览器兼容）

1.Array.from（）
可以将可遍历的对象转换成数组类型

 let json = {
        "0": "大",
        "1": "左",
        "2": "吖",
        length: 3
      };
      let arr = Array.from(json);
      console.log(arr);

在这里插入图片描述
2.Array.of（）
可将一组数值转换成数组类型不分数据类型只分数量数量为0时返回空数组相较于Array.from更加强大

   let arr1 = Array.of("左", "仲", "民");
      let arr2 = Array.of(["左", "仲", "民"]);
      let arr3 = Array.of(undefined);
      let arr4 = Array.of();
      console.log(arr1);
      console.log(arr2);
      console.log(arr3);
      console.log(arr4);

在这里插入图片描述
3.find（）
方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

回调函数可以接收3个参数，依次为当前的值（item）、当前的位置（index）、原数组（arr）

 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var find = oldArray.find((item, index) => {
        return item > 4;
      });
      console.log(this.oldArray, this.find);

有符合函数的返回第一个符合条件的项
在这里插入图片描述

  var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var find = oldArray.find((item, index) => {
        return item > 88;
      });
      console.log(this.oldArray, this.find);

没有符合条件的返回undefined
在这里插入图片描述
find()实现根据id取出数组中的对象

  let Arr = [
        {
          id: 1,
          name: "阿左"
        },
        {
          id: 2,
          name: "阿右"
        }
      ];
      let obj = Arr.find((item, index, arr) => {
        return item.id === 1;
      });
      console.log(obj.name);

在这里插入图片描述
4.findIndex（）
和find差不多不过findIndex返回的是第一个符合条件的索引下标，如果没有符合条件的则返回-1

 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var findIndex = oldArray.findIndex((item, index) => {
        return item > 4;
      });
      console.log(this.oldArray, this.findIndex);

第一项符合条件的是5 so 返回5的索引4
在这里插入图片描述

 var oldArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      var findIndex = oldArray.findIndex((item, index) => {
        return item > 66;
      });
      console.log(this.oldArray, this.findIndex);

没有符合条件的返回-1
在这里插入图片描述
5.fill（）填充替换
fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：array.fill(value, start, end)

value：必需。填充的值。

start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起

   let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]

喜欢点赞加关注吧有赞必回哦~~~