总结: 数组常用的方法

已于 2022-05-07 14:56:16 修改
阅读量1.4k 收藏 22
点赞数 5
文章标签： 前端 javascript
于 2022-05-05 20:52:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48524561/article/details/124581555
版权

在实际开发当中, 数组和对象使用到最多的; 数组和对象有很多的方法, 这里主要探讨一下:

  • 数组的增删改查
  • 数组的排序方式
  • 数组转换成其他数据类型的方式
  • ES6数组新增常用的迭代方式

为什么需要数组?

        数组可以存入不限数的数据, 并且可以使用下标值进行访问; 数据在数组的内部是有序排列的, 数组经常被运用在循环遍历当中.

        在DOM中使用map方式映射dom数, 在vue中使用v-for渲染到页面上等等都会出现数组循环遍历的身影; 所以数组是很重要的!!!

(1) 数组的增删改查

增: 使用到一个api的时候, 必须关注三点: 1. 作用  2. 返回值  3. 用法

① push()  影响原数组

        作用: 在数组的末尾添加一个数据

        参数: 一个数据或多个

        返回值: 添加完后新数据的length值

        用法: 数组.push(数据)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.push(6, 7, 8);
    const arr2 = arr.push(9, 10, 11);
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
  </script>

② unshift()  影响原数组

        作用: 从数组的开头增加一个数据

        参数: 一个数据或多个

        返回值: 新数组的length值

        用法: 数组.unshift(数据)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.unshift(6, 7, 8);
    const arr2 = arr.unshift(9, 10, 11);
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
  </script>

③ splice()  影响原数组

        作用: 在指定的下标值前面添加数据

        参数: 1.指定下标值  2.要删除数据的数量  3.添加数据的数量

        返回值: 没有或者说是空数组"[ ]"

        用法: 数组.splice(下标值, 数据......)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.splice(5, 0, "第一个数据", "第二个数据");
    console.log(arr);
    console.log(arr1);
  </script>

④concat()  不影响原数组

        作用: 连接两个数组(先创建当前数组的副本, 然后把第二个数组添加到副本的末尾, 不会影响原数组)

        参数: 第二个数组

        返回值: 连接好的新数组

        用法: 数组1.concat(数组2)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.concat([6, 7, 8, 9, 10]);
    console.log(arr);
    console.log(arr1);
  </script>

删:

① pop()  影响原数组

        作用: 从数组的末尾删除一个数据(一次只能删除一个)

        参数: 无

        返回值: 被删除的数据

        用法: 数组.pop()

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

  

② shift()  影响原数组

        作用: 从数组的开头删除一个数据(一次只能删除一个)

        参数: 无

        返回值: 被删除的数据

        用法: 数组.shift()

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

 

③ splice()  影响原数组

        作用: 指定的下标值后面, 删除一个或多个数据

        参数: 1.指定的下标值  2.删除数据的个数

        返回值: 包含被删除数据的数组

        用法: 数组.splice(开始位置, 删除的数据)

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

④ slice()  不影响原数组

        作用: 创建一个含有原来数组中数据的新数组

        参数: 1.开始的原数组的下标值(包含)  2.结束的原数组的下标值(不包含)

        返回值: 获取完数据后的新数组

        用法: 数组.slice(开始位置, 结束位置)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.slice(0, 2);
    const arr2 = arr.slice(2, 4);
    console.log(arr);
    console.log(arr1);
  </script>

改:

① splice()  影响原数组

        作用: 指定的下标值后面, 删除一个或多个数据, 添加一个或多个数据

        参数: 1.指定的下标值  2.删除数据的个数  3.添加数据的个数

        返回值: 包含被删除数据的数组

        用法: 数组.splice(开始位置, 删除的数据, 添加的数据)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.splice(0, 2, "第一个元素", "第二个元素");
    console.log(arr);
    console.log(arr1);
  </script>

  

查:

① indexOf()

        作用: 查找指定数据, 有这返回该数据的下标值, 没有这返回-1

        参数: 需查询的数据

        返回值: 指定数据的下标值或-1

        用法: 数组.indexOf(数据)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.indexOf(1);
    const arr2 = arr.indexOf(0);
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
  </script>

 

② includes()

        作用: 查找指定数据, 有这返回true, 没有则返回false

        参数: 需查询的数据

        返回值: true或false

        用法: 数组.includes(数据)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.includes(1);
    const arr2 = arr.includes(0);
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
  </script>

  

③ find()

        作用: 返回第一个匹配的数据

        参数: 回调函数

        返回值: 指定数据的下标值或undefined

        用法: 数组.find(回调函数)

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.find(item => item === 1);
    const arr2 = arr.find(item => item === 0);
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
  </script>

  <script>
    const arr = [{ name: '张三', age: 20 }, { name: '李四', age: 30 }];
    const res1 = arr.find(item => item.age > 18);
    const res2 = arr.find(item => item.name === '李四');
    console.log(res1);
    console.log(res2);
  </script>

(2) 数组的排序方式

① reverse()

        作用: 翻转数组

        参数: 无

        返回值: 翻转完后的新数组

        用法: 数组.reverse()

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

② sort()

        作用: 按需排列数组中数据的顺序

        参数: 回调函数

        返回值: 新顺序的数组

        用法: 数组.reverse(function (a, b) {return a - b / b - a})

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.sort(function (a, b) {
      return a - b; // 从小到大
    });
    console.log(arr);
    console.log(arr1);
  </script>

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.sort(function (a, b) {
      return b - a; // 从大到小
    });
    console.log(arr);
    console.log(arr1);
  </script>

(3) 数组转换成其他数据类型的方式

① join()

        作用: 将数组转换成字符串

        参数: 分隔符

        返回值: 转换好的新字符串

        用法: 数组.join("分隔符")

  <script>
    const arr = [1, 2, 3, 4, 5];
    const arr1 = arr.join(',');
    const arr2 = arr.join('?');
    const arr3 = arr.join('!');
    const arr4 = arr.join('@');
    const arr5 = arr.join('$');
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
    console.log(arr5);
  </script>

(4) ES6数组新增常用的迭代方式:

map(), forEach(), some(), every(), filter(), reduce(), findIndex()

ES6新增数组迭代方法_hmxs_hmbb的博客-CSDN博客 详细说明.

hmxs_hmbb
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
常用的数组方法有哪些？
Erictezx的博客
12-15 1128
一 , splice( ) 方法 : 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。 例: let arr7 = [4, 2, 43, 343, 232, 33]; let res7 = arr7.splice(2, 1, 34, 33) //第一个是索引 第二个是删除的个数 第三...
数组的方法总结
最新发布
qq_62793369的博客
03-01 228
1.concat方法 2.every() 方法 3.filter() 方法 4.fill() 方法 5.find() 方法 6.findIndex() 方法 7.forEach() 方法 8.includes() 方法 9.indexOf() 方法 10.isArray() 方法 11.join() 方法 12.lastIndexOf()方法 13.map() 方法 14.pop() 方法 15.push() 方法 16.reverse() 方法 17.shift() 方
数组使用详解
qq_65285898的博客
05-04 3181
目录 一、一维数组 1.定义、创建和初始化 2.一维数组的使用 3.一维数组在内存中的储存 二、二维数组 1.二维数组的创建和初始化 2.二维数组的使用 3.二维数组在内存中的存储 三、数组越界 四、数组作为函数参数 1.冒泡排序函数的错误设计 五、数组名的含义（重点） 1.一般情况 2.特殊情况 一、一维数组 1.定义、创建和初始化 （1）定义：数组是一组相同类型元素的集合。 （2）创建 type_t arr_name [const_n]; //type..
数组常见的20个方法总结
m0_74422771的博客
02-18 330
数组常见的20个方法总结
数组的基本使用
学习笔记
11-08 471
数组的使用
谈谈JavaScript数组常用方法总结
11-27
JavaScript中的数组方法是编程中非常基础且重要的部分，它们提供了丰富的功能来操作和处理数组数据。以下是关于JavaScript数组常用方法的详细说明： 1. **增加数据** - `push()` 方法用于向数组末尾添加一个或多个...
Array-Methods-JS：数组-方法-JS
02-17
二、常用数组方法详解 1. `push()`：在数组末尾添加一个或多个元素，并返回新的长度。 2. `pop()`：删除并返回数组的最后一个元素，使数组长度减一。 3. `shift()`：删除并返回数组的第一个元素，使数组长度减一。 ...
js中数组常用方法总结（推荐）
10-17
主要介绍了js中数组常用方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js常用数组操作方法简明总结
10-25
主要介绍了js常用数组操作方法简明总结,直接上代码,代码中有详细的注释,需要的朋友可以参考下
数组的常用方法总结
qq_63494932的博客
02-08 328
总结es6中常用的数组方法
数组的使用方法
qq_43174912的博客
03-22 3398
title: 数组 tags: JavaScript notebook: 2022年3月22日笔记 indexOf/lastIndexOf 作用： 参数： 返回值： 是否改变原数组： indexOf(第一次出现) 第一个参数 你要检索的项 第二个参数 从哪里开始检索 var ary = [1,2,3,1,1,2,3]; var returnVlue = ary.indexOf(1,2); console.log(returnVlue,ary);//3,原数组 lastInde.
数组常用方法
dachuichaobang的博客
03-31 198
常用数组方法 1.shift 删除数组中的第一个元素 2.pop 删除数组中的最后一个元素 3.unshift 增加元素在数组的前面 4.push 增加元素在数组的后面 5.concnt 合并数组 6.join将数组转为字符串 7.reverse 颠倒数组中的顺序 8.splice 原数组变，返回截取的新数组，截取索引开始，长度，截取位插入值 9.sort 排序 10.slice 返回新数组，截取索引开始，结束 ES5新增： 1.indexOf（）字符串、数组统用，返回指定字符首次出现的位置（索引值），返回
数组的简单使用方法与基本操作
Au__gust的博客
08-19 1172
数组的基本介绍和方法应用，有十分具体的例子，可以更清晰地对其应用进行了解；文末同时进行了Arrays方法的介绍与使用，在今后的代码编写中，可以直接拿来使用
数组常见的七个方法
kzj0916的博客
08-05 1335
数组常见的七个方法 array.pop() pop() 方法从数组中删除最后一个数值，返回值为删除的数值，即最后一个数值； array.push() push() 方法（在数组末尾处）向数组添加一个新的元素，返回值为添加后的数组长度； array.shift() shift() 方法会删除首个数组数值，并把所有其他元素“位移”到更低的索引即补位前进,返回值为删除的首个数组数值。 array.unshift() unshift() 方法（在开头）向数组添加新数值，并“反向位移”旧元素即补位后推，返回值为新数组
数组的方法
Qinlin_的博客
05-25 122
常用方法 push 作用：向数组末尾增加新内容 参数：追加的内容可以是一个也可以是多个 返回值：新增后数组的长度 原有数组改变 var arr = [1,4,5,67,8]; // 添加一个 // 在最后添加一个数字5 arr.push(5); //输出 新数组的长度6 console.log(arr.push(5)); // 添加多个 //在最后添加数字112 和 34，字符串'avf' arr.push(112,34,'avf'); pop 作用：删除数组最后一项 参数：无 返回值：被删除的那
实际开发中对数据的常用操作方法(数组篇)
weixin_45254698的博客
10-22 548
我们都知道数据有很多种类型，Array,String,Number等等； 我为大家分享一下近几个月开发中遇到的对数据的操作方法。 1.数组(Array) 操作数组的常用方法 - array.push() //向数组的末尾添加元素，返回最新长度 - array.pop() //删除数组末尾的元素，并返回元素 - array.shift() //删除数组开头的元素，并返回元素 - a...
数组
weixin_46579258的博客
04-29 136
什么是数组 创建数组 操作数组 数组的索引 数组的方法 一些API 数组的分类
java 数组转化成集合
91奔跑的蜗牛
09-29 3951
将数组转换成集合,数组必须是引用数据类型，如果基本数据类型的数组转换成集合,会将整个数组当作一个对象转换  public static void main(String[] args) { //基本数据类型的数组转换成集合,会将整个数组当作一个对象转换 //输出：[[I@2a139a55] int[] arr = { 11, 22, 33, 44, 55 }; List...
把数组转成字符串
LeoZuosj的博客
01-27 8521
把数组转成字符串 需求：把数组中的数据按照指定个格式拼接成一个字符串 举例： int[] arr = {1,2,3}; 输出结果： “[1, 2, 3]” 用StringBuffer的功能实现 package com.heima.test; public class Test01 { public static void main(String[] args) { int[] a...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值