数组操作详解

最新推荐文章于 2024-08-02 14:21:03 发布
最新推荐文章于 2024-08-02 14:21:03 发布
阅读量451 收藏
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weusers/article/details/123203103
版权

最近整理笔记，发现数组的笔记较为松散，索性将知识整合写出来这篇文章，为了有助于理解，作者将每个api都写了例子有助于理解，希望本篇文章能对你有所帮助。

创建数组的方法

// 构造数组
var a = new Array(); // 空数组
var a = new Array(1, ar, arr) // 实数组

// 数组直接量
var a = [];  //空数组
var a = [1, "0", arr];  //实数组

对数组的操作

ES6新语法

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(3)创建一个具有单个元素 3 的数组，而 Array(3) 创建一个长度为3的空数组

目的：Arrat.of()是为了解决构造数组因参数个数不同，导致的行为差异

var a = new Array(3);
console.log(a);   //VM109:2 (3) [空 ×3]

var a = Array.of(3);
console.log(a); // [3]

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。(不改变原对象返回新的数组)

参数

  1. (必需)：转为数组的对象。
  2. (可选)：作用类似map方法，可以对每个元素进行处理，每个元素会执行该回调函数。
  3. (可选)：执行回调函数this绑定的对象
let arr = [1, 2, 3, 4, 5]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 2,3,4,5,6 ]

改变原数组

splice()

作用 ：对数组进行添加或删除操作，然后返回改变的数组

参数

  1. index:必需，添加或删除项目的位置，可以为负数（从后往前）
  2. howmany:可选，表示要删除的数量
  3. item:可选，要添加到数组的新项目
let a = [1, 2, 3, 4, 5]
let item = a.splice(1, 2) //[2,3]
console.log(a);   // [1,4,5]  在下标1的位置往后删除两个元素
let item1 = a.splice(-2, 3)  //[4,5]
console.log(a);   // [1] 在下标倒数第二个的位置也就是元素 4 ，往后删除3个元素

sort

作用 ：对数组的元素进行排序，并返回数组

array.sort((a,b)=>a-b) 升序

array.sort((a,b)=>a+b) 降序

pop()

作用 ：删除数组中的最后一个元素

let a = [1, 2, 3, 4, 5]
let item = a.pop()  //5
console.log(a);  // [1,2,3,4]

shift()

作用 ：删除数组的第一个元素

let a = [1, 2, 3, 4, 5]
let item = a.shift()  //1
console.log(a);  // [2,3,4,5]

unshift()

作用 ：向数组的开头添加一个或多个元素，并返回新的长度

let a = [1, 2, 3, 4, 5]
let item = a.unshift(0)
console.log(a);  // [0,1,2,3,4,5]

push()

作用 ：向末尾添加一个或多个元素，并返回新长度

let a = [1, 2, 3, 4]
let item = a.push(5, 6)
console.log(a);  // [1,2,3,4,5,6]

reserve()

作用 ：颠倒数组中元素的顺序

let a = [1, 2, 3, 4]
a.reverse()
console.log(a);  // [4,3,2,1]

copyWithin()

作用 ：指定位置的成员复制到其他位置

参数

  1. target:必需，替换数据的位置
  2. start:可选，读取数据位置（默认为0）
  3. end:可选，停止读取数据位置，默认为数组长度
let a = [1, 2, 3, 4, 5, 6]
a.copyWithin(0, 2, 5)
console.log(a); // [3,4,5,4,5,6]
注意

  1. 读取数据为左闭右开

  2. 数组长度不变，读取了多少数据就会在替换位置开始替换多少个元素

  3. 从target位置开始往后替换数据

fill()

作用 ：填充数组

参数

  1. 必需，填充数组的值
  2. 可选，填充开始的位置（默认为0）
  3. 可选，填充的结束位置（默认为数组长度）
let a = [1, 6, 8]
a.fill(2)
console.log(a); // [2,2,2]

let a = [1, 6, 8]
a.fill(2, 0, 1)
console.log(a); // [2,6,8]
注意
  1. 如果数组位置有数据，会被填充的数据替换
  2. 填充位置为左闭右开

不改变原数组

slice()

作用 ：浅拷贝数组

参数

  1. begin:可选，提取元素的初始位置
  2. end:可选，提取元素的结束位置
// 简单数据类型为浅拷贝，改变之后互不影响
let a = [1, 6, 8, 9]
let b = a.slice(0, 3)  // [1,6,8]
a[0] = 3
console.log(a);  // [3,6,8,9]
console.log(b);  // [1,6,8]

//复杂数据类型例如对象会改变
let a1 = [{ name: 'Bob', age: 18 }, { name: 'Mary', age: 20 }]
let b1 = a1.slice(1)
a1[1].name = 'Mark'
console.log(a1);  // [ { name: 'Bob', age: 18 }, { name: 'Mark', age: 20 } ]
console.log(b1);  // [ { name: 'Mark', age: 20 } ]
注意

字符串也有slice方法

var str = 'Hello World'
let str1 = str.slice(1, 7)
console.log(str1);  // 'ello W'  空格也占位置
console.log(str);   //  'Hello World'

join()

作用 ：数组转字符串,将数组中的所有元素通过指定分隔符进行分割放入

参数

str:指定要使用的分隔符，默认使用逗号

let arr = [1, 2, 3, 4, 5]
let str = a.join('')
console.log(str); // '123345'
//拿取数组中的元素再通过指定分割符隔开放入字符串中

let a = [['Bob', '23'], 'str'];
let str1 = a.join(); // "Bob,23,str"
let b = [{ name: 'Bob', age: '23' }, 'str'];
let str2 = b.join(); // "[object Object],str"
//数组元素是数组的时候，会将里面的数组也调用join() / toString() ，如果是对象的话会被转为`[object Object]`字符串

toLocaleString()

作用 ：返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用join()方法连接组成

var a = new Date();
let b = a.toLocaleString()
console.log(b);  // '2022/2/7 上午10:55:44'
console.log(a);  //  '2022-02-07T02:57:04.573Z'

toString()

作用 ：数组转字符串，把数组转为由逗号链接起来的字符串

相比于join() 没有优势，不推荐使用

concat()

作用 ：合并数组，并返回一个新的数组

let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]
// 连接三个数组
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
// 添加元素
let newVal3 = a.concat('添加元素',b, c,'再加一个'); 
// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]

indexOf()

作用 ：查找数组是否存在某个元素，返回下标

参数

  1. searchElement:必需，被查找的元素
  2. fromIndex:可选，开始查找的位置（不能大于等于数组的长度），接受负值，默认值为0
let a = ['Bob', [2, 3], 4, 4, 24, 7]
console.log(a.indexOf(2));  // -1 
console.log(a.indexOf('7'));  // -1
console.log(a.indexOf(7));  // 5
console.log(a.indexOf('Bob')); // 0
console.log(a.indexOf([2, 3]));  // -1
注意

  1. 数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。

  2. indexOf() 不能识别NaN

lastIndexOf()

作用 ：查找指定元素在数组中的最后一个位置

参数

  1. searchElement:必需，被查找的元素

  2. fromIndex:可选，逆向开始查找位置，默认值数组的-1。正值：从该值往前查找(如果大于或等于数组长度则查找整个数组)。 负值：绝对值大于数组长度则返回 -1

let a = ['Bob', [2, 3], 4, 4, 24, 7]
console.log(a.lastIndexOf(2));  // -1 
console.log(a.lastIndexOf(4)); //3
console.log(a.lastIndexOf(4, -4)); //2

includes()

作用 ：查找数组是否包含某个元素 返回布尔

参数

  1. searchElement:必需，被查找的元素
  2. fromIndex:可选，默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索
注意

includes是为了弥补indexOf出现的

  1. indexOf方法不能识别NaN

  2. indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

let a = ['Bob', [2, 3], NaN, 4, 24, 7]
console.log(a.includes(2));  // false
console.log(a.includes([2, 3])); // false
console.log(a.includes(NaN)); // true
console.log(a.includes(4, -10)); // true
console.log(a.includes(4, -3)); // true

数组的遍历

遍历数组的方法

forEach

作用 ：按升序为数组中含有效值的每一项执行一次回调函数

参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
注意
  • forEach无法中途退出循环，只能用return退出本次回调，进行下一次回调
  • forEach没有返回值，即使return了一个值

every

作用 ：检测数组所有元素是否都符合判断条件

参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
注意
  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测
  • 如果所有元素都满足条件，则返回 true
function isBigEnough(a) {
    return a >= 10;
    // 判断数组中的所有元素是否都大于10 } 
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false 
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true 

// 接受箭头函数写法 
[12, 5, 8, 130, 44].every(x => x >= 10); // false 
[12, 54, 18, 130, 44].every(x => x >= 10); // true

some

作用 ：数组中的是否有满足判断条件的元素

参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
注意
  • 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。
function isBigEnough(a) {
    return a >= 10;
    // 判断数组中是否有元素大于10 } 
}
let result = [1, 5, 8].some(isBigEnough); // false 
let result1 = [12, 54, 18].some(isBigEnough); // true 

// 接受箭头函数写法
[12, 5, 8, 130, 44].some(x => x >= 10); // false
[12, 54, 18, 130, 44].some(x => x >= 10); // true

filter

作用 ：过滤原始数组，返回新数组

参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
let a = [1, 2, 4, 9]
let result = a.filter(a => a > 3)
console.log(result); //[4,9]

map

作用 ：对数组中的每个元素进行处理，返回新的数组

参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
let a = [1, 2, 4, 9]
let result = a.map(a => a + 3)
console.log(result); //[4,5,7,12]
注意

map和forEach都能进行遍历，但与mpa不同的是forEach不能return，即forEach会改变原数组，map可以生成一个新的数组

reduce

作用 ：为数组提供累加器，合并为一个值

参数

  1. function:必需，数组中每个元素需要调用的函数
  • total:必需，初始值或者上一次调用回调返回的值
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. initialValue:可选，指定第一次回调的第一个参数
注意
  • 如果initialValue有值，那么第一个total的值为initialValue，此时currentValue等于数组中的第一个值
  • 如果initialValue未提供，那么total等于数组中的第一个值，currentValue为数组中的第二个值
let a = [1, 3, [2, 5], 7]
let b = a.reduce(function (a, b) {
    return a.concat(b)
}, [])
console.log(b);  //  1, 3, 2, 5, 7 ]
let c = b.reduce((a, b) => a + b, 2)
console.log(c);  // 20

find() findIndex()

作用 ：根据条件找到数组成员
参数

  1. function:必需，数组中每个元素调用的函数
  • currentValue:必需，数组当前元素的值
  • index:可选，当前元素的索引值
  • arr:可选，数组对象本身
  1. thisValue:可选，当执行回调函数时this绑定对象的值，默认值为undefined
注意

这两个方法都可以识别NaN,弥补 indexOf 的不足

 // find
let a = [1, 4, -7, 22].find((n) => n < 0); // 返回索引-7
let b = [1, 4, -7, 22, NaN].find((n) => Object.is(NaN, n));  // 为true时返回NaN
// findIndex
let a = [1, 4, -7, 22].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -7, 22, NaN].findIndex((n) => Object.is(NaN, n));  // weitrue时返回索引4

参照文章

【干货】js 数组详细操作方法及解析合集 - 掘金 (juejin.cn)

总结

最近也在准备面试，将数组的方法再次进行了总结并且产出了文章，在写文章的同时也感觉到对知识更深入了解。感谢大佬们的文章，他们的知识对我的学习起着至关重要的作用。

weusers
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript Array数组操作详解
李俊标的博客
04-03 1606
数组对象是使用单独的变量名来存储一系列的值。1.创建一个Array(三种方式)//第一种 var car = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; //第二种 var Car=new Array("Saab","Volvo","BMW"); //第三种 var Car=["
c语言—数组详解(建议收藏)
Welcome to my blog.
07-06 15万+
文章目录一、一维数组1.一维数组的创建和初始化(1).数组的创建(2).数组的初始化2.一维数组的使用3.一维数组在内存中的存储二、二维数组1.二维数组的创建和初始化(1).二维数组的创建(2).二维数组的初始化2.二维数组的使用3.二维数组在内存中的存储三、数组作为函数参数1.一维数组2.二维数组四、数组指针和指针数组1.指针数组2.数组指针 一、一维数组 1.一维数组的创建和初始化 (1).数组的创建 数组是一组相同类型元素的集合。 数组的创建方式： type_t arr_name [const
微信小程序 for循环 array数组操作详解
风吹草低见牛羊
04-20 5万+
一、for循环的使用 ①for(let i = 0 ; i &lt; length ; ++i){ } 示例： for(let i=0;i&lt;length;++i){ console.log(temp[i]) } ②for(var x in temp){ } 示例： for (var x in temp) {//x = index that.data....
数组使用详解
qq_65285898的博客
05-04 3188
目录 一、一维数组 1.定义、创建和初始化 2.一维数组的使用 3.一维数组在内存中的储存 二、二维数组 1.二维数组的创建和初始化 2.二维数组的使用 3.二维数组在内存中的存储 三、数组越界 四、数组作为函数参数 1.冒泡排序函数的错误设计 五、数组名的含义（重点） 1.一般情况 2.特殊情况 一、一维数组 1.定义、创建和初始化 （1）定义：数组是一组相同类型元素的集合。 （2）创建 type_t arr_name [const_n]; //type..
指针数组/数组指针详解
weixin_61125362的博客
03-17 397
了解指针数组，数组指针，一维数组，二位数组，数组首元素地址，整个数组地址等........
指针数组与数组指针详解
热门推荐
men_wen的博客
09-28 24万+
指针数组与数组指针详解1.什么是指针数组和数组指针？ 指针数组：指针数组可以说成是”指针的数组”，首先这个变量是一个数组，其次，”指针”修饰这个数组，意思是说这个数组的所有元素都是指针类型，在32位系统中，指针占四个字节。 数组指针：数组指针可以说成是”数组的指针”，首先这个变量是一个指针，其次，”数组”修饰这个指针，意思是说这个指针存放着一个数组的首地址，或者说这个指针指向一个数组的首地址。 根
c++ 数组详解
m0_62870588的博客
03-28 6687
数组的创建 ；数组的初始化列表 ；数组的操作 ；数组的下标操作；数组名不能用于赋值。
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 3726
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
关于指针数组与数组指针详解（知识点全面）
lirendada的博客
02-15 3万+
1.目录 1.指针数组 2.数组指针 2.它们的区别 1.指针数组 如果一个数组中的所有元素保存的都是指针，那么我们就称它为指针数组。其一般形式为： 数据类型 *数组名[常量表达式][常量表达式]...... ; 它是一个数组，数组的元素都是指针，数组占多少个字节由数组本身的大小决定，每个元素都是一个指针。 例如：char *arr[]={“Sunday”,“Monday”}，存储了两个指针，第一个指针指向了字符串"Sunday"，第二个指针指向了字符串"Mond...
C语言数组详解
cw412524的博客
09-25 2万+
C语言数组详解，干货满满！
javascript 数组操作详解
10-24
主要介绍了javascript 数组操作详解,需要的朋友可以参考下
JavaScript数组操作详解
10-20
本文主要介绍了JavaScript的数组操作，具有很好的参考价值，下面跟着小编一起来看下吧
Java封装数组之改进为泛型数组操作详解
08-24
Java 封装数组之改进为泛型数组操作详解 Java 封装数组之改进为泛型数组操作是 Java 语言中的一种重要技术，旨在将基本类型数组封装为泛型数组，以提供多种类型数组的操作。下面将对 Java 封装数组之改进为泛型数组...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 893
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 219
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 283
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【Vue3】自定义组件
又言又语
07-30 437
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
RN高级interview
流星雨的博客
07-31 474
RN高级interview
vite静态资源处理，处理vite项目中src和url路径问题
最新发布
WanweI897的博客
08-02 277
处理vite项目中src和url路径问题
二分法插入排序与数组操作详解
"二分法插入排序是一种在直接插入排序基础上优化的算法，它通过使用二...二分法插入排序是提高插入排序效率的一种策略，而数组是C++中存储和操作数据的基本工具，它们结合使用可以在编程中实现各种高效的数据处理任务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值