【JavaScript 漫游】【006】数据类型 array

news2024/11/15 20:01:41

海景_桥梁
文章简介

本文为【JavaScript 漫游】专栏的第 006 篇文章,记录笔者在了解 JS 数据类型 array 中摘录的知识点。

  1. 数组的本质是对象
  2. 属组的 length 属性
  3. for ... in 循环和数组的遍历
  4. 数组的空位
  5. 类数组对象

除了上述 5 个重要知识点,学习数组更为重要的是掌握它的静态方法和实例方法,笔者计划再后面单独写一篇文章进行总结。

数组本质上是一种特殊的对象

typeof 运算符返回数据的数据类型是 object,这说明在本质上,数组属于一种特殊的对象。而它的特殊性体现在,它的键名是按次序排列的一组整数。

var arr = ['a', 'b', 'c'];
Object.keys(arr);  // ['0', '1', '2']

length 属性

数组的 length 属性,返回数组的成员数量。

['a', 'b', 'c'].length;  // 3

只要是数组,就一定有 length 属性。该属性是一个动态的值,等于键名中的最大整数加上 1。要注意的是,数组的数字键不需要连续,length 属性的值总是比最大的那个整数键大 1

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

length 属性是可写的,如果人为设置一个小于当前成员个数的值,该数组的成员数量会自动减少到 length 设置的值。如果将 length 属性设为 0,就可以清空数组。如果设的值不合法,比如 -1,JS 会报错。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

arr.length = 0;
arr // []

for...in 循环和数组的遍历

既然数组是一种特殊的对象,那么 in 运算符和for...in循环同样能作用到数组上。

in 运算符检查某个键名是否存在。

var arr = [];
arr[100] = 'hello';
1 in arr;  // false
100 in arr;  // true

for...in循环可以遍历数组的所有键名。特别注意的是,它不仅会遍历数组的数组键,也会遍历非数组键。终究是因为数组本质是一种对象,它的标准键名是数值,但如果人为赋予字符串键名是没有问题的。

var arr = ['a', 'b', 'c'];
arr['hello'] = 'world';
arr.length; // 3
for (var key in arr) {
  console.log(key);
}
// 0
// 1
// 2
// hello

基于 for...in 循环会遍历到非数组键,所以,遍历数组的时候最好不要用for...in,转而使用for循环或while循环更好。

笔者认为,遍历对象使用 Object.keys 方法,遍历数组使用for循环以及数组的实例方法forEach是最好的,工作遍历数组时使用forEach方法比for循环的频率更高。

数组的空位

当数组的某个位置是空元素,就称该数组存在空位。

var arr = [1, , 1];
a.length;  // 3
a[1];  // undefined

数组的某个位置是空位,与某个位置是 undefined,是不一样的。如果是空位,使用数组的 forEach 方法、for...in 结构、以及Object.keys 方法进行遍历,空位都会被跳过。而由于空位的存在对 length 属性没有影响,使用 length 属性配合 for 循环遍历数组的时候,要确保数组没有空位。

var arr = [1, , 1];
arr.forEach(function(value, index) {
  console.log('arr[' + index + '] = ' + value);
})
// arr[0] = 1
// arr[2] = 1

for (var key in arr) {
  console.log('arr[' + key + '] = ' + arr[key]);
}
// arr[0] = 1
// arr[2] = 1

Object.keys(arr); // ['0', '2']

for (var i = 0; i < arr.length; i++) {
  console.log('arr[' + i + '] = ' + arr[i]);
}
// arr[0] = 1
// arr[1] = undefined,值为 undefined 在实际开发过程会诱发报错
// arr[2] = 1
var arr = [1, undefined, 1];
arr.forEach(function(value, index) {
  console.log('arr[' + index + '] = ' + value);
})
// arr[0] = 1
// arr[1] = undefined
// arr[2] = 1

for (var key in arr) {
  console.log('arr[' + key + '] = ' + arr[key]);
}
// arr[0] = 1
// arr[1] = undefined
// arr[2] = 1

Object.keys(arr); // ['0', '1', '2']

for (var i = 0; i < arr.length; i++) {
  console.log('arr[' + i + '] = ' + arr[i]);
}
// arr[0] = 1
// arr[1] = undefined
// arr[2] = 1

由此可知,遍历数组的最好方法就是 forEach

简单总结,空位就是数组没有这个元素,所以不会被遍历到,而 undefined 表示数组有这个元素,值是 undefined ,所以遍历不会跳过。

类数组对象

如果一个对象的所有键名都是正整数或零,并且有 length 属性,那么这个对象就很像数组,语法上称为 类数组对象

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

类数组对象并不是数组,因为它们不具备数组特有的方法,它们的根本特征是有 length 属性,只要有 length 属性,就可以认为这个对象类似于数组。但是有一个问题,这种 length 属性不是动态值,不会随着成员的变化而变化。

var obj = {
  length: 0
};
obj[3] = 'd';
obj.length // 0

典型的类数组对象是函数的 arguments 对象,以及大多数 DOM 运算集,还有字符串。

数组的 slice 方法可以将类数组对象变成真正的数组。

var str = 'hello';
var arr = Array.prototype.slice.call(str);

除了转为真正的数组,类数组对象还有一个办法可以使用数组的方法,就是通过 call 方法将数组的方法放到对象上。

function print(value, index) {
  console.log(index + ' : ' + value);
}
var str = 'hello';
Array.prototype.forEach.call(str, print);

要注意的是,使用 call 方法调用 forEach 这种方式,比直接使用数组原生的 forEach 方法要慢,所以最好先将类数组对象转为真正的数组,然后再直接调用数组的 forEach 方法。

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

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

相关文章

MySQL组复制的介绍

前言 本文介绍关于MySQL组复制的背景信息和基本原理。包括&#xff0c;介绍MySQL传统复制方法的原理和隐患、介绍组复制的原理&#xff0c;单主模式和多主模式等等。通过结合原理图学习这些概念&#xff0c;可以很好的帮助我们理解组复制技术这一MySQL高可用方案&#xff0c;有…

Linux系统中安装JDK

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

深入探究:JSONCPP库的使用与原理解析

君子不器 &#x1f680;JsonCPP开源项目直达链接 文章目录 简介Json示例小结 JsoncppJson::Value序列化Json::Writer 类Json::FastWriter 类Json::StyledWriter 类Json::StreamWriter 类Json::StreamWriterBuilder 类示例 反序列化Json::Reader 类Json::CharReader 类Json::Ch…

VScode上无法运行TSC命令,Typescript

如何解决问题 第一步&#xff1a;使用 winx 快捷键&#xff0c;会出现如下弹窗&#xff0c;鼠标左键单击Windows PowerShell 即可打开shell 第二步&#xff1a;运行 set-ExecutionPolicy RemoteSigned 命令&#xff0c;在询问更改执行策略的时候选择敲Y或者A 第三步&#xff…

python_蓝桥杯刷题记录_笔记_全AC代码_入门5

前言 关于入门地刷题到现在就结束了。 题单目录 1.P1579 哥德巴赫猜想&#xff08;升级版&#xff09; 2.P1426 小鱼会有危险吗 1.P1579 哥德巴赫猜想&#xff08;升级版&#xff09; 一开始写的代码是三重循环&#xff0c;结果提交上去一堆地TLE&#xff0c;然后我就给减少…

数据库学习案例20240206-ORACLE NEW RAC agent and resource关系汇总。

1 集群架构图 整体集群架构图如下&#xff1a; 1 数据库启动顺序OHASD层面 操作系统进程init.ohasd run启动ohasd.bin init.ohasd run 集群自动启动是否被禁用 crsctl enable has/crsGIHOME所在文件系统是否被正常挂载。管道文件npohasd是否能够被访问&#xff0c; cd /var/t…

Etsy做什么店铺比较靠谱? 什么叫做真人店?

作为Etsy是美国最大的原创手工在线销售平台之一&#xff0c;以其店铺利润高、平台佣金低、平台同质化不严重的优点在跨境电商里颇具竞争力。然而Etsy开店却不是件容易事&#xff0c;原因是Etsy真人店对于环境以及卖家的运营操作要求较高&#xff0c;下面就给各位有意入局Etsy的…

2024版细致idea解读(包含下载,安装,破解,讲解怎么使用)

前言 我们历经了对应的javase开发&#xff0c;使用的软件从eclipse也逐步升级到了idea&#xff0c;IntelliJ旗下的产品之一 内部复函很大的集成平台插件供大家使用 下载介绍 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 这个是他的网站地址 进入之后我们可以看到对应的界面…

Linux-3进程概念(一)

1.冯诺伊曼结构 1.1 冯诺依曼结构的概念 冯诺依曼结构&#xff0c;又称为普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置&#xff0c;因此程序指令和数据的宽度相同&…

【大模型】万亿级别的大语言模型训练,基础设施如何支持

万亿级别的大语言模型训练&#xff0c;基础设施如何支持 前言1&#xff09;培训百万亿参数的LLM是可行的&#xff0c;但需要每个GPU高达1 TiB的次级内存池&#xff0c;双向带宽为100 GB/s。2&#xff09;对于1T模型的强扩展在约12288个GPU左右停滞&#xff0c;因为矩阵乘法变得…

C++二维数组

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家好&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习二维数组。 文章目录 1.二维数组的概念与思想 2.二维数组和一维数组的区别 3.二维数组的特点 4.二维数组的操作 1.定义 2.初始化 1.直…

IPv4的公网地址不够?NAT机制可能是当下最好的解决方案

目录 1.前言 2.介绍 3.NAT机制详解 1.前言 我们都知道IPv4的地址范围是32个字节,这其中还有很多地址是不可用的.比如127.*,这些都是环回地址.那么在网路发展日新月异的今天,互联网设备越来越多,我们该如何解决IP地址不够用的问题呢?目前有一种主流的解决方案,也是大家都在用…

JVM相关-JVM模型、垃圾回收、JVM调优

一、JVM模型 JVM内部体型划分 JVM的内部体系结构分为三部分&#xff0c;分别是&#xff1a;类加载器&#xff08;ClassLoader&#xff09;子系统、运行时数据区&#xff08;内存&#xff09;和执行引擎 1、类加载器 概念 每个JVM都有一个类加载器子系统&#xff08;class l…

C语言的malloc(0)问题

malloc(0)详解 首先来解释malloc&#xff08;0&#xff09;的问题&#xff0c;这个语法是对的&#xff0c;而且确实也分配了内存&#xff0c;但是内存空间是0&#xff0c;就是说返回给你的指针是不能用的&#xff0c;感觉奇怪吧&#xff1f;但是从操作系统的原理来解释就不奇怪…

(c语言版)开源项目热榜,某个开源社区希望将最近热度比较高的开源项目出一个榜单,推荐给社区里面的开发者。对于每个开源项目

某个开源社区希望将最近热度比较高的开源项目出一个榜单&#xff0c;推荐给社区里面的开发者。对于每个开源项目&#xff0c;开发者可以进行关注(watch)、收藏(star)、fork、提issue、提交合并请求(MR)等。 数据库里面统计了每个开源项目关注、收藏、fork、issue、MR的数量&…

3. ⼤语⾔模型深度学习背景知识

1. LLM⼤语⾔模型⼀般训练过程 #mermaid-svg-8kci1fjEPiVolPue {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8kci1fjEPiVolPue .error-icon{fill:#552222;}#mermaid-svg-8kci1fjEPiVolPue .error-text{fill:#5522…

前端实现标题滚动点击导航

效果图 右边滚动的html代码 <div class"right-box"><el-tabs v-model"isScrollNow" tab-position"right" class"updateTab" tab-click"scrollTo"style"height: fit-content;"><el-tab-pane label…

怎么把视频音乐提取成mp3?分享详细工具和方法!

在数字媒体时代&#xff0c;音乐已经成为我们生活中不可或缺的一部分。有时候&#xff0c;我们会在社交媒体、视频分享网站或在线视频平台上看到一些非常喜欢的视频音乐&#xff0c;想要将其保存为MP3格式以便随时随地聆听。那么&#xff0c;如何从视频中提取音乐并转换为MP3格…

Python操作Word表格对齐、单元格对齐

通过Table的alignment可以设置表格居左对齐、居中对齐、居右对齐。通过Cell的vertical_alignment可以设置垂直位置。通过单元格里段落的alignment可以设置文本的左右对齐方式。 import docx from docx.enum.table import WD_TABLE_ALIGNMENT, WD_CELL_VERTICAL_ALIGNMENT from…

@Repository注解的作用和用法,以及和@Mapper的区别

1、Repository的作用 Repository是属于Spring的注解。它用来标注访问层的类&#xff08;Dao层&#xff09;&#xff0c;它表示一个仓库&#xff0c;主要用于封装对于数据库的访问。其实现方式与Component注解相同&#xff0c;只是为了明确类的作用而设立。 即Repository是Comp…