主题
循环
概述
我们在生活中做的大部分活动都充满了重复。想象一下，如果我要求你使用 console.log() 打印从 0 到 100。要实现这个简单的任务，可能需要你 2 到 5 分钟，这种繁琐和重复的任务可以使用循环来完成。
在编程语言中，为了执行重复任务，我们使用不同类型的循环。以下示例是 JavaScript 和其他编程语言中常用的循环。
for 循环
js
// For 循环结构
for(initialization, condition, increment/decrement){
// 代码在这里
}js
for(let i = 0; i <= 5; i++){
console.log(i)
}
// 0 1 2 3 4 5js
for(let i = 5; i >= 0; i--){
console.log(i)
}
// 5 4 3 2 1 0js
for(let i = 0; i <= 5; i++){
console.log(`${i} * ${i} = ${i * i}`)
}sh
0 * 0 = 0
1 * 1 = 1
2 * 2 = 4
3 * 3 = 9
4 * 4 = 16
5 * 5 = 25js
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
newArr.push(countries[i].toUpperCase())
}
// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]添加数组中的所有元素：
js
const numbers = [1, 2, 3, 4, 5]
let sum = 0
for(let i = 0; i < numbers.length; i++){
sum = sum + numbers[i] // 可以简写为 sum += numbers[i]
}
console.log(sum) // 15基于现有数组创建新数组：
js
const numbers = [1, 2, 3, 4, 5]
const newArr = []
let sum = 0
for(let i = 0; i < numbers.length; i++){
newArr.push( numbers[i] ** 2)
}
console.log(newArr) // [1, 4, 9, 16, 25]js
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
newArr.push(countries[i].toUpperCase())
}
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]while 循环
js
let i = 0
while (i <= 5) {
console.log(i)
i++
}
// 0 1 2 3 4 5do while 循环
js
let i = 0
do {
console.log(i)
i++
} while (i <= 5)
// 0 1 2 3 4 5for of 循环
我们对数组使用 for of 循环。如果我们对数组中每个元素的索引不感兴趣，这是遍历数组的一种非常方便的方法。
js
for (const element of arr) {
// 代码在这里
}js
const numbers = [1, 2, 3, 4, 5]
for (const num of numbers) {
console.log(num)
}
// 1 2 3 4 5
for (const num of numbers) {
console.log(num * num)
}
// 1 4 9 16 25
// 添加数组中的所有数字
let sum = 0
for (const num of numbers) {
sum = sum + num
// 也可以简写为 sum += num
// 之后我们将使用更短的语法（+=, -=, *=, /= 等）
}
console.log(sum) // 15
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
for (const tech of webTechs) {
console.log(tech.toUpperCase())
}
// HTML CSS JAVASCRIPT REACT NODE MONGODB
for (const tech of webTechs) {
console.log(tech[0]) // 只获取每个元素的第一个字母，H C J R N M
}js
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(const country of countries){
newArr.push(country.toUpperCase())
}
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]break
Break 用于中断循环。
js
for(let i = 0; i <= 5; i++){
if(i == 3){
break
}
console.log(i)
}
// 0 1 2如果在迭代过程中找到 3，上面的代码就会停止。
continue
我们使用关键字 continue 来跳过某些迭代。
js
for(let i = 0; i <= 5; i++){
if(i == 3){
continue
}
console.log(i)
}
// 0 1 2 4 5练习
练习：级别 1
js
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya'
]
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
const mernStack = ['MongoDB', 'Express', 'React', 'Node']使用 for 循环从 0 迭代到 10，使用 while 和 do while 循环做同样的事情
使用 for 循环从 10 迭代到 0，使用 while 和 do while 循环做同样的事情
使用 for 循环从 0 迭代到 n
编写一个循环，使用 console.log() 制作以下模式：
js# ## ### #### ##### ###### #######使用循环打印以下模式：
sh0 x 0 = 0 1 x 1 = 1 2 x 2 = 4 3 x 3 = 9 4 x 4 = 16 5 x 5 = 25 6 x 6 = 36 7 x 7 = 49 8 x 8 = 64 9 x 9 = 81 10 x 10 = 100使用循环打印以下模式
shi i^2 i^3 0 0 0 1 1 1 2 4 8 3 9 27 4 16 64 5 25 125 6 36 216 7 49 343 8 64 512 9 81 729 10 100 1000使用 for 循环从 0 迭代到 100，只打印偶数
使用 for 循环从 0 迭代到 100，只打印奇数
使用 for 循环从 0 迭代到 100，只打印质数
使用 for 循环从 0 迭代到 100，打印所有数字的总和。
shThe sum of all numbers from 0 to 100 is 5050.使用 for 循环从 0 迭代到 100，打印所有偶数的总和和所有奇数的总和。
shThe sum of all evens from 0 to 100 is 2550. And the sum of all odds from 0 to 100 is 2500.使用 for 循环从 0 迭代到 100，打印所有偶数的总和和所有奇数的总和。将偶数总和和奇数总和打印为数组
sh[2550, 2500]开发一个小脚本，生成 5 个随机数的数组
开发一个小脚本，生成 5 个随机数的数组，并且数字必须是唯一的
开发一个小脚本，生成六个字符的随机 id：
sh5j2khz
练习：级别 2
开发一个小脚本，生成任意数量字符的随机 id：
shfe3jo1gl124gshxkqci4utda1lmbelpkm03rba编写一个生成随机十六进制数的脚本。
sh'#ee33df'编写一个生成随机 rgb 颜色数字的脚本。
shrgb(240,180,80)使用上面的 countries 数组，创建以下新数组。
sh["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]使用上面的 countries 数组，创建一个国家长度的数组。
sh[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]使用 countries 数组创建以下数组的数组：
sh[ ['Albania', 'ALB', 7], ['Bolivia', 'BOL', 7], ['Canada', 'CAN', 6], ['Denmark', 'DEN', 7], ['Ethiopia', 'ETH', 8], ['Finland', 'FIN', 7], ['Germany', 'GER', 7], ['Hungary', 'HUN', 7], ['Ireland', 'IRE', 7], ['Iceland', 'ICE', 7], ['Japan', 'JAP', 5], ['Kenya', 'KEN', 5] ]在上面的 countries 数组中，检查是否有包含单词 'land' 的国家。如果有包含 'land' 的国家，将其打印为数组。如果没有包含单词 'land' 的国家，打印 'All these countries are without land'。
sh['Finland','Ireland', 'Iceland']在上面的 countries 数组中，检查是否有以子字符串 'ia' 结尾的国家。如果有以此结尾的国家，将其打印为数组。如果没有包含单词 'ai' 的国家，打印 'These are countries ends without ia'。
sh['Albania', 'Bolivia','Ethiopia']使用上面的 countries 数组，找到包含最多字符的国家。
shEthiopia使用上面的 countries 数组，找到只包含 5 个字符的国家。
sh['Japan', 'Kenya']在 webTechs 数组中找到最长的单词
使用 webTechs 数组创建以下数组的数组：
sh[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]使用 MongoDB、Express、React 和 Node 创建的应用程序称为 MERN 堆栈应用程序。使用数组 mernStack 创建首字母缩写 MERN
使用 for 循环或 for of 循环遍历数组 ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] 并打印出项目。
这是一个水果数组，['banana', 'orange', 'mango', 'lemon'] 使用循环反转顺序，不使用 reverse 方法。
打印数组的所有元素，如下所示。
jsconst fullStack = [ ['HTML', 'CSS', 'JS', 'React'], ['Node', 'Express', 'MongoDB'] ]shHTML CSS JS REACT NODE EXPRESS MONGODB
练习：级别 3
- 复制 countries 数组（避免突变）
- 数组是可变的。创建一个不修改原始数组的副本。对复制的数组进行排序并存储在变量 sortedCountries 中
- 对 webTechs 数组和 mernStack 数组进行排序
- 从 countries 数组中提取所有包含单词 'land' 的国家并将其打印为数组
- 在 countries 数组中找到包含最多字符的国家
- 从 countries 数组中提取所有包含单词 'land' 的国家并将其打印为数组
- 从 countries 数组中提取所有只包含四个字符的国家并将其打印为数组
- 从 countries 数组中提取所有包含两个或更多单词的国家并将其打印为数组
- 反转 countries 数组并将每个国家大写并将其存储为数组