Javascript 常见的循环方式总结

在Javascript中有很多种循环方式。有多种循环方式可以用来遍历数组、对象、以及执行一些重复性任务
但是有很多方式甚至从未用过，所以简单来总结一下JS中的循环

for循环

例：

for (let i = 0; i < 5; i++ {
    console.log(`第${i + 1}次循环遍历`
}

结果

while 循环

例：

let i = 0;
while (i < 100 {
    i = i + 1;
    console.log(`第${i}次循环遍历`
}

结果

do……while循环

let a = 3;
let b = 0;

do {
    console.log("打印b的值>>>>>",b;
    b++;
} while (b < a; // 当a小于等于b的时候终止她。

结果

while：先判断后执行； do-while：先执行再判断，即使初始条件不成立，do-while循环至少执行一次；

for-in循环

let kj = {
    "a": 1,
    "b": 2,
    "c": 3
}


//使用for-in遍历这个对象
for (let k in kj {
    console.log(k, kj[k]
}

结果
注！ 最好不要用for in遍历数组

for-of循环

for-of 可以更方便的循环遍历数组等

let arr = [1, 2, 4, 5, 6, 7]
for (let v of arr {
    console.log(v;
}

结果

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。 for in更适合遍历对象，不要使用for in遍历数组使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性

map(循环

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map((number => {
  console.log(number
  return number * 2;
};

console.log(newArray; // Output: [2, 4, 6, 8, 10]

结果

forEach循环

例子

const originalArray = [1, 2, 3, 4, 5];
originalArray.forEach((number => {
  console.log(number * 2;
};

结果

filter(过滤循环

filter(是一种常用的数组方法，它可以帮助我们按照特定条件筛选出一个数组中的部分元素并返回一个新的数组

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter((number => {
  // 只返回能被2整除的数 也就是偶数
  return number % 2 === 0;
};

console.log(filteredArray;

结果

filter(方法不会修改原始数组，而是返回一个新的数组作为其运行结果。因此，如果我们需要在原始数组中删除一些元素，那么就应该使用splice(方法

JS实现Python中的zip循环

例子

function* zip(...arrays {
    let minLength = Math.min(...arrays.map(arr => arr.length;
    for (let i = 0; i < minLength; i++ {
        yield arrays.map(arr => arr[i];
    }
}

let aList = [1, 2, 3]
let bList = ["a", "b", "c"]

for (let [a, b] of zip(aList, bList {
    console.log(a, b
}

结果

some(和every(

some( 方法

some( 方法用来检测数组中是否有至少一个元素满足指定条件。当任意一个元素满足条件，则该方法返回 true；否则，返回 false。

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.some(function(element {
  return element > 10;
};

console.log(hasLargeNumber;

结果
很显然只要有一个结果满足了大于10的条件就返回了true

every( 方法

例子

const numbers = [2, 4, 6, 8, 12];
const hasLargeNumber = numbers.every(function(element {
  return element > 10;
};

console.log(hasLargeNumber;

结果
很显然只要有一个结果不满足大于10的条件就返回了false 和some方法相反

reduce( 和 reduceRight(

它们可以帮助您迭代和聚合数组中的元素

reduce( 方法

const numbers = [1, 2, 3, 4, 5];
//accumulator： 表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。
const sum = numbers.reduce(function(accumulator, currentValue {
  console.log(accumulator,currentValue
  return accumulator + currentValue;
}, 0;

console.log(sum

结果
accumulator：表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。

reduceRight( 方法

const numbers = [1, 2, 3, 4, 5];
//accumulator： 表示当前已经累积的值初始值是0 currentValue 表示当前正在被遍历的数组元素。
const sum = numbers.reduceRight(function(accumulator, currentValue {
  console.log(accumulator,currentValue
  return accumulator + currentValue;
}, 0;

console.log(sum

结果
本文地址： https://www.cnblogs.com/zichliang/p/17412968.html

编程笔记 » Javascript 常见的循环方式总结