搜索
您的当前位置:首页JavaScript数组操作的总结

JavaScript数组操作的总结

时间:2023-12-01 来源:乐玩宠
搞互联网的,无论是传统web端的还是移动互联网(webview)端的,都会或多或少的跟JS(JavaScript)打交道。下面给出js array(数组)常见的操作方式和方法

1. javaScript 数组的创建

1.JS中允许创建一个长度不定长的数组、长度固定的数组或是一个带有默认值得数组。

声明或创建方式如下:

1.png

2. 操作JS数组内的元素

1.赋值:可以通过索引(下标)的方式访问js数组指定位置的元素并为其赋值。

索引(下标)起始位置为0。

可赋类型为:数值、字符、字符串或是对象

方式如下:

2.png

2.访问。可通过索引(下标)的方式访问js数组指定位置的元素。

方式如下:

3.png

3. 数组元素的添加

1.添加方式按插入位置分3种:数组起始位置、数组末尾、或是数组指定位置

4.png

4. 数组元素的删除

1.数组元素的删除分3种:删除数组起始位置的元素、删除数组末尾位置的元素,或是删除指定位置指定长度的元素。

5.png

5. 数组元素的截取和合并

1.数组元素的截取:可以通过内置函数slice(start, [end])进行截取从start位置开始到end位置结束的数组元素。

6.png

2.数组元素的合并:可以内置函数concat([item1[, item2[, . . . [,itemN]]]]);将多个数组连接为一个数组。

7.png

6. 数组的排序

1.数组可以通过内置函数实现自身的排序, 排序方式分两种,一种是自然排序,另一种是反转排序

8.png

7. JS其他有用的内置函数或属性

1.获取数组(Array)长度。可以通过length属性来获得,格式为:

9.png

小编还为您整理了以下内容,可能对您也有帮助:

Javascript中数组的常用方法有哪些?

concat()连接两个或更多的数组,并返回结果。

join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()删除并返回数组的最后一个元素

push()向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()颠倒数组中元素的顺序。

shift()删除并返回数组的第一个元素

slice()从某个已有的数组返回选定的元素

sort()对数组的元素进行排序

splice()删除元素,并向数组添加新元素。

toSource()返回该对象的源代码

toString()把数组转换为字符串,并返回结果。

toLocaleString()把数组转换为本地数组,并返回结果。

unshift()向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()返回数组对象的原始值

JavaScript中数组如何使用


JavaScript中的数组是经常需要用到的,那么JavaScript数组具体如何使用呢?本篇文章就来给大家分享一下JavaScript中数组的用法。

话不多说,我们来看具体示例~
在数组中,可以在一个括号中放置多个值。
这个时候,将三个值(元素)Tom、Jerry、Holly放在称被定义为“ family”的括号中。
值包含在[]中。
var family = ["Tom", "Jerry", "Holly"];我们来输出family

<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family);
</script>运行结果如下

从运行结果可以看到,Tom,Jerry和Holly三个值 都包含在family中。
指定并获取数组索引(下标)
接下来,尝试通过指定索引来单独获取每个元素。
在[]中,数字(索引)按0,1,2,......的顺序分配,包括0 。
因此,例如,当你想要检索Jerry的值时,可以这样写。
<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family[1]);
</script>运行效果如下

将元素替换
我下面将Holly替换成Susan,因为Holly的下标(索引)是2,所以我们可以这么做

<script>
var family = ["Tom", "Jerry", "Holly"];
family[2]="Susan";
console.log(family);
</script>运行结果如下
最后我们来看一下数组的属性
属性就是“特性/特征”的意思。
我们来介绍一个数组属性
< length >
length属性?可以获取数组的长度,即元素个数。
我们来看具体使用
<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family.length);
</script>运行结果如下

本篇文章到这里就全部结束了,关于JavaScript数组的其他属性及用法大家可以参考JavaScript中的Array对象如何使用和JavaScript中Array对象的用法有哪些这两篇文章。

JavaScript中数组如何使用


JavaScript中的数组是经常需要用到的,那么JavaScript数组具体如何使用呢?本篇文章就来给大家分享一下JavaScript中数组的用法。

话不多说,我们来看具体示例~
在数组中,可以在一个括号中放置多个值。
这个时候,将三个值(元素)Tom、Jerry、Holly放在称被定义为“ family”的括号中。
值包含在[]中。
var family = ["Tom", "Jerry", "Holly"];我们来输出family

<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family);
</script>运行结果如下

从运行结果可以看到,Tom,Jerry和Holly三个值 都包含在family中。
指定并获取数组索引(下标)
接下来,尝试通过指定索引来单独获取每个元素。
在[]中,数字(索引)按0,1,2,......的顺序分配,包括0 。
因此,例如,当你想要检索Jerry的值时,可以这样写。
<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family[1]);
</script>运行效果如下

将元素替换
我下面将Holly替换成Susan,因为Holly的下标(索引)是2,所以我们可以这么做

<script>
var family = ["Tom", "Jerry", "Holly"];
family[2]="Susan";
console.log(family);
</script>运行结果如下
最后我们来看一下数组的属性
属性就是“特性/特征”的意思。
我们来介绍一个数组属性
< length >
length属性?可以获取数组的长度,即元素个数。
我们来看具体使用
<script>
var family = ["Tom", "Jerry", "Holly"];
console.log(family.length);
</script>运行结果如下

本篇文章到这里就全部结束了,关于JavaScript数组的其他属性及用法大家可以参考JavaScript中的Array对象如何使用和JavaScript中Array对象的用法有哪些这两篇文章。

JS Array(数组)所有操作方法,改变数组方法、不改变数组方法

定义:返回由所有参数值组成的数组,如果没有参数,就返回一个空数组。

目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。

参数:

第一个参数(必需):要转化为真正数组的对象。

第二个参数(可选): 类似数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组。

第三个参数(可选): 用来绑定this。

ps:splice方法从数组中添加/删除项目,然后返回被删除的项目

语法: array.splice(index,howmany,item1,.....,itemX)

参数:

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, …, itemX: 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

删除元素

删除并添加

不删除只添加

ps:方法接受两个参数,一个从哪里开始,一个是到哪里结束(但是不包括这个结束的元素本身)。如果是负数,就从倒数第几个。

参数可选: 规定排序顺序的比较 函数 。

默认情况下sort()方法没有传比较函数的话,默认按字母升序,如果不是元素不是字符串的话,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。

比较函数的两个参数

sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用 a 和 b 接收两个将要比较的元素:

sort排序常见用法

数组元素为数字的升序、降序:

数组多条件排序

自定义比较函数

定义: 在当前数组内部,将指定位置的成员复制到其他位置,并返回这个数组。

语法: array.copyWithin(target, start = 0, end = this.length)

参数:

三个参数都是数值,如果不是,会自动转为数值.

target(必需):从该位置开始替换数据。如果为负值,表示倒数。

start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。

end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持

从上述例子:

第一个参数是开始被替换的元素位置

要替换数据的位置范围:从第二个参数是开始读取的元素,在第三个参数前面一个元素停止读取

数组的长度不会改变

读了几个元素就从开始被替换的地方替换几个元素

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选):填充的结束位置,默认是为this.length

使用join方法或者下文说到的toString方法时,当数组中的元素也是数组或者是对象时会出现什么情况?

join()/toString()方法在数组元素是数组的时候,会将里面的数组也调用join()/toString(),如果是对象的话,对象会被转为[object Object]字符串。

如上述栗子:调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString,Date调用Date的toLocaleString。

该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。

ps:当数组和字符串操作的时候,js 会调用这个方法将数组自动转换成字符串

ps:字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。

参数:

begin(可选): 索引数值,接受负值,从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值,在该索引处前结束提取原数组元素,默认值为数组末尾(包括最后一个元素)。

如上:新数组是浅拷贝的,元素是简单数据类型,改变之后不会互相干扰。

如果是复杂数据类型(对象,数组)的话,改变其中一个,另外一个也会改变

原因在定义上面说过了的:slice()是浅拷贝,对于复杂的数据类型浅拷贝,拷贝的只是指向原数组的指针,所以无论改变原数组,还是浅拷贝的数组,都是改变原数组的数据。

ES6扩展运算符...合并数组:

因为ES6的语法更简洁易懂,所以现在合并数组我大部分采用...来处理,...运算符可以实现cancat的每个栗子,且更简洁和具有高度自定义数组元素位置的效果。

参数:

searchElement(必须):被查找的元素

fromIndex(可选):开始查找的位置(不能大于等于数组的长度,返回-1),接受负值,默认值为0。

严格相等的搜索:

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。

注意:indexOf()不能识别NaN

参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置,默认值数组的长度-1,即查找整个数组。

关于fromIndex有三个规则:

正值。如果该值大于或等于数组的长度,则整个数组会被查找。

负值。将其视为从数组末尾向前的偏移。(比如-2,从数组最后第二个元素开始往前查找)

负值。其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

参数:

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。正值超过数组长度,数组不会被搜索,返回false。负值绝对值超过长数组度,重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN

indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观

javascript中怎么遍历数组js中如何遍历数组

javascript中的$是什么意思?

JS中的$表示:

$符号是php中表示变量的特征字符,它在js中也有很多功能。一般来说,我们用它来命名一个函数并获取id。

1.首先,它可以用来表示变量,比如变量vars=

2.在正则表达式中,它可以匹配结尾/sa$/。test(string)匹配字符串中的SA字符串,如string=:+items);

});

//遍历map

$.each(map_demo,function(key,value){

console.info(key:+key+,Value:+value);

})

$.map()遍历List/map//遍历List

varnew_list=$.map(list2,function(items,index){

returnitems+!;

})

console.info(new_list);

//遍历map

$.map(map_demo,function(key,value){

console.log(key+:+value);

});

小结:$.map()写法和$.each()类似,但对list的遍历时,参数顺序和$.each()是相反的,并且可以带返回值。对map的遍历和$.each()一样

2.for...in...遍历List/map//遍历map

for(varkeyinmap_demo){

console.info(key+:+map_demo);

}

//遍历List

for(varindexinlist2){

console.info(index+:+list2);

}

小结:对于List来说,能不用for...in就不要用,效率低下。

3.forEach遍历Listlist2.forEach(function(element,index,array){

console.info(element);//当前元素的值

console.info(index);//当前下标

console.info(array);//数组本身

});

小结:和for循环效率差不多。

js中遍历Map对象的方法?

对象类似于数组,且成员的值都是唯一的

constarr=

constset=newSet()

arr.forEach(item=>set.add(item))

console.log(set)//1,2,3,4,5

//数组快速去重

console.log()

Map对象是键值对集合,和JSON对象类似,但是key不仅可以是字符串还可以是对象

varmap=newMap()

varobj={name:'小缘',age:14}

map.set(obj,'小缘喵')

map.get(obj)//小缘喵

map.has(obj)//true

map.delete(obj)//true

map.has(obj)//false

js怎么把非数组数字循环加入数组中?

将小数组的值循环赋值给大数组,如果大数组未满,继续循环赋值。或者直接一个循环(大数组的长度作为循环)赋值到小数组完,重置小数组的index为0,直到大数组全部赋值完。

JSON遍历方式实例总结?

1如果过来的json数据不是javascript对象,需要先转换为对象可以用如下方法eval((+json变量字符串名+))

;2假设对象名称是obj那么obj.result就是result的数组3for(vari=0;iobj.result.length;i++){varitem=obj.result

;//这个item就是result的数组中的一个元素alert(item.proctName);}

vue怎么递归遍历数组?

functiondigui(val){

letarr=;

if(val.length!==0){

val.forEach(item=>{

letobj={};

obj.id=item.path;

obj.label=item.name;

if(item.children.length>=1){

obj.children=this.digui(item.children);

}

arr.push(obj);

});

}

乐玩宠还为您提供以下相关内容希望对您有帮助:

JavaScript中数组如何使用

在[]中,数字(索引)按0,1,2,...

javascript中怎么遍历数组js中如何遍历数组

1如果过来的json数据不是javascript对象,需要先转换为对象可以用如下方法eval((+json变量字符串名+));2假设对象名称是obj那么obj.result就是result的数组3for(vari=0;iobj.result.length;i++){varitem=obj.result ;//这...

几种javascript数组定义的方法详解

1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型...

Javascript中数组的常用方法有哪些?

concat()连接两个或更多的数组,并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素 push()向数组的末尾添加一个或更多元素,并返回新的长度。reverse()...

js数组对象常用的方法

数组的增删操作 array.push(value,[value[,...]])   //将一个或多个元素添加到数组的结尾,并返回新的长度。array.pop()   //从数组中删除最后一个元素,并返回该元素的值,改变了数组的...

JS Array(数组)所有操作方法,改变数组方法、不改变数组方法

参数: 第一个参数(必需):要转化为真正数组的对象。 第二个参数(可选): 类似数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组。 第三个参数(可选): 用来绑定this。ps:splice方法从数组中添加...

JS数组方法

concat();//拼接数组 不改变原数组 ES5新增数组操作方法 indexOf (item) 返回元素在数组中对应的索引值,找不到的话,返回-1,用以测试元素是否存在于数组中 forEach(function(item,index)) 遍历数组,没有返...

数组的常用方法

JavaScript中创建数组有两种方式(一)使用 Array 构造函数:var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建...

如何用js取数组内的值?

1、先新建一个html文件,命名为test.html。2、在test.html文件内,使用div标签创建一个模块,并设置其id为outinput,主要用于下面通过该id获得div对象。3、在js标签内,定义一个数组arr,数组内定义三个元素,分别为“测试...

javascript如何删除数组中的指定元素

一、判断元素是否在数组里首先我们要先通过JavaScript代码来判断我们要删除的元素是否在这个数组里,我们可以通过以下的方法来实现这个功能function isInArray(arr,value){ for(var i = 0; i &lt; arr.length; i++){ if(...

Top
8.654257s