JavaScript中的循环大集合

循环组数

1、for循环

for是最常用的循环，主要用来循环数组

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

2、Array.forEach()

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

callback为数组中每个元素执行的函数，该函数接收三个参数，currentValue（数组中正在处理的当前元素），index（数组中正在处理的当前元素的索引），array（forEach() 方法正在操作的数组）

thisArg为当执行回调函数 callback 时，用作 this 的值。

let arr = [1, 2,  , 3]
let arrCopy1 = []
arr.map((item, index, arr) => {
     arrCopy1.push(item * 2)
})
console.log(arrCopy1)
// [2, 4, 6]

  • forEach() 为每个数组元素执行一次 callback 函数

  • 那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）

  • 与map()和reduce()不同的是，它没有返回值，总是返回undefind。

  • forEach()除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

3、Array.map()

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

callback为生成新数组元素的函数，该函数接收三个参数，currentValue（数组中正在处理的当前元素），index（数组中正在处理的当前元素的索引），array（map() 方法正在操作的数组）

thisArg为当执行回调函数 callback 时，用作 this 的值。

let arr = [1, 2,  , 3]
let arrCopy2 = []
arrCopy2 = arr.map((item, index, arr) => {
     return item * 2
})
console.log(arrCopy2)
// [2, 4, empty, 6]
  • map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。
  • map生成一个新数组，当你不打算使用返回的新数组却使用map是违背设计初衷的，请用forEach或for-of替代。
  • map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）
  • 如果被map调用的数组是离散的，新数组将也是离散的保持相同的索引为空

4、Array.every()

语法：arr.every(callback[, thisArg])

callback用来测试每个元素的函数，它可以接收三个参数，element表示用于测试的当前值，index表示用于测试的当前值的索引，array表示调用 every 的当前数组

thisArg表示执行 callback 时使用的 this 值

let arr = [1, 2, , 3]
let boo = arr.every((item) => {
     return item > 0
})
console.log(boo)
// true
  • every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 falsy的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用
  • every 不会改变原数组
  • every 和数学中的"所有"类似，当所有的元素都符合条件才会返回true。正因如此，若传入一个空数组，无论如何都会返回 true

5、Array.some()

语法：arr.some(callback(element[, index[, array]])[, thisArg])

callback用来测试每个元素的函数，接受三个参数，element（数组中正在处理的元素），index（数组中正在处理的元素的索引值），array（some()被调用的数组）

thisArg执行 callback 时使用的 this 值

    let arr = [1, 2, , 3]
    let boo = arr.some((item) => {
        return item > 2
    })
    console.log(arr)
    console.log(boo)

  • some() 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用

  • some() 被调用时不会改变数组。

  • 如果用一个空数组进行测试，在任何情况下它返回的都是false

7、Array.reduce()

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数、
accumulator：上一次调用回调时返回的累积值、
currentValue：数组中正在处理的元素、
index：数组中正在处理的当前元素的索引、 如果提供了initialValue，则起始索引号为0，否则从索引1起始）
array：调用reduce()的数组

initialValue：作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错

    var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
    var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
        if (accumulator.indexOf(currentValue) === -1) {
            accumulator.push(currentValue);
        }
        return accumulator
    }, [])

    console.log(myOrderedArray); // [a,b,c,e,d]
  • reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素
  • 回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值

Array.reduceRight() 与 Array.reduce() 差不多，只是为从右向左遍历

7、while

while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环

示例：

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// expected output: 3

注：使用break语句在condition计算结果为真之前停止循环

8、do...while

do...while 语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次

示例：

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

9、for...in

for..in循环可以用来遍历对象的可枚举属性列表（包括[[Prototype]]链）

主要用于遍历对象，通过属性列表可以获取属性值

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

10、for...of

for..of循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的next()方法来遍历所有返回值。

数组有内置的@@iterator，因此for..of可以直接应用在数组上。

let arr = [1, 2, 3]
let it = arr[Symbol.iterator]();
it.next()  // {value: 1, done: false}
it.next()  // {value: 2, done: false}
it.next()  // {value: 3, done: false}
it.next()  // {value: undefined, done: true}

和数组不同，普通对象是没有内置的@@iterator，所以无法自动完成for..of遍历。所以针对对象不要使用for...of。

当然，你可以给任何想遍历的对象定义@@iterator，举例来说：


image.png

这个迭代器会生成‘无限个’随机数，因为我们添加了一条break语句，防止程序被挂起。

image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容