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

海景_桥梁
文章简介

本文为【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 // 2arr[2] = 'c';
arr.length // 3arr[9] = 'd';
arr.length // 10arr[1000] = 'e';
arr.length // 1001

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

var arr = [ 'a', 'b', 'c' ];
arr.length // 3arr.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] = 1for (var key in arr) {console.log('arr[' + key + '] = ' + arr[key]);
}
// arr[0] = 1
// arr[2] = 1Object.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] = 1for (var key in arr) {console.log('arr[' + key + '] = ' + arr[key]);
}
// arr[0] = 1
// arr[1] = undefined
// arr[2] = 1Object.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.hqwc.cn/news/452516.html

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

相关文章

golang开源的可嵌入应用程序高性能的MQTT服务

golang开源的可嵌入应用程序高性能的MQTT服务 什么是MQTT&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、开放的消息传输协议&#xff0c;设计用于在低带宽、高延迟或不可靠的网络环境中进行通信。MQTT最初由IBM开发&#xf…

fastjson 导致的OOM

fastjson 导致的OOM 示例代码 public static void main(String[] args) throws Exception {try {List<Integer> list JSONObject.parseArray("[2023,2024", Integer.class);}catch (Exception e){System.err.println("error");}System.out.println…

【Java集合框架ArrayList、LinkedList、HashSet之间的区别】

Java集合框架ArrayList、LinkedList、HashSet之间的区别 1. 实现方式&#xff1a;2. 插入和删除操作的效率&#xff1a;3. 随机访问的效率&#xff1a;4. 内存占用&#xff1a;综上所述&#xff0c;选择ArrayList还是LinkedList或HashSet取决于具体的使用场景。如果需要频繁的插…

Javascript入门:第三个知识点:javascript里的数据类型、运算符

数字类型 123 //整数 123.1 //浮点数 1.123e3 //科学计数法 -10 //负数 NaN //not a number Infinity //无限大 以上的类型在javascript里都是数字类型 字符串类型 在开始之前&#xff0c;我需要先说明白两个知识点&#xff1a; console.log()是啥&#xff1f; let 与 v…

onlyfans无法订阅?2024年订阅onlyfans最新教程一键直达

讲在前面-关于OnlyFans 欧美除了脸书和推特之外&#xff0c;又新起了一个社交软件&#xff0c;它就是onlyfans&#xff0c;简称o站。 在极短的时间内&#xff0c;它就拥有了1.2亿的用户量&#xff0c;而全站订阅金额更是达到了17亿英镑&#xff0c;换成人民币&#xff0c;数额…

Palworld幻兽帕鲁自建服务器32人联机开黑!

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

ASM-HEMT参数提取和模型验证测试

参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程&#xff1a; 在模型中设置物理参数&#xff0c;如L&#xff08;沟道长度&#xff09;、W&#xff08;沟道宽度&#xff09;、NF&#xff08;栅指数&#xf…

【软件设计师笔记】一篇文章让你读懂什么是软件工程与系统开发

【考证须知】IT行业高含金量的证书(传送门)&#x1f496; 【软件设计师笔记】计算机系统基础知识考点(传送门) &#x1f496; 【软件设计师笔记】程序语言设计考点(传送门) &#x1f496; 【软件设计师笔记】操作系统考点(传送门)&#x1f496; &#x1f413; 软件工程 软件…

PyTorch 2.2 中文官方教程(十四)

参数化教程 原文&#xff1a; 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 作者&#xff1a;Mario Lezcano 注意 点击这里下载完整示例代码 在本教程中&#xff0c;您将学习如何实现并使用此模式来对模型进行约束。这样做就像编写自己的nn.Module一样容易。 对深…

企业计算机服务器中了mallox勒索病毒怎么办?Mallox勒索病毒解密

随着社会的不断发展&#xff0c;数字化经济已经成为常态化&#xff0c;企业的数据慢慢地成为生存发展的根本&#xff0c;保护企业的核心数据是众多企业关心的主要话题。近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了mallox勒索病毒…

Mysql+MybatisPlus+Vue实现基础增删改查CRUD

数据库 设计数据库 设计几个字段&#xff0c;主键id自动增长且不可为空 create table if not exists user (id bigint(20) primary key auto_increment comment 主键id,username varchar(255) not null comment 用户名,sex char(1) not null comment 性…

力扣热门100题刷题笔记 - 3.无重复字符的最长子串

力扣热门100题 - 3.无重复字符的最长子串 题目链接&#xff1a;3. 无重复字符的最长子串 题目描述&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。示例&#xff1a; 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字…