# Javascript数组系列二之你不了解的迭代1

### 数组的迭代方法

```let containerUl = document.getElementById('container');
let li;
let peoples = [{name: 'Liu', age: 14}, {name: 'Li', age: 13}, {name: 'Cao', age: 11}];

//for 循环
for (let i = 0; i < peoples.length; i++) {
li = document.createElement('li');
li.innerHTML = peoples[i].name + ":" + peoples[i].age;
containerUl.appendChild(li);
};

//数组的迭代方法，更加简洁
peoples.forEach((people) => {
li = document.createElement('li');
li.innerHTML = people.name + ":" + people.age;
containerUl.appendChild(li);
})```

#### forEach

```//语法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
//函数体，执行的操作
});

//看个例子，本质上与 for 循环一样
let items = ['a', 'b', 'c'];
items.forEach(function (item) {
console.log(item);
});

for (let i = 0; i < items.length; i++) {
console.log(items[i])
}```

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Yes

Yes

1.5

9

Yes

Yes

#### map

```//语法
var newArrs = array.map(callback[, this])
var newArrs = array.map(callback(item, index, array){
//return 执行后的结果
});

//例子
let numbers = [1, 2, 3];
let newNumbers = numbers.map(x => x * x);
console.log(newNumbers); //[1, 4, 9]```

```<ul>
<li><input type="text" value="1"></li>
<li><input type="text" value="2"></li>
<li><input type="text" value="3"></li>
</ul>
<script>
let list = document.getElementsByTagName('input');
let newList = Array.prototype.map.call(list, item => {
return item.value;
});
console.log(newList);//[1,2,3]
</script>
});```

```let peoples = ['Liu', 'Cao', 'Pan'];
let peoplesInfo = peoples.map(people => {
return {
name: people,
age: Math.floor(Math.random()*20)
}
});
console.log(peoplesInfo);
// [{name: Liu, age: XX},
//  {name: Cao, age: XX},
//  {name: Pan, age: XX}]```

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Yes

Yes

1.5

9

Yes

Yes

#### filter

```//语法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
//return 满足条件的项
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]```

「filter」方法在实际工作中也同样有着很多的作用，例如：我们找出一群人中哪些是小朋友。

```var peoples = [{name: 'liu', age: 9},
{name: 'jiang', age: 18},
{name: 'cao', age: 20},
{name: 'pan', age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);```

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Yes

Yes

1.5

9

Yes

Yes

#### every

```//语法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
//执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true```

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Yes

Yes

1.5

9

Yes

Yes

#### some

```//语法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
//执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true```

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Yes

Yes

1.5

9

Yes

Yes

78 篇文章10 人订阅

0 条评论

## 相关文章

38750

### StackOverflow上关于JavsScript的热门问答

Q1：javascript的闭包是如何工作的？ 正如爱因斯坦所说的： 如果你不能把它解释给一个六岁的小孩，说明你对它还不够了解。 我曾尝试向一个27岁的朋友解释...

33860

### Hive 时间转换函数使用心得

Hive sql 与传统的 oracle 或者mysql 的时间转换函数有一些不同，对于想将传统数据库迁移到hdfs 用 hive sql 进行处理的任务，如何...

5.2K120

35150

416110

13520

### Python变量很难记？记住变量类型的三种方式

Python作为一门动态语言，其变量的类型可以自由变化。这个特性提高了代码的开发效率，却也增加了阅读代码和维护代码的难度。 假设有一个变量is_request_...

43590

10910

13510

39090