7种数组遍历的方法

  1. forEach
    1. 普通的数组遍历方法
    2. 对ES3 for循环语句的优化
  2. map
    1. 映射
    2. 每一次遍历，返回一个数组元素
    3. 返回一个新的数组
  3. filter
    1. 过滤
    2. 每一次遍历返回bool来决定当前元素是否纳入新的数组中
  4. reduce
    1. 归纳
    2. 每一次遍历将当前元素收归到容器中
  5. reduceRight
    1. reduce反向操作
  6. every
    1. 判定是否所有元素都符合一个条件
  7. some
    1. 判定是否有某一个或多个元素符合一个条件

以上都底层都是基于 for循环 / while 语法来实现

遍历

一次性对数组中每一个元素进行查询和处理

迭代的过程

如果希望对于遍历的过程是可控的
手动的控制遍历流程

  • 遍历过程可停止
  • 也可以继续

例子

产品迭代

人为控制的产品升级与扩展，manual control

生成器

是一个函数 function *，生成迭代器的一个函数

迭代器

生成器函数执行后返回的一个带有next方法的对象
生成器对迭代的控制是由yield关键字来执行的

  1. function * generator(){
  2.     yield '姓名: xxx';
  3.   yield '年龄: 34';
  4.   yield '爱好: 旅游';
  5.   return '我爱Javascript';
  6. }
  8. const iterator = generator();

每次yield会产品一个迭代的对象，该对象包含了value和done两个属性

const arr = ['姓名: xxx', '年龄: 34', '爱好: 旅游'];
function * gen(){
    for(var i = 0; i < arr.length; i++){
      yield arr[i];
  }

  return '我爱Javascript';
}

yield * 产生可迭代对象

可以使用星号增加yield的行为，让它能够行代一个可迭代对象，从而一次产出一个值。

function* generatorFn() {
/*
  等价
  for (const x of [1, 2, 3]) {
     yield x;
  }
*/
  yield* [1, 2, 3];
}

let generatorObject = generatorFn();

for (const x of generatorFn()) {
  console.log(x);
}
// 1
// 2
// 3

手写生成器：生成迭代器

const arr = ['姓名: xxx', '年龄: 34', '爱好: 旅游'];
function gen(arr){

  var nextIndex = 0;

  return {
    next: function(){
        return nextIndex < arr.length ? 
        { value: arr[nextIndex++], done: false } : 
          { value: arr[nextIndex++], done: true }; 
      }
    }
  }
}

const iterator = gen(arr);