持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
在平时工作中，循环遍历操作是很常见的，在JS中 包括ES6，中都提供了很多针对循环的方法，本人结合具体方法的使用特进行如下的总结：
map()、filter()、find()、reduce()
map()根据数组获取一个映射的数组，返回新数组，不改变原数组。
let goodsList = ['apple','pear','orange']
let goods = goodList.map(good => {
return superMarket.getGoods(good)
})
console.log(goodsList) //['apple','pear','orange']
console.log(goods) //三个物品对象
filter()返回满足某一条件的数据，不改变原数组。
let highBoys = boys.filter((boy)=> {
return boy.highy >= 180
}
console.log(highBoys) // [boy,boy,....]
find()返回满足条件的第一个, 不改变原数组。
let highBoy = boys.find((boy)=> {
return boy.high >= 180
}
console.log(highBoy) // boy
reduce()对所有数组进行累加，最后返回一个值，不改变原数组。
let totalHight = boys.reduce((counetedHight,boy)=> {
return countedHigh + boy.hight
});
for--in
总结: for in 数组/对象都可以遍历，特别适合遍历对象。 其中 遍历对象，i对象的Key。 遍历数组i为数组的Index。
// 遍历 对象
const obj = { a: 1, b: 2, c: 3 }
for (let i in obj) {
console.log(i); // 输出对象的key: a b c
};
// 遍历 数组
const arr = ['a', 'b', 'c'];
for (let i in arr) {
console.log(i) // 输出: 0 1 2
// 注意:数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串,所以不适合遍历数组。
};
const arr = ['a', 'b'] // 手动给 arr数组添加一个属性
arr.name = 'qiqingfu' // for in 循环可以遍历出 name 这个键名
for (let i in arr) {
console.log(i) // 输出数组的索引 a // b // name
}
for--of
总结:
for--of相对来说，适合遍历数组。
- 其中的I表示的是item。
for..of循环可以随时退出循环。可以与break、continue和return配合使用。for..of适用遍历数组/数组对象/字符串/map/set等 拥有迭代器对象的集合。 但是不能遍历对象，因为没有迭代器对象。for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法。- 当你为对象添加
myObject.toString()方法后，就可以将对象转化为字符串，同样地，当你向任意对象添加myObjectSymbol.iterator方法，就可以遍历这个对象了。
//遍历 对象
const obj = { a: 1, b: 2, c: 3 }
for (let i of obj) {
console.log(i) // Uncaught TypeError: obj is not iterable 报错了;
}
//遍历 数组
const arr = ['a', 'b', 'c'];
for (let i of arr) {
console.log(i) // 输出数组的值: a b c
};
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
- 遍历map对象时适合用解构，例如：
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}
const obj = { a: 1, b: 2, c: 3 }
for (let i of Object.keys(obj)) {
console.log(i) // 1 2 3
};
for of 循环
for (const iterator of list) {
}
for ( const [ key, value ] of map ) {
console.log( key, value );
}
================================
for( let [index,elem] of new Map( arr.map( ( item, i ) => [ i, item ] ) )){
console.log(index);
console.log(elem);}
}
//等价于:
let info=arr.map((item,i)=>{
return [i,item]
})
let tmpMap=new Map(info);
for (let [index,item] of tmpMap){
console.log(index,item)
}
================================
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
}
}
遍历数组
1，普通for循环，经常用的数组遍历。
var arr = [1,2,0,3,9];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
2，优化版for循环: 使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显。
for(var j = 0,len = arr.length; j < len; j++){
console.log(arr[j]);
}
3，forEach，ES5推出的数组自带的循环，主要功能是遍历数组，实际性能比for还弱。
arr.forEach(function(value,i){
console.log('forEach遍历:'+i+'--'+value);
})
forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。
4, map遍历，map即是 “映射”的意思 用法与 forEach 相似
arr.map(function(value,index){
console.log('map遍历:'+index+'--'+value);
});
map遍历支持使用return语句，支持return返回值
var temp=arr.map(function(val,index){
console.log(val);
return val*val
})
console.log(temp);
forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持
5，for-of遍历是ES6新增功能
for( let i of arr){
console.log(i);
};
for-of这个方法避开了for-in循环的所有缺陷 与
forEach()不同的是，它可以正确响应break、continue和return语句
for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象for-of循环也支持字符串遍历
ECMA 新方法
// Array.entries
// 该方法返回一个新的Array Iterator对象，该对象包含数组中每个索引对应的键/值对
var arr=["a","b","c","d",{name:"king"},false];
// 使用entries()
var newArr=arr.entries();
// 方法一：
for(var item of newArr){
console.log(item) //输出一个数组[0,"a"];
}
for(var i=0;i<arr.length;i++){
console.log(newArr.next().value) // [1, "b"]
}
// keys() 和 values() 返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历;
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0 1 输出的key;
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a' 'b' 输出的 value;
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 输出 key,value 的数组;
while
while (i<5){
x=x + "The number is " + i + "<br>";
i++;
}
//该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行：
do{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
Vue中的 v-for 循环
<ul id="example-1">
<li v-for="item in items"> <!-- <div v-for="item of items"></div> -->
{{ item.message }}
</li>
</ul>
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<script>
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
</script>
<!-- 如果循环一个对象, 可以使用如下方式; -->
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
jQuery 中的 循环
现在JQuery，估计用的人也很少了，真是感叹呀！
$(selector).each(function(index,element){
});
/**
function:每个匹配元素规定运行的函数。
index:选择器的 index 位置。
element:当前的元素（也可使用 "this" 选择器）。
*/
$.each(dataResource,function(index,element){
});
/**
前者专用于jquery对象的遍历，后者可用于遍历任何的集合(无论是数组或是对象);
因为在JQuery中没有break和continue，非其关键字。
所以,JQuery each循环,要实现break和continue的功能,可以如下：
break ----用return false;
continue --用return ture;
*/
find() 和some()
const students = [
{
name: 'Daniel',
age: 22,
country: 'Malaysia'
},
{
name: 'Noob',
age: 21,
country: 'China'
},
{
name: 'Coin',
age: 17,
country: 'Japan',
}
];
// some 用來 檢查陣列裡面是否有一些符合條件。只要有一個以上符合條件就會回傳 true，全部都不是的話會回傳 false。
const result = students.some(x => x.age >= 18);
// 執行結果：result 為 true
const result2 = students.some(x => x.country === 'Singapore');
// 執行結果：result 為 false
// every 用来 检查 陣列裡面的所有東西都符合條件才會回傳 true，只要有一個不是就會回傳 false。
const result = students.every(x => x.age >= 18);
// 執行結果：result 為 false
some和every两个属性多用来做表单校验使用
1.比如表单所有元素的校验结果都为true，表单才能提交，使用 every
2.比如表单中通讯方式(电话、邮箱、微信、微博)中，最少有一个填写即可使用some
