JS Array数组常用方法

news2024/11/18 21:50:15

会改变原数组的方法

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()【查找元素在数组中的索引】
5、array.forEach()【遍历数组】
6、array.map()【映射数组】
7、array.filter()【数组过滤】
8、array.every()【判断是否全部满足条件，必须全部满足条件才返回true】
9、array.some()【判断是否有满足条件的项，只要有一个满足条件则返回true】

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>

 

7、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>

 

 

 

 

 

 

 

 

 

 

 

 

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

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

相关文章

数据处理方法（LFSR）

数据处理方法（LFSR）

一、线性反馈移位寄存器&#xff08;LFSR&#xff09;编码概述 线性反馈移位寄存器&#xff08;LFSR&#xff09;&#xff1a;通常由移位寄存器和异或门逻辑组成。其主要应用在&#xff1a; 伪随机数&#xff0c;伪噪声序列&#xff0c;计数器&#xff0c;BIST&#xff0c;数据…
阅读更多...
树脂吸附含钴废水的实际案例

树脂吸附含钴废水的实际案例

三元聚合物-锂电池是指正极材料使用锂、镍、钴、锰三元正极材料的锂电池&#xff0c;锂离子电池的正极材料有很多种&#xff0c;主要有钴酸锂、锰酸锂、镍酸锂、三元材料、磷酸铁锂等。用三元材料作为正极材料的动力锂电池&#xff0c;近年来凭借其容量高、循环稳定性&#xff…
阅读更多...
Java笔记一（黑马）

Java笔记一（黑马）

目录 一.标准的javaBean二.反射1.获取class对象的三种方式2.反射获取构造方法3.反射获取成员变量4.反射获取成员方法 三.网络编程TCP Serve/ClientNIO框架Netty 一.标准的javaBean package com.itheima.domain;public class Student {//1.成员变量私有化//2.空参&#xff0c;带…
阅读更多...
数据结构-树及相关算法

数据结构-树及相关算法

二叉树 递归算法的关键要明确函数的定义&#xff0c;相信这个定义&#xff0c;而不要跳进递归细节。 写二叉树的算法题&#xff0c;都是基于递归框架的&#xff0c;我们先要搞清楚 root 节点它自己要做什么&#xff0c;然后根据题目要求选择使用前序&#xff0c;中序&#xff0…
阅读更多...
colmap使用教程

colmap使用教程

COLMAP 是具有图形和命令行界面的通用运动结构 (SfM) 和多视图立体 (MVS) 管道。 它为有序和无序图像集的重建提供了广泛的功能。 常见的基于nerf算法均需要colmap来计算位姿 安装colmap&#xff1a; conda install colmap 需要使用python9 step1&#xff1a;准备多视角图…
阅读更多...
第十三节 I/O流与文件操作

第十三节 I/O流与文件操作

文件读写 输入输出流 文本文件 一个字节一个字节写 8位十进制最大255 int read() throws IOException 字节 java.io.OutputStream 将十进制数按字节 用文件的类 表达文件 1.txt 相对路径 &#xff1a;工程是同级的 绝对路径C盘下 D 万物皆对象 都能封装成对象…
阅读更多...
xss-flash钓鱼配合msf捆绑上线

xss-flash钓鱼配合msf捆绑上线

这里写目录标题 一&#xff0c;后门文件生成与制作二&#xff0c;flash安装钓鱼网站搭建三&#xff0c;监听四&#xff0c;钓鱼 一&#xff0c;后门文件生成与制作 打开kali&#xff0c;查看ip add 查看 ip 地址为 192.168.1.8 输入 msfconsole 1.生成后门 msfvenom -p window…
阅读更多...
LeetCode 1026. Maximum Difference Between Node and Ancestor【DFS,BFS,树】中等

LeetCode 1026. Maximum Difference Between Node and Ancestor【DFS,BFS,树】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…
阅读更多...
Direct3D 12——模板——平面镜效果

Direct3D 12——模板——平面镜效果

1.将实物照常渲染到后台缓冲区内&#xff08;不包括镜子&#xff09;。注意&#xff0c;此步骤不修改模 板缓冲区。 2.清理模板缓冲区&#xff0c;将其整体置零。 将实物都绘制到后台缓冲区中&#xff0c;并将模板缓冲区清理为0 &#xff08;用浅灰色来表示&#xff09;。 绘…
阅读更多...
socked编程

socked编程

socket是什么&#xff1f;套接字是什么&#xff1f; 什么是 socket&#xff1f; socket 的原意是“插座”&#xff0c;在计算机通信领域&#xff0c;socket 被翻译为“套接字”&#xff0c;它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定&#xff0c;一台…
阅读更多...
Motion Planning学习笔记一：配置空间、图、图搜索、图遍历

Motion Planning学习笔记一：配置空间、图、图搜索、图遍历

学习高飞博士的路径规划课程所总结的学习笔记。 目录 1、配置空间&#xff08;Configuration Space, C-space&#xff09; 2、图&#xff08;Graphs&#xff09; 3、图搜索&#xff08;Graph Search Basis&#xff09; 3.1、总体框架 3.2、两种基本的图遍历算法 3.3、启…
阅读更多...
漫谈大数据 - HiveSQL总结（二）查询操作

漫谈大数据 - HiveSQL总结（二）查询操作

导语&#xff1a;HiveSQL各关键字详解&#xff0c;hive函数大全&#xff0c;类似于个人记录工具书&#xff0c;后续遇到其他的也会继续加进来。 有关hive库表操作请见上篇&#xff1a;漫谈大数据 - HiveSQL总结&#xff08;一&#xff09;库表操作_昊昊该干饭了的博客-CSDN博客…
阅读更多...
一条SQL如何被MySQL架构中的各个组件操作执行的？

一条SQL如何被MySQL架构中的各个组件操作执行的？

文章目录 1. 单表查询SQL在MySQL架构中的各个组件的执行过程2. SELECT的各个关键字在哪里执行&#xff1f;3. 表关联查询SQL在MySQL架构中的各个组件的执行过程4. LEFT JOIN将过滤条件放在子查询中再关联和放在WHERE子句上有什么区别&#xff1f;5. 聚集索引和全表扫描有什么区…
阅读更多...
推动开发者平台本土化，高通加速中国XR内容生态发展

推动开发者平台本土化，高通加速中国XR内容生态发展

随着VR和AR技术快速发展&#xff0c;产品不断成熟&#xff0c;体验也变得越来越优秀。据悉&#xff0c;Meta Quest系列VR头显出货量超2000万台&#xff0c;基本证明了VR开始在消费类电子产品中占据一席之地。与此同时&#xff0c;近两年AR眼镜也在逐渐升温&#xff0c;成为了创…
阅读更多...
day17_异常

day17_异常

今日内容 零、 复习昨日 一、作业 二、异常 三、自定义异常 零、 复习昨日 见晨考,重点是String类的方法 StringBuffer和StringBuiler面试问 日期解析和格式化 int i Integer.parseInt(“111”); 一、作业 略,见答案二、异常 2.1 介绍 异常,就是程序出现的不正常的情况. 2.2…
阅读更多...
RPA流程自动化技术在金融机构的落地方案详解

RPA流程自动化技术在金融机构的落地方案详解

金融机构在面向数字化运营的转型过程中&#xff0c;需将智能流程自动化技术整合到数字化转型战略中&#xff0c;规划建设统一的企业流程自动化处理平台&#xff0c;作为数字化运营的辅助支撑类系统&#xff0c;明确流程治理方法和运营模式&#xff0c;确保足够的规模弹性&#…
阅读更多...
【深度学习】Softmax回归及前馈神经网络

【深度学习】Softmax回归及前馈神经网络

1 实验内容简介 1.1 实验目的 &#xff08;1&#xff09;熟练掌握tensor相关各种操作&#xff1b; &#xff08;2&#xff09;掌握广义线性回归模型&#xff08;logistic模型、sofmax模型&#xff09;、前馈神经网络模型的原理&#xff1b; &#xff08;3&#xff09;熟练掌…
阅读更多...
第一章： uniapp引入axios异步框架

第一章： uniapp引入axios异步框架

第一章&#xff1a; uniapp引入axios异步框架 在学习uniapp的过程中&#xff0c;发现uniapp框架默认集成request请求框架存在问题&#xff0c;发送请求时在header中塞入token值&#xff0c;而后台接收不到&#xff0c;也就是说uniapp默认的request请求框架&#xff0c;不支持在…
阅读更多...
巨烽数字化采购项目启动，甄云助力医疗影像显示领军企业数智化升级

巨烽数字化采购项目启动，甄云助力医疗影像显示领军企业数智化升级

近日&#xff0c;医疗影像显示行业的领军者深圳市巨烽显示科技有限公司&#xff08;以下简称“巨烽”&#xff09;联合甄云科技举办数字化采购管理项目启动会&#xff0c;双方相关部门负责人及项目组成员参加了此次会议。 会上&#xff0c;就巨烽的数字化采购管理系统建设升级…
阅读更多...
AI写作机器人-ai文章生成器在线

AI写作机器人-ai文章生成器在线

使用AI续写生成器&#xff0c;让内容创作事半功倍&#xff01; 随着人工智能技术的不断进步和应用&#xff0c;AI续写生成器的出现为内容创作带来了全新的革命。这种技术可以让你的写作事半功倍&#xff0c;让你轻松生成高质量的文章和内容。在这篇文章中&#xff0c;我们将介绍…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023