js之数组,对象,类数组对象

简介: js之数组,对象,类数组对象

数组,对象和类数组对象

@[toc]

一、数组

数组定义:一组有序的数据集合,其索引从0开始且自然增长的整数,其元素值可以是任何js数据!并且包含一个名为length的属性,该属性表示数组元素的个数!

var array = [1,2,3];
console.log(array[0])//1
​console.log(array[1])//2
​console.log(array[2])//3
​console.log(array['length'])//3

  

从上面的例子我们可以看到,在声明数组时,我们只是显式的声明了数组元素的值,并没有显式的给这些值定义索引和length属性,但是在数组定义好后我们发现就可以直接使用数组的索引值来操作数组的元素了,从这不难看出,数组元素的索引和length属性是在数组定义时根据数组元素语言自动就帮你定义好了!而且很容易就能看出来,索引值是从0开始并且自然递增的!

二、对象

对象定义:一组无序的由键->值组成的数据集合,其元素的键名和值都可以自定义。

var object = {
   'a': 1, 'b': 2}
console.log(object['a'])//1
console.log(object['b'])//2
console.log(object['length'])//undefined

  

从上面的例子简单来看,对象自身所拥有的(不包括继承来的)任何属性都是由用户自定义的!

三、数组与对象

数组和对象在某些地方或时候其实是很相像的!

1、相同

我们先看看他们相同的部分,首先我们可以把数组的索引值看成的元素的键名,元素看成是值,那么数组是不是也变成了键->值构成的了!

2、不同

我们在来看看他们不一样的地方,数组的索引值始终的从0开始递增的数字,对象的属性值可以是任何自定义的字符串,并且数组包含一个length属性,而对象自身所拥有的(不包括继承来的)任何属性都是有用户自定义的!也就是说我们可以显式的给对象定义length属性!

var arr = [1,2,3];
var obj = {
   0: 1, 1: 2, 2: 3, length: 3};
console.log(arr[0], obj[0])//1, 1
console.log(arr['length'], obj['length'])//1, 1

  

通过对比,我们发现完全可以使用对象来模拟数组,只要我们定义的对象的每个元素的键名都使用数字并且让其保持递增,且动态的定义一个length属性来表示元素个数,那么从效果上来说,基本就个数组相同了!这就是我们要说的:

四、类数组对象

  • 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为它是类数组对象!

类数组对象不仅是效果上跟数组相似,并且在某些操作上也相同:

//定义数组和类数组对象
var arr = [1,2,3];
var obj = {
   0: 1, 1: 2, 2: 3, length: 3};
//元素读写操作
console.log(arr[0], obj[0])//1, 1
console.log(arr['length'], obj['length'])//3, 3
arr[0] = 9;
obj[0] = 9;
console.log(arr[0],obj[0]); // 9,9

//遍历
for(var i = 0, len = arr.length; i < len; i++) {
   
    arr[i]....
}
for(var i = 0, len = obj.length; i < len; i++) {
   
    obj[i]....
}

  

通过代码,我们看到,不仅在读写等操作上类数组对象和数组相似,并且在遍历元素上都可以使用for循环进行遍历!

==总结:我们可以从数据结构上把js的数组归为对象,因为我们可以使用对象来模拟数组,当然这里仅仅说的是数据结构上,其实他们本身所继承来的方法和一些属性是不同的!在平常的理解中可以把数组看成是特殊的对象,方便理解==!

相关文章
|
2天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
13天前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象,并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象,然后根据需要提取对象中的属性值,并将它们放入新的对象中,最终形成一个新的对象数组以供使用。
|
8天前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
19 0
|
2天前
|
JavaScript 前端开发 UED
JavaScript代码技巧大分享,在数组中去重元素
本文介绍了一系列实用的JavaScript函数,包括将内容复制到剪贴板、获取鼠标选中内容、打乱数组顺序、颜色值转换(RGBA与十六进制)、计算平均值、判断奇偶数、数组去重、检查空对象、反转字符串、计算日期间隔、首字母大写、生成随机字符串和随机数等,帮助提升网站的用户体验和功能丰富性。
11 4
|
2天前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
13天前
|
JSON JavaScript 前端开发
如何检查 JavaScript 对象是否为空
【8月更文挑战第18天】
84 0
如何检查 JavaScript 对象是否为空
|
8天前
|
JavaScript
js如何判断数组内的值都为true
js如何判断数组内的值都为true
17 0
|
10天前
|
存储 JavaScript 前端开发
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
|
4月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
56 0
|
4月前
|
JavaScript 前端开发
js中数组对象去重的方法
js中数组对象去重的方法