javascript数组常用方法和技巧完整讲解

 2024-03-05 05:02:46  阅读 0

数组对于编程语言的重要性不用多说,在使用的时候也不可避免的会涉及到数组操作。 它们主要用于封装任意类型的多个数据并对其进行管理。 在js中,数组可以使用Array构造函数来创建,或者使用[]来快速创建,这也是首选的方法。 js中的数组也和其他语言中的数组有很大不同。 下面重点介绍一下js中数组操作的一些常用方法和技巧。

数组是值的有序集合。 由于弱类型,中等数组非常灵活和强大。 与Java和其他强类型高级语言不同,数组只能存储相同类型或其子类型的元素。 多个元素可以存储在同一个数组中。 元素有多种类型,长度也可以动态调整。 数组的长度可以随着数据的增加或减少而自动改变。

创建数组以多种方式创建数组

构造函数 1. 不带参数的构造函数,创建一个空数组

var a1=new Array();

2、一个数字参数构造函数,指定数组的长度(由于数组的长度可以动态调整,所以用处不大),创建指定长度的数组。

var a2=new Array(5);

3.带有初始化数据的构造函数,创建数组并初始化参数数据

var a3=new Array(4,'hello',new Date());

文字

1.使用方括号创建空数组,相当于调用无参构造函数

var a4=[];

2、使用方括号,传入初始化数据,相当于用初始化数据调用构造函数。

var a5=[10];

当心

1、使用构造函数创建数组时,如果传入数字参数,则会创建一个与参数长度相同的数组。 如果传入多个参数,则会创建一个数组,并将参数添加到数组中作为初始化数据。

var a1=new Array(5);
console.log(a1.length);//5
console.log(a1); //[] ,数组是空的
var a2=new Array(5,6);
console.log(a2.length);//2
console.log(a2); //[5,6]

但使用字面量方法,无论传入多少个参数,参数都会被视为初始化内容。

var a1=[5];
console.log(a1.length);//1
console.log(a1); //[5]
var a2=[5,6];
console.log(a2.length);//2
console.log(a2); //[5,6]

2、创建带有初始化参数的数组时,末尾最好不要包含多余的“,”。 这在不同的浏览器中处理方式不同。

var a1=[1,2,3,];
console.log(a1.length);
console.log(a1);

这个脚本在现代浏览器上运行的结果和我们想象的一样,长度是3,但是在低版本的IE下,是一个长度为4的数组,最后一条数据是

数组索引和长度

数组的值可以通过自然数索引访问来读写,下标也可以是产生非负整数的变量或表达式。

var a1=[1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3

数组也是对象。 我们可以使用索引的秘密在于,数组会将索引值转换为相应的字符串(1=>“1”)作为对象属性名称。

console.log(1 in a1);//true,确实是一个属性

索引的特殊性在于数组会自动更新属性。 当然,因为语法规定数字不能作为变量名,所以我们无法显示array.1这样的格式。可见负数甚至非数字的“索引”是允许的,但这些都会变成属性数组的值,而不是索引。

var a=new Array(1,2,3);
a[-10]="a[-10]";
a["sss"]="sss";

js数组加入另一个数组_js数组添加元素到数组尾部_js怎么把新值加入数组

这样,我们可以看到所有索引都是属性名,但只有自然数(具有最大值)才是索引。 一般我们在使用数组的时候不会出现数组越界的错误。 正是因为如此,数组的索引不需要是连续的。 , 访问索引不存在的元素时返回

var a=new Array(1,2,3);
a[100]=100;
console.log(a.length); //101
console.log(a[3]); //undefined
console.log(a[99]); //undefined
console.log(a[100]); 100

js数组加入另一个数组_js数组添加元素到数组尾部_js怎么把新值加入数组

上面的例子中,虽然直接给a[100]赋值不会影响a[4]或a[99],但是数组的长度会受到影响。 数组属性等于数组中最大的索引+1。 我们知道数组的属性。 它也是一个可写属性。 当数组的属性值被强制设置为小于或等于最大索引值时,数组会自动删除大于或等于它的数据。 在刚才的代码中添加几句话。

a.length=2;
console.log(a);//[1,2]

这时候你会发现a[2]和a[100]被自动删除了。 同样,如果将其设置为大于最大索引+1的值,数组将自动扩展,但不会向数组添加新元素。 只需在末尾添加空格即可

a.length=5;
console.log(a); //[1,2] //后面没有3个undefined

添加/删除元素的基本方法

上面的例子已经使用了向数组添加元素的方法,直接使用索引即可(索引不需要连续)

var a=new Array(1,2,3);
a[3]=4;
console.log(a);//[1, 2, 3, 4]

前面说过,数组也是对象,索引只是特殊的属性,所以我们可以采用删除对象属性和删除数组元素的方法。

delete a[2];
console.log(a[2]); //undefined

这类似于直接将 a[2] 赋给一个值。 它不会改变数组的长度,也不会改变索引和其他数据的值的对应关系。

js怎么把新值加入数组_js数组加入另一个数组_js数组添加元素到数组尾部

堆栈法

总有同学发现上面的例子,尤其是删除的方式,并不是我们想要的表达方式。 我们常常希望删除中间的一个元素后,后面的元素的索引会自动减一,数组同时减一,就像从栈中取一一样。 数组已经帮我们做了这个操作。 弹出和推送允许我们像使用堆栈一样使用先进后出的数组。

var a=new Array(1,2,3);
a.push(4);
console.log(a);//[1, 2, 3, 4] 
console.log(a.length);//4
console.log(a.pop(a));//4
console.log(a); //[1, 2, 3] 
console.log(a.length);//3

队列方式

既然已经实现了栈方式,那么先进先出队列怎么能少呢? shift方法可以删除数组索引最小的元素并将后续元素的索引减一,也减一。 这样就可以用shift/push来模拟队列了。 当然还有一个与shift方法相对应的方法,用于向数组的头部添加一个元素。

var a=new Array(1,2,3);
a.unshift(4);
console.log(a);//[4, 1, 2, 3] 
console.log(a.length);//4
console.log(a.shift(a));//4
console.log(a); //[1, 2, 3] 
console.log(a.length);//3

终极神器

提供了解决一次性添加和删除数组问题的方法(两种方法可以结合起来达到替换效果)。 该方法具有三个参数。

1. 开始索引

2.删除元素的位移

3.当然,你也可以编写多个新元素来插入。

该方法返回一个由已删除元素组成的新数组,如果没有删除则返回一个空数组。

var a=new Array(1,2,3,4,5);

删除

指定前两个参数可以用于删除数组元素,同时也会带来索引的调整和调整。

var a=new Array(1,2,3,4,5);
console.log(a.splice(1,3));//[2, 3, 4] 
console.log(a.length);//2
console.log(a);//[1,5]

如果数组索引不从0开始,结果会很有趣。 有一个这样的数组

var a=new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8]=5;

js数组加入另一个数组_js数组添加元素到数组尾部_js怎么把新值加入数组

console.log(a.splice(3,4)); //[3] 
console.log(a.length); //5
console.log(a); //[2: 2, 3: 4, 4: 5]

从上面的例子可以看出,第一个参数是绝对索引值,而不是相对于数组索引。 第二个参数不是删除元素的数量,而是执行删除动作的次数,而不是数组的实际索引。 ,但是连续移动。同时调整后面元素的索引,忽略前面的索引。

插入和替换

只要将该方法的第二个参数,即执行删除动作的次数设置为0,第三个参数以及后面填写要插入的内容,就可以进行插入操作。 如果第二个参数不为0,则变成先删除然后在这个位置插入,就是替换效果

var a=new Array(1,2,3,4,5);
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5] 
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

常用方法join(char)在C#等语言中也有。 它的功能是使用参数作为连接器将数组元素(对象调用其 () 方法)连接成字符串。

var a=new Array(1,2,3,4,5);
console.log(a.join(',')); //1,2,3,4,5 
console.log(a.join(' ')); //1 2 3 4 5

切片(开始,结束)

var a=new Array(1,2,3,4,5);
console.log(a); //[1, 2, 3, 4, 5] 
console.log(a.slice(1,2));//2
console.log(a.slice(1,-1));//[2, 3, 4] 
console.log(a.slice(3,2));//[]
console.log(a); //[1, 2, 3, 4, 5]

不要将其与方法混淆。 slice 方法用于返回数组中的片段或子数组。 如果只写入一个参数,则将该参数返回到数组末尾。 如果参数为负数,则从数组末尾开始计数(-3表示从数组底部倒数第三个。,大多数人不会这样做,但是当你不知道数组长度时,它很有用数组并想丢弃最后n项,但是数组的长度很容易知道...,用起来很混乱),如果start大于end,则返回一个空数组,值得一需要注意的是,slice 不会改变原始数组,而是返回一个新数组。

(大批)

看起来像剪辑,但这实际上不是录音制品。 该方法用于拼接数组。 a.(b) 返回由 a 和 b 组成的新数组。 它也不会修改任何原始数组,也不会递归连接。 数组内部数组。

var a=new Array(1,2,3,4,5);
var b=new Array(6,7,8,9);
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] 
console.log(a); //[1, 2, 3, 4, 5] 
console.log(b); //[6, 7, 8, 9]

()

该方法用于反转数组的顺序。 与之前不同的是,它会修改原来的数组。

var a=new Array(1,2,3,4,5);
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]

另外,当数组索引不连续或者从0开始时,需要注意结果

var a=new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8]=5;

js数组添加元素到数组尾部_js数组加入另一个数组_js怎么把新值加入数组

a.reverse();

js数组加入另一个数组_js数组添加元素到数组尾部_js怎么把新值加入数组

该方法用于对数组进行排序。 当没有参数时,会按照字母升序排序。 如果包含则排序到最后。 对象元素将调用其方法。 如果你想按照自己的定义排序,可以传递一个排序方法。 进去吧,这是一个很典型的策略模式,同样的排序会改变原来的数组。

var a=new Array(5,4,3,2,1);
a.sort();
console.log(a);//[1, 2, 3, 4, 5]

但······

var a=new Array(7,8,9,10,11);
a.sort();
console.log(a);//[10, 11, 7, 8, 9]

因为按照字母顺序,7比10大。这时候我们需要传入一个自定义的排序函数。

var a=new Array(7,8,9,10,11);
a.sort(function(v1,v2){
    return v1-v2;
});
console.log(a);//[7, 8, 9, 10, 11]

原理和C#中的sort类似,只不过可以直接传递方法。 以下内容仅供参考:

Sort内部使用快速排序。 每次比较两个元素的大小时,如果没有参数,则直接确定字母表。 如果有参数,则将正在比较的两个参数传递到自定义方法中并调用(正在比较的两个参数的编号将传递给自定义方法的v1和v2)。 如果返回值大于0,则表示v1>v2。 如果等于0,则表示v1=v2。 如果小于0,则表示v1js数组循环遍历数组中的所有元素。

js中遍历数组最简单的方法就是使用for,然后使用arr。 长度为 for 的最大值。 让我们看一些有用的例子。

for(){} 遍历数组

var arr = new Array(13.5,3,4,5,6);
for(var i=0;i

for in循环遍历数组

var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars){
    document.write(mycars[x] + "
") }

js数组和字符串相互转换的方法 1、数组转换为字符串,需要将数组元素使用某个字符连接成字符串。 示例代码如下:

var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");

2. 将字符串转换为数组

实现方法是将字符串按照某个字符切割成若干个字符串,并以数组的形式返回。 示例代码如下:

var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解。

数组练习

如果你已经掌握了上面介绍的数组的常用方法,那么你可以通过下面的练习来加深你对数组的使用!

通过数组,我们可以将多个数据存储在同一个变量中。

多维数组运算

此练习允许您在数组中包含其他数组

使用索引查找数组中的数据

您可以通过数组索引访问数组中的数据,就像访问字符串一样。

提示:如果您需要更多有关数组的练习,请访问此站点!

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码