经常容易搞混的for循环,for in 循环,for of循环(es6新语法)map()遍历和foreach遍历区别和写法
前缀:因为女票基础知识薄弱,对各种循环搞不清楚,特写此博客用来学习参考。。。
话不多说直接上代码,拷贝代码控制台查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数组的遍历方式</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-default" onclick="first();">第一种遍历方式</button>
<button type="button" class="btn btn-primary" onclick="second();">第二种遍历方式</button>
<button type="button" class="btn btn-success" onclick="third();">第三种遍历方式</button>
<button type="button" class="btn btn-info" onclick="forth();">第四种遍历方式</button>
<button type="button" class="btn btn-warning" onclick="five();">第五种遍历方式</button>
</body>
<script type="text/javascript">
var arr = [11, 22, 33, 55]; //普通的循环遍历方式
function first() {
for (var i = 0; i < arr.length; i++) {
console.log("第一种遍历方式\t" + arr[i]);
}
} //2、for ..in 遍历方式
function second() {
// for in 遍历需要两个形参 ,index表示数组的下标(可以自定义),arr表示要遍历的数组
for (var index in arr) {
console.log("第二种遍历方式\t" + arr[index]);
}
} //3,很鸡肋的遍历方式
function third() {
//第一个参数为数组的元素,第二个元素为数组的下标
arr.forEach(function (ele, index) {
console.log("第三种遍历方式\t" + arr[index] + "-----" + ele);
});
}
//4,for-of遍历方式
function forth() {
//第一个变量ele代表数组的元素(可以自定义) arr为数组(数据源)
for (var ele of arr) {
console.log("第四种遍历方式\t" + ele);
}
}
//5,map遍历方式
function five() {
//第一个变量ele代表数组的元素(可以自定义) arr为数组(数据源)
var newArr = arr.map(function (item) {
console.log("第五种遍历方式\t" + item);
return item + 1
})
console.log(newArr);
}
//filter为“过滤”、“筛选”之意。指数组filter后,返回过滤后的新数组。用法跟map极为相似: //array.filter(callback,[ thisObject]); //filter的callback函数需要返回布尔值true或false. 可能会疑问,一定要是Boolean值吗?我们可以简单测试下嘛,如下: var data = [0, 1, 2, 3]; var arrayFilter = data.filter(function(item) { return item; }); console.log(arrayFilter); // [1, 2, 3] //有此可见,返回值只要是弱等于== true/false就可以了,而非非得返回 === true/false. //因此,我们在为低版本浏览器扩展时候,无需关心是否返回值是否是纯粹布尔值
</script>
</html>
================================分割线==================================
经常容易搞混的原生js的map()遍历和foreach遍历区别和写法:
后面还会继续写关于对象赋值取值等的博文。。。