JS-06-数组

一、数组的创建与访问

见:JS-04-javaScript数据类型和变量

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。

要取得Array的长度,直接访问length属性:

let arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr.length); // 6

Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array!!!

let arr = ['A', 'B', 'C'];
arr[1] = 99;
console.log(arr); // arr现在变为['A', 99, 'C']
console.log(arr[1]); // 99

二、改变数组的长度

1、直接给Array的length赋一个新的值会导致Array大小的变化:

let arr = ['A', 'B', 'C'];
console.log(arr.length); // 3// 调整数组大小:
arr.length = 6;
console.log(arr); // arr变为['A', 'B', 'C', undefined, undefined, undefined]// 调整数组大小:
arr.length = 2;
console.log(arr); // arr变为['A', 'B']

不建议直接修改数组的大小! 

2、如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化

let arr = ['A', 'B', 'C'];// 索引超出范围会导致数组大小自动调整:
arr[5] = 'x';
console.log(arr); // arr变为['A', 'B', 'C', undefined, undefined, 'x']

不建议,访问索引时要确保索引不会越界。 

大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。

三、数组的相关操作

3-1、indexOf搜索一个指定的元素的位置

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf('30'); // 元素'30'的索引为2

3-2、slice截取Array的部分元素,然后返回一个新的Array

slice()就是对应String的substring()版本

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引,不包括结束索引

如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']aCopy === arr; // false

3-3、push和pop

push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []

3-4、unshift和shift

如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'
arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []

3-5、数组的排序

1、sort()方法

sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

2、reverse()方法

reverse()把整个Array的元素给调个个,也就是反转

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

3、splice()方法

将数组按照我们自己指定的顺序排序。

splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

        var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 只删除,不添加:arr.splice(2, 2);console.log(arr); // ['Microsoft', 'Apple', 'Excite', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素console.log(arr); // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Excite', 'Oracle']// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Microsoft', 'Apple', 'Oracle']console.log(arr); // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

3-6、concat连接两个Array

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

【注意】:

concat()方法并没有修改当前Array,而是返回了一个新的Array

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

只能拆开一维数组:

3-7、join用指定元素连接数组并返回字符串 

join()方法把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字符串,将自动转换为字符串后再连接。

四、多维数组

数组的某个元素又是一个Array,则可以形成多维数组,例如:

var arr = [[1, 2, 3], [400, 500, 600], '-'];// 通过索引取到500这个值
var x = arr[1][1];

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

​LeetCode解法汇总1261. 在受污染的二叉树中查找元素

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:. - 力扣(LeetCode) 描述: 给出一个满足下述规则的二叉树&#xff1…

京东商品详情接口数据采集—价格,库存,支持高并发

初识API调用 为帮助商家及开发者快速掌握京东API调用方法,本文为大家提供的万邦API工具为例,为读者演示一例API调用过程,并做相应讲解。 item_get-获得JD商品详情 1、API公共参数示例 请求地址: https://api-gw.onebound.cn/jd/item_get …

【汇编】#2 寄存器相关与实模式下的8086存储器寻址

文章目录 前言一、什么是寄存器二、8086寄存器1. 8086通用寄存器2. 段寄存器3.专用寄存器3.1 标志寄存器内部具体标志及其作用 tips: 不同尺寸数据在存储器中存储 三、 实模式存储器寻址逻辑段与小段物理地址计算方式 前言 本文以清华大学出版社的《80x86汇编语言设计》和李忠…

docker + nginx打包前端镜像

项目场景&#xff1a; 前端使用angular开发&#xff0c;Dockerfile如下&#xff1a; FROM nginx:1.16.1 AS base WORKDIR /app COPY nginx.conf.template /etc/nginx/ CMD ["/bin/bash", "-c", "envsubst ${APP_VERSION} < /app/index.html > …

【CSP考点回顾】后缀表达式计算/中缀表达式转后缀表达式

一、后缀表达式计算 后缀表达式&#xff0c;也被称为逆波兰表示法&#xff08;Reverse Polish Notation&#xff0c;简称RPN&#xff09;&#xff0c;是一种不需要括号来标识操作符优先级的数学表达式。在后缀表达式中&#xff0c;所有的操作符都跟随在它们的操作数之后&#x…

Java 错误 java.net.ConnectException

本篇文章介绍了 Java 中的 java.net.ConnectException 错误。 Java 中的 java.net.ConnectException 错误 java.net.ConnectException 是使用网络时最常见的异常。 它主要发生在客户端、应用程序和服务器之间建立 TCP 连接时。 它是一个经过检查的应用程序,可以使用 try-cat…

day2 员工管理 分类管理

文章目录 新增员工RequestBody方法参数注解 接受json数据两个对象之间属性的拷贝MD5加密 新增员工 DTO 用来接收前端传来的参数 vo用于返回数据 pojo和数据库对应 RequestBody方法参数注解 接受json数据 PostMapping("/")public Result save(RequestBody EmployeeD…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Rating)

提供在给定范围内选择评分的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Rating(options?: { rating: number, indicator?: boolean }) 从API version 9开始&#…

pinia和vuex区别?

Pinia 和 Vuex 都是用于 Vue.js 应用状态管理的工具&#xff0c;它们有一些明显的区别&#xff1a; 基于 Vue 3 和 Composition API&#xff1a; Pinia 是为 Vue 3 开发的状态管理库&#xff0c;并且充分利用了 Vue 3 的 Composition API。它提供了一种新的、基于函数的状态管理…

C++从零开始(day49)——AVLTree模拟实现

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的是关于AVLTree模拟实现 1.AVLTree概念 二叉搜索树可…

双场板功率型GaN HEMT中用于精确开关行为的电容建模

来源:Capacitance Modeling in Dual Field-Plate Power GaN HEMT for Accurate Switching Behavior (TED 16年) 摘要 本文提出了一种基于表面电势的紧凑模型&#xff0c;用于描述具有栅极和源极场板&#xff08;FP&#xff09;结构的AlGaN/GaN高电子迁移率晶体管&#xff08;…

嵌入式驱动学习第三周——设备号与字符设备的注册、分配、释放

前言 这一篇博客来谈谈字符设备的注册、分配与释放。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论一起学习。现在关注就是老粉啦&#xff01; 目录 前…

盲盒抽卡机小程序——开启神秘之旅!

亲爱的朋友们&#xff0c;欢迎来到盲盒抽卡机小程序&#xff01;这里&#xff0c;是一个充满神秘与惊喜的世界&#xff0c;让你随时随地体验抽卡的乐趣。在这里&#xff0c;你可以轻松尝试各种盲盒&#xff0c;发现隐藏的宝藏&#xff0c;感受心跳加速的刺激。 【丰富多样的盲…

Unity类银河恶魔城学习记录9-4 p92 Death of entity源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerStat using System.Collections; using System.Collections.Generi…

k8s 安全机制详解

目录 一、安全机制 三个主要安全机制 认证&#xff08;Authentication&#xff09;&#xff1a; 鉴权&#xff08;Authorization&#xff09;&#xff1a; 准入控制&#xff08;Admission Control&#xff09;&#xff1a; 二、 认证 认证方式 对比总结 认证机制框架和相关组件…

小程序学习 1

pages/goods/search/home.wxml首页功能设定 1. loading入场 2. 下拉刷新 3. 搜索栏 4. 分类切换 5. 商品列表 6. 规格弹层 7. 加载更多 <view style"text-align: center; color: #b9b9b9" wx:if"{{pageLoading}}"><t-loading theme"circula…

Java中的常见类“Math”(一)用法详解

Java 中的 Math 类包含了许多数学函数&#xff0c;可以进行各种数学计算。Math 类是 Java 标准库的一部分&#xff0c;不需要额外引入即可使用。它包含在 java.lang 包中&#xff0c;而 java.lang 包中的类会自动导入到每个 Java 源文件中&#xff0c;所以在编写 Java 程序时无…

uView Swiper 轮播图

该组件一般用于导航轮播&#xff0c;广告展示等场景,可开箱即用&#xff0c;具有如下特点&#xff1a; 自定义指示器模式&#xff0c;可配置指示器样式3D轮播图效果&#xff0c;满足不同的开发需求可配置显示标题&#xff0c;涵盖不同的应用场景具有设置加载状态和嵌入视频的能…

月份的天数

目录 题目描述 输入格式 输出格式 输入输出样例 说明/提示 题目描述 输入年份和月份&#xff0c;输出这一年的这一月有多少天。需要考虑闰年。 输入格式 输入两个正整数&#xff0c;分别表示年份 y 和月数 m&#xff0c;以空格隔开。 输出格式 输出一行一个正整数&…