update:遍历数组的方法
This commit is contained in:
parent
19807acde4
commit
e793fb7e4b
@ -2,7 +2,7 @@
|
||||
|
||||
## 前言
|
||||
|
||||
数组的四个基本方法如下:
|
||||
**数组的四个基本方法如下**:
|
||||
|
||||
| 方法 | 描述 | 备注 |
|
||||
|:-------------|:-------------|:-------------|
|
||||
@ -11,8 +11,16 @@
|
||||
| unshift() | 在数组**最前面**插入一个或多个元素,返回结果为**该数组新的长度**| 会改变原数组|
|
||||
| shift() | 删除数组中的**第一个**元素,返回结果为**被删除的元素**| 会改变原数组|
|
||||
|
||||
**遍历数组的方法如下**:(这几个方法都不会修改原数组)
|
||||
|
||||
遍历数组的方法如下:
|
||||
| 方法 | 描述 | 备注 |
|
||||
|:-------------|:-------------|:-------------|
|
||||
| for循环 | 这个大家都懂| |
|
||||
| forEach()|和 for循环类似,但需要兼容IE8以上 | |
|
||||
| filter()| 返回结果是true的项,将组成新的数组| 可以起到过滤的作用|
|
||||
| map()| 对原数组中的每一项进行加工 | |
|
||||
| every()| 如果有一项返回false,则停止遍历 | 意思是,要求每一项都返回true,最终的结果才返回true |
|
||||
| some()| 只要有一项返回true,则停止遍历 | |
|
||||
|
||||
|
||||
## 数组的四个基本方法(数组元素的添加和删除)
|
||||
@ -113,9 +121,9 @@
|
||||
|
||||
## 数组的遍历
|
||||
|
||||
遍历数组即:获取并操作数组中的每一个元素。
|
||||
遍历数组即:获取并操作数组中的每一个元素。在我们的实战开发中,使用得非常频繁。
|
||||
|
||||
数组迭代方法包括:every()、filter()、forEach()、map()、some()
|
||||
遍历数组的方法包括:every()、filter()、forEach()、map()、some()
|
||||
|
||||
PS:这几个方法**不会修改原数组**。
|
||||
|
||||
@ -146,6 +154,7 @@ PS:这几个方法**不会修改原数组**。
|
||||
|
||||
![](http://img.smyhvae.com/20180124_2008.png)
|
||||
|
||||
|
||||
### forEach() 遍历
|
||||
|
||||
> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8,则不要使用forEach,改为使用for循环来遍历即可。
|
||||
@ -166,14 +175,14 @@ forEach()方法需要一个函数作为参数。这种函数,是由我们创
|
||||
代码举例:
|
||||
|
||||
```javascript
|
||||
var arr = ["王一", "王二", "王三"];
|
||||
var arr = ["王一", "王二", "王三"];
|
||||
|
||||
arr.forEach(function(item, index, obj) {
|
||||
console.log("item:" + item);
|
||||
console.log("index:" + index);
|
||||
console.log("obj:" + obj);
|
||||
console.log("----------");
|
||||
});
|
||||
arr.forEach(function(item, index, obj) {
|
||||
console.log("item:" + item);
|
||||
console.log("index:" + index);
|
||||
console.log("obj:" + obj);
|
||||
console.log("----------");
|
||||
});
|
||||
```
|
||||
|
||||
打印结果:
|
||||
@ -195,44 +204,8 @@ obj:王一,王二,王三
|
||||
----------
|
||||
```
|
||||
|
||||
### map()方法
|
||||
|
||||
解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。
|
||||
|
||||
比如说,有一个已知的数组arr1,我要求让arr1中的每个素加10,这里就可以用到map方法。举例:
|
||||
|
||||
```javascript
|
||||
var arr1 = [1, 3, 6, 2, 5, 6];
|
||||
|
||||
var arr2 = arr1.map(function (item, index) {
|
||||
return item + 10; //让arr1中的每个元素加10
|
||||
|
||||
})
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
打印结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180402_0938.png)
|
||||
|
||||
举例2:
|
||||
|
||||
```javascript
|
||||
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
|
||||
|
||||
var arr2 = arr1.map(function (element, index, array) {
|
||||
return element + "vae"; //给arr1中所有的元素增加字符串"vae",放到arr2中。
|
||||
});
|
||||
|
||||
console.log(arr1);
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1425.png)
|
||||
|
||||
### filter
|
||||
### filter()
|
||||
|
||||
语法:
|
||||
|
||||
@ -280,6 +253,46 @@ obj:王一,王二,王三
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1410.png)
|
||||
|
||||
|
||||
### map()方法
|
||||
|
||||
解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。
|
||||
|
||||
比如说,有一个已知的数组arr1,我要求让arr1中的每个素加10,这里就可以用到map方法。举例:
|
||||
|
||||
```javascript
|
||||
var arr1 = [1, 3, 6, 2, 5, 6];
|
||||
|
||||
var arr2 = arr1.map(function (item, index) {
|
||||
return item + 10; //让arr1中的每个元素加10
|
||||
|
||||
})
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
打印结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180402_0938.png)
|
||||
|
||||
举例2:
|
||||
|
||||
```javascript
|
||||
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
|
||||
|
||||
var arr2 = arr1.map(function (element, index, array) {
|
||||
return element + "vae"; //给arr1中所有的元素增加字符串"vae",放到arr2中。
|
||||
});
|
||||
|
||||
console.log(arr1);
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
结果:
|
||||
|
||||
![](http://img.smyhvae.com/20180126_1425.png)
|
||||
|
||||
|
||||
|
||||
### every()方法
|
||||
|
||||
解释:对数组中每一项运行回调函数,如果都返回true,every就返回true;如果有一项返回false,则停止遍历,此方法返回false。
|
||||
|
Loading…
Reference in New Issue
Block a user