“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第13篇文章，点击查看活动详情”
一、js中遍历的几种方法
for循环
1、【应用环境】
FOR循环：本质是自己控制循环多少次，所以只有清楚的知道自己内部有多少个成员的数据结构（例如：数组/类数组）才会基于FOR循环处理
2、【基础语法】
1、 想要依次打印出下面的语法
var ary=[1,2,3];
for (var i=0;i<ary.length;i++){
console.log(ary[i]);
}
- 定义初始值
- 制定循环条件，只要条件成立就会执行循环体中的内容
- 循环体（大括号就是循环体）
- 定义的初始值累计操作
for (定义初始值;制定循环条件;定义的初始值累计操作){循环体}
2、把下面的数组从后到前依次打印出来
var ary=[1,2,3,4];
for(var i=ary.length-1; i>=0;i--){
console.log(ary[i]);
}
3、打印所有的奇数项
var ary=[1,2,3,4];
for(var i=0;i<ary.length;i++){
//i=0 第一项
//i=1 第二项
//i=3 第三项
// 打印所有的奇数项，其实就是打印多有索引为偶数的项
//i%2==0 的时候就是偶数项
if(i%2==0){
console.log(ary[i]);
}
}
3、【两个重要的关键词】
- continue： 结束本次循环，继续下一轮循环
- break： 强制结束整个循环
3.1【案例解说具体含义】
for(var i=0;i<10;i++){
if(i<5){
i++;//
continue;
}
if(i>7){
i+=2;
break;
}
i+=1;
}
console.log(i);
// 最终答案是10
3.2【练习题】
下面的案例，最终打印的是几？打印几次
5 一次
for(var i=1;i<=10;i+=2){
if(i<=5){
i++;//
continue;
}else{
i-=2;
break;
}
i--;
console.log(i);
}
console.log(i);
While循环
1、【应用环境】
只要条件成立，就一直执行，知道条件不成立的时候停止
使用while 循环的时候，一定要避免死循环
知道循环的次数 我们一般使用for循环 不知道具体多少次的 一般使用while
2、【基础语法】
while(条件){
循环体
}
let arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
// ...
}
do...while循环
与while相似，但是他会先执行一次，再做判断条件
var i=0
do{
console,log(i)
i++
}while(i<10)
for of循环
1、【应用环境】
for...of语句在[可迭代对象](（包括 [Array]、[Map]、[Set]、[String]、[TypedArray]、[arguments] 对象等等）
2、【基础语法】
for (variable of iterable) {
//statements
}
-
variable在每次迭代中，将不同属性的值分配给变量。
-
iterable被迭代枚举其属性的对象。
3、[与for...in的区别]
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
[for...in]语句以任意顺序迭代对象的[可枚举属性]
for...of 语句遍历[可迭代对象]定义要迭代的数据
3.1【案例解说具体含义】
const array = ['a', 'b', 'c'];
for (const element of array) {
console.log(element);
}
//输出a b c
forEach循环
1、【应用环境】
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
2、【基础语法】
array.forEach(function(currentValue, index, arr), thisValue)
3、【参数】
| 参数 | 描述 | ||
|---|---|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数: | 参数 | 描述 |
| currentValue | 必需。当前元素 | ||
| index | 可选。当前元素的索引值。 | ||
| arr | 可选。当前元素所属的数组对象。 | ||
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
3.1【案例解说具体含义】
var arr = [0,1,2,3]
arr.forEach((item,index)=>{
console.log(`下标${index}的数为${item}`)
})
二、js 遍历对象的几种方法
for in 循环
作用： 一般用来遍历对象的属性，遍历数组的话拿到的是下标
-
是JS所有循环中，性能最差的一个
-
也是Bug最多的一个
-
1.Symbol类型的私有属性没有被迭代到
-
2.数字属性会被优先迭代[而且是按照 小->大] 这个bug是解决不了的
-
3.不论是对象的私有还是公有属性，只要是可枚举的，都会被迭代到 [“不严谨”的来说，一般内置的属性都是不可枚举的，而自定义的属性都是可枚举的]
- ...
-
-
可以迭代当前对象中所有可枚举【列举】的属性
-
性能差 是因为无论是公有还是私有 都会被迭代
let obj={
name:'dongfangmiaomiao',
age:18,
0:100,
[Symbol('AA')]:200
};
Object.prototype.aaa='AAA';
解决第三个问题
如果迭代了公有的可枚举的属性，我们直接结束循环即可，在真实场景中，一般需要迭代的都是私有属性
//for in
for(let key in obj){
//key:依次迭代的属性
//obj[key]:依次迭代的属性值
//obj.hasOwnProperty验证是否私有的 私有的返回true 公有的是false
if(!obj.hasOwnProperty(key)) break;// 解决第三个问题，如果迭代了公有的可枚举的属性，我们直接结束循环即可，在真实场景中，一般需要迭代的都是私有属性
console.log(key,obj[key]);
}
不用for in 遍历对象的属性名和属性值
// Object.keys(obj) : 获取obj中所有“非Symbol类型”的“私有”属性「前提：可枚举的」 结果：包含属性名的数组
// Object.getOwnPropertySymbols(obj) : 获取obj中所有symbol类型的私有属性
// --> 拼接到一起：包含obj中所有“可枚举”的“私有属性”的一个数组集合
let keys = Object.keys(obj).concat(Object.getOwnPropertySymbols(obj));
keys.forEach(key => {
// key:获取的某个属性
// obj[key]:获取的某个属性值
console.log(key, obj[key]);
});
Object.keys（obj）/Object.values（obj）
[参数]
obj：要返回其枚举自身属性的对象
[返回值]
一个表示给定对象的所有可枚举属性的字符串数组。
const obj = {
id:1,
name:'dongfangmiaomiao',
age:18
}
console.log(Object.keys(obj))
console.log(Object.values(obj))
输出结果： obj对象的key组成的数组
['id','name','age']
输出结果：obj对象的value组成的数组
['1','dongfangmiaomiao','18']
Object.getOwnPropertyNames(obj)
[参数]
obj：一个对象，其自身的可枚举和不可枚举属性的名称被返回
[返回值]
返回一个数组，包含对象自身的所有属性（包含不可枚举属性）
遍历可以获取key和value
const obj = {
id:1,
name:'dongfangmiaomiao',
age:18
}
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key+ '---'+obj[key])
})
输出结果：
['1','dongfangmiaomiao','18']
