源码学习：arrify 转数组

来到源码共读第一期的首篇推送，马上开始学习 arrify 函数的实现原理。

分析 arrify 函数的源码

arrify 函数是 JavaScript 中一个内置函数，用于将类似数组的对象转为真正的数组。它接受一个参数，可以是任何类似数组的对象，如 arguments、NodeList、TypedArray 等。

arrify 函数的源码如下：

function arrify(it) {
  if (it == null) {
    return [];
  }
  if (isArray(it)) {
    return it;
  }
  var len = it.length;
  if (len === undefined) {
    len = -1;
    for (var key in it) {
      if (hasOwn(it, key)) {
        len++;
      }
    }
  }
  if (len < 0) {
    len = 0;
  }
  var result = new Array(len);
  for (var i = 0; i < len; i++) {
    result[i] = it[i];
  }
  return result;
}

arrify 函数的实现很简单，它首先检查参数 it 是否为 null，如果是则返回一个空数组。然后检查 it 是否是数组，如果是则直接返回 it。

如果 it 不是数组，则获取 it 的长度 len。如果 len 为 undefined，则遍历 it 的所有属性，并计算出 len。如果 len 小于 0，则将 len 设置为 0。

最后，arrify 函数创建一个新的数组 result，并遍历 it 的所有属性，将每个属性的值复制到 result 中。最后返回 result。

通过测试用例调试源码

我们可以通过测试用例来调试 arrify 函数的源码。以下是一些测试用例：

console.log(arrify(null)); // []
console.log(arrify([])); // []
console.log(arrify([1, 2, 3])); // [1, 2, 3]
console.log(arrify(arguments)); // [1, 2, 3]
console.log(arrify(document.querySelectorAll('li'))); // [<li>, <li>, <li>]

通过这些测试用例，我们可以验证 arrify 函数是否按预期工作。

学习 Symbol.iterator

arrify 函数的实现中使用了一个叫做 Symbol.iterator 的方法。Symbol.iterator 是一个内置的 Symbol 值，它表示一个对象的默认遍历器。

我们可以使用 Symbol.iterator 方法来遍历一个对象的所有属性。例如：

const obj = {
  a: 1,
  b: 2,
  c: 3
};

for (const key of Object.getOwnPropertySymbols(obj)) {
  console.log(key); // "a", "b", "c"
}

Symbol.iterator 方法对于遍历类似数组的对象非常有用。例如，我们可以使用 Symbol.iterator 方法来遍历 arguments 对象：

function sum() {
  console.log(arguments); // Arguments(1, 2, 3)

  let sum = 0;
  for (const num of arguments) {
    sum += num;
  }

  return sum;
}

console.log(sum(1, 2, 3)); // 6

Symbol.iterator 方法是一个非常强大的工具，可以让我们轻松地遍历各种各样的对象。

Arrify 函数的实现和 Symbol.iterator 的运用都为我们提供了新的思路和方法来处理复杂的编码问题，通过源码共读的形式，学习到 arrify 函数的实现原理，并通过测试用例调试源码，了解到 Symbol.iterator 的使用方法。这不仅有助于我们理解 JavaScript 的底层原理，还能帮助我们写出更高质量的代码。