js数组常用的方法（总结）

news2024/9/30 1:42:12

目录

1.数组头和尾操作——push、pop、unshift/shift

2、数组转为字符串 —— join()

3、数组截取 —— slice()

4、数组更新 —— splice()

5、反转数组 —— reverse()

6、连接数组 —— concat()

7、ES6连接数组 —— ...

ES5数组新增方法

8、索引方法 —— indexOf()和 lastIndexOf() 

9、迭代方法

1、遍历循环 —— forEach()

2、映射 —— map()

3、过滤 —— filter()

4、判断 —— every()   都满足吗

5、判断 —— some()   有满足吗

ES6数组新增方法

10、Array.from() —— 将类数组的对象转换成数组

 11、Array.of() —— 将一组值转变为数组

12、find() —— 返回第一个匹配的数据

13、findIndex() —— 返回第一个匹配的数据的索引

 14、fill() —— 填充数组

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

16、copyWithin() —— 拷贝元素

1.数组头和尾操作——push、pop、unshift/shift

尾部push可向数组的末尾添加一个或多个元素，并返回新的长度

影响

原数组

pop可向数组的末尾删除一个或多个元素，并返回新的长度
头部unshift可向数组的头部添加一个或多个元素，并返回新的长度
shift可向数组的头部删除一个或多个元素，并返回新的长度

代码示例：

let arr = [1,2,3];

//数组尾操作
arr.push(4);
console.log(arr);
arr.pop(4);
console.log(arr);

//数组头操作
arr.unshift(0);
console.log(arr);
arr.shift(0);
console.log(arr);

运行结果：

2、数组转为字符串 —— join()

join()将数组转为字符串，间隔默认为“，”，里面传参的话可以自定义间隔符。原数组不变

代码：

			let arr2 = [1,2,3]
			console.log(arr2.join())
			console.log(arr2.join(':'))
			console.log(arr2)

 运行结果：

3、数组截取 —— slice()

arr.slice(start , end); 

其中end为可选，且原数组不变

let arr3 = [1,2,3,4,5];
console.log(arr3.slice(0,2));// [1, 2]
console.log(arr3.slice(2));//[3, 4, 5]
console.log(arr3);//[1, 2, 3, 4, 5]

4、数组更新 —— splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）

arr.splice(index , howmany , item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。


示例代码：

var arr = ["张三","李四","王五","小明","小红"];
	/**************删除"王五"****************/
	var arrReplace1 = arr.splice(2,1);	
	console.log(arrReplace1);  // ["王五"] 
	console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)
	//删除多个
	var arrReplace2 = arr.splice(1,2);	
	console.log(arrReplace2);  //  ["李四", "小明"] 
	console.log(arr);  // ["张三", "小红"]
	/**************添加"小刚"****************/
	var arrReplace3 = arr.splice(1,0,"小刚");
	console.log(arrReplace3);  // [] (没有删除元素，所以返回的是空数组)
	console.log(arr);  // ["张三", "小刚", "小红"]
	//添加多个
	var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
	console.log(arrReplace4);  // []
	console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]
	/**************"王五"替换"小刚"****************/
	var arrReplace5 = arr.splice(1,1,"王五");
	console.log(arrReplace5);  // ["小刚"]
	console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]
	//替换多个
	var arrReplace6 = arr.splice(1,4,"李四");
	console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]
	console.log(arr);  // ["张三", "李四", "赵六"]

5、反转数组 —— reverse()

方法用于颠倒数组中元素的顺序。改变原数组

代码示例：

let arr4 = ['苹果','香蕉','梨子'];
console.log(arr4.reverse());//['梨子', '香蕉', '苹果']
console.log(arr4);          //['梨子', '香蕉', '苹果']

6、连接数组 —— concat()

连接一个或多个数组，传参时连接数组，不传参时复制数组。不改变原数组

代码示例：

let arr5 = [1,2,3];
let arr6 = [4,5,6];
let newArr = arr5.concat(arr6);
console.log(arr5.concat());  //[1, 2, 3]
console.log(newArr);         //[1, 2, 3, 4, 5, 6]
console.log(arr5);           //[1, 2, 3]

7、ES6连接数组 —— ...

[..数组1,...数组2,...数组3,..,...数组N]； 就可以将两个或者多个数组进行连接，不改变原数组

代码示例：

let arr7 = ['a','b','c'];
let arr8 = ['d','e','f'];
let arr9 = ['g','h','i'];

// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
console.log([...arr7,...arr8,...arr9]);

ES5数组新增方法

8、索引方法 —— indexOf()和 lastIndexOf() 

.indexOf(查找的字符,[从哪开始])     从前往后找，查找到字符首次出现的位置下标，没找到返回-1

.lastIndexOf(查找的字符,[从哪开始])     从后往前找，查找到字符首次出现的位置下标，没找到返回-1

代码示例：

let array = [1,2,3,4,2];
console.log(array.indexOf(2));     //1
console.log(array.indexOf(2,2));   //4
console.log(array.lastIndexOf(2)); //4

9、迭代方法

这几个方法语法都一样，都不会改变原数组

1、遍历循环 —— forEach()

array.forEach(function(value,key,arr){

        ...

})

value:必选，当前元素的值；

key:可选，当前元素的索引值；

arr:可选，当前元素所属的数组对象。

代码示例：

let arr = ['a','b','c','d'];
arr.forEach(function(a,b,array){
	console.log(a+'--'+b+'--'+array)
})

运行结果：

2、映射 —— map()

返回新数组，新数组是原数组处理后的值。

代码示例：

let arr = ['a','b','c','d'];
var arr2 = arr.map(function(a,b){
	return a+'00';
})
console.log(arr2)

 运行结果：

3、过滤 —— filter()

创建一个新的数组，返回的是对原数组进行筛选过滤

代码示例：

let arr3 = ['a','b','c','d'];
var arr4 = arr3.filter(function(a,b){
	return b>2;
})
console.log(arr4);//['d']

4、判断 —— every()   都满足吗

判断所有选项是否都满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];
			let result1 = arr3.every(function(a,b){
				return a>3;
			})
			console.log(result1);
			
			let result2 = arr3.every(function(a,b){
				return a>0;
			})
			console.log(result2);

运行结果：

5、判断 —— some()   有满足吗

判断所有选项是否有满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];
			let result1 = arr3.some(function(a,b){
				return a>3;
			})
			console.log(result1);
			
			let result2 = arr3.some(function(a,b){
				return a>12;
			})
			console.log(result2);

运行结果：

ES6数组新增方法

10、Array.from() —— 将类数组的对象转换成数组

代码示例：

let json ={
	'0':'星',
	'1':'期',
	'2':'六',
	length:3
	}
let arr2 = Array.from(json);
console.log(arr2);

运行结果：

 11、Array.of() —— 将一组值转变为数组

方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

    let arr1 = Array.of(1,2,3);	
	let arr2 = Array.of([1,2,3]);
	let arr3 = Array.of(undefined);
	let arr4 = Array.of();
	console.log(arr1); // [1, 2, 3]
	console.log(arr2); // [[1, 2, 3]]
	console.log(arr3); // [undefined]
	console.log(arr4); // []

12、find() —— 返回第一个匹配的数据

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

        参数: 回调函数

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

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

let arr = [5,4,3,2,1];
let arr1 = arr.find((v,k)=>{
	return v==4;
})
let arr2 = arr.find((v,k)=>{
	return v==0;
})
console.log(arr);
console.log(arr1);
console.log(arr2);

其中，find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

运行结果：

let array = [
	{
		name:'小王',
		age:18
	},
	{
		name:'小张',
		age:13
	}
];
let array1 = array.find((v,k)=>{
	return v.age>12;
})
console.log(array1);

 只返回满足条件的第一个，运行结果如下：

13、findIndex() —— 返回第一个匹配的数据的索引

跟find()相似，只不过find()返回的是第一个匹配的数据，而findIndex()返回的是第一个匹配的下标。

代码示例：

let array1 = array.findIndex((v,k)=>{
	return v.age>12;
})
console.log(array1);

 运行结果：

 14、fill() —— 填充数组

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

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

value：必需。填充的值。

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

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

let arr = [1,2,3,4,5,6,7,8];
let arr1 = arr.fill(0);
console.log(arr);  //[0, 0, 0, 0, 0, 0, 0, 0]
console.log(arr1); //[0, 0, 0, 0, 0, 0, 0, 0]
	
let arr2 = [1,2,3,4,5,6,7,8].fill(0,1);    
let arr3 = [1,2,3,4,5,6,7,8].fill(0,1,2); 
console.log(arr2);  //[1, 0, 0, 0, 0, 0, 0, 0]
console.log(arr3); //[1, 0, 3, 4, 5, 6, 7, 8]

注意：fill()会修改本身的数组。

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法：arr.includes(searchElement ,  fromIndex)

searchElement ： 必须。需要查找的元素值。

fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let array = ['aaa','bbb','ccc','ddd','eee'];
let array1 = array.includes('aaa');
console.log(array1); //true
			
let array2 = array.includes('aaa',1);
console.log(array2); //false

16、copyWithin() —— 拷贝元素

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员

语法：array.copyWithin(target ,  start ,  end)

target ：必需。从该位置开始替换数据。

start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。

end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
 

    let arr = [1,2,3,4,5,6];
	let result1 = [1,2,3,4,5,6].copyWithin(0);
	let result2 = [1,2,3,4,5,6].copyWithin(0,1);
	let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
	let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
	let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
	console.log(result1);  // [1, 2, 3, 4, 5, 6]
	console.log(result2);  // [2, 3, 4, 5, 6, 6]
	console.log(result3);  // [1, 4, 5, 4, 5, 6]
	console.log(result4);  // [1, 3, 4, 5, 5, 6]
	console.log(result5);  // [1, 3, 4, 5, 6, 6]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/906107.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PgSQL中的DATE_PART使用

PgSQL中的DATE_PART使用

用法： DATE_PART(field, source) 这个DATE_PART()函数返回类型为double precision的值 century decade year month day hour minute second microseconds milliseconds dow doy epoch isodow isoyear timezone timezone_hour timezone_minute
阅读更多...
水经微图网页版发布

水经微图网页版发布

水经微图网页版，可轻松将关注的地点制作成你的个人地图。 你可以在任意位置添加标注点或绘制地图，查找地点并将其保存到你的地图中，或导入地图数据迅速制作地图并保存，你还可以运用图标和颜色展示个性风采，从而可让每…
阅读更多...
线程阻塞队列

线程阻塞队列

阻塞队列 一、BlockingQueue 接口 BlockingQueue 是阻塞队列接口实现机制是使用两条线程，允许两个线程同时操作队列一个线程用于写入 Put ,一个线程用于读取 Take当队列中没有数据的情况下，读取线程会自动阻塞，直到有数据放入队列当队列中数…
阅读更多...
opencv进阶12-EigenFaces 人脸识别

opencv进阶12-EigenFaces 人脸识别

EigenFaces 通常也被称为 特征脸，它使用主成分分析（Principal Component Analysis，PCA） 方法将高维的人脸数据处理为低维数据后（降维），再进行数据分析和处理，获取识别结果。 基本原理…
阅读更多...
蓝牙资讯|消息称富士康投资4亿美元在印度生产苹果 AirPods 耳机

蓝牙资讯|消息称富士康投资4亿美元在印度生产苹果 AirPods 耳机

根据印度最大通讯社 PTI 报道，苹果和富士康已经签署一项新的协议，富士康将投资 4 亿美元在印度第四大城市海得拉巴扩建工厂，负责为苹果生产 AirPods TWS 耳机。 报道称苹果已经决定在印度本土生产 AirPods 耳机，富士康计划投资 …
阅读更多...
测试框架pytest教程（2）-用例依赖库-pytest-dependency

测试框架pytest教程（2）-用例依赖库-pytest-dependency

对于 pytest 的用例依赖管理，可以使用 pytest-dependency 插件。该插件提供了更多的依赖管理功能，使你能够更灵活地定义和控制测试用例之间的依赖关系。 Using pytest-dependency — pytest-dependency 0.5.1 documentation 安装 pytest-dependency 插…
阅读更多...
ipad手写笔有必要买吗？开学便宜又好用电容笔推荐

ipad手写笔有必要买吗？开学便宜又好用电容笔推荐

苹果电容笔之所以能够被iPad用户广泛使用，很大程度上是因为其的优秀性能，具有着独特的重力压感功能。但苹果原装的电容笔，价格相对比较高，所以很多人，都选择了普通的平替电容笔。如今许多人都爱用iPad来画图或写笔记&a…
阅读更多...
Go 数组

Go 数组

一、复合类型： 二、数组 如果要存储班级里所有学生的数学成绩，应该怎样存储呢？可能有同学说，通过定义变量来存储。但是，问题是班级有80个学生，那么要定义80个变量吗？ 像以上情况，最…
阅读更多...
攻防世界-command_execution

攻防世界-command_execution

原题 解题思路 题目告诉了，这可以执行ping命令且没WAF，那就可以在ping命令后连接其他命令。 服务器一般使用Linux，在Linux中可使用“&”连接命令。 ping 127.0.0.1&find / -name "flag*" ping 127.0.0.1&cat /home/f…
阅读更多...
Linux中shell脚本常用命令、条件语句与if、case语句

Linux中shell脚本常用命令、条件语句与if、case语句

目录 一.shell脚本常用命令 1.1.echo命令 1.2.date命令 1.3.cal命令 1.4.tr命令 1.5.cut命令 1.6.sort命令 1.7.uniq命令 1.8.cat多行重定向 二.条件语句 2.1.条件测试（三种测试方法） 2.2.正整数值比较 2.3.字符串比较 2.4.逻辑测试 三.i…
阅读更多...
深入了解 Java 中 Files 类的常用方法及抽象类的 final 修饰

深入了解 Java 中 Files 类的常用方法及抽象类的 final 修饰

文章目录 Files 类常用方法抽象类的 final 修饰 🎉欢迎来到Java学习路线专栏~深入了解 Java 中 Files 类的常用方法及抽象类的 final 修饰 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页：IT陈寒的博客🎈该系列文章专栏&#xff1a…
阅读更多...
【C语言学习】二分法查找有序数组中的数

【C语言学习】二分法查找有序数组中的数

二分查找的基本原理 二分查找的基本逻辑就是每次找区间的中间数，然后与要查找的数进行比较，不断的缩小区间，最后区间中只剩一个数，即为要查找的数。如果不是，则没有该数。 二分查找只适用于有序数组 以数组中的数从左…
阅读更多...
计算机视觉领域文献引用

计算机视觉领域文献引用

Bag of freebies 炼丹白嫖加油包 Bag of freebies、致力于解决数据集中语义分布可能存在偏差的问题。在处理语义分布偏差问题时，一个非常重要的问题是不同类别之间存在数据不平衡的问题。 一、数据增强篇 Data Augmentation （1）图片像素调整…
阅读更多...
安全模式进不去，解决方法在这！

安全模式进不去，解决方法在这！

“我想让电脑进入安全模式，但无论我怎么操作都无法进入。这是怎么回事呢？我怎么才能让电脑进入安全模式呢？请求帮助！” 安全模式是Windows操作系统的一种启动选项，用于解决系统问题和故障。然而，有时候用户…
阅读更多...
PON测试，“信”助力 | 信而泰测试解决方案浅析

PON测试，“信”助力 | 信而泰测试解决方案浅析

PON介绍 一、什么是PON网络 PON是“Passive Optical Network”的缩写，是一种基于光纤的网络技术。PON网络通过单向的光信号传输来实现数据、语音和视频等信息的传输。PON网络可以支持多个传输速率和距离要求，因此广泛应用于FTTH、FTTB（Fibe…
阅读更多...
Three.js 实现模型分解，拆解效果

Three.js 实现模型分解，拆解效果

原理：通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解，分解的效果。 注意：支持模型材质position 修改的材质类型为 type“Mesh” ,其他类型的材质修改了position 可能没有实际效果 在上一篇 Three.js加载外部glb,fbx,gltf…
阅读更多...
金融市场中的机器学习；快手推出自研语言模型“快意”

金融市场中的机器学习；快手推出自研语言模型“快意”

🦉 AI新闻 🚀 OpenAI可能面临《纽约时报》的起诉，侵犯知识产权引发争议 摘要：OpenAI使用《纽约时报》的文章和图片来训练AI模型，违反了《纽约时报》的服务条款，可能面临巨大损失。此前，也有其…
阅读更多...
冠达管理：定增获批后会大涨吗？

冠达管理：定增获批后会大涨吗？

近年来，跟着我国资本商场的稳步发展，定向增发（定增）已成为不少上市公司的一种重要融资方法，其比较于揭露发行股票，更能够满足少量出资者的融资需求。然而，对于很多出资者来说，一个问…
阅读更多...
游戏服务端性能测试

游戏服务端性能测试

导语：近期经历了一系列的性能测试，涵盖了Web服务器和游戏服务器的领域。在这篇文章中，我将会对游戏服务端所做的测试进行详细整理和记录。需要注意的是，本文着重于记录，而并非深入的编程讨论。在这里，我将与…
阅读更多...
Visual Studio 2022 你必须知道的实用调试技巧

Visual Studio 2022 你必须知道的实用调试技巧

目录 1、什么是bug？ 2.调试是什么？有多重要？ 2.1我们是如何写代码的？ 2.2又是如何排查出现的问题的呢？ ​编辑 2.3 调试是什么？ 2.4调试的基本步骤 2.5Debug和Release的介绍 3.Windows环境调试介绍…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023