JavaScript 浅析数组对象与类数组对象
数组(Array对象)
数组就是一组数据.
在JavaScript中没有数组这种数据类型.数组时对象创建的.
- 键(下标): 用于区分数组中不同数值的标志就是键,初始键为0.
- 以数字作为下标的键,这种数组称之为索引数组.
- 以字符串作为下标的键,这种数组称之为关联数组
- 注意: 在JavaScript中只有索引数组,y没有关联数组,必须是从0开始连续的索引数组!
- 值:每个键对应的数据就是值.
- 键值对:键+值 就是键值对
数组的操作
创建数组方法
new Array();
- var 变量 = new Array() ; 创建一个空数组
- var 变量 = new Array(值,值...) ; 创建具有指定元素的数组
- var 变量 = new Array(整数); 创建具有指定长度的数组
使用对象字面量
- var 变量 = []; 创建一个空数组
- var 变量 = [值,值...];创建具有指定元素的数组
- var 变量 = [整数] ; 创建一个指定整数元素的数组,并不是长度!~
添加与修改数组元素
- 数组变量[数组变量.length] = 值;
a[a.length] = 1;//添加
- 数组变量[指定下标] = 新值;
a[0] = 1;修改
- 数组变量[超过当前数组长度的数值] = 值;
a = [1,2,3];
a[5] = 5;
输出:[1, 2, 3, empty × 2, 5]
删除数组元素
delete 数组变量[指定下标];
deldet a[0];
注意: 这种方式仅仅可以删除数组的元素值,不可以删除键,删除操作之后,数组的长度保持不变。如果想彻底删除元素需要使用splice这个方法。
使用数组元素
- 数组变量[指定下标] ;
遍历数组元素
- 第一种
var x = [1,2,3];
for (var i=0;i<x.length;i++){
console.log(x[i]);
}
- 第二种
var x = [1,2,3];
for (var i of x){
console.log(i);
}
输出均为以下
1
2
3
多维数组
通俗解释如下
一维数组:
如果一个元素中的所有值都不是数组,那么这个数组就是一个一维数组.
二维数组:
如果一个一维数组的元素中包含一维数组,那么这个数组就是二维数组
三维数组:
如果一个一维数组的元素中包含二维数组,那么这个数组就是三维数组
多维数组:
如果一个数组的维度超过三维,统称为多维数组
多维数组的访问操作:
数组变量[键][键]...
数组相关的函数
concat()
- 连接数组元素
- 格式:
新变量 = 数组变量.concat(值,值...)
var b = a.concat(a, 1, "x"); - 参数值,可以是正常数值也可以是数组类型,都可以连接。
- 给数组就在后面添加所有数组元素,给普通数值就添加普通数值
join()
- 使用字符将数组元素连接成一个字符串,默认为
,
- 格式:
新变量 = 数组变量.join(制定字符串)
var b = a.join("");//""
空字符就等于没有连接字符串
pop()
- 在数组的结尾处弹出一个元素(直接改变原有数组)
- 格式:
结果变量 = 数组变量.pop();
var b = a.pop(); - 注意:该方法直接操作原有数组.返回值为弹出的元素
push()
- 在数组的结尾处添加元素(直接改变原有数组)
- 格式:
结果变量 = 数组变量.push(值,值..)
var b = a.push("1", "2"); - 注意:该方法直接操作原有数组.返回值为添加后的数组长度
shift()
- 在数组的开头移除一个元素(直接改变原有数组)
- 格式:
结果变量 = 数组变量.shift();
var b = a.shift();
unshift()
- 在数组的开头添加元素(直接改变原有数组)
- 格式:
结果变量 = 数组变量.unshift(值,值...)
var b = a.unshift("1", "2");
reverse()
- 数组倒转方法
- 格式:
结果变量 = 数组变量.reverse();
var b = a.reverse();
sort()
- 数组排序方法
- 字符串排序,使用ascii进行排序操作.
- 格式:
结果变量 = 数组变量.sort();
var b = a.sort();
- 格式:
- 数字排序,使用数字大小排序
- 格式:
结果变量 = 数组变量.sort(回调函数);
var b = a.sort(c); - 回调函数的格式要求:
- 必须传入2个参数.
- 必须返回正数,负数或者0;
- 格式:
slice()
- 切割数组,并且返回其中的一段
- 格式:
结果变量 = 数组变量.slice(开始下标,结束下标);
var b = a.slice(1,3); - 注意: 包含开始位置的元素,但是不包含结束位置的元素
- 其中参数为位置参数,正数表示从前向后数,负数从后向前数.
splice()
- 数组万能操作方法(直接改变原有数组)
- 在指定位置添加元素
结果变量 = 数组变量.splice(制定位置,0,新增元素..)
var b = a.splice(1,0,"ABC"); - 在制定位置删除元素
结果变量 = 数组变量.splice(制定位置,删除个数);
var b = a.splice(1,2); - 在制定位置替换元素
结果变量 = 数组变量 .splice(制定位置,删除个数,新增元素)
var b = a.splice(1,2,"ABC","DEF");
类数组对象
在JavaScript中有一种性质与数组相似特殊的对象,我们称之为类数组对象,最常见的便是 argumengs对象。
定义
- 可以通过索引访问元素,并且拥有 length 属性;
- 没有数组的其他方法,例如 push , forEach , indexOf 等。
举例
类数组
var arrLike = {
0: 'Java',
1: 'Python',
2: 'PHP',
length: 3
}
同款数组
var arr = ["Java", "Python", "PHP"];
对比数组
类数组对象在访问、赋值、获取长度上的操作与数组是一致的
- 访问
console.log(arr[0]); // Java
console.log(arrLike[0]); // Java - 赋值
arr[0] = 'JavaScript';
arrLike[0] = 'JavaScript'; - 获取对象的长度
console.log(arr.length); // 3
console.log(arrLike.length); // 3
- 访问
类数组对象与数组的区别是类数组对象不能直接使用数组的方法
- 类数组对象使用数组方法时会报错
arrLike.push("C++"); // Uncaught TypeError: arrLike.push is not a function
转换
有时候我们需要让类数组有数组的特性,这时候就需要转换,可以是直接转换也可以间接转换。
间接
通过 Function.call 或Function.apply 方法
- Function.call
Array.prototype.push.call(arrLike, 'C++');
console.log(arrLike);
// { '0': 'Java', '1': 'Python', '2': 'PHP', '3': 'C++', length: 4 }
- Function.apply
Array.prototype.push.apply(arrLike, ['C++']);
console.log(arrLike);
// { '0': 'Java', '1': 'Python', '2': 'PHP', '3': 'C++', length: 4 }
直接
- Array.prototype.slice 将类数组转换为数组
Array.prototype.slice.call(arrLike,0);
Array.prototype.slice.apply(arrLike,0);
- Array.prototype.splice 将数组转换为类数组
Array.prototype.splice.call(arrLike,0);
Array.prototype.splice.apply(arrLike,0);
JavaScript 浅析数组对象与类数组对象的更多相关文章
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- js之数组,对象,类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
- python-面向对象-02_类和对象
类和对象 目标 类和对象的概念 类和对象的关系 类的设计 01. 类和对象的概念 类 和 对象 是 面向对象编程的 两个 核心概念 1.1 类 类 是对一群具有 相同 特征 或者 行为 的事物的一个统 ...
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
- JavaScript、ES6中的类和对象
面向对象可以用于描述现实世界的事物,但是事物分为具体的(特指的)事物和抽象的(泛指的)事物. 面向对象思维的特点: 1.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板) 2. ...
- dotnet 数组自动转基类数组提示 Co-variant array conversion 是什么问题
在 C# 的语法,可以提供自动将某个类的数组自动转这个类的基类数组的方法,但是这样的转换在 Resharper 会提示 Co-variant array conversion 这是什么问题? 在 C# ...
- js面向(基于)对象编程—类(原型对象)与对象
JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM Document Object Model 文档对象模型 3. BOM Browser Object Moldel 浏览 ...
- 【PHP面向对象(OOP)编程入门教程】2.什么是类,什么是对象,类和对象这间的关系
类的概念:类是具有相同属性和服务的一组对象的集合.它为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和服务两个主要部分.在面向对象的编程语言中,类是一个独立的程序单位,它应该有一个类名并包括属 ...
随机推荐
- 使用Network Emulator Toolkit工具模拟网络丢包测试(下)
用户会在各种网络环境下使用我们的App,PC应用,我们决不能祈求用户的网络环境都是稳定的,因此我们需要模拟出弱网络的情况,用来测试我们的APP在弱网络环境下的表现如何.Network Emulator ...
- webWMS开发过程记录(三)- 需求分析(略)
行业:汽车零部件制造 大方向:非唯一码,需有一套简单.易用.受控的误操作撤回机制 现状(略) 目标(略) 注:由于项目是自己根据以往经验,自己开发的,且开发时间不固定,故需求分析暂略,我会把工作重点放 ...
- Python基础:按位异或 ^ ,按位或 | ,按位与 &
前言文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http: ...
- 这价格看得我偷偷摸了泪——用python爬取北京二手房数据
如果想了解更多关于python的应用,可以私信我,或者加群,里面到资料都是免费的 http://t.cn/A6Zvjdun 近期,有个朋友联系我,想统计一下北京二手房的相关的数据,而自己用Excel统 ...
- JMeter在Mac下的安装
其实不论操作系统是Windows.Unix(如Mac OS).Linux(如Ubuntu)等,JMeter所需要的基础环境配置都是类似的,本文介绍JMeter for MAC的安装与环境配置. JMe ...
- Pytorch实现的语义分割器
使用Detectron预训练权重输出 *e2e_mask_rcnn-R-101-FPN_2x* 的示例 从Detectron输出的相关示例 使用Detectron预训练权重输出 *e2e_keypoi ...
- 线程Event
版本一: from threading import Event,current_thread,Thread import time event=Event() #造一个对象,内部维护一个全局变量,状 ...
- 好用的反向代理工具NATAPP
这里推荐一个好用的反向代理工具NATAPP NATAPP1分钟快速新手图文教程 有免费的和付费的个人建议付费的,免费还需要身份证验证,付费版最低9元/月,看个人需求! 这里给个邀请码贴在这需要的话可以 ...
- Win7+Linux双系统,完美解决删除Linux后出现的任何问题!
首先,进入到Win7,安装MiniTool Partition Wizard Home Edition删除掉Linux分区, 点Yes 然后选中 这里选中这个,重写MBR,开机神马grub神马问题都没 ...
- INDIRECT函数实现动态图表的跨数据抓取
涉及函数: indirect函数:通常有两种用法.直接指定单元格地址和隐式指定单元格地址.直接指定:=indirect("A4"),则会返回A4单元格所显示的内容.参数给定的既是字 ...