【JS基础】for循环也可以遍历对象hahaha~

1,817 阅读2分钟

目录

  1. for 运行说明
  2. for遍历 数组
  3. for遍历 字符串
  4. for 无法遍历 对象
  5. break 和 continue
  6. 数字如何遍历

0、for 运行说明

for(var i=0;i<100;i++){
/* var i=0;是定义初始变量。i<100;是循环条件。i++;是变量变化值 */
    console.log(i)/* 循环语句 */
}
for(定义初始变量①;循环条件②;变量变化值④ ){

循环语句;③

}

执行顺序:为 ①②③④ ②③④②③④……直到不满足条件

①定义初始变量:只在进入循环前执行一次 小括号内的分号不可省略

②循环条件:是每次进入循环都会执行和判断**

④变量变化值:每次循环完成,③ 循环语句后执行的内容

一、for遍历 数组

1) 造数据

let data = new Array(50).fill().map((item,index)=> index);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49]

2) 遍历数据

根据索引来遍历,取值就是根据索引来取值,比如 data[0]

let data = new Array(10).fill().map((item,index)=> index+10);
data[0];//10 通过数字索引可以取到值
console.time('test');
for(let i=0; i<data.length; i++){
    console.log('i:',i, 'data[i]:', data[i]);
}
console.timeEnd('test');// 平均时间约`3ms`

image.png

二、for遍历 字符串

通过数字索引·可以取到此数据类型(字符串)中的数据,那么则可以通过for来遍历`

let data = 'abc';
data[0];//'a' 通过索引可以取到此数据类型中的数据,那么则可以通过for来遍历。
for(let i=0; i< data.length; i++){
    console.log(data[i]); // a  b  c
}

三、for 无法遍历 对象

let data = {a:1, b:2};

data[0];// undefined 通过`数字索引``取不到`此数据类型中的数据,那么则`不可以`通过for来遍历。
data['a']; // 1  对象只可以通过 key值来取数据
data.length;// undefined
Object.keys(data);//  ['a', 'b']
for(let i=0; i< data.length; i++){
    console.log(i, data[i]);
}
// undefined

1) 上方取不到遍历的length,修改如下

let data = {a:1, b:2};
Object.keys(data);//  ['a', 'b']
for(let i=0; i< Object.keys(data).length; i++){
    console.log(i, data[i]);
}
// 0 undefined
// 1 undefined

可以遍历了,但是值肯定是取不到的。

2) for可以遍历指定的对象类型

for只可遍历 key为数字索引的对象

let data1 = {'0':'a', '1': 'b'};

data1[0];// 'a' 通过`数字索引``取到`此数据类型中的数据,那么则`可以`通过for来遍历 `此种对象类型`。
data1.length;// undefined
Object.keys(data1);// ['0', '1']
for(let i=0; i< Object.keys(data1).length; i++){
    console.log(i, data1[i]);
}
// 0 'a'
// 1 'b'

四、break 和 continue

let arr11 = [1,2,3,4,5];
let j =0;
let length = arr11.length;
for(; j < length; j++){
    console.log('arr[j]:', arr11[j]);
}

image.png

1) break

break是直接跳出整个循环

let arr11 = [1,2,3,4,5];
let j =0;
let length = arr11.length;
for(; j < length; j++){
    if(j===3){break;}
    console.log('arr[j]:', arr11[j]);
}

image.png

1) continue

contine是跳出了j===3的单次循环,整个循环不会结束还会继续!

let arr11 = [1,2,3,4,5];
let j =0;
let length = arr11.length;
for(; j < length; j++){
    if(j===3){continue;}
    console.log('中间输出arr[j]:', arr11[j]);
}

image.png

六、数字如何遍历

1) 一种方式

  1. 转换为字符串后用 for

注意 for of 遍历不了数字 因为:nums is not iterable

需要先转换为字符串,因为数字没有length

123通过数字索引能不能取值,有没有length决定了它是否可以 for 遍历

let nums=123;
console.log('nums[0]:',nums[0], 'nums.length:',nums.length);
for(let i=0; i<nums.length;i++){
    console.log(i, nums[i]);
}
// nums[0]: undefined nums.length: undefined
// undefined

从上方可以看出数字无法遍历,那么,我们只能转换成字符串或者数组来遍历。

let nums=123;
let numsToStr = nums.toString();// 或者 numsToStr=nums+'';
console.log('numsToStr[0]:',numsToStr[0], 'numsToStr.length:',numsToStr.length);
for(let i=0; i<numsToStr.length;i++){
    console.log(i, numsToStr[i]);
}
// numsToStr[0]: 1 numsToStr.length: 3
// 0 '1'
// 1 '2'
// 2 '3'

总结

  1. 只要通过数字索引可以取的数据类型(数组或字符串)并且是有length属性的。就可以通过 for遍历。 比如 字符串,数组
  2. for只可遍历 key为数字索引对象