js 操作数组内容

js 操作数组内容

数组添加元素(更改原数组)

push和unshift会返回添加了新元素的数组长度
push从数组最后加入,unshift从数组最前面加入

const arr = ["a", "b", "c"];
arr.push("d"); 				//返回4,arr现在是["a","b","c","d"]
arr.unshift("a"); 			//返回5,arr现在是["a","a", "b", "c","d"]

数组删除元素(更改原数组)

pop和shift会返回被删除的元素
pop删除最后的元素,shift删除第一个元素

const arr = ["a", "b", "c"];
arr.pop(); 				//返回"c",arr现在是["a","b"]
arr.shift();            //返回"a",arr现在是["b"]

在数组末尾添加多个元素(返回一个新数组,不改变原数组)

concat方法可以给数组添加多个元素并返回新数组的拷贝

const arr = [1, 2, 3];
arr.concat(4, 5, 6);
console.log(arr);                   //[1,2,3],arr没有改动
let newArr = arr.concat(4, 5, 6);
console.log(newArr);				//[1,2,3,4,5,6]

如果给concat传一些数组作为参数,它会把这些数组拆分再把拆分后的元素添加到原始数组中。

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

需要注意的是,concat只会拆分直接传给它的数组,并不会拆分数组内的数组

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

获取子数组(返回一个新数组,不改变原数组)

如果想要从一个数组中获取子数组,可以用slice。slice有两个参数,第一个参数是子数组的起始位置,第二个参数是它的终止位置。

const arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(2, 4);
console.log(newArr);          //[3,4] 从下标2截取到下标4以内,不包括下标4
const arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(2,-1);
console.log(newArr);          //[3,4] 从下标2截取到下标4以内,不包括下标4

如果省略终止参数,则会返回从当前位置到数组末尾的所有内容

const arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(2);
console.log(newArr);         //[3,4,5] 从下标2截取到数组末尾
const arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(-3);
console.log(newArr);         //[3,4,5] 从下标2截取到数组末尾

从任意位置添加或删除元素(更改原数组)

splice允许对当前字符串做修改,可以从任意一个下标增加或删除元素。
这个方法的
第一个参数是起始修改位置的数组下标
第二个参数是需要删除的元素个数(如果不想删除任何元素就传入0
其他参数则是需要添加到数组中的元素
(简单说第一个参数是起始位置,第二个参数从起始位置删除元素的个数,之后参数是加入的元素)

const arr = [1, 5, 7];
console.log(arr.splice(1, 0, 2, 3, 4));  
//返回[],表示没有删除任何元素,数组变为[1,2,3,4,5,7]
const arr = [1, 5, 7];
console.log(arr.splice(1, 2, 2, 3, 4));  
//返回[5,7],表示下标1以及之后的一个元素删除,数组变为[1,2,3,4]
const arr = [1, 5, 7];
arr.splice(1, 0, 2, 3, 4);
console.log(arr);           //[1,2,3,4,5,7]

数组内的分割和替换

ES6引入一个新方法,copyWithin,它会将数组中一串有序的元素复制到数组的另一个位置,复制的同时会覆盖原来数组中的内容。
第一个参数表明要复制到哪里(目标位置)
第二个参数是从哪里开始复制
最后一个(可选的)参数是复制到哪里结束

const arr = [1, 2, 3, 4];
arr.copyWithin(1, 2);
console.log(arr);           //[1,3,4,4]
//1是复制内容到下标为1的位置,2表示从下标为2的位置开始复制,没有写最后一个参数表示复制到复制到末尾
//由于复制的内容是3和4,会覆盖原来下标1和2,下标3没有被覆盖所以依然是4
const arr = [1, 3, 4, 4];
arr.copyWithin(2, 0, 2);
console.log(arr);         //[1,3,1,3]
//第一个2是复制内容到下标为2的位置,0表示从下标为0的位置开始复制,第二个2是复制结束的下标(下标为2的内容不会被复制)
//由于复制的内容是1和3,会覆盖原来下标2和3
const arr = [1,3,1,3];
arr.copyWithin(0, -3, -1);
console.log(arr);        //[3,1,1,3]
//0是复制内容到下标为0的位置,-3表示从下标为1的位置开始复制,-1是复制结束的下标3
//由于复制的内容是3和1,会覆盖原来下标0和1

用指定值填充数组

ES6还有一个很受欢迎的方法,fill。可以任意指定一个起始位置和结束位置,然后填充这部分的数组值。

const arr = new Array(5).fill(1);
console.log(arr);    //[1,1,1,1,1]
const arr = new Array(5).fill(1);
arr.fill('a');
console.log(arr);  //['a','a','a','a','a']
const arr = new Array(5).fill(1);
arr.fill('b',1)    //下标1之后包括下标1填充为'b'
console.log(arr);  //[1,'b','b','b','b']
const arr = new Array(5).fill(1);
arr.fill('b',2,4);  //下标2和下标3填充为'b'
console.log(arr);   //[1,1,'b','b',1];

数组反转和排序

数组反转

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

数组排序

const arr = [5,4,3,2,1];
arr.sort();
console.log(arr);  //[1,2,3,4,5]

sort还允许指定一个排序函数,这个功能不仅方便而且好用。

const arr = [{ name: "Susan" }, { name: "Tom" }, { name: "Peter" }, { name: "Faker" }];
let a = arr.sort((a, b) => {
    if (a.name < b.name)
        return -1
    if (a.name > b.name)
        return 1
    return 0
});
console.log(a);

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【高危】泛微 e-cology <10.57 存在 SQL注入漏洞(POC)(MPS-ndqt-0im5)

漏洞描述 泛微协同管理应用平台(e-cology)是一套企业大型协同管理平台。 泛微 e-cology 受影响版本存在SQL注入漏洞&#xff0c;未经授权的远程攻击者可通过发送特殊的HTTP请求来获取数据库的敏感信息。 漏洞名称GeoServer 存在 sql 注入漏洞漏洞类型SQL注入发现时间2023/4/…

解密PyTorch动态计算图:打破深度学习束缚的秘密武器

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

Linux 用户管理与文件权限

Linux 是一个多用户系统&#xff0c;它允许多个用户同时登陆主机&#xff0c;并为他们分配不同的资源和工作环境进行使用。当然&#xff0c;不同的用户都有文件的私有需求&#xff0c;所以设置不同用户文件的权限管理十分重要。 01 用户与用户组 Linux 中一般将文件访问权限的…

2023有哪些适合学生的蓝牙耳机?盘点四款适合学生的无线蓝牙耳机

随着时代的发展&#xff0c;人们更青睐于能够提升生活品质的产品。蓝牙耳机因为摆脱了线的束缚&#xff0c;使用体验会更好。接下来&#xff0c;我来给大家推荐几款适合学生用的无线蓝牙耳机&#xff0c;有需要的朋友可以当个参考。 一、南卡小音舱Lite2蓝牙耳机 参考价&…

【hello Linux】进程间通信——共享内存

目录 前言&#xff1a; 1. System V共享内存 1. 共享内存的理解 2. 共享内存的使用步骤 3. 共享内存的使用 1. 共享内存的创建 查看共享内存 2. 共享内存的释放 3. 共享内存的挂接 4. 共享内存的去挂接 4. 共享内存的使用示例 1. 两进程挂接与去挂接演示&#xff1a; 2. 两进程…

高性能:负载均衡

目录 什么是负载均衡 负载均衡分类 服务端负载均衡 服务端负载均衡——软硬件分类 服务端负载均衡——OSI模型分类 客户端负载均衡 负载均衡常见算法 七层负载均衡做法 DNS解析 反向代理 什么是负载均衡 将用户请求分摊&#xff08;分流&#xff09; 到不同的服务器上…

中移链控制台对接4A平台功能验证介绍

中移链控制台具备单独的注册登录页面&#xff0c;用户可通过页面注册或者用户管理功能模块进行添加用户&#xff0c;通过个人中心功能模块进行用户信息的修改和密码修改等操作&#xff0c;因业务要求&#xff0c;需要对中移链控制台的用户账号进行集中管理&#xff0c;统一由 4…

什么是分布式任务调度?怎样实现任务调度

通常任务调度的程序是集成在应用中的&#xff0c;比如&#xff1a;优惠卷服务中包括了定时发放优惠卷的的调度程序&#xff0c;结算服务中包括了定期生成报表的任务调度程序&#xff0c;由于采用分布式架构&#xff0c;一个服务往往会部署多个冗余实例来运行我们的业务&#xf…

C S S

目录 1.样式定义方式 1.1行内样式表 1.2内部样式表 1.3外部样式表 2.注解 3.选择器 3.1标签选择器 3.2 id选择器 3.3 类选择器 3.4 派生选择器 3.5 伪类选择器 链接伪类选择器&#xff1a; 位置伪类选择器&#xff1a; ​编辑 目标伪类选择器&#xff1a; 复合选…

Winform从入门到精通(37)——FolderBrowserDialog(史上最全)

文章目录 前言1、Name2、Description3、RootFolder4、SelectedPath5、ShowNewFolderButton前言 当需要获取一个可以通过用户自由选择路径的时候,这时候就需要FolderBrowserDialog控件 1、Name 获取FolderBrowserDialog对象 2、Description 用于指示对话框的描述,如下: …

Windows forfiles命令详解,Windows按时间搜索特定类型的文件。

「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 forfiles 一、结果输出格式二、按时间搜索三、搜索指定类型文件四、批量删除文件 forfile…

ATTCK v12版本战术介绍——防御规避(四)

一、引言 在前几期文章中我们介绍了ATT&CK中侦察、资源开发、初始访问、执行、持久化、提权战术理论知识及实战研究、部分防御规避战术&#xff0c;本期我们为大家介绍ATT&CK 14项战术中防御规避战术第19-24种子技术&#xff0c;后续会介绍防御规避其他子技术&#xf…

【Unity URP】Rendering Debugger和可视化MipMap方案

写在前面 最近开始学习Unity性能优化&#xff0c;是结合了《Unity游戏优化》这本书和教程《Unity性能优化》第叁节——静态资源优化(3)——纹理的基础概念一起学习。在学习纹理优化部分时候遇到了问题&#xff0c;固定管线下Unity的Scene窗口有一个可视化Mipmap的渲染模式&…

PMP/高项 05-项目进度管理

项目进度管理 概念 项目进度管理&#xff08;Schedule Management) 项目进度管理又叫项目工期管理&#xff08;Duration Management)或项目的时间管理(Time Management) 是一种为管理项目按时完成项目所需的各个过程 进度管理过程 规划进度管理 定义活动 排列活动顺序 估算活…

【LeetCode】 309.最佳买卖股票时机含冷冻期

309.最佳买卖股票时机含冷冻期&#xff08;中等&#xff09; 思路 状态定义 一、很容易想到四种状态&#xff1a; a.今天买入&#xff1b;b.今天卖出&#xff1b;c.昨天卖出&#xff0c;今天处于冷冻期&#xff0c;无法进行操作&#xff1b;d.今天不操作&#xff0c;处于持有…

太酷了,库昊

昨天晚上凌晨3点30&#xff0c;勇士和国王的第7场比赛开打。 在上一局在勇士主场干翻勇士后&#xff0c;国王队的信心倍增&#xff0c;他们用自己的节奏一次次击溃勇士&#xff0c;特别是今天的前两节&#xff0c;国王能能够回应勇士的进球&#xff0c;防守也更有侵略性。今天不…

图扑数字孪生助力智慧冷链园区实现大数据实时监控

前言 近年来&#xff0c;业界学者及企业就智慧冷链物流展开深入研究&#xff0c;2010 年 IBM 发布的《智慧的未来供应链》研究报告中提出智慧供应链概念&#xff0c;并由此延伸出智慧物流概念&#xff0c;即智慧物流是以信息化为依托并广泛应用物联网、人工智能、大数据、云计…

【2023 年第十三届 MathorCup 高校数学建模挑战赛】D 题 航空安全风险分析和飞行技术评估问题 27页论文及代码

【2023 年第十三届 MathorCup 高校数学建模挑战赛】D 题 航空安全风险分析和飞行技术评估问题 27页论文及代码 1 题目 D 题 航空安全风险分析和飞行技术评估问题 飞行安全是民航运输业赖以生存和发展的基础。随着我国民航业的快速发展&#xff0c;针对飞行安全问题的研究显得…

巧用千寻位置GNSS软件| 桥台锥坡放样操作技巧

桥台锥坡放样是针对道路施工中&#xff0c;路桥结合部桥台圆锥形斜坡面进行放样设计的专用程序。本期将给大家介绍如何使用千寻位置GNSS软件实现快速完成桥台锥坡放样。 点击【测量】->【桥台锥坡放样】&#xff0c;从线路库中选择桥台经过的线路或是单独增加桥台 锥坡放样&…

QML动画分组(Grouped Animations)

通常使用的动画比一个属性的动画更加复杂。例如你想同时运行几个动画并把他们连接起来&#xff0c;或者在一个一个的运行&#xff0c;或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助&#xff0c;作为命名建议可以叫做一组动画。有两种方法来分组&#xff1a;平行与…