javascript数组

简介: javascript数组

整理了一些js数组的知识点,和大家一起学习。


基本概念

数组,值的有序集合。

  • 1 构成
    (1)元素:数组的值;
    (2)索引(下标):元素在数组中的位置;
    (3)逗号:元素之间以逗号隔开,结尾的逗号可选。
  • 2 注意事项
    (1)元素可以是任意类型
    (2)可以动态改变,增删改无须重新声明数组;
    (3)数组是一种特殊的JS对象。


操作


这里列举了数组的创建、读写、遍历的一些操作。


1创建数组


(1)数组直接量

var arr = [1,2,3,"a","b","c",[1,2,3],{a:0,b:"abc"},undefined];

(2)Array构造函数

var arr = new Array(); //不传参,length=0
var arr = new Array(5); //传参,length=5

(3)注意事项

-> 数组直接量的元素可以省略不写(其值会自动变为undefined),此时数组是一个稀疏数组;
-> Array构造函数传入的实参列表,逗号之间的元素不能省略。

稀疏数组
1.概念:索引之间可以有空缺,不一定是连续的。
2.注意事项
(1)空缺的元素值为undefined;
(2)虽然空缺处有默认值undefined,但实际该索引属性在数组中不存在,可用in操作符来检验;
(3)非稀疏数组的length属性值等于元素的个数,而稀疏数组的length属性值大于元素的个数;
(4)非稀疏数组即为“稠密数组”,一般所见都是稠密数组。


var arr1 = [];        //空数组
arr1[4] = 1;      //在索引为4的位置添加元素
arr1[1];         //->undefined,索引1的位置为“空”
var arr2 = [1,,3,undefined];    //创建一个稀疏数组
1 in arr2;   //->false ,判断索引1是否存在(每个索引都是数组的一个属性名)
3 in arr2;   //->true,显式地将undefined写入数组,故判定成立
arr2.length;   //->4


2读写


使用“数组名[索引]”来访问元素,方括号中可以是表达式(计算结果是一个非负整数),每个索引都是数组的一个属性名(虽是属性,但只能用方括号来访问,而不能用“.”访问)。

注意:方括号内的值只有在0~2^32-2之间时才是索引,其他任意类型的数据都将为数组创建一个相应的属性(因为数组也是对象)。


3遍历


使用for循环遍历数组元素,或ES5中的forEach()方法。若使用for/in循环,会遍历数组的所有可枚举的属性,包括其从原型链上继承的属性,而且遍历的顺序不定,易出问题。


属性和方法length属性

(1)值 = 元素个数

(2)两个特殊行为:

-> 增加数组元素,且该元素的索引n大于length值时,length = n+1;

-> 当给length赋值n,且n<length时,索引>=n的元素都会被删除。

(3)注意

使用delete操作符可以删除元素,该索引为“空”,该数组的length值不变,后面的元素也不会前移,会产生一个稀疏数组。

方法

(1)jion()

作用:通过分隔符(默认为逗号)将数组中的所有元素拼接成字符串;

返回值:最后拼接好的字符串;

是否改变原数组:否;

2f1f630e82f03debade650e8a35466ec_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

注:与string对象的split()方法刚好相反,split()是将字符串分割成数组。

(2)reverse()

作用:颠倒元素顺序;

返回值:逆序的数组;

是否改变原数组:是 。

bed4a6fd06094b0392cf81914cd82eff_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

(3)sort()

作用:元素排序;

返回值:排序后的数组;

是否改变原数组:是;

613e583b7fb631d0b939308cba6ec8ce_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

1.不传参时,默认以字母表顺序排序;
2.若数组中有显式的undefined元素,则undefined元素会排到最后
3.参数可以是一个自定义的排序函数

(4)concat()

作用:连接元素;

返回值:连接后的数组;

是否改变原数组:否;

若参数是一个或多个数组,则只会将原数组和参数数组的元素连接起来。

aa6ab6d9847aaf060f45242642aabcec_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

(5)slice()

作用:截取子数组;

返回值:返回截取出的新数组;

是否改变原数组:否;

247054c4fe896ae000f0a94feb472e14_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

参数:[start,end),截取从start位置开始到end位置结束(不包括end)之间的所有元素只有一个参数时,从该索引位截取到最后。
参数可以为负数,-1表示最后一个元素,-2表示倒数第二个元素。

(6)`splice()`

作用:插入或删除;

返回值:由被删除元素组成的数组(没有删除元素则为空数组);

是否改变原数组:是;

e665a12e23b9a22acffc1e65abcc807a_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

参数1指定起始位置,参数2指定删除个数(若省略,则删除所有元素),其后所有参数均为待插入的元素。

(7)`push()`

作用:在数组末尾增加一个元素或多个元素;

返回值:新数组的长度;

是否改变原数组:是;

image.png

(8)pop()

作用:删除最后一个元素;

返回值:被删除的元素;

是否改变原数组:是;

693932e8f50244c2e8310099401248c8_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

(9)unshift()

作用:在数组首位插入一个或多个元素,其他元素依次后移;

返回值:新数组的长度;

是否改变原数组:是;

var arr = [1,2,"a"];arr.unshift("c","m");    //->5arr;                     //->["c", "m", 1, 2, "a"]

(10)shift()

作用:从首位删除一个元素,其他元素依次前移;

返回值:被删除的元素;

是否改变原数组:是;

af5fbcfd1315f2fe80a577273a647db3_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

(11)toString()

作用:将所有元素转化成字符串;

返回值:转化后的字符串;

是否改变原数组:否;

02640b6964c972ebcb4794c06a446e53_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

1.所有对象都有该方法;
2.输出不包括方括号或其他任何形式的包裹数组元素的分隔符

(12)toLocaleString()

toString()的本地化版本,可使用本地化和自定义的分隔符来拼接字符串。


ES5方法


ECMAScript 5 新增了9种方法:forEach()、map()、filter()、every()、some()、reduce()、reduceRight()、indexOf()、lastIndexOf()。第一个参数几乎都为一个函数,其参数有3个:元素,索引,数组本身(后面两个参数可选)。

forEach()

作用:遍历元素;

返回值:无返回值

参数:执行函数(参数为调用数组的元素)

83ea5bebabbc0eb895a2fc0ce14dcf26_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

map()

作用:映射元素;

返回值:返回映射后的新数组

参数:执行函数(参数为调用数组的元素)

46c899c5e3a41516cbd40c325eb1ca77_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

filter()

作用:过滤元素;

返回值:新数组,其元素为符合判定条件的原数组元素

参数:执行函数(参数为调用数组的元素)

77232212d24ee0d97fa092fb375de8ac_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

every() 和 some()

作用:检测元素(every()检测全部,类似逻辑与;some()检测部分,类似逻辑或);

返回值:true / false

参数:执行函数(参数为调用数组的元素)

e2cae1e0fa82f2a72250f184472acd78_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

reduce()、reduceRight()

作用:组合元素(reduce()从左至右,reduceRight()从右至左);

返回值:

参数:参数1为执行函数,参数2(可选)指定执行函数的初始值

4604a027ad7ae9eb592f42c546a223e5_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

indexOf() 和 lastIndexOf()

作用:搜索元素(indexOf()从头至尾,lastIndexOf()从尾至头);

返回值:若找到,则返回找到的第一个元素的索引;否则,返回 -1;

参数:参数1指定搜索元素,参数2(可选,可为负值)指定开始搜索的索引位置

77193e19a421c0fba74d6917123c3410_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

注:字符串对象也有这两种方法,作用类似。

类数组类数组和数组很像,但其本质上不是数组,即类数组的类属性不是Array。

f7358e7e42543bc715483eec22790ace_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


目录
相关文章
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
34 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
27 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
39 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
42 1
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
27 5
|
2月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
19 3
|
2月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
47 1
|
2月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
24 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
3月前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素