经常容易搞混的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" οnclick="first();">第一种遍历方式</button>

<button type="button" class="btn btn-primary" οnclick="second();">第二种遍历方式</button>

<button type="button" class="btn btn-success" οnclick="third();">第三种遍历方式</button>

<button type="button" class="btn btn-info" οnclick="forth();">第四种遍历方式</button>

<button type="button" class="btn btn-warning" οnclick="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遍历区别和写法:

 

后面还会继续写关于对象赋值取值等的博文。。。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值