update:遍历数组的方法

This commit is contained in:
qianguyihao 2019-05-07 15:07:42 +08:00
parent 19807acde4
commit e793fb7e4b

View File

@ -2,7 +2,7 @@
## 前言 ## 前言
数组的四个基本方法如下: **数组的四个基本方法如下**
| 方法 | 描述 | 备注 | | 方法 | 描述 | 备注 |
|:-------------|:-------------|:-------------| |:-------------|:-------------|:-------------|
@ -11,8 +11,16 @@
| unshift() | 在数组**最前面**插入一个或多个元素,返回结果为**该数组新的长度**| 会改变原数组| | unshift() | 在数组**最前面**插入一个或多个元素,返回结果为**该数组新的长度**| 会改变原数组|
| shift() | 删除数组中的**第一个**元素,返回结果为**被删除的元素**| 会改变原数组| | 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这几个方法**不会修改原数组**。 PS这几个方法**不会修改原数组**。
@ -146,6 +154,7 @@ PS这几个方法**不会修改原数组**。
![](http://img.smyhvae.com/20180124_2008.png) ![](http://img.smyhvae.com/20180124_2008.png)
### forEach() 遍历 ### forEach() 遍历
> `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8则不要使用forEach改为使用for循环来遍历即可。 > `forEach()` 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8则不要使用forEach改为使用for循环来遍历即可。
@ -166,14 +175,14 @@ forEach()方法需要一个函数作为参数。这种函数,是由我们创
代码举例: 代码举例:
```javascript ```javascript
var arr = ["王一", "王二", "王三"]; var arr = ["王一", "王二", "王三"];
arr.forEach(function(item, index, obj) { arr.forEach(function(item, index, obj) {
console.log("item:" + item); console.log("item:" + item);
console.log("index:" + index); console.log("index:" + index);
console.log("obj:" + obj); console.log("obj:" + obj);
console.log("----------"); console.log("----------");
}); });
``` ```
打印结果: 打印结果:
@ -195,44 +204,8 @@ obj:王一,王二,王三
---------- ----------
``` ```
### map()方法
解释:对数组中每一项运行回调函数,返回该函数的结果,组成的新数组(返回的是**加工之后**的新数组)。 ### filter()
比如说有一个已知的数组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
语法: 语法:
@ -280,6 +253,46 @@ obj:王一,王二,王三
![](http://img.smyhvae.com/20180126_1410.png) ![](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()方法 ### every()方法
解释对数组中每一项运行回调函数如果都返回trueevery就返回true如果有一项返回false则停止遍历此方法返回false。 解释对数组中每一项运行回调函数如果都返回trueevery就返回true如果有一项返回false则停止遍历此方法返回false。