JavaScript循环整理 | 七日打卡

范小饭
1,441 阅读4分钟

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

6、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，举例来说：

var myObject = {
  name:'luckfine',
  age:'18'
}
Object.defineProperty(myObject,Symbol.iterator,{
  enumerable:false,
  writable:false,
  configurable:true,
  value:function(){
    var o = this;
    var index = 0;
    var ks = Object.keys(o);
    return {
      next:function(){
        return {
          value:o[ks[index++]],
          done:(index > ks.length)          
        }
      }
    }
  }
})

// 手动遍历myObject
var it = myObject[Symbol.iterator]()
console.log(it.next()) // {value: "luckfine", done: false}
console.log(it.next()) // {value: "18", done: false}
console.log(it.next()) // {value: undefined, done: true}

// 用for of遍历
for(var v of myObject){
  console.log(v)
}
// luckfine
// 18
avatar
文章
阅读
粉丝