ES6笔记 11.Symbol、iterator、forOf、typeArray

扩展运算符

var obj = { a: 1, b: 2, c: 3 };
var obj1 = { a: 3, d: 5, e: 6 };

var obj2 = { ...obj1, ...obj };
// 相当于 Object.assign(obj2, obj, obj1);
console.log(obj2);

迭代器

一种有序的、连续的、基于拉取的一种消耗数据的组织方式。

let arr = [1, 2, 3, 4];
console.log(arr);
[1, 2, 3, 4];

// 访问数组上的 Symbol.iterator 方法
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: undefined, done: true}

实现迭代器

function makeIterator(array) {
  // 初始值
  var nextIndex = 0;
  return {
    // 返回一个函数
    next: function () {
      // 如果指针小于长度，那么就继续迭代
      return nextIndex < array.length
        // 调用一次加一次
        ? { value: array[nextIndex++], done: false }
        : { value: undefined, done: true };
    },
  };
}

var it = makeIterator([1, 2, 3, 4]);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

TypeArray

用来处理二进制数据的类型数组，但它不是类数组

声明这种数据的原型是 TypedArray

// 八进制数据
const tArray = new Int8Array(8);
tArray[0] = 100;
console.log(tArray);

for…of

for…of 遍历实际上是一种迭代方法,底层实际调用的是 iterator 接口，实际上就是为了统一部署 iterator 接口的数据类型迭代的方式

1. 利用 for…of 进行迭代实现 iterator 接口的数据类型

// 数组
let arr = [1, 2, 3, 4];
for (let val of arr) {
  console.log(val); // 1 2 3 4
}

// 类数组
function fn() {
  for (var val of arguments) {
    console.log(val); // 1 2 3 4 5
  }
}
fn(1, 2, 3, 4, 5);

2. 利用 iterator 实现 for…of 迭代对象

由于 for…of 底层实现的是 iterator 接口，所以原生的对象并没有实现 iterator 接口，所以无法利用 for…of 迭代

自定义对象，实现 iterator 接口，进行 for…of 迭代

let obj = {
  a: [2, 4, 5],
  b: [3],
  c: [1, 7],
  [Symbol.iterator]() {
    let index = 0;
    let arr = [];
    for (let key in this) {
      arr.push(...obj[key]);
    }
    let len = arr.length;
    return {
      next() {
        if (index < len) {
          return {
            value: arr[index++],
            done: false,
          };
        } else {
          return {
            value: undefined,
            done: true,
          };
        }
      },
    };
  },
};

// 使用 for of 迭代器
for (let i of obj) {
  console.log(i); // 2 4 5 3 1 7
}

// 直接使用迭代器
let iter = obj[Symbol.iterator]();
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: 5, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 7, done: false}
console.log(iter.next()); // {value: undefined, done: true}

// 使用扩展运算符 ...
console.log([...obj]); // [2, 4, 5, 3, 1, 7]

for…of 与 for…in 迭代结果的区别

1. for…of 是通过 iterator（迭代器）底层的操作进行迭代，获取的是可迭代对象的值，并不会受可迭代对象属性是否可枚举（enumerable：false）的影响,for…of 并不能迭代到继承的属性值
2. for…in 是通过 in 关键字的操作进行枚举，获取的是可遍历对象的键值（key），会受可枚举对象属性是否可枚举（enumerable：false）的影响,for…in 可以枚举到继承的属性值，因为这是基于 in 操作符的功能进行处理的