js基础速成06-循环

循环

我们生活中的许多活动充满了重复性任务。假设我让你使用console.log()从0打印到100，手动实现可能需要花费2到5分钟。此类繁琐且重复的任务可以通过循环来完成。

在编程语言中，我们可以使用不同类型的循环来完成重复性任务。以下是JavaScript及其他编程语言中常用的循环示例。

for 循环

// for 循环结构
for(初始化; 条件; 增量/减量){
  // 代码在此处执行
}

for(let i = 0; i <= 5; i++){
  console.log(i)
}

// 0 1 2 3 4 5

for(let i = 5; i >= 0; i--){
  console.log(i)
}

// 5 4 3 2 1 0

for(let i = 0; i <= 5; i++){
  console.log(`${i} * ${i} = ${i * i}`)
}

输出结果：

0 * 0 = 0
1 * 1 = 1
2 * 2 = 4
3 * 3 = 9
4 * 4 = 16
5 * 5 = 25

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"]

将数组中的所有元素相加：

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

基于现有数组创建一个新数组：

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]

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 循环

let i = 0
while (i <= 5) {
  console.log(i)
  i++
}

// 0 1 2 3 4 5

do while 循环

let i = 0
do {
  console.log(i)
  i++
} while (i <= 5)

// 0 1 2 3 4 5

for of 循环

for of循环用于遍历数组。如果我们对数组中每个元素的索引不感兴趣，它是非常便捷的方式。

for (const element of arr) {
  // 代码在此处执行
}

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 REDUX NODE MONGODB

for (const tech of webTechs) {
  console.log(tech[0]) // 只获取每个元素的首字母,  H C J R R N M
}

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用于中断循环。

for(let i = 0; i <= 5; i++){
  if(i == 3){
    break
  }
  console.log(i)
}

// 0 1 2

上述代码在遇到3时停止迭代。

continue

我们使用关键词continue来跳过某些迭代。

for(let i = 0; i <= 5; i++){
  if(i == 3){
    continue
  }
  console.log(i)
}

// 0 1 2 4 5