JavaScript中数组对象详解

数组对象总结 数组对象总结 一、认识对象 1、对象的含义:面向对象程序设计将问题分解成一系列的实体,而这些实体就是我们常用的对象了。 2、每个对象都具有两种基本的属性,它们分别是对象的状态和行为。 (1)对象的状态又被称为静态属性。它主要是指对象内部所包含的各种信息,即为变量。每个对象个体都具有专有的内部变量,而这些变量的值表明了对... 阅读详情

Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组。

  • 创建数组的语法

1、Array构造器

1var list=new Array();
2var list=new Array(size);
3var list=new Array(element0,element1,...elementn);

2、字面量的方式

var Array[element0,element1,...elementn];

举例子

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
var list[1,true,null,undefined,{x:1},[1,2,3]];
  • 数组的分类

1、二维数组,二维数组的本质是数组中的元素又是数组。

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

2、稀疏数组

稀疏数组是包含从0开始的不连续索引的数组。在稀疏数组中一般length属性值比实际元素个数大(不常见)
举例
var a=["a",,"b",,,,"c",,];

  • 数组对象属性
属性 作用
length 属性 表示数组的长度,即其中元素的个数
prototype 属性 返回对象类型原型的引用
constructor 属性 表示创建对象的函数

1、length 属性

通过一些操作来讲解length属性
var arr=[1,2,3,4,5,6,7,8,9,10];//定义了一个包含10个数字的数组。
数组的长度属性是可变的

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15

访问数组元素

alert(arr[3]); //显示第4个元素的值,为4

减小数组长度

arr.length=2; //将数组的长度减少到2,数组中的元素只剩下索引值小于2的元素
alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了

恢复数组长度

arr.length=10; //将数组长度恢复为10
alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"

2、prototype 属性

prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。
objectName.prototype
objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

对于数组对象,用以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。

function array_max( )
{
   var i, max = this[0];
   for (i = 1; i < this.length; i++)
   {
       if (max < this[i])
       max = this[i];
   }
   return max;
}

Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );

该代码执行后,y 保存数组 x 中的最大值,或说 6。

3、constructor 属性

constructor 属性表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明:constructor 属性是所有具有prototype 的对象的成员。它们包括除 Global 和 Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。

例如:

x = new String("Hi");
if (x.constructor == String) // 进行处理(条件为真)。
//或
function MyFunc {
// 函数体。
}

y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理(条件为真)。

对于数组来说:

y = new Array();
  • Array的对象方法

说明:部分是ECMAScript5的新特性(IE678不支持)

方法 作用
concat() 连接两个或者更多的数组,并返回结果
join() 将数组的元素组起一个字符串
pop() 删除并返回数组的最后一个元素
push() 数组末尾添加一个或者多个元素,返回新的长度
reverse 颠倒数组中元素的顺序
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组元素排序
splice() 删除元素,并向数组添加新元素
toSource() 返回该对象的源代码
toString() 把数组转化为字符串并返回结果
toLocalString() 把数组转化为本地元素并返回结果
unshift 向数组开头添加一个或者更多的元素,并返回新的长度
valueof() 返回数组对象的原始值
forEach() 遍历数组对象
map() 对数组做一些映射
filter() 过滤
every() 检查判断
some() 检查判断
reduce() 两两执行一定的操作
reduceRight() 从右到左执行操作
indexOf() 数组检索查找某个元素
Array.isArray([]) 判断是否是数组

主要对一些新特性进行讲解
concat
concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]

splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(22);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(11,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];

foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例2。

2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21

map 
map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

filter
filter 过滤掉某些元素,和map有点类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

every()与some()
every()与some()方法都是JS中数组的迭代方法。every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
总结就是every()当每个元素都符合条件的时候返回true,而some()是任一项满足条件就返回true

1 every()
var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
     return x < 10;
}); // true

arr.every(function(x) {
     return x < 3;
}); // false

some只需要有一个符合的就行

2 some
var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
     return x === 3;
}); // true

arr.some(function(x) {
     return x === 100;
}); // false

reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
     return x + y
}, 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1
如果不写第一次传递的就是数组的前两个值,计算结果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9

reduceRight
和reduce一样只不过reduceRight 变成了从右到左两两执行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9

indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,indexOf(a,b)表示查找a元素,从b位置开始;lastindexOf表示从右向左找。当b为负数的时候表示从倒数第几个元素开始找,请看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示没有这个元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始
arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始
arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置
arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置
arr.lastIndexOf(2, -3); // 1

isArray
isArray用来判断是否是数组,但是isArray是Array构造器对象上的属性,所以不能直接用isArray,必须要写成Array.isArray([]),但是可以其它的判断方法直接判断

[]instanceof Array;//true
({}).toString.apply([])==='[object Array]';//true
[].construcror===Array;//true

数组和一般对象的比较

  数组 / 一般对象
相同点 都可以继承,对象不一定是数组,都可以当做对象添加属性
不同点 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法

数组和字符串的比较

  数组 /字符串
相同点 字符串是数组的一种
不同点 字符串是不可变的数组,字符串没有数组的方法
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
JavaScript数组对象及其方法详解 本文章讲解JavaScript中的数组对象以及其相关方法。包括了数组的遍历,数组内容的增删改,数组元素的擦护照检索,数组的排序,数组的迭代等方法。内容比较齐全,希望可以帮助大家。 阅读详情

相关推荐

Java代码实现opc ua 事件订阅和数据变化订阅

OPC UA (Open Platform Communications Unified Architecture) 提供了两种主要的订阅机制:数据变化订阅(Data Change Subscription)和事件订阅(Event Subscription)。这两种订阅机制允许客户端实时接收来自服务器的数据更新或事件通知。

洛阳泰山的博客 2314

JS数组对象

学习内容:数组数组字面量、数组的几个常用方法、数组遍历 学习笔记: 数组 数组(Array),数组也是一个对象,它和普通对象功能类似,也是用来存储一些值的,不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素 索引:从零开始的整数就是索引;数组的存储性能比普通对象更好,在开发中我们经常使用数组来存储一些数据 数组创建语法 var arr =new Array(); 向数组中添加元素,语法,数组[索引]=值 var arr = new Array()..

qq_61718994的博客 8684

国债期货的日线趋势跟踪策略实现(基于backtrader框架)

通过backtrader框架,我们可以轻松地实现国债期货的日线趋势跟踪策略,并进行回测和验证。通过这种策略,我们可以尝试捕捉国债期货价格的短期趋势,并根据趋势的方向进行交易决策。backtrader提供了许多内置的指标、订单类型和其他功能,可以帮助你进一步优化和改进你的策略。它提供了丰富的工具和功能,使我们能够快速实现和验证我们的交易想法。方法中,我们根据当前价格和前一天的价格判断趋势的方向,并根据趋势的变化进行买入或卖出操作。然后,我们设置了初始资金和交易手续费,并将我们定义的策略。来跟踪每日的收盘价。

NisyPhilosophy的博客 373

javascript对象——数组对象

添加数组元素:push() unshift() 删除数组元素:pop() shift() 删除或替换现有元素或者原地添加新的元素来修改数组 splice(star,num,insert) 截取指定开始位置到结束位置的字符串 slice 用于合并两个或多个数组 concat() 获取索引值的方法(去重时可以考虑使用) indexOf(数组元素,起始位置) lastIndexOf(数组元素,起始位置) ...

m0_72313625的博客 4005

3.JavaScript常用对象数组对象

JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象String():可以将基本数据类型字符串转换为String对象Number():可以将基本数据类型的数字转换为Number对象Boolean():可以将基本数据类型的布尔值转换为Boolean对象但是注意:我们在实际应用中不会使用基本数据类型的对象,如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果,在这一章节中,我们重点介绍String()对象的属性和方法。

weixin_51225684的博客 1486

java 解析js数组对象_详解JavaScript对象数组

许多高级编程语言都是面向对象的,比如C++、C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识。一种面向对象语言需要向开发者提供四种基本能力:(1)封装:把相关的信息(无论数据或方法)存储在对象中的能力(2)聚集:把一个对象存储在另一个对象内的能力(3)继承:由另一个类(或多个类)得来类的属性和方法的能力(4)多态:编写能以多种方法运行...

weixin_29480659的博客 593

js多层对象数组 合并_详解JavaScript中的数组合并方法和对象合并方法

1 数组合并1.1 concat 方法var a=[1,2,3],b=[4,5,6];var c=a.concat(b);console.log(c);// 1,2,3,4,5,6console.log(a);// 1,2,3 不改变本身1.2 循环遍历var arr1=['a','b'];var arr2=['c','d','e'];for(var i=0;iarr1.push(arr2[i])...

weixin_32002013的博客 520

JavaScript 对象数组常用方法详解

🤍 前端开发工程师、技术日更博主、已过CET6🍨、23年度博客之星前端领域TOP1🕠高级专题作者、打造专栏🍚签约作者、上架课程💬 前些天发现了一个巨牛的,通俗易懂,风趣幽默,忍不住分享一下给大家。。

你若盛开,清风自来 778

JavaScript函数、对象数组详解

在上一篇文章中,我们学习了JavaScript的基础语法和环境配置,现在让我们深入学习JavaScript的核心概念:函数、对象数组。这些概念是JavaScript编程的基础,掌握它们将帮助你写出更加灵活和强大的代码。

欢迎来到智能安全前线!这里是AI与信息安全交汇之地。我们以代码为武器,深入大模型攻防实战,破解系统漏洞。追踪OpenAI、Meta前沿动态,用红蓝对抗思维,锻造智能时代的坚盾与利矛。 972

什么是数组对象

什么是数组对象? -数组JavaScript的基本语句特性。 -数组对象的特殊形式。(或者说数组是特殊的对象) 使用typeof 返回的是object对象 -数组继承于object。 -严格来说,数组是一种数据结构,而不是数据类型。 -简单来说,数组是一堆数据的统称,用于存储数据,相当于变量。还可以方便查找。 例如:统计一个班级的基本信息或统计团队信息的时候,要是一个个的记录就不太理想,可以有效的利用数组来进行优化,减少繁琐的过程。 -数组具有length属性 length 是一

weixin_57727027的博客 4305

js数组对象

数组对象 var arr1 = [ { id: "1", name: "one", age: "one" }, { id: "2", name: "two", age: "two" }, { id: "3", name: "three", age: "three" }, { id: "4", name: "four", age: "four" }, { id: "5", name: "five...

weixin_30807779的博客 2562

JavaScript基础数组对象的详细讲解

万物皆对象,对象是一个具体的事物,看到见摸得着,对象是一组无序相关属性和方法的集合,所有事物都是对象,列如字符串,数值,数组,函数等.属性:事物的特征,在对象中用属性表示(常用名词)方法:事物的行为,在对象中用方法表示(常用动词)

qq_46372132的博客 802

JS 数组对象常用方法

数组常用方法

皮皮的博客 2392

JS对象数组

使用数组存储不同类型的数据 以下是最简单的数组(Array)示例: 这是一个一维数组(one-dimensional array),它只有一层,或者说它里面没有包含其它数组。 可以观察到,这个数组中只包含了布尔值(booleans)、字符串(strings)、数字(numbers)以及 JavaScript 中的其他数据类型: let simpleArray = ['one', 2, 'three', true, false, undefined, null]; console.log(simpleArra

corn6的博客 2137

JavaScript数组对象详解,经典好文

给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**[外链图片转存中…(img-r6OvBJFD-1712118797558)]由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。

2401_84094029的博客 1435

数组对象

arr[10] = "新的值" // 当我们强行添加一个不存在的下标时,会再本身的长度之后到对应的下标之间添加空的值。数组和字符串都有下标的概念,所谓下标就是我们对应的值的顺序,从0开始->length-1结束,下标我们一般称其为。let 变量名 = new Array(值, 值2, 值3, 值n) // [值, 值2, 值3, 值n]let 变量名 = new Array(非number类型) // 直接生成一个数组,中间有对应的值。[[值, 值2, [值, 值2]], [值, 值2, 值3]]

weixin_52655964的博客 535

单片机本科毕业设计——恒温箱控制系统设计与实现(源代码+protues仿真+PCB+开题报告+讲解视频).zip

单片机本科毕业设计——恒温箱控制系统设计与实现(源代码+protues仿真+PCB+开题报告+讲解视频).zip

上一篇: 使用vue.js仿一个链家
下一篇: 前端基础进阶(一):内存空间详细图解
敲代码的猴
博客等级 码龄9年 126粉丝 61原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值