这里是
JavaScript
基础教程的第六期啦!上次讲了条件语句,同时也讲了今天吃什么
的栗子,这一次就开始讲一讲JavaScript
中的循环语句啦!
循环
循环
就是重复去做一些事情。在JavaScript
中,我们常用的大致有以下循环语句:
- for
- while
- do while
- for in
- for of
- break
- continue
当然,还有很多的循环语法糖,所谓语法糖,就是JavaScript
提供的简单循环用法,这个后面讲内置函数的时候会在讲的!
for语句
一个for
循环会一直重复执行,直到指定的循环条件为false
。一个for
循环的语句应该如下:
for ([initialExpression]; [condition]; [incrementExpression])
statement
如果你看不懂上面的代码,那我给你用中文写一遍:
for (初始值(一般定义变量);循环的条件;更新定义的变量)
循环执行的事件
举个栗子:
for (let i = 0; i < 10; i++) {
console.log("第" + i + "个数");
}
翻译翻译:
定义i
的初始值为0,循环10,每循环一次i+1
,每次循环执行下面的打印。运行代码:
可以看到打印了10次,当然循环的也可以是一个数组。举个栗子:
const arr = ["orange", "alex", "cj", "marry", "mac"];
for (let i = 0; i < arr.length; i++) {
console.log("element", arr[i]);
}
运行后,可以看到打印的的是数组里面的每一项:
当然也可以循环的数组对象:
const arr = [
{
name: "orange",
age: 18,
},
{
name: "alex",
age: 19,
},
{
name: "marry",
age: 20,
},
{
name: "mac",
age: 21,
},
];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i].name + "的" + "年龄是" + arr[i].age);
}
运行代码,可以看到打印了姓名以及对应的年龄:
while
一个while
语句只要指定的条件求值为真(true)就会一直执行它的语句块。它应该是这样的结构:
while (condition)
statement
给中文描述就是:
while (条件是真的)
执行代码
举个栗子:
let x = 0;
while (x < 10) {
console.log("运行了第" + x + "次");
x++;
}
翻译以下就是,定义了一个变量x
,初始值为0,当x<10
的时候,执行花括号里面的代码,打印并且x+1
。运行一下:
注意:使用while
的时候一定要注意,一定要保证循环的条件结果最后要为假,不然它就会一直执行循环,停不下来,就是死循环,很多时候都会造成内存溢出而报错。
do while
do...while 语句一直重复直到指定的条件求值得到假值(false),和while
有一点点像。大概的结构如下:
do
statement
while (condition);
用中文翻译就是:
do{
循环的代码
} while(条件为真)
其实就是,先去执行代码,然后判断条件是否为真,真的话就继续执行循环的代码,假的话,就停止执行。举个栗子:
let x = 0;
do {
console.log("运行了" + x + "次");
x++;
} while (x < 10);
翻译一下就是,定义一个变量x,初始值为0,先执行打印,然后x+1
,在判断条件,直到了x>=10
的时候就不再执行代码了。运行一下,其实和上面的结果是一样的:
for in
for...in
语句循环一个指定的变量来循环一个对象所有可枚举的属性。
直接举个栗子,先来循环数组:
let arr = [1, 2, 3, 4, 5];
for (const key in arr) {
console.log("key:", key);
}
翻译一下,就是定义一个数组,循环数组,打印key
。直接运行:
可以看到,打印出来的,是数组的索引值!!!
然后来循环对象:
let obj = {
name: "orange",
age: 18,
sex: "男",
};
for (const key in obj) {
console.log("key:", key);
}
不用翻译了,直接运行:
你可以看到,打印的是对象中的key
,那如何获取obj
的值呢?
let obj = {
name: "orange",
age: 18,
sex: "男",
};
for (const key in obj) {
console.log("key:", key);
console.log("value:", obj[key]);
}
运行一下:可以看到打印了值:
所以你可以发现,for in
就是可以用来获取key
的,数组的索引值,对象的键。
for of
for...of 语句在可迭代对象(包括Array、Map、Set、arguments 等等)上创建了一个循环,对值的每一个独特属性调用一次迭代。可能看的文字不清楚,直接上代码运行看看吧:
let arr = ["orange", "alex", "cj", "marry"];
for (const iterator of arr) {
console.log("iterator:", iterator);
}
运行下:
如果我们循环对象呢?
let obj = {
name: "orange",
age: 18,
sex: "男",
};
for (const iterator of obj) {
console.log("iterator:", iterator);
}
运行下:
你会发现不错了,告诉你这个不是可以迭代的!
break
当需要中断循环,该如何实现呢?就是使用break
,不管是for
,while
, do while
都是可以使用while
的。直接举个栗子:
for (let i = 0; i < 5; i++) {
if (i === 2) break;
console.log("第" + i + "次");
}
翻译一下,就是循环5,如果i===2
的时候,结束执行打印。
let x = 0;
while (x < 5) {
if (x === 2) break;
console.log("第" + x + "次");
x++;
}
let x = 0;
do {
if (x === 2) break;
console.log("第" + x + "次");
x++;
} while (x < 5);
以上三种方法运行的结果都是一致的!
condition
continue
语句可以用来继续执行(跳过代码块的剩余部分并进入下一循环)一个while
、do while
、for
。我们将上面的代码换成condition
。
for (let i = 0; i < 5; i++) {
if (i === 2) continue;
console.log("第" + i + "次");
}
let x = 0;
while (x < 5) {
x++;
if (x === 2) continue;
console.log("第" + x + "次");
}
let x = 0;
do {
x++;
if (x === 2) continue;
console.log("第" + x + "次");
} while (x < 5);
运行下:
你会发现,这个continue
是跳过了条件这次循环,继续执行后面的循环!
总结
以上的循环都挺重要的,在项目中也会经常用到!如果学习的话,还是最好掌握一下。