当前位置：主页 > 查看内容

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

发布时间：2021-07-04 00:00| 有位朋友查看

简介：ps本篇博文为了方便阅读变量都用的方法名大家不要效仿尽量规范常见四件套 shift unshift pop push 1.shift 删前删除数组的第一项并返回删除元素的值注意如果数组为空则返回undefined var oldArray [z, u, o, z, h, o, n, g, m, i, n]; var shift oldArr……

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]

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

；原文链接：https://blog.csdn.net/weixin_46719868/article/details/115656474
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：十、JavaScript 基础 下一篇：没有了

随机推荐

Nginx+php配置文件及原理解析

采用nginx+PHP作为webserver的架构模式，在现如今运用相当广泛。然而第一步需要...
js实现类选择器和name属性选择器的示例步

jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQ...
单选按钮、多选按钮用图片实现加样式

之前一直看到有人在问，单选按钮和多选按钮怎么加样式、怎么把按钮变大？下面把...
Ajax商品分类三级联动的简单实现(案例)

思路分析：效果：当页面加载时，利用ajax异步向后台请求数据，加载一级商品类别...
B站超强脚本开源！一键自动完成任务.....

从二次元到泛娱乐化弹幕网站，再到现在无论是追剧还是看教程，只要你想要看的，...
计算机教育中缺失的一课，劝学弟学妹们一

各位学弟学妹们好作为稍微年长的我岁月是把杀猪刀啊今天就给大家补补课。在大学...
Redis为什么默认16个数据库？

在实际项目中Redis常被应用于做缓存，分布式锁、消息队列等。但是在搭建配置好Re...
超详细的MySQL handler相关状态参数解释

概述 MySQL自古以来都有一个神秘的HANDLER命令，而此命令非SQL标准语法，可以降...
C++ list类的模拟实现

list类和string与vector不一样list类的底层是通过双向带头循环链表属性定义由...
Chrome浏览器可在屏幕分享时将通知静音

过去几个月，线上会议已经成为了许多人工作生活中不可或缺的一环。在正式的场合...

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

常见四件套 shift unshift pop push

比较容易记混的 slice splice

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

翻转拼接排序分割

ES5数组新增方法

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

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

推荐图文

非常好用的asp备份,还原SQL数据库的代码

诺基亚转让操作系统版权，并以 MIT 协议重新分发

html标签的嵌套规则介绍

如何减少网页的内存使用与CPU占用

详解VSCode打开多个项目文件夹的解决方法

vscode的几项基本配置详解

随机推荐

Nginx+php配置文件及原理解析

js实现类选择器和name属性选择器的示例步

单选按钮、多选按钮用图片实现加样式

Ajax商品分类三级联动的简单实现(案例)

B站超强脚本开源！一键自动完成任务.....

计算机教育中缺失的一课，劝学弟学妹们一

Redis为什么默认16个数据库？

超详细的MySQL handler相关状态参数解释

C++ list类的模拟实现

Chrome浏览器可在屏幕分享时将通知静音

关于我们

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

常见四件套 shift unshift pop push

比较容易记混的 slice splice

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

翻转 拼接 排序 分割

ES5数组新增方法

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

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

推荐图文

随机推荐

关于我们

翻转拼接排序分割