es6数组遍历


## ES5-数组的新方法

###  forEach

`forEach()` 方法对数组的每个元素执行一次提供的函数。功能等同于`for`循环.

应用场景:为一些相同的元素,绑定事件处理器!

**需求:遍历数组["张飞","关羽","赵云","马超"]**

```javascript
var arr = ["张飞","关羽","赵云","马超"];
//第一个参数:element,数组的每一项元素
//第二个参数:index,数组的下标
//第三个参数:array,正在遍历的数组
arr.forEach(function(element, index, array){
  console.log(element, index, array);
});
```

### map

`map()` 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

**需求:遍历数组,求每一项的平方存在于一个数组中**

```javascript
var arr = [1,2,3,4,5];  // 1 4 9 16 25
//第一个参数:element,数组的每一项元素
//第二个参数:index,数组的下标
//第三个参数:array,正在遍历的数组
//返回值:一个新数组,每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
  return element * element;
});
console.log(newArray);//[1,4,9,16,25]
```

### filter

`filter`用于返回满足条件的元素,
返回一个新数组,如果在回调函数中返回true,那么就留下来,如果返回false,就扔掉

**需求:遍历数组,将数组中工资超过5000的值删除[1000, 5000, 20000, 3000, 10000, 800, 1500]**

```javascript
var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数:element,数组的每一项元素
//第二个参数:index,数组的下标
//第三个参数:array,正在遍历的数组
//返回值:一个新数组,存储了所有返回true的元素
var newArray = arr.filter(function(element, index, array){
  if(element > 5000) {
    return false;
  }else {
    return true;
  }
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]
```

### some

`some`用于遍历数组,如果有至少一个满足条件,就返回true,否则返回false。

**需求:遍历数组,判断数组是否包含奇数,[2,4,6,8,10,9]**

```javascript
var arr = [2,4,6,8,10,21];
//第一个参数:element,数组的每一项元素
//第二个参数:index,数组的下标
//第三个参数:array,正在遍历的数组
//返回值:布尔类型的值,只要有一个回调函数返回true,就返回true
var flag = arr.some(function(element, index, array){
  console.log(element, index, array);
  if(element %2 == 1){
    return true;
  }else {
    return false;
  }
});
console.log(flag);//true
```

### every

`every`用于遍历数组,只有当所有的元素返回true,才返回true,否则返回false。

**需求:遍历数组,判断数组是否都是偶数,[2,4,6,8,10,9]**

```javascript
  var arr = [2,4,6,8,10,21];
  //第一个参数:element,数组的每一项元素
  //第二个参数:index,数组的下标
  //第三个参数:array,正在遍历的数组
  //返回值:布尔类型的值,只有当所有的元素返回true,才返回true,否则返回false。
  var flag = arr.every(function(element, index, array){
    console.log(element, index, array);
    if(element %2 == 0){
      return true;
    }else {
      return false;
    }
  });
  console.log(flag);//false
```

### find

`find()` 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 [`undefined`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)。 

```js
// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
```

###     findexIndex

`findIndex()`方法返回数组中满足提供的测试函数的第一个元素的**索引**。否则返回-1。 

```js
// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(findFirstLargeNumber));

发布了52 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/liz9411/article/details/104019599