【前端-JavaScript】10种遍历方法
JavaScript之10种遍历方法
1. for 循环
for循环语句，最基础的遍历，以数组的下标为索引，主要对数组元素进行遍历。
注意：for 循环不是函数，不存在返回值。
var arr = [1,2,'zhejiang',true]; for(var i=0 ;i<arr.length;i++){ console.log(arr[i]) // i=0 1 2 3 }
2. for in
for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，
因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。
另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。
<body>
<div class="item div1" id="dd1"></div>
<div class="item div2" id="dd2"></div>
<div class="item div3" id="dd3"></div>
<div class="item div4" id="dd4"></div>
<div class="item div5" id="dd5"></div>
<script>
// for in循环不仅可以遍历数组，还可以遍历对象，
// 但for in存在一些陷阱，比如它会在遍历完元素之后，还会对数组或对象的prototype中的属性进行遍历，
// 所以，for in 更像是为对象遍历而设计的。
let obj = {name:'zhou',age:18,gender:'男'};
for(let i in obj){
console.log(i,obj[i])
}
console.log("--------------------------------------------------------");
let divObj= document.querySelectorAll('div');
for(let i in divObj){
console.log(i,divObj[i]);
console.log(divObj[i].id);
}
/*总结：for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，
但是你不要这么做，这是有风险的，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。
另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
所以最好在循环体内加一个判断，就用 obj[i].hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。*/
</script>
3. whild 和 do while 循环
let cars=["BMW","Volvo","Saab","Ford"]; let i=0; for(;cars[i];){ console.log(cars[i]); i++; } cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]){ console.log(cars[i] + "<br>"); i++; }; let j = 3; do{ console.log(j); j--; } while(j>0) // 3 // 2 // 1
4. forEach
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
let arr = [11,22,33]; arr.forEach(function(i,index,arr0){ console.log(i); //数组每一项 console.log(index); //数组下标 console.log(arr0); //该遍历的数组 arr });
详细用法介绍：
// let arr = [11,22,33]; /*arr.forEach(function(i,index,arr0){ console.log(i); //数组每一项 console.log(index); //数组下标 console.log(arr0); //该遍历的数组 arr });*/ // ES6 箭头函数写法 // arr.forEach(res =>{ // console.log(res); //数组每一项 // }); /*// 一个小例子：修改产品的数量随机,求出每个产品的总价 var data=[ {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10}, {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20}, {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30}, {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40}, {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50}, {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60}, {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70}, {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80}, {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90}, {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100} ]; data.forEach(function (item) { item.num=parseInt(Math.random()*9+1); item.sum=item.num*item.price; }); console.log(data);*/ /*// 修改数组中的每个值 var arr=[1,2,4,6,7,8,5,9]; arr.forEach(function (t,i,arr) { // t++; //错误 // arr[i]++; //数组中每一项 // 将所有偶数+1 if(t%2===0){ arr[i]++; } }); console.log(arr);*/
5. for of (ES6)
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历 对象
它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。
<script>
// for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历 对象
// 它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。
/*注意：1、 for(var k of arr) 中的 k ，就是数组 arr 中的元素，而不是数组的下标。
2、 IE 不支持，Edge支持。*/
let arr = ['name','age'];
for(let i of arr){
console.log(i)
}
for(let i of 'zhejiang'){
console.log(i);
}
/*// 不能遍历对象，下面写法错误
let obj1 = {name:'xiong',age:18};
for(let i of obj1){
console.log(i);
}*/
</script>
6. Array map()方法
map()与forEach相似,可以完成forEach的所有功能。
- map() 返回一个新数组。
- map() 不会对空数组进行检测。
- map() 不会改变原始数组。
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。
//map()遍历 /*var arr = [1, 2, 4, 6, 7, 8, 5, 9]; arr.map(function (t) { console.log(t); //1 2 4 6 7 8 5 9 });*/ /*// map()与forEach相似,可以完成forEach的所有功能 var data = [ {id: 1001, icon: "img/1.png", name: "餐饮0", num: 1, price: 10}, {id: 1002, icon: "img/2.png", name: "餐饮1", num: 1, price: 20}, {id: 1003, icon: "img/3.png", name: "餐饮2", num: 1, price: 30}, {id: 1004, icon: "img/4.png", name: "餐饮3", num: 1, price: 40}, {id: 1005, icon: "img/5.png", name: "餐饮4", num: 1, price: 50}, {id: 1006, icon: "img/6.png", name: "餐饮5", num: 1, price: 60}, {id: 1007, icon: "img/7.png", name: "餐饮6", num: 1, price: 70}, {id: 1008, icon: "img/8.png", name: "餐饮7", num: 1, price: 80}, {id: 1009, icon: "img/9.png", name: "餐饮8", num: 1, price: 90}, {id: 1010, icon: "img/10.png", name: "餐饮9", num: 1, price: 100} ]; data.map(function (item) { item.num = parseInt(Math.random() * 9 + 1); item.sum = item.num * item.price; }); console.log(data);*/ /*// 每个元素+1,返回给新数组 var arr=[1,2,4,6,7,8,5,9]; var arr1=arr.map(function (t) { return ++t; }); console.log(arr,arr1);*/ /* return 返回数据元素,到新数组中,如果不返回的数据就会变成undefined var arr=[1,2,4,6,7,8,5,9]; arr=arr.map(function (t) { if(t%2===0){ return t+1; } return t; //如果没有这句，非奇数的返回为undefined }); console.log(arr);*/ /* map() 和 forEach() 的区别 * forEach遍历当前数组,没有返回值,不会返回新数组 * map遍历当前数组,并且将当前数组中的元素返回给新数组, * 不使用return时,新数组的长度与原数组相同,但是每个元素都是undefined; * */
7. Array filter() 方法
filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
<script>
// filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
// filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
let arr = [1,2,3];
let tt = arr.filter(function(i){
return i>1;
});
console.log(tt); //[2,3]
console.log(arr); //[1,2,3]
var arr1 = ['A', 'B', 'C'];
var r = arr1.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr1
return true;
});
// 利用filter，可以巧妙地去除Array的重复元素：
// 去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
var r, arr2 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr2.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r);
// 用filter()筛选出1-100之间所有素数：
function get_primes(arr) {
var i;
return arr.filter(function (element) {
var flag=true;
if(element<2){
flag=false;
}else {
for(var i=2;i<element;i++){
if (element%i==0){
flag=false;
break;
}
}
}
return flag;
});
}
var arr3 = [];
for (var x = 1; x < 100; x++) {
arr3.push(x)
}
console.log(get_primes(arr3)); //[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]
</script>
8. Array some() 方法
some() 方法用于检测数组是否存在元素满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断,不改变原数组。
let arr = [1,2,3]; let tt = arr.some(function(i){ return i>1; }) // 检测数组中元素是否都大于1 // true
详细用法介绍：
<script>
/*
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断。
// arr.some(callback(element[, index[, array]])[, thisArg])
let arr = [1,2,3];
let tt = arr.some(function(i){
return i>1;
});
console.log(tt); //false*/
/*const a = [11, 50, 40, 3, 5, 80, 90, 4];
const arr1 = [];
let ret1 = a.some((item, index, array) => {
console.log(item, index, array);
if (item > 80) {
return arr1.push(item);
}
});
console.log('ret1===>',ret1); //ret1===> true
console.log('arr1---',arr1); //arr1--- [90]*/
// function isBiggerThan10(element, index, array) {
// return element > 10;
// }
// [2, 5, 8, 1, 4].some(isBiggerThan10); // false
//二、 判断数组元素中是否存在某个值
// 模仿 includes()方法, 若元素在数组中存在, 则回调函数返回值为 true :
var fruits = ['apple', 'banana', 'mango', 'guava'];
var fruitsNew = [];
function checkAvailability1(arr, val) {
return arr.some(item => {
console.log(item);
return val == item
})
}
console.log(checkAvailability1(fruits, 'kela')); // false
console.log(checkAvailability1(fruits, 'banana')); // true
// 三、根据条件截取更新数据
function checkAvailability2(val) {
fruits.some((item, i) => {
if (item == val) {
fruits.splice(i, 1)
}
})
}
checkAvailability2('banana');
console.log(fruits); // ["apple", "mango", "guava"]
</script>
9. Array every() 方法
every() 方法用于检测数组中是否所有元素都符合指定条件（通过函数提供），返回 boolen。
let arr = [1,2,3]; let tt = arr.every(function(i){ return i>1; }) // false
详细用法介绍：
// every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。 // some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。 function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log(passed); //检查数组每一项 是否都是偶数 function CheckIfEven(value, index){ console.log(value); if(value % 2 == 0){ return '偶数'; //回到函数的返回值没有必要非得是true本身，只要可以转换为true即可，对于false也是如此。 } } let numbers=[2, 4, 5, 6, 8]; if(numbers.every(CheckIfEven)){ console.log("全都是偶数"); } else{ console.log("不全都是偶数"); }
10. JQuery方法 $.each
each() 方法为每个匹配元素规定要运行的函数。JQuery的each方法既可以遍历数组，也可以遍历对象。在遍历对象时可以很容易获取对象属性名。
语法：jQuery.each(object, [callback])
回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
示例1 遍历数组：
示例2 遍历对象
原生方法实现如下：
// 通过字面量方式实现的函数each var each = function(object, callback){ var type = (function(){ switch (object.constructor){ case Object: return 'Object'; break; case Array: return 'Array'; break; case NodeList: return 'NodeList'; break; default: return 'null'; break; } })(); // 为数组或类数组时, 返回: index, value if(type === 'Array' || type === 'NodeList'){ // 由于存在类数组NodeList, 所以不能直接调用every方法 [].every.call(object, function(v, i){ return callback.call(v, i, v) === false ? false : true; }); } // 为对象格式时,返回:key, value else if(type === 'Object'){ for(var i in object){ if(callback.call(object[i], i, object[i]) === false){ break; } } } }
测试下：
数组类型：
对象类型：
类数组类型：
增加退出循环条件:
var obj= {name:'box', color: 'red', size:'big', number: '100',} each(obj, function(i, v){ if(i === 'color'){ console.log('箱子的颜色是，'+v+''); return true; } if(i === 'size' && v=== 'big'){ console.log('型号，数量符合收货'); return false; } console.log(i + ': ' + v); });
