博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中常见的数组操作函数及用法
阅读量:5061 次
发布时间:2019-06-12

本文共 3523 字,大约阅读时间需要 11 分钟。

1、数组创建


  创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下:

1
2
var 
array1 = 
new 
Array();
var 
array2 = [];

  上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇。其中,使用构造函数创建数组同样可以接收用于存放于数组的值,如:

1
var 
array3 = 
new 
Array(
"num1"
,
"num2"
,
"num3"
);
//["num1", "num2", "num3"]

  同样,如果你传给构造函数的值是一个number,则该number如果大于0,则将是这个新创建数组的长度,如:

1
2
var 
array4 = 
new 
Array(5);
array4.length;
//5

  同样的效果下,我们还是推荐使用字面量的形式创建数组。

  2、数组检测


  有两种可以检测数组的方式,第一种使用instanceof,如下:

1
2
var 
array5 = [];
array5 
instanceof 
Array;
//true

  同时,Array也自带了isArray()的方法,如下:

1
2
var 
array6 = [];
Array.isArray(array6 );
//true

  3、获取数组长度


  数组长度可以通过.length获取,如下:

1
2
var 
array7 = [1,2,3,4];
array7.length;
//4

  同时,数组的长度你也可以随时设置,如果设置的长度超过之前的,则后面的内容会自动补充维undefined,否则会截取有效长度的内容,如下:

1
2
3
4
5
6
7
var 
array8 = [1,2,3,4,5];
console.log(array8.length);
//5
array8.length = 8;
array8;
//[1, 2, 3, 4, 5, undefined × 3]
 
array8.length = 3;
array8;
//[1,2,3]

  4、获取或者设置数组值


  我们可以获取和设置数组的值,这里需要记住的是数组的下标是从0开始的,如下:

1
2
3
4
var 
array9 = [1,2,3,4,5,6];
array9[2];
//3
array9[2] = 4;
array9[2];
//4

  5、数组字符串转换


  数组转换为字符串可以调用数组自带的toString()方法,返回数组的字符串形式,如下:

1
2
var 
array10 = [1,2,3,4];
array10.toString();
//"1,2,3,4"

  另外,数组也有另外一个非常有用的函数join(),它接受一个字符串参数,用于插在数组各项之间形成字符串,如下:

1
2
var 
array11 = [1,2,3,4];
array11.join(
"||"
);
//"1||2||3||4"

  6、数组添加和删除项


  前面讲过,我们可以设置length自动给数组添加一些undefined的值。同时,我们也可以通过访问一个超过数组本来的长度的数字下标以给数组添加项,如:

1
2
3
4
var 
array12 = [1,2,3,4];
array12[5] = 5;
array12[6] = 6;
array12;
//[1, 2, 3, 4, undefined × 1, 5, 6]

  另外,我们也可以通过push()给数组添加新的元素,如下:

1
2
3
var 
array13 = [1,2,3,4];
array13.push(5,6);
array13;
//[1, 2, 3, 4, 5, 6]

  与push()相对的是有一个pop()方法,用以删除数组中的项,且从数组最后一项开始,例如:

1
2
3
4
var 
array14 = [1,2,3,4];
array14.pop();
//4
array14.pop();
//3;
array14;
//[1, 2]

  同时,我们可以通过delete删除数组某项,但是只会删除该值,恢复默认的undefined,如下:

1
2
3
var 
array15 = [1,2,3,4,5];
delete 
array15[1];
array15;
//[1, undefined × 1, 3, 4, 5]

  另外两个非常有用的方法shift()和unshift(),跟push()和pop()方法类似,其中,shift()方法用以从数组起始位置开始删除元素且返回被删除的元素,如下:

1
2
3
var 
array16 = [1,2,4,5,6];
array16.shift();
//1
array16;[2,4,5,6]

  而unshift()与shift()相反,用于向数组起始位置添加元素,并且数组的原来元素分别后移,如下:

1
2
3
4
5
var 
array17 = [1,2,3,4];
array17.unshift(2);
//返回数组长度5,下同
array17.unshift(3);
array17.unshift(4);
array17;
//[4, 3, 2, 1, 2, 3, 4]

  7、数组翻转和排序


  我们可以对一个数组进行翻转,也可以让一个数组进行排序,如下:

1
2
3
var 
array18 = [21,14,54,35,23,44,103];
array18.reverse();
//[103, 44, 23, 35, 54, 14, 21]
array18.sort();
//[103, 14, 21, 23, 35, 44, 54]

  注意,数组默认排序并不是大小,而是按照对应字符串逐个编码排序的。你可以通过给sort()传递一个比较函数,类改变规则,如下:

1
2
3
var 
array18 = [21,14,54,35,23,44,103];
array18.reverse();
//[103, 44, 23, 35, 54, 14, 21]
array18.sort(
function
(a,b){
return 
a - b;});
//[14, 21, 23, 35, 44, 54, 103]

  8、数组连接


  我们可以把不同的数组连接到一起,如下:

1
2
3
var 
array19 = [1,2,3];
var 
array20 = [4,5];
var 
array21 = array19.concat(array20);
//[1, 2, 3, 4, 5]

  注意原数组都没有也不会发生改变。

  9、数组分割


  我们同样可以通过slice()把数组进行分割,它接受一个参数的话表示分割的起始位置,接受第二个可选的参数是表示结束的位置,如下:

1
2
3
var 
array22 = [1,2,3,4,5,6];
var 
array23 = array22.slice(4);
//5,6
var 
array24 = array22.slice(2,4);
//3,4

  注意,分割的数组包含slice()的起始位置而不包含结束位置。

  10、最强大的splice()


  现在,该讲讲最强大的splice()函数了,它接受三个参数,可实现添加、删除、修改等不同的功能。看下w3school上它的语法,如下:

  ①添加元素

1
2
3
var 
array25 = [1,2,3,4,5,6];
array25.splice(2,0,88,77);
//[]  返回被删除的元素,这里没有删除,返回为空
array25;
//[1, 2, 88, 77, 3, 4, 5, 6]

  ②修改元素

1
2
3
var 
array26 = [1,2,3,4,5,6,7];
array26.splice(2,2,33,44);
//[3,4]
array26;
//[1, 2, 33, 44, 5, 6, 7]

  ③删除元素

1
2
3
var 
array27 = [1,2,3,4,5,6,7];
array27.splice(2,2);
//[3, 4]
array27;
//[1, 2, 5, 6, 7]

转载于:https://www.cnblogs.com/xushuyi/articles/4415389.html

你可能感兴趣的文章
http://lorempixel.com/ 可以快速产生假图
查看>>
编写一个函数isMerge,判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成...
查看>>
NYOJ-613//HDU-1176-免费馅饼,数字三角形的兄弟~~
查看>>
graphite custom functions
查看>>
一个自己写的判断2个相同对象的属性值差异的工具类
查看>>
oracle连接的三个配置文件(转)
查看>>
pytho logging
查看>>
Python内置函数(29)——help
查看>>
oracle导出/导入 expdp/impdp
查看>>
Objective - C基础: 第四天 - 10.SEL类型的基本认识
查看>>
Android TextView加上阴影效果
查看>>
OA项目设计的能力③
查看>>
《梦断代码》读书笔记(三)
查看>>
Java8 Lambda表达应用 -- 单线程游戏server+异步数据库操作
查看>>
[Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
查看>>
AngularJS学习篇(一)
查看>>
关于Xshell无法连接centos6.4的问题
查看>>
css3动画——基本准则
查看>>
输入月份和日期,得出是今年第几天
查看>>
pig自定义UDF
查看>>