JavaScript中Array数组常用方法(附上相应的用法及示例)

更新时间：2024年01月25日 16:43:06 作者：性野喜悲

这篇文章主要给大家介绍了关于JavaScript中Array数组常用方法,文中附上相应的用法及示例,需要的朋友可以参考下

会改变原数组的方法
不会改变原数组的方法
array.push(需要在末尾添加的数据)【给数组末尾添加一个元素】
array.unshift(需要在首位添加的数据)【给数组首位添加一个元素】
array.pop()【从数组末尾删除元素,不需要传参】
array.shift()【从数组首位开始删除元素,不需要传参】
array.reverse()【反转数组,不需要传参】
array.sort()的三种使用方式
总结

会改变原数组的方法

1、array.push(需要在末尾添加的数据)【给数组末尾添加一个元素】
2、array.unshift(需要在首位添加的数据)【给数组首位添加一个元素】
3、array.pop()【从数组末尾删除元素,不需要传参】
4、array.shift()【从数组首位开始删除元素,不需要传参】
5、array.reverse()【反转数组,不需要传参】
6、array.splice(开始索引[默认值为0],需要截取的数量[默认值为0],要插入的数据[默认不插入，不传此参数则表示只截取，不插入])【截取元素或截取后添加新的元素(三个参数)】
7、array.sort()【数组排序】的三种使用方式
   01、array.sort()【不传参，按位排序】
   02、array.sort(function(a,b){return a - b})【传一个函数作为参数，从小到大排序】
   03、array.sort(function(a,b){return b - a})【传一个函数作为参数，从大到小排序】

不会改变原数组的方法

1、array.join(连接符)【数组转字符串（不传参，则直接把原数组转成字符串；传入连接符，则用传入的符号连接数组里的数据并转换成字符串）】
2、array.concat(需要合并的数组)【数组合并】
3、array.slice(开始索引[默认值为0],结束索引[默认值为数组长度：array.length])【截取数组（截取的数组包含开始的索引，不包含结束的索引）】
4、array.indexOf(要查找的数据)【查找元素在数组中的索引（如果有数据，返回第一次出现的索引值，没有该数据，返回-1）】
5、array.forEach(注解：item[数组每一项的值],index[数组每一项的下标],array[原数组])【遍历数组】的两种写法
	01、array.forEach(function(item,index,array){})
	02、array.forEach((item,index,array)=>{})//推荐此写法
6、array.map()(注解：item[数组每一项的值],index[数组每一项的下标],array[原数组])【映射数组】的两种写法
	01、array.map(function(item,index,array){})
	02、array.map((item,index,array)=>{})//推荐此写法
7、array.filter()【数组过滤】的两种写法
	01、array.filter(function(item,index,array){书写过滤条件})
	02、array.filter((item,index,array)=>{书写过滤条件})//推荐此写法
8、array.every()【判断是否全部满足条件，必须全部满足条件才返回true】的两种写法
	01、array.every(function(item,index,array){书写查找条件})
	02、array.every((item,index,array)=>{书写查找条件})//推荐此写法
9、array.some()【判断是否有满足条件的项，只要有一个满足条件则返回true】
	01、array.some(function(item,index,array){书写查找条件})
	02、array.some((item,index,array)=>{书写查找条件})//推荐此写法

array.push(需要在末尾添加的数据)【给数组末尾添加一个元素】

<script>
	/*
	*简单数组操作示例
	*/ 
	let arr = [1, 3, 4, 5]; //原数组
	arr.push('要追加的任意值'); //操作数组的方法
	console.log(arr, '简单数组追加数据后的结果')
	/*
	*复杂数组操作示例
	*/
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.push({
		name: '王五',
		age: '16'
	}) //操作数组的方法
	console.log(complexArr, '复杂数组追加数据后的结果')
</script>

array.unshift(需要在首位添加的数据)【给数组首位添加一个元素】

<script>
	/*
	*简单数组操作示例
	*/ 
	let arr = [1, 3, 4, 5]; //原数组
	arr.unshift('要追加的任意值'); //操作数组的方法
	console.log(arr, '简单数组追加数据后的结果')
	/*
	*复杂数组操作示例
	*/
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.unshift({
		name: '王五',
		age: '16'
	}) //操作数组的方法
	console.log(complexArr, '复杂数组追加数据后的结果')
</script>

array.pop()【从数组末尾删除元素,不需要传参】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 3, 4, 5]; //原数组
	arr.shift(); //操作数组的方法
	console.log(arr, '简单数组操作后的结果')
	
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.shift() //操作数组的方法
	console.log(complexArr, '复杂数组操作后的结果')
	
</script>

array.shift()【从数组首位开始删除元素,不需要传参】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 3, 4, 5]; //原数组
	arr.shift(); //操作数组的方法
	console.log(arr, '简单数组操作后的结果')
	
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.shift() //操作数组的方法
	console.log(complexArr, '复杂数组操作后的结果')
	
</script>

array.reverse()【反转数组,不需要传参】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 3, 4, 5]; //原数组
	arr.reverse(); //操作数组的方法
	console.log(arr, '简单数组操作后的结果')
	
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.reverse() //操作数组的方法
	console.log(complexArr, '复杂数组操作后的结果')
	
</script>

array.splice(开始索引[默认值为0],需要截取的数量[默认值为0],要插入的数据[默认不插入，不传此参数则表示只截取，不插入])【截取元素或截取后添加新的元素(三个参数)】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 3, 4, 5]; //原数组
	arr.splice(1,1); //操作数组的方法(从下标1开始截取，截取一个元素)
	console.log(arr, '简单数组操作后的结果(从下标1开始截取，截取一个元素)')
	let arr1 = [1, 3, 4, 5]; //原数组
	arr1.splice(0,1,8); //操作数组的方法(从下标0开始截取，截取一个元素,并在截取的位置插入元素8)
	console.log(arr1, '简单数组操作后的结果(从下标0开始截取，截取一个元素,并在截取的位置插入元素8)')
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		age: '14'
	}, {
		name: '李四',
		age: '15'
	}] //原数组
	complexArr.splice(1,1) //操作数组的方法(截取下标为1的数据)
	console.log(complexArr, '复杂数组操作后的结果(截取下标为1的数据)')
</script>

array.sort()的三种使用方式

01、array.sort()【数组排序，不传参，按位排序】

02、array.sort(function(a,b){return a - b})【数组排序，传一个函数作为参数，从小到大排序】

03、array.sort(function(a,b){return b - a})【数组排序，传一个函数作为参数，从大到小排序】

<script>
	/*
	 *简单数组操作示例(01、array.sort()【数组排序，不传参，按位排序】)
	 */
	let arr = [1, 23, 11, 33, 14, 45]; //原数组
	arr.sort(); //操作数组的方法
	console.log(arr, '简单数组操作后的结果[按位排序]')
	/*
	 *简单数组操作示例(02、array.sort(function(a,b){return a - b})【数组排序，传一个函数作为参数，从小到大排序】)
	 */
	let arr1 = [1, 23, 11, 33, 14, 45]; //原数组
	arr1.sort(function (a, b) {
		return a - b
	}); //操作数组的方法
	console.log(arr1, '简单数组操作后的结果[从小到大排序]')
	/*
	 *简单数组操作示例(array.sort(function(a,b){return b - a})【数组排序，传一个函数作为参数，从大到小排序】)
	 */
	let arr2 = [1, 23, 11, 33, 14, 45]; //原数组
	arr2.sort(function (a, b) {
		return b - a
	}); //操作数组的方法
	console.log(arr2, '简单数组操作后的结果[从大到小排序]')

</script>

array.join(连接符)【数组转字符串（不传参，则直接把原数组转成字符串；传入连接符，则用传入的符号连接数组里的数据并转换成字符串）】

<script>
	/*
	 *简单数组操作示例（不传参，则直接把原数组转成字符串）
	 */
	let arr = [1, 23, 14, 45]; //原数组
	let changeArr = arr.join(); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(arr, '原数组')
	console.log(changeArr, '简单数组操作后的结果,未传参')
	/*
	 *简单数组操作示例（传参，则用传入的符号连接数组里的数据并转换成字符串）
	 */
	let arr1 = [1, 3, 4, 5]; //原数组
	let changeArr1 = arr1.join('-'); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(arr1, '原数组')
	console.log(changeArr1, '简单数组操作后的结果，传入-作为连接符')
	/*
	 *复杂数组操作示例（传参，则用传入的符号连接数组里的数据并转换成字符串）
	 */
	let complexArr = [{
		name: '张三',
		str: [1, 23, 14, 45]
	}, {
		name: '李四',
		str: [1, 3, 4, 5]
	}] //原数组
	complexArr.forEach((item, index) => {
		complexArr[index].str= item.str.join('-')
	})
	console.log(complexArr, '复杂数组操作后的结果，传入-作为连接符');
</script>

array.concat(需要合并的数组)【数组合并】

tips之es6语法（推荐）:[...array,...array1](分别传入需要合并的两个数组名)【数组合并】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 23, 14, 45]; //原数组
	let arr1 = [2, 23, 14, 45]; //原数组
	/*
	 *使用concat的语法
	 */
	let changeArr = arr.concat(arr1); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	/*
	 *使用es6的语法
	 */
	let changeArr1 = [...arr, ...arr1]; //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(arr, '原数组1')
	console.log(arr1, '原数组2')
	console.log(changeArr, '简单数组操作后的结果，使用concat的语法')
	console.log(changeArr1, '简单数组操作后的结果，使用es6的语法')
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		str: [1, 23, 14, 45]
	}, {
		name: '李四',
		str: [1, 3, 4, 5]
	}] //原数组
	let complexArr1 = [{
		name: '王五',
		str: [1, 23, 14, 45]
	}, {
		name: '赵六',
		str: [1, 3, 4, 5]
	}] //原数组
	/*
	 *使用concat的语法
	 */
	let changeChangeArr = complexArr.concat(complexArr1); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	/*
	 *使用es6的语法
	 */
	let changeChangeArr1 = [...complexArr, ...complexArr1]; //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(complexArr, '原数组1')
	console.log(complexArr1, '原数组2')
	console.log(changeChangeArr, '复杂数组操作后的结果，使用concat的语法');
	console.log(changeChangeArr1, '复杂数组操作后的结果，使用es6的语法');
</script>

array.slice(开始索引[默认值为0],结束索引[默认值为数组长度：array.length])【截取数组（截取的数组包含开始的索引，不包含结束的索引）】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 23, 14, 45]; //原数组

	let changeArr = arr.slice(1, 2); //操作数组的方法[截取从下标1开始，下标2结束的数据，不包含下标2]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(arr, '原数组1')
	console.log(changeArr, '简单数组操作后的结果')
	/*
	 *复杂数组操作示例
	 */
	let complexArr = [{
		name: '张三',
		str: [1, 23, 14, 45]
	}, {
		name: '李四',
		str: [1, 3, 4, 5]
	}] //原数组
	let changeChangeArr = complexArr.slice(0, 1); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(complexArr, '原数组1')
	console.log(changeChangeArr, '复杂数组操作后的结果');
</script>

array.indexOf(要查找的数据)【查找元素在数组中的索引（如果有数据，返回第一次出现的索引值，没有该数据，返回-1）】

<script>
	/*
	 *简单数组操作示例
	 */
	let arr = [1, 23, 14, 45]; //原数组
	let changeArr = arr.indexOf(23); //操作数组的方法（返回元素所在数组位置的索引）（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	let changeArr1 = arr.indexOf(400); //操作数组的方法（不存在该数据，返回-1）（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	console.log(changeArr, '简单数组操作后的结果，数据存在数组中，返回对应的索引')
	console.log(changeArr1, '简单数组操作后的结果，数据不存在数组中，返回-1')
</script>

array.forEach(注解：item[数组每一项的值],index[数组每一项的下标],array[原数组])【遍历数组】的两种写法

01、array.forEach(function(item,index,array){})

02、array.forEach((item,index,array)=>{})//推荐此写法

	<script>
		/*
		 *简单数组操作示例（传统写法）
		 */
		let arr = [1, 23, 14, 45]; //原数组

		let changeArr = arr.forEach(function(item,index,arr){
			console.log(item, '数组每一项的值')
			console.log(index, '数组每一项的值的下标')
			console.log(arr, '原数组')
		}); 
	
		/*
		 *复杂数组操作示例（es6写法）推荐此写法
		 */
		console.log('------------------------------','分割线')
		let complexArr = [{
			name: '张三',
			str: [1, 23, 14, 45]
		}, {
			name: '李四',
			str: [1, 3, 4, 5]
		}] //原数组
		let changeChangeArr = complexArr.forEach((item,index,changeChangeArr)=>{
			console.log(item, '数组每一项的值')
			console.log(index, '数组每一项的值的下标')
			console.log(changeChangeArr, '原数组')
		}); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
	
	</script>

array.map(注解：item[数组每一项的值],index[数组每一项的下标],array[原数组])【遍历数组】的两种写法

01、array.map(function(item,index,array){})

02、array.map((item,index,array)=>{})//推荐此写法

	<script>
		/*
		 *简单数组操作示例（传统写法）
		 */
		let arr = [1, 23, 14, 45]; //原数组

		let changeArr = arr.map(function(item, index, arr) {
			// 映射条件
			return item * 10
		});
		console.log(arr, '原数组')
		console.log(changeArr, '改变后的新数组')
		/*
		 *复杂数组操作示例（es6写法）推荐此写法
		 */
		console.log('------------------------------', '分割线')
		let complexArr = [{
			name: '张三',
			str: [1, 23, 14, 45],
			age: 10,
		}, {
			name: '李四',
			str: [1, 3, 4, 5],
			age: 20,
		}] //原数组
		let changeChangeArr = complexArr.map((item, index, changeChangeArr) => {
			// 映射条件
			return item.age*2
		}); //操作数组的方法（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(complexArr, '原数组')
		console.log(changeChangeArr, '改变后的新数组')
	</script>

array.filter()【数组过滤】的两种写法

01、array.filter(function(item,index,array){书写过滤条件})

02、array.filter((item,index,array)=>{书写过滤条件})//推荐此写法

	<script>
		/*
		 *简单数组操作示例（传统写法）
		 */
		let arr = [1, 23, 14, 45]; //原数组

		let changeArr = arr.filter(function(item, index, arr) {
			// 映射条件
			return item > 14
		});//操作数组的方法[筛选出大于14的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(arr, '原数组')
		console.log(changeArr, '改变后的新数组')
		/*
		 *复杂数组操作示例（es6写法）推荐此写法
		 */
		console.log('------------------------------', '分割线')
		let complexArr = [{
			name: '张三',
			str: [1, 23, 14, 45],
			age: 10,
		}, {
			name: '李四',
			str: [1, 3, 4, 5],
			age: 20,
		}] //原数组
		let changeChangeArr = complexArr.filter((item, index, changeChangeArr) => item.age==20); //操作数组的方法[筛选出年龄为20的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(complexArr, '原数组')
		console.log(changeChangeArr, '改变后的新数组')
	</script>

array.every()【判断是否全部满足条件，必须全部满足条件才返回true】的两种写法

01、array.every(function(item,index,array){书写查找条件})

02、array.every((item,index,array)=>{书写查找条件})//推荐此写法

	<script>
		/*
		 *简单数组操作示例（传统写法）
		 */
		let arr = [1, 23, 14, 45]; //原数组

		let changeArr = arr.every(function(item, index, arr) {
			// 映射条件
			return item >= 1
		}); //操作数组的方法[筛选出大于14的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(changeArr, '都满足条件时输出的结果')
		/*
		 *复杂数组操作示例（es6写法）推荐此写法
		 */
		console.log('------------------------------', '分割线')
		let complexArr = [{
			name: '张三',
			str: [1, 23, 14, 45],
			age: 10,
		}, {
			name: '李四',
			str: [1, 3, 4, 5],
			age: 20,
		}] //原数组
		let changeChangeArr = complexArr.every((item, index, changeChangeArr) => item.age ==
		20); //操作数组的方法[筛选出年龄为20的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(changeChangeArr, '只有一个满足条件时输出的结果')
	</script>

array.every()【判断是否全部满足条件，只要有一个满足条件就返回true】的两种写法

01、array.some(function(item,index,array){书写查找条件})

02、array.some((item,index,array)=>{书写查找条件})//推荐此写法

	<script>
		/*
		 *简单数组操作示例（传统写法）
		 */
		let arr = [1, 23, 14, 45]; //原数组

		let changeArr = arr.some(function(item, index, arr) {
			// 映射条件
			return item >= 1
		}); //操作数组的方法[筛选出大于14的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(changeArr, '都满足条件时输出的结果')
		/*
		 *复杂数组操作示例（es6写法）推荐此写法
		 */
		console.log('------------------------------', '分割线')
		let complexArr = [{
			name: '张三',
			str: [1, 23, 14, 45],
			age: 10,
		}, {
			name: '李四',
			str: [1, 3, 4, 5],
			age: 20,
		}] //原数组
		let changeChangeArr = complexArr.some((item, index, changeChangeArr) => item.age ==20); //操作数组的方法[筛选出年龄为20的数据]（不会改变原数组，所以需要声明一个变量接收改变后的数据）
		console.log(changeChangeArr, '只有一个满足条件时输出的结果')
	</script>

总结

到此这篇关于JavaScript中Array数组常用方法的文章就介绍到这了,更多相关JS Array数组常用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序中使用 async/await的方法实例分析
这篇文章主要介绍了微信小程序中使用 async/await的方法,结合实例形式分析了微信小程序中async/await的功能、使用方法及操作注意事项,需要的朋友可以参考下
2020-05-05
JavaScript 中的replace方法说明
JavaScript 中的replace方法说明...
2007-04-04
JS常见DOM节点操作示例【创建，插入，删除，复制，查找】
这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建，插入，删除，复制，查找等操作相关函数与使用技巧,需要的朋友可以参考下
2018-05-05
asp批量修改记录的代码
asp 数组批量修改记录的实现代码
2008-06-06
javascript使用百度地图api和html5特性获取浏览器位置
本文介绍了javascript使用百度地图api和html5特性获取浏览器位置的小功能，大家参考使用吧
2014-01-01
动态样式类封装JS代码
动态样式类封装JS代码，动态的改变样式。
2009-09-09
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
这篇文章主要介绍了JS实现至少包含字母、大小写数字、字符的密码等级的两种方法,可实现有效检测用户密码等级的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
javascript的propertyIsEnumerable()方法使用介绍
propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false，下面为大家介绍下其具体的使用
2014-04-04
实例详解JS中的事件循环机制
JavaScript是单线程的脚本语言,所以代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情。本文就为大家详细讲解一下它的件循环机制，需要的可以参考一下
2022-04-04
原生JavaScript实现随机点名表
这篇文章主要为大家详细介绍了原生JavaScript实现随机点名表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01