零基础学习JS--基础篇--索引集合类

数组是由名称和索引引用的值构成的有序列表。

JavaScript 中没有明确的数组数据类型。但是,你可以使用预定义的 Array 对象及其方法来处理应用程序中的数组。Array 对象具有以各种方式操作数组的方法,例如连接、反转和排序。它有一个用于确定数组长度的属性和用于正则表达式的其他属性。

创建数组

以下语句创建了等效的数组:

const arr1 = new Array(element0, element1, /* … ,*/ elementN);
const arr2 = Array(element0, element1, /* … ,*/ elementN);
const arr3 = [element0, element1, /* … ,*/ elementN];

element0, element1, …, elementN 是数组元素的值列表。当指定这些值时,数组将用它们作为数组的元素初始化。数组的 length 属性被设置为参数的数量。

括号语法称为“数组字面量”或“数组初始化式”。

为了创建一个长度不为 0,但是又没有任何元素的数组,可选以下任何一种方式:

// 这种方式...
const arr1 = new Array(arrayLength);// ...与这种方式会形成相同数组
const arr2 = Array(arrayLength);// 这个效果也一样
const arr3 = [];
arr3.length = arrayLength;

备注: 以上代码,arrayLength 必须为一个 Number。否则,将会创建一个只有单个元素(内含提供的值)的数组。调用 arr.length 会返回 arrayLength,但数组不包含任何元素。for...in 循环在数组上找不到任何属性。

如果你希望用单个元素初始化一个数组,而这个元素恰好又是 Number,那么你必须使用括号语法。当单个 Number 传递给 Array() 构造函数时,将会被解释为 arrayLength,并非单个元素。

// 创建一个只有唯一元素的数组:数字 42。
const arr = [42];// 创建一个没有元素的数组,且数组的长度被设置成 42。
const arr = Array(42);// 上面的代码与下面的代码等价:
const arr = [];
arr.length = 42;

如果 N 不是一个整数,调用 Array(N) 将会报 RangeError 错误,下面的例子说明了这种行为:

const arr = Array(9.3); // RangeError: Invalid array length

如果你需要创建任意类型的单元素数组,安全的方式是使用数组字面量。或者在向数组添加单个元素之前先创建一个空的数组。

你也可以使用 Array.of 静态方法来创建包含单个元素的数组。

const wisenArray = Array.of(9.3); // wisenArray 只包含一个元素:9.3

引用数组元素

因为元素也是属性,你可以使用属性访问器来访问。假设你定义了以下数组:

const myArray = ["Wind", "Rain", "Fire"];

你可以将数组的第一个元素引用为 myArray[0],将数组的第二个元素引用为 myArray[1],等等...元素的索引从零开始。

备注: 你也可以使用属性访问器来访问数组的其他属性,就像对象一样。

const arr = ["one", "two", "three"];
arr[2]; // three
arr["length"]; // 3

填充数组

你可以通过给数组元素赋值来填充数组,例如:

const emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

备注: 如果你在以上代码中给数组运算符的是一个非整型数值,那么它将作为一个表示数组的对象的属性创建,而不是数组的元素。

const arr = [];
arr[3.4] = "Oranges";
console.log(arr.length); // 0
console.log(Object.hasOwn(arr, 3.4)); // true

你也可以在创建数组的时候去填充它:

const myArray = new Array("Hello", myVar, 3.14159);
// 或
const myArray = ["Mango", "Apple", "Orange"];
理解length:

在实现层面,JavaScript 实际上是将元素作为标准的对象属性来存储,把数组索引作为属性名。

length 属性是特殊的,如果存在最后一个元素,则其值总是大于其索引的正整数。

记住,JavaScript 数组索引是基于 0 的:它们从 0 开始,而不是 1。这意味着 length 属性将比最大的索引值大 1:

const cats = [];
cats[30] = ["Dusty"];
console.log(cats.length); // 31

你也可以给 length 属性赋值。

写一个小于数组元素数量的值将截断数组,写 0 会彻底清空数组:

const cats = ["Dusty", "Misty", "Twiggy"];
console.log(cats.length); // 3cats.length = 2;
console.log(cats); // [ 'Dusty', 'Misty' ] - Twiggy 已经被移除了cats.length = 0;
console.log(cats); // 输出 [],猫名称的数组现在已经空了cats.length = 3;
console.log(cats); // 输出 [ <3 empty items> ]
遍历数组:

一种常见的操作是遍历数组的值,以某种方式处理每个值。最简单的方法如下:

const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {console.log(colors[i]);
}

forEach() 方法提供了遍历数组元素的其他方法:

const colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
// red
// green
// blue

传递给 forEach 的函数对数组中的每个元素执行一次,数组元素作为参数传递给该函数。未赋值的值不会在 forEach 循环迭代。

注意,在数组定义时省略的元素不会在 forEach 遍历时被列出,但是手动赋值为 undefined 的元素是被列出的:

const sparseArray = ["first", "second", , "fourth"];sparseArray.forEach((element) => {console.log(element);
});
// first
// second
// fourthif (sparseArray[2] === undefined) {console.log("sparseArray[2] 是 undefined"); // true
}const nonsparseArray = ["first", "second", undefined, "fourth"];nonsparseArray.forEach((element) => {console.log(element);
});
// first
// second
// undefined
// fourth
数组方法:

Array 对象具有下列方法:

concat() 方法连接两个或多个数组并返回一个新的数组。

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c");
// myArray 现在是 ["1", "2", "3", "a", "b", "c"]

join() 方法将数组中的所有元素连接成一个字符串。

const myArray = ["Wind", "Rain", "Fire"];
const list = myArray.join(" - "); // list 现在是 "Wind - Rain - Fire"

push() 方法在数组末尾添加一个或多个元素,并返回数组操作后的 length

const myArray = ["1", "2"];
myArray.push("3"); // myArray 现在是 ["1", "2", "3"]

pop() 方法从数组移出最后一个元素,并返回该元素。

const myArray = ["1", "2", "3"];
const last = myArray.pop();
// myArray 现在是 ["1", "2"],last 为 "3"

shift() 方法从数组移出第一个元素,并返回该元素。

const myArray = ["1", "2", "3"];
const first = myArray.shift();
// myArray 现在是 ["2", "3"],first 为 "1"

unshift() 方法在数组开头添加一个或多个元素,并返回数组的新长度。

const myArray = ["1", "2", "3"];
myArray.unshift("4", "5");
// myArray 变成了 ["4", "5", "1", "2", "3"]

slice() 方法从数组提取一个片段,并作为一个新数组返回。

let myArray = ["a", "b", "c", "d", "e"];
myArray = myArray.slice(1, 4); // [ "b", "c", "d"]
// 从索引 1 开始,提取所有的元素,直到索引 3 为止

at() 方法返回数组中指定索引处的元素,如果索引超出范围,则返回 undefined。它主要用于从数组末尾访问元素的负下标。

const myArray = ["a", "b", "c", "d", "e"];
myArray.at(-2); // "d",myArray 的倒数第二个元素

splice() 方法从数组移除一些元素,并(可选地)替换它们。它返回从数组中删除的元素。

const myArray = ["1", "2", "3", "4", "5"];
myArray.splice(1, 3, "a", "b", "c", "d");
// myArray 现在是 ["1", "a", "b", "c", "d", "5"]
// 本代码从 1 号索引开始(或元素“2”所在的位置),
// 移除 3 个元素,然后将后续元素插入到那个位置上。

reverse() 方法原地颠倒数组元素的顺序:第一个数组元素变为最后一个数组元素,最后一个数组元素变为第一个数组元素。它返回对数组的引用。

const myArray = ["1", "2", "3"];
myArray.reverse();
// 将原数组颠倒,myArray = [ "3", "2", "1" ]

flat() 方法返回一个新数组,所有子数组元素递归地连接到其中,直到指定的深度。

let myArray = [1, 2, [3, 4]];
myArray = myArray.flat();
// myArray 现在是 [1, 2, 3, 4],因为子数组 [3, 4] 已被展平

sort() 方法对数组的元素进行适当的排序,并返回对数组的引用,默认是升序排序。

const myArray = ["Wind", "Rain", "Fire"];
myArray.sort();
// 对数组排序,myArray = ["Fire", "Rain", "Wind"]

indexOf() 方法在数组中搜索 searchElement 并返回第一个匹配的索引。

const a = ["a", "b", "a", "b", "a"];
console.log(a.indexOf("b")); // 1// 再试一次,这次从最后一次匹配之后开始
console.log(a.indexOf("b", 2)); // 3
console.log(a.indexOf("z")); // -1, 因为找不到 'z'

lastIndexOf() 方法的工作原理类似于 indexOf,但这是从末尾开始,反向搜索。

const a = ["a", "b", "c", "d", "a", "b"];
console.log(a.lastIndexOf("b")); // 5// 再试一次,这次从最后一次匹配之前开始
console.log(a.lastIndexOf("b", 4)); // 1
console.log(a.lastIndexOf("z")); // -1

forEach() 方法对数组中的每个元素执行 callback 并返回 undefined

const a = ["a", "b", "c"];
a.forEach((element) => {console.log(element);
});
// 输出:
// a
// b
// c

map() 方法返回由每个数组元素上执行 callback 的返回值所组成的新数组。

const a1 = ["a", "b", "c"];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']

flatMap() 方法先执行 map(),再执行深度为 1 的 flat()

const a1 = ["a", "b", "c"];
const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

filter() 方法返回一个新数组,其中包含 callback 返回 true 的元素。

const a1 = ["a", 10, "b", 20, "c", 30];
const a2 = a1.filter((item) => typeof item === "number");
console.log(a2); // [10, 20, 30]

find() 方法返回 callback 返回 true 的第一个元素。

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.find((item) => typeof item === "number");
console.log(i); // 10

findLast() 方法返回 callback 返回 true 的最后一个元素。

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findLast((item) => typeof item === "number");
console.log(i); // 30

findIndex() 方法返回 callback 返回 true 的第一个元素的索引。

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findIndex((item) => typeof item === "number");
console.log(i); // 1

findLastIndex() 方法返回 callback 返回 true 的最后一个元素的索引。

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findLastIndex((item) => typeof item === "number");
console.log(i); // 5

如果 callback 对数组中的每一个元素都返回 true,则 every() 方法返回 true

function isNumber(value) {return typeof value === "number";
}
const a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // true
const a2 = [1, "2", 3];
console.log(a2.every(isNumber)); // false

如果 callback 对数组中至少一个元素返回 true,则 some() 方法返回 true

function isNumber(value) {return typeof value === "number";
}
const a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // true
const a2 = [1, "2", 3];
console.log(a2.some(isNumber)); // true
const a3 = ["1", "2", "3"];
console.log(a3.some(isNumber)); // false

稀疏数组

数组可以包含“空槽”,这与用值 undefined 填充的槽不一样。空槽可以通过以下方式之一创建:

// Array 构造函数:
const a = Array(5); // [ <5 empty items> ]// 数组字面量中的连续逗号:
const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]// 直接给大于 array.length 的索引设置值以形成空槽:
const c = [1, 2];
c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]// 通过直接设置 .length 拉长一个数组:
const d = [1, 2];
d.length = 5; // [ 1, 2, <3 empty items> ]// 删除一个元素:
const e = [1, 2, 3, 4, 5];
delete e[2]; // [ 1, 2, <1 empty item>, 4, 5 ]

在某些操作中,空槽的行为就像它们被填入了 undefined 那样。

const arr = [1, 2, , , 5]; // 创建一个稀疏数组// 通过索引访问
console.log(arr[2]); // undefined// For...of
for (const i of arr) {console.log(i);
}// 输出:1 2 undefined undefined 5// 展开运算
const another = [...arr]; // "another" 为 [ 1, 2, undefined, undefined, 5 ]

在其他方法,特别是数组迭代方法时,空槽是被跳过的。

const mapped = arr.map((i) => i + 1); // [ 2, 3, <2 empty items>, 6 ]
arr.forEach((i) => console.log(i)); // 1 2 5
const filtered = arr.filter(() => true); // [ 1, 2, 5 ]
const hasFalsy = arr.some((k) => !k); // false// 属性迭代
const keys = Object.keys(arr); // [ '0', '1', '4' ]
for (const key in arr) {console.log(key);
}
// 输出:'0' '1' '4'
// 在对象中使用展开,使用属性枚举,而不是数组的迭代器
const objectSpread = { ...arr }; // { '0': 1, '1': 2, '4': 5 }

多维数组

数组是可以嵌套的,这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用 JavaScript 数组的这个特性,可以创建多维数组。

以下代码创建了一个二维数组。

const a = new Array(4);
for (i = 0; i < 4; i++) {a[i] = new Array(4);for (j = 0; j < 4; j++) {a[i][j] = "[" + i + "," + j + "]";}
}

这个例子创建的数组拥有以下行数据:

Row 0: [0,0] [0,1] [0,2] [0,3]
Row 1: [1,0] [1,1] [1,2] [1,3]
Row 2: [2,0] [2,1] [2,2] [2,3]
Row 3: [3,0] [3,1] [3,2] [3,3]

使用数组存储其他属性

数组也可以像对象那样使用,以存储相关信息:

const arr = [1, 2, 3];
arr.property = "value";
console.log(arr.property); // "value"

当一个数组作为字符串和正则表达式的匹配结果时,该数组将会返回相关匹配信息的属性和元素。

附:以上内容均为个人在MDN网站上学习JS的笔记,若有侵权,将在第一时间删除,若有错误,将在第一时间修改。

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

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

相关文章

md5绕过

文章目录 \\和\\\md5数组绕过科学计数法绕过双md加密md5碰撞Hash长度攻击 下面会以同一道题给大家演示&#xff1a; (题目来源与nssctf) 和 在php代码中我们会看到和&#xff0c;虽然两个都是表示相等&#xff0c;但是在细节上会有所部区别 &#xff1a;是弱比较&#xff0c;只…

0201安装报错-hbase-大数据学习

1 基础环境简介 linux系统&#xff1a;centos&#xff0c;前置安装&#xff1a;jdk、hadoop、zookeeper&#xff0c;版本如下 软件版本描述centos7linux系统发行版jdk1.8java开发工具集hadoop2.10.0大数据生态基础组件zookeeper3.5.7分布式应用程序协调服务hbase2.4.11分布式…

Sora 作者被曝读博期间仅发表两篇论文,我们是否需要重塑科研价值观?

众所周知&#xff0c;在当今学术界&#xff0c;论文数量和产出速度常常被视为研究者生产力和学术成就的重要标尺。笔者也面试过很多博士生候选人&#xff0c;大家普遍会以自己读博期间发表过10几篇甚至几十篇论文而骄傲&#xff0c;很少有候选人会强调自己读博期间虽然发表论文…

UE5.1_TimeLine

UE5.1_TimeLine 问题引入&#xff1a;UE的Timeline可以在一个场景下无限制的使用多少次&#xff1f;一个动画流程的Timeline的时间持续怎么算?TimeLine中嵌套Timeline的做法是否是合理的&#xff1f;

【数据结构】泛型

文章目录 一、什么是泛型二、引出泛型1、语法 三、泛型类的使用1、语法2、示例3、类型推导(Type Inference) 四、裸类型(Raw Type)五、泛型如何编译的六、泛型的上界1、语法2、示例 七、泛型方法八、通配符九、包装类 一、什么是泛型 一般的类和方法&#xff0c;只能使用具体的…

Matlab|基于目标级联法的微网群多主体分布式优化调度

目录 主要内容 1.1 上层微网群模型 1.2 下层微网模型 部分程序 实现效果 下载链接 主要内容 本文复现《基于目标级联法的微网群多主体分布式优化调度》文献的目标级联部分&#xff0c; 建立微网群系统的两级递阶优化调度模型: 上层是微网群能量调度中心优化调度…

java中的字符串比较(题目作示例)

错误的代码 import java.util.Scanner; public class one {public static void main(String[] args) {Scanner scnew Scanner(System.in);String b"47568";int i0;for ( i 0; i <3; i){String asc.next();if(ab){System.out.println("密码正确&#xff0c;登…

C++ 类的前向声明的用法

我们知道C的类应当是先定义&#xff0c;然后使用。但在处理相对复杂的问题、考虑类的组合时&#xff0c;很可能遇到俩个类相互引用的情况&#xff0c;这种情况称为循环依赖。 例如&#xff1a; class A { public:void f(B b);//以B类对象b为形参的成员函数//这里编译错位&…

在外包公司干了4年,技术退步2年...

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

【Linux】常见的基本指令(中)

在本篇博客中&#xff0c;将会继续介绍Linux的常见的基本指令 一.rmdir指令 rmdir [空文件夹名] 删除空文件夹&#xff08;空目录&#xff09; 二.rm指令 rm [文件名] 删除文件 rm -r 递归删除文件夹&#xff08;目录&#xff09; rm -f 强制…

白话模电:1.绪论与半导体(考研面试常问问题)

一、什么是信号&#xff1f;什么是电信号&#xff1f; 信号反映消息的物理量&#xff0c;电信号是反应电压或电流变化的物理量。 二、什么是模拟信号&#xff1f;什么是数字信号&#xff1f; 模拟信号是时间和数值上均连续的信号&#xff0c;数字信号是时间和数值上均离散的信号…

[HackMyVM]靶场 Zeug

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

2024年起该地推行「软考电子证书」!关于软考证书常见问题解答!

近日&#xff0c;安徽省人力资源和社会保障厅发布“关于2024年度安徽省专业技术人员职业资格考试工作计划及有关事项”的通知&#xff1a;从2024年起&#xff0c;推行电子证书&#xff0c;原则上不再发放纸质证书&#xff0c;电子证书与纸质证书具有同等效力。 安徽也推行电子…

Seata 2.x 系列【5】直接部署

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Seata 版本 2.0.0 本系列Spring Boot 版本 3.2.0 本系列Spring Cloud 版本 2023.0.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 概述2. 环境要…

学习嵌入式C语言要掌握到什么程度?

学习嵌入式C语言要掌握到什么程度&#xff1f; 在开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些 电气工程师学习方法和资料&#xff0c;让我不断提升自己&#…

Java注解介绍

Java注解 注解介绍元注解RetentionTargetDocumentedInherited接口类测试结果 注解介绍 Java注解&#xff08;Annotation&#xff09;是一种元数据&#xff08;Metadata&#xff09;的形式&#xff0c;它可以被添加到Java代码中的类、方法、变量、参数等元素上&#xff0c;以提…

一分钟带你入门Selenium入门!【建议收藏】

Selenium入门 欢迎阅读Selenium入门讲义&#xff0c;本讲义将会重点介绍Selenium的入门知识以及Selenium的前置知识。 自动化测试的基础 在Selenium的课程以前&#xff0c;我们先回顾一下软件测试的基本原理&#xff0c;为我们进一步完成Selenium自动化测试做好准备。 软件…

考研数学|张宇30讲,搭配什么基础题?

如果基础跟的是张宇&#xff0c;那么基础做的题目要根据自己的题目来决定 题集的选择最好不要太难&#xff0c;而且基础也不用做太多题目&#xff0c;以数学知识点的运用&#xff0c;培养做题感觉为主。 张宇老师的课程在基础阶段也有配套的课程&#xff0c;就是《张宇基础30…

2023郑州大学招新赛暨选拔赛补题

U287342 A.NANA与字符串 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) U287344 B.NANA学跳舞 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) U287345 C.NANA去上课 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include <bits/stdc.h> using namespace std; #de…

关于进程和线程

目录 前言: 1进程: 1.1定义&#xff1a; 1.1.1进程是操作系统分配资源的基本单元&#xff0c;拥有自己的独立空间和资源。 1.1.2每个进程都有一个唯一的PID&#xff08;进程标识符&#xff09;来标识。 1.2进程间通信&#xff1a; 1.2.1进程不是孤立的&#xff0c;它们之…