Web/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md
2019-02-03 14:06:03 +08:00

180 lines
3.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 数组的四个基本方法(数组元素的添加和删除)
### push()
`push()`:向数组的**最后面**插入一个或多个元素,返回结果为**该数组新的长度**。
语法:
```javascript
数组的新长度 = 数组.push(元素);
```
代码举例:
```javascript
var arr = ["王一", "王二", "王三"];
var result1 = arr.push("王四"); // 末尾插入一个元素
var result2 = arr.push("王五", "王六"); // 末尾插入多个元素
console.log(result1); // 打印结果4
console.log(result2); // 打印结果6
console.log(JSON.stringify(arr)); // 打印结果:["王一","王二","王三","王四","王五","王六"]
```
### pop()
`pop()`:删除数组中的**最后一个**元素,返回结果为**被删除的元素**。
语法:
```javascript
被删除的元素 = 数组.pop();
```
代码举例:
```javascript
var arr = ["王一", "王二", "王三"];
var result1 = arr.pop();
console.log(result1); // 打印结果:王三
console.log(JSON.stringify(arr)); // 打印结果:["王一","王二"]
```
### unshift()
`unshift()`:在数组**最前面**插入一个或多个元素,返回结果为**该数组新的长度**。插入元素后,其他元素的索引会依次调整。
语法:
```javascript
数组的新长度 = 数组.unshift(元素);
```
代码举例:
```javascript
var arr = ["王一", "王二", "王三"];
var result1 = arr.unshift("王四"); // 最前面插入一个元素
var result2 = arr.unshift("王五", "王六"); // 最前面插入多个元素
console.log(result1); // 打印结果4
console.log(result2); // 打印结果6
console.log(JSON.stringify(arr)); // 打印结果:["王五","王六","王四","王一","王二","王三"]
```
### shift()
`shift()`:删除数组中的**第一个**元素,返回结果为**被删除的元素**。
语法:
```javascript
被删除的元素 = 数组.shift();
```
代码举例:
```javascript
var arr = ["王一", "王二", "王三"];
var result1 = arr.shift();
console.log(result1); // 打印结果:王一
console.log(JSON.stringify(arr)); // 打印结果:["王二","王三"]
```
## 数组的遍历
遍历数组即:获取并操作数组中的每一个元素。
### for循环 遍历
举例:
```javascript
var arr = ["生命壹号","许嵩","永不止步"];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); // arr[i]代表的是数组中的每一个元素i
}
console.log(arr);
```
打印结果:
![](http://img.smyhvae.com/20180124_2008.png)
### forEach() 遍历
> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8则不要使用forEach改为使用for循环来遍历即可。
forEach()方法需要一个函数作为参数。这种函数,是由我们创建但是不由我们调用的,我们称为回调函数。
数组中有几个元素,该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素。
回调函数中传递三个参数:
- 第一个参数,就是当前正在遍历的元素
- 第二个参数,就是当前正在遍历的元素的索引
- 第三个参数,就是正在遍历的数组
代码举例:
```javascript
var arr = ["王一", "王二", "王三"];
arr.forEach(function(item, index, obj) {
console.log("item:" + item);
console.log("index:" + index);
console.log("obj:" + obj);
console.log("----------");
});
```
打印结果:
```javascript
item:王一
index:0
obj:王一,王二,王三
----------
item:王二
index:1
obj:王一,王二,王三
----------
item:王三
index:2
obj:王一,王二,王三
----------
```