JS 数组的声明方式及注意事项数组元素的操作遍历常用方法

2017-08-13 11:26:22 Albin Wong 490

## 数组的声明方式
1. 用new Array声明方式
```javascript
	var arr = new Array(); // []
	var arr2 = new Array(10);// 声明一个长度为10的数组
	var arr3 = new Array(1,2,3,4,5,'533',null, undefined);
```
2. 中括号方式声明
```javascript
	var arr4 = [];
	var arr5 = [1,2,31,23,12,412,4,124,1,431,241,4,152,'salfdas',NaN,undefined,function(){alert(123123)}];
	alert(arr5); // 1,2,31,23,12,412,4,124,1,431,241,4,152,salfdas,NaN,,function (){alert(123123)}
	console.log(arr5); // [1,2,31,23,12,412,4,124,1,431,241,4,152,salfdas,NaN,,function (){alert(123123)}]
	document.write(arr5); // 1,2,31,23,12,412,4,124,1,431,241,4,152,salfdas,NaN,,function(){alert(123123)}

var func = function(){
		alert('test');
	}
	func();

// 调用数组中的函数
	var index = arr5.length - 1; // 获取数组长度
	arr5[index](); // 123123
	console.log(arr[pos]); // function()
	document.write(arr5[pos]); // function(){alert(123123)
```

### 注意事项

1. 不允许快速压入 []的形式添加新成员  
```
var arr = [1,2,3,4,5];  
var arr[] = 10; // 会报错  
```
2. 不支持关联特性 只支持索引数组  
```javascript
	var arr = [1,2,3,5];  
	arr[4] = 10; // [1,2,3,5,10]
	arr['name'] = 'xiaohigh'; // 不报错 因为数组属于对象 相当于写入的是一个成员属性
```
3. 多维数组性 声明时必须一次,不然会typeError: arr2[1] is undefined
```javascript
	var arr2 = [];
	arr2[1] = [];
	arr2[1][2] = [];
	arr2[1][2][3] = 200;
```
4. 操作数组时支持跨索引  
> 跨过的索引所有的值都是undefined(console.log下)   在alert和document.write为空

```javascript
arr3 = [];
arr3[100] = 50; // 数组个数100个
```

### 数组元素的操作(增删改访问)
```javascript
var arr = [1,2,3,4,5,6,7];  
arr[7] = 100; // [1,2,3,4,5,6,7,100] 增加元素
```

1. 在数组尾部添加元素  
`arr.push(300); // [1,2,3,4,5,6,7,100,300]`
2. 头部添加  
`arr.unshift(987); // [987,1,2,3,4,5,6,7,100,300]`
3. 删除操作(两种方式)  
```javascript
var arr = [1,2,3,4,5,6];  
delete arr[1]; // [1,undefined,3,4,5,6] 只能将值删除,不能删除索引  
arr[2] = undefined; // [1,undefined,undefined,4,5,6]  
```

4. 尾部删除  
```javascript
var arr = [1,2,3,4,5,6];
var res = arr.pop(); // [1,2,3,4,5]
```

5. 头部删除元素  
`var res = arr.shift(); // [2,3,4,5]`
6. 在指定位置开始删除指定个数的元素  
`var res = arr.splice(2, 3, 'a','b','c','d','e','f','g'); // [2,'a','b','c',5]`

7. 修改和获取
```javascript
arr[2] = 'iloveyou'; // [2,'a','iloveyou','c',5]
alert(arr[3]); // c
```

### 遍历
for循环只能遍历数组元素  
而for...in循环不仅能遍历数组元素 而且能遍历对象属性(不推荐)  
```javascript
var arr = [31,23,17,13,77];  
arr['name'] = 'test';

//遍历 
for(var i=0;i<arr.length;i++) {
 document.write(arr[i]+' '); // 31,23,17,23,77
}

document.write('<hr>');

for(var i in arr) {
 document.write(arr[i]+' '); // 31,23,17,23,77,xiaoming
}
```

### 数组的常用方法
1. 连接两个或多个数组
```javascript
var arr = [3,5,7,9,13,62,42,234];
var res = arr.concat([19,10,11],[22,25,27]); // [3,5,7,9,13,2,42,234,19,10,11,22,25,27]
```
2. 拼接组成字符串  
`var res = arr.join('---'); // 3---5---7---9---13---62---42---234`
3. 反转  
`var res = arr.reverse(); // [234,42,62,13,9,7,5,3]`
4. 截取  
`var res = arr.slice(2, 6); // [7,9,13,62,42,234]`

5. 排序 
```javascript
var res = arr.sort(function(a,b){
 if(a>b) return 1; a>b return 1 为升序
 else if(a==b) return 0; a>b return -1 为降序
 else(a<b) return -1;
});
[3,5,7,9,13,42,62,234]
```

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <q cite=""> <strike> 

JS 数组的声明方式及注意事项 数组元素的操作 遍历 常用方法

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply