JavaScript之对象Array

2019-08-28 18:56| 发布者: |

数组array是javascript中最常用的类型之一,同一数组中可以保存任意类型的数据,并且它的长度是动态的,会随着数组中数据的加减自动变化。每个数组都有一个表示其长度的length属性。并且数组元素的索引是从0开始的,所以数组最后一个元素的索引永远等于length 1;

 

一  创建数组

  1,使用new关键字创建

1 var arr = new array;

       可以向array构造函数传递参数以实现创建包含特定数据的数组,多个参数使用逗号隔开。

需要注意的是:当参数只有一个数字时,构造函数创建的不是包含该数字的字符串,而是一个长度为该数字的空数组,即arr.length = 数字。

  2,使用字面量形式创建

1 var arr = [1,2,3];

       数组元素被包含在一对 [] 中括号内,数组的每个元素之间用逗号隔开,最后一个元素后面不需要逗号。

另外,上面已经讲过,数组的长度是动态的,它体现在可以手动的修改其length的值,以达到删除或增加数组长度的目的。

1 var arr = [1,2,3];
2 console.log;//3
3 arr.length = 2;
4 console.log;//2
5 console.log;//[1,2]
6 arr.length = 3;
7 console.log;//3
8 console.log;//[1,2,empty ]

3,数组元素的访问

  我们使用中括号[]加数字的形式访问数组元素。     

1 var arr = [1,2,3];
2 console.log;//1

  通过这种方式我们也可以动态的修改某一位置的值,或向某一位置插入一个新值。   

1 var arr = [1,2,3];
2 arr[0] = 4;
3 console.log;//[4,2,3]
4 arr[4] = 0;
5 console.log;//[4,2,3,empty,0];

        可以看到,原本arr的长度是3,但我们向下标4的位置插入了一个新值,于是数组的长度变成了5,由于下标为3的位子原来并没有值,并且我们也没有新插入,所以javascript自动向该位置添加了一个空值占位符。

二  数组的遍历

  1,普通for循环

1 var arr = [1,2,3];
2 for{
3 console.log;
4 //some code;
5 } 

       效率最高的遍历数组方式。 

2,foreach

1 var arr= [1,2,3];
2 arr.foreach {
3 console.log;
4 });
6 0:1:[1,2,3]
7 1:2:[1,2,3]
8 2:3:[1,2,3]
9 */

函数接受3个参数,第一个是当前处理元素的值,第二个是当前处理元素的下标,第三个是当前遍历的数组,第二三个参数是可选的。

  3,map

1 var arr = [1,2,3];
2 var newarr = arr.map {
3 return item * item;
5 console.log;//[1,4,9]

        函数的参数和foreach方法一致。它会把函数作用到每个遍历到的数组元素上,并返回一个新值,最终得到一个新数组并返回。

4,for in

1 var arr = [1,2,3];
2 for{
3 console.log;
6 0:1
7 1:2
8 2:3
9 */

       for...in更适合遍历对象,而不是数组,而且使用它遍历数组的效率并不高。

5,for of

1 var arr = [1,2,3];
2 for{
3 console.log;
5 //1
6 //2
7 //3

for...of是es6的新方法,用它遍历数组比for...in稍快一点。

三 数组常用方法

1,  tostring,valueof和join

数组调用tostring和valueof一般返回由逗号隔开的所有数组元素组成字符串。

1 var arr = [ hello , world ];
2 console.log);// hello,world 
3 console.log);// hello,world 

join方法和他们不同,它可以接受一个字符串作为参数,用这个字符串作为分隔符。

1 var arr = [ hello , world ];
2 console.log);// hello,join 
3 console.log);// helloworld 
4 console.log);// hello world 

2,  push和pop,unshift和shift

push接受任意个参数,依次添加到数组的末尾,返回修改后数组的长度。

pop从数组末尾删除一项,返回被删除的元素。

unshift从数组开头插入任意个元素,返回插入后数组的长度。

shift从数组开头删除一个元素,返回被删除的元素。

1 var colors = ["red","blue","pink","white"];
2 colors.push;//5
3 console.log;//["red","blue","pink","white","black"]
4 colors.pop;//"black"
5 console.log;//["red","blue","pink","white"]
6 colors.unshift;//5
7 console.log;//["green","red","blue","pink","white"]
8 colors.shift;//"green"
9 console.log;//["red","blue","pink","white"]

3,  reverse和sort

reverse会翻转数组元素的顺序。

1 var arr = [1,2,3];
2 arr.reverse;
3 console.log;//[3,2,1]

sort默认根据数组元素的字符编码排序。可以接受一个函数作为参数,该函数接受两个参数,如果第一个参数应该在第二个之后,那么返回一个正数,如果第一个和第二个位置不变,则返回0,如果第一个应该在第二个之前,那么返回一个负数。

 1 var colors = ["red","blue","pink","white"];
 2 colors.sort{
 3 if{
 4 return -1;
 5 }else if{
 6 return 0;
 7 }else{
 8 return 1;
10 });
11 console.log;["blue","pink","red","white"]

如果想实现倒序排列,可以设置当val1小于val2时返回1,最后返回-1;如果比较的是数字,可简写为:

1 var arr = [3,51,55,23,-1,-50,0.2];
2 arr.sort{
3 return val1 - val2;
4 });
5 console.log;//[-50, -1, 0.2, 3, 23, 51, 55]

如果想实现倒序排列,则return val2 - val1 即可;

sort方法在接受到函数作为参数后,会把数组的每一个值依次当做函数的参数传给它,第一次是arr[0]和arr[1],比较完后会把排在后面的那个值作为函数的第一个参数,arr[2]作为第二个参数再传给函数,依次类推,直到最后一个数组元素。

4,  concat

接受一个或多个数组作为参数,把这些参数数组与原数组连接,形成一个新数组并返回。如果不是数组,也会被简单的连接到一起形成新数组。

1 var arr = [1,2,3];
2 var otherarr = ["hello","world"];
3 console.log);//[1,2,3,"hello","world"]

5,  slice

接受两个数字作为参数,返回数组下标在他们之间的元素组成的新数组,该方法不会改变原数组。

1 var arr = [1,2,3,4,5];
2 var newarr = arr.slice;
3 console.log;//[1,2,3,4]

6,  splice

该方法功能强大,有以下三种使用方法:

a:删除

  接受两个数字参数,第一个表示需要被删除的第一项的下标,第二个表示续保被删除的元素个数。

b:插入

  接受3个或多个参数,第一个是插入元素的起始位置,第二个是0,表示不删除原数组的任何元素,第三个是要被插入的元素,如果有多个元素需要被插入,可以继续在后面添加其他参数。

c:替换

  接受3个或多个参数,第一个是要被替换的元素的起始位置,第二个是需要被替换的元素个数,其他的的参数是替换的内容。如果想保持原数组长度不变,则替换内容的个数必须和第二个参数相等。

var arr = [1,2,3,4,5];
arr.splice;//从第一个元素开始删除3个元素
console.log;//[4,5]
arr.splice;//从第一个元素开始删除0个,并添加1,2,3这3个元素
console.log;[1,2,3,4,5]
arr.splice;//从第三个元素开始删除2个,并在该位置添加两个5,从结果看就像是用5替换了原数组中的3和4
console.log;//[1,2,5,5,5]

 

数组还有很多有用的方法,这里只列举了比较常用的一些方法,了解详细请移步mdn的标准内置对象array;

<
>
关于我们
AB模版网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

13588889999服务时间:9:00-18:00)

admin@adminbuy.cn

官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

咨询电话13588889999 返回顶部
返回顶部