【前端-JavaScript】10种遍历方法

眼睛王蛇 發表於 2019-8-1 16:44:00

<h1 style="text-align: center">JavaScript之10种遍历方法</h1>
<h2>1. for 循环</h2>
for循环语句，最基础的遍历，以数组的下标为索引，主要对数组元素进行遍历。
注意：for 循环不是函数，不存在返回值。
<div class="cnblogs_code">
<pre>var arr = ;
for(var i=0 ;i<arr.length;i++){
 console.log(arr) // i=0 1 2 3
}</pre>
</div>
<h2>2. for in</h2>
for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，但是你不要这么做，这是有风险的，
因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。
另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去， 所以最好在循环体内加一个判断，就用 obj.hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。
<div class="cnblogs_code">
<pre><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)
}

console.log("--------------------------------------------------------");
let divObj= document.querySelectorAll('div');
for(let i in divObj){
 console.log(i,divObj);
 console.log(divObj.id);
}
/*总结：for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj 代表对应的 value, 当用它来遍历数组时候，多数情况下也能达到同样的效果，
但是你不要这么做，这是有风险的，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：'52'+1 = '521' 而不是我们需要的 53。

另外 for in 循环的时候，不仅遍历自身的属性，还会找到 prototype 上去，
所以最好在循环体内加一个判断，就用 obj.hasOwnProperty(i)，这样就避免遍历出太多不需要的属性。*/
</script></pre>
</div>
<h2>3. whild 和 do while 循环</h2>
<div class="cnblogs_code"><img id="code_img_closed_f656024f-e686-4aac-b3c3-dede1bea3498" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f656024f-e686-4aac-b3c3-dede1bea3498" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f656024f-e686-4aac-b3c3-dede1bea3498" class="cnblogs_code_hide">
<pre> let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for(;cars;){
 console.log(cars);
 i++;
}

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars){
 console.log(cars + " ");
 i++;
};

let j = 3;
do{
 console.log(j);
 j--;
}
while(j>0)
// 3
// 2
// 1</pre>
</div>
View Code</div>
<h2>4. forEach</h2>
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
<div class="cnblogs_code">
<pre>let arr = ;
arr.forEach(function(i,index,arr0){
 console.log(i); //数组每一项
 console.log(index); //数组下标
 console.log(arr0);//该遍历的数组 arr
});</pre>
</div>
详细用法介绍：
<div class="cnblogs_code"><img id="code_img_closed_3fbae34c-db02-489e-b17f-04d4ef130185" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_3fbae34c-db02-489e-b17f-04d4ef130185" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_3fbae34c-db02-489e-b17f-04d4ef130185" class="cnblogs_code_hide">
<pre>// let arr = ;
/*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=;
arr.forEach(function (t,i,arr) {
 //t++; //错误
 //arr++; //数组中每一项

 //将所有偶数+1
 if(t%2===0){
 arr++;
 }
});
console.log(arr);*/</pre>
</div>
View Code</div>
<h2>5. for of (ES6)</h2>
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，不允许遍历对象 它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。
<div class="cnblogs_code">
<pre><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></pre>
</div>
<h2>6. Array map()方法</h2>
map()与forEach相似,可以完成forEach的所有功能。
<ul>
<li> map() 返回一个新数组。</li>
<li> map() 不会对空数组进行检测。</li>
<li> map() 不会改变原始数组。</li>
</ul>
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。
<div class="cnblogs_code">
<pre> //map()遍历
/*var arr = ;
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=;
var arr1=arr.map(function (t) {
 return ++t;
});
console.log(arr,arr1);*/

/*
return 返回数据元素,到新数组中,如果不返回的数据就会变成undefined
var arr=;
 arr=arr.map(function (t) {
 if(t%2===0){
 return t+1;
 }
 return t; //如果没有这句，非奇数的返回为undefined
 });
 console.log(arr);*/

/*map() 和 forEach() 的区别
* forEach遍历当前数组,没有返回值,不会返回新数组
* map遍历当前数组,并且将当前数组中的元素返回给新数组,
* 不使用return时,新数组的长度与原数组相同,但是每个元素都是undefined;
* */</pre>
</div>
<h2>7. Array filter() 方法</h2>
filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。 filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
<div class="cnblogs_code"><img id="code_img_closed_a7378aa7-d2bc-4732-a19c-4be4ba15be72" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_a7378aa7-d2bc-4732-a19c-4be4ba15be72" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_a7378aa7-d2bc-4732-a19c-4be4ba15be72" class="cnblogs_code_hide">
<pre><script>
// filter 方法是 Array对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
// filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr = ;
let tt = arr.filter(function(i){
 return i>1;
});
console.log(tt); //
console.log(arr); //

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));//
</script></pre>
</div>
View Code</div>
<h2> 8. Array some() 方法</h2>
some() 方法用于检测数组是否存在元素满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断,不改变原数组。
<div class="cnblogs_code">
<pre>let arr = ;
let tt = arr.some(function(i){
return i>1;
})
// 检测数组中元素是否都大于1
// true</pre>
</div>
详细用法介绍：
<div class="cnblogs_code"><img id="code_img_closed_9d78e033-1f31-4475-a885-351df26430f1" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_9d78e033-1f31-4475-a885-351df26430f1" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_9d78e033-1f31-4475-a885-351df26430f1" class="cnblogs_code_hide">
<pre><script>
/*
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。只要有一个元素满足则返回true，并不再继续往下判断。
// arr.some(callback(element[, index[, array]])[, thisArg])
let arr = ;
let tt = arr.some(function(i){
 return i>1;
});
console.log(tt); //false*/

/*const a = ;
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--- */

// function isBiggerThan10(element, index, array) {
// return element > 10;
// }
// .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></pre>
</div>
View Code</div>
<h2>9. Array every() 方法</h2>
every() 方法用于检测数组中是否所有元素都符合指定条件（通过函数提供），返回 boolen。
<div class="cnblogs_code">
<pre>let arr = ;
let tt = arr.every(function(i){
return i>1;
})
// false</pre>
</div>
详细用法介绍：
<div class="cnblogs_code"><img id="code_img_closed_6f763ef2-acb2-46b3-8564-0c05f9c30cfd" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_6f763ef2-acb2-46b3-8564-0c05f9c30cfd" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_6f763ef2-acb2-46b3-8564-0c05f9c30cfd" class="cnblogs_code_hide">
<pre>// every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
// some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

function isBigEnough(element, index, array) {
 return (element >= 10);
}

var passed = .every(isBigEnough);
console.log(passed);

//检查数组每一项是否都是偶数
function CheckIfEven(value, index){
 console.log(value);
 if(value % 2 == 0){
 return '偶数'; //回到函数的返回值没有必要非得是true本身，只要可以转换为true即可，对于false也是如此。
 }
}
let numbers=;

if(numbers.every(CheckIfEven)){
 console.log("全都是偶数");
}
else{
 console.log("不全都是偶数");
}</pre>
</div>
View Code</div>
<h2>10. JQuery方法 $.each</h2>
each() 方法为每个匹配元素规定要运行的函数。JQuery的each方法既可以遍历数组，也可以遍历对象。在遍历对象时可以很容易获取对象属性名。
语法：jQuery.each(object, )
回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
示例1 遍历数组：
<img src="https://img-blog.csdn.net/20170905234601378?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
示例2 遍历对象
<img src="https://img-blog.csdn.net/20170905234644406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
 
原生方法实现如下：
<div class="cnblogs_code"><img id="code_img_closed_f0197d63-4534-4e54-975b-ccf3a93db2a9" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f0197d63-4534-4e54-975b-ccf3a93db2a9" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f0197d63-4534-4e54-975b-ccf3a93db2a9" class="cnblogs_code_hide">
<pre>// 通过字面量方式实现的函数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, object) === false){
 break;
 }
 }
}
}</pre>
</div>
原生JS仿写jquery 实现$.each() </div>
测试下：
 
数组类型：
<img src="https://img-blog.csdn.net/20170905235719260?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
对象类型：
<img src="https://img-blog.csdn.net/20170905235929428?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
类数组类型： <img src="https://img-blog.csdn.net/20170906000106247?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
 
增加退出循环条件:
<div class="cnblogs_code"><img id="code_img_closed_aa0acd93-a89a-40f0-89e2-47b9f30c2d6e" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_aa0acd93-a89a-40f0-89e2-47b9f30c2d6e" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_aa0acd93-a89a-40f0-89e2-47b9f30c2d6e" class="cnblogs_code_hide">
<pre>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);
});</pre>
</div>
View Code</div>
 <img src="https://img-blog.csdn.net/20170906001217618?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzI1NDYxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
 
<pre><code class="hljs kotlin"></code></pre>
  
来源：https://www.cnblogs.com/XJT2018/p/11283609.html

頁: [1]

琼殿技术论坛's Archiver

【前端-JavaScript】10种遍历方法