循环操作

 

js  循环方法

let arr = [{a:1},{a:2},{a:3},{a:4},{a:5}];

  // 1.while循环
  let sum = 0;
  let num = 1;
  while(num <= 1){
    if (num === 5) {
      num++;
      continue // containue必须写在++后面,否则会进入死循环,因为在while中continue之后,是执行条件判断
      // break // 支持break
    }
    sum += num;
    num++;
  }
  // 注:也可用于循环dom
  
  // 2.do {} while()

  let a = 0;
  let b = 1;
  do{
    b += a;
    a++;
    // 支持continue/break
  }while(a <= 100)
  // 注:先执行do里面的代码块再判断条件,若满足,则继续执行代码块,否则终止循环,
  
  // 3.for

  for(let item =0;item<arr.length;item++){
    if(item === 3){
      // 支持break/continue;
    }
  }
  
  // 4.for in

  for(let item in arr){ // item为key
    if(item === 3){
      // 支持break/continue;
    }
  }
  // 注:for in主要用于遍历对象属性

  // 5.for of

   for(let item of arr){ // item为value
     if(item.a === 3){
       item.a = 9   // 数组内变量为引用类型，遍历所得即为对应项的引用地址
       // 支持break/continue;
     }
   }
  // 注:只能用于遍历字符串/数组/类数组对象(NodeList)
  
  // 6.forEach

  arr.forEach(function(item, index, arr){
    if(item.a === 2){
      item.a = 8;    //数组内变量为引用类型，遍历参数即为对应项的引用地址
      // return      //跳过本次循环，即return本次遍历函数
    }
  }, arr3); // arr3 为可选参数,函数体内可通过this访问
  // 注: forEach无返回值,无法跳出循环，可采用将forEach放入try{},catch{},手动抛出异常的方式
  
  // 7.filter(item, index, arr)
  
  // 无法跳出循环,用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
  [1, 2, 3, 4, 5].filter(function (elem) {
    return (elem > 3);
  }) // [4, 5]

  let array = [0, 1, 'a', false];
  array.filter(Boolean) // [1, "a"]

  // filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。
  let obj = { MAX: 3 };
  let myFilter = function (item) {
    if (item > this.MAX) return true;
  };
  let arr2 = [2, 8, 3, 4, 1, 3, 2, 9];
  arr2.filter(myFilter, obj) // [8, 4, 9]

  // 8.some()，every()
    
  // 这两个方法返回一个布尔值，表示判断数组成员是否符合某种条件。
  // 它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。
  // some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false
  // every方法则相反，所有成员的返回值都是true，整个every方法才返回true，否则返回false。
    [1, 2, 3, 4, 5].every(function (elem, index, arr) {
      return elem >= 3;
    }) // false

  // 9.reduce()，reduceRight()
    
  // reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），
  // reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

    [1, 2, 3, 4].reduce(function (a, b, c, d) { //a:累计变量,b:当前变量 c, d为可选参数,分别表示当前位置和原数组
      console.log(a, b); // 分别为:1,2 | 3,3 | 6,4
      return a + b;
    }, total) // total 为可选参数,表示初始累计值,最后结果为total + 数组累计值

  // 10.map()
  
  // 无法跳出循环,返回一个新数组,第一个参数为函数,第二个参数可选,用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数。
  let arr3 = ['a', 'b', 'c'];
  [1, 2].map(function (item, index, arr) {
    return this[item];
  }, arr3) // 返回['b', 'c']