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.hqwc.cn/news/528994.html

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

相关文章

系统运维网络知识汇总

一、系统运维中网络方面的规划与思考 系统运维建立在网络的基础之上,如果没有一个相对合理的网络架构,恐怕系统运维做起来也不是那么的顺手。一个公司基本上都会把网络和服务器独立开来,划分不同的区域摆放设备,很多时候都是物理…

基于springboot+vue实现食品安全管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现食品安全管理系统演示 摘要 食品行业同其他行业有很多的差别,食品行业不仅要管食品的生产和销售,还要管食品的库存和保质期,那么对于食品管理者来说,就存在着一定的难度。况且食品的种类复杂,存储条…

JavaWeb实验 Servlet基础编程

实验目的 编写Servlet代码;熟悉并掌握Servlet的使用和配置。 实验内容 【1】利用Servlet实现一个简单的登录系统,要求: 包括登录页面、登录成功页面和登录失败提示页面;用户可以在登录页面输入用户名和密码;点击登…

面试题:分布式锁用了 Redis 的什么数据结构

在使用 Redis 实现分布式锁时,通常使用 Redis 的字符串(String)。Redis 的字符串是最基本的数据类型,一个键对应一个值,它能够存储任何形式的字符串,包括二进制数据。字符串类型的值最多可以是 512MB。 Re…

简单了解一个数据包在网络的一生

在主题之前,我想先谈谈目前计算机的网络模型,主要谈谈 TCP/IP 模型: 应用层:产生最原始的数据,常见协议如 http、ftp、websocket、DNS、QUIC 传输层:传递应用层的数据给网络层,必要时进行切割&…

mysql题库详解

1、如何创建和删除数据库? 创建数据库 CREATE DATABASE 数据库名; 删除数据库 drop database 数据库名; 2、MyISAM与InnoDB的区别? 1)事务:MyISAM 不支持事务 InnoDB 支持 2)行锁/表锁:MyISAM 支持表级锁…

#QT(QString)

1.IDE:QTCreator 2.实验 3.记录 4.代码

QT开发(二) 构建QMainWindow

1、前言 QMainWindow是Qt框架中用于创建应用程序主窗口的类。它是许多GUI应用程序的基础,提供了丰富的功能和灵活性,以支持用户界面的创建和管理。 QMainWindow的结构主要包括以下几个部分: 菜单栏(Menu Bar)&#…

【超级干货】播放器核心知识点-音视频同步原理深入剖析

引言 本文是自己学习利用ffmpeg实现音视频同步播放的总结文档,参考了网上一些博客,同时调试ffplay源码进行理解,站在巨人的肩膀上学习,感谢开源和分享精神。文中粘贴的代码每行都有注释,确保读者能理解所涉函数的每一行代码的意义。 章节 因为ffplay源码阅读起来比较复…

微服务技术栈之rabbitMQ基础入门(一)

准备工作: 1,创建空的工程: 首先我们先创建一个空的工程,并且命名为 mq-java 2,创建一个生产者springboot工程(plblisher): 设置项目的基本信息: 勾选版本和依赖&…

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

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

Spring循环依赖的成因与破局

一、Spring注入类型 Spring 核心功能之一依赖注入,依赖注入是使用 Spring 框架的基本手段,通过他获取各种类型的 bean,但使用不同的依赖注入类型时经常会遇到循环依赖的问题。Spring 依赖注入类型: 字段注入,这是最常…