arrify源码解析 - 从类数组到数组的完美转换

2024-02-20 01:20:16

在JavaScript中，我们经常遇到需要将类数组对象转换为数组的情况。例如，从document.querySelectorAll()方法返回的NodeList对象就是一个类数组对象。而Array.from()方法提供了将类数组对象转换为数组的便捷方式。

arrify库提供了一个更灵活的解决方案，它可以将任何可迭代对象（包括类数组对象和字符串）转换为数组。本期源码学习将深入探究arrify的内部机制，了解它如何将各种类型的值转换为数组。

import { arrify } from 'arrify';

// 将 NodeList 对象转换为数组
const nodes = document.querySelectorAll('p');
const nodesArray = arrify(nodes);

// 将字符串转换为数组（每个字符一个元素）
const str = 'Hello World';
const strArray = arrify(str);

// 将可迭代对象（例如 Set）转换为数组
const set = new Set([1, 2, 3]);
const setArray = arrify(set);

arrify库的实现相对简单，它通过判断输入值的类型来决定使用哪种转换方法：

export function arrify(value) {
  if (Array.isArray(value)) {
    return value;
  } else if (value && typeof value.length === 'number') {
    return Array.from(value);
  } else if (typeof value === 'string') {
    return value.split('');
  } else {
    return [value];
  }
}

对于类数组对象（例如NodeList），arrify使用Array.from()方法将其转换为数组。对于可迭代对象（例如Set），arrify直接对其进行展开（spread）操作，将其转换为数组。对于字符串，arrify使用split('')方法将其分割为单个字符数组。对于非类数组对象和非可迭代对象，arrify将其包装为一个单元素数组。

通过测试用例调试代码

为了确保arrify的正确性，我们可以使用测试用例来调试其代码：

import { arrify } from 'arrify';

test('converts NodeList to array', () => {
  const nodes = document.querySelectorAll('p');
  const nodesArray = arrify(nodes);
  expect(Array.isArray(nodesArray)).toBe(true);
});

test('converts Set to array', () => {
  const set = new Set([1, 2, 3]);
  const setArray = arrify(set);
  expect(Array.isArray(setArray)).toBe(true);
});

test('converts string to array', () => {
  const str = 'Hello World';
  const strArray = arrify(str);
  expect(Array.isArray(strArray)).toBe(true);
});