La herramienta de conversión de matrices Arrify tiene solo una docena de líneas de código fuente. Aprenda rápidamente.

Prefacio

Utilicé arrifyla herramienta en el proyecto hace unos días y hoy leí arrifyel código fuente. El código fuente completo tiene solo una docena de líneas y no es difícil, así que me gustaría compartir mi experiencia de lectura.

Introducción a Arrify

Es posible que algunos amigos aún no sepan qué es Arrify y qué hace. Para entenderlo simplemente, es una herramienta de conversión de matrices. Oficialmente, convierte cualquier valor pasado en una matriz.

Primero instalemos Arrify .

npm install arrify 

De esta forma podremos introducir oficialmente la herramienta en el proyecto.

import arrify from 'arrify'; 

Introducción al código fuente

A continuación se muestra la parte del código fuente.

export default function arrify(value) {
 if (value === null || value === undefined) {return [];
 }

 if (Array.isArray(value)) {return value;
 }

 if (typeof value === 'string') {return [value];
 }

 if (typeof value[Symbol.iterator] === 'function') {return [...value];
 }

 return [value];
} 

El código fuente es muy simple, sólo una docena de líneas. En él se realizan cuatro juicios if. Los primeros tres juicios son fáciles de entender. En el cuarto juicio, se agrega un juicio de iterador. Si el parámetro entrante es un objeto iterable, se utiliza el operador de extensión para convertirlo en una matriz. En pocas palabras, resuelve muchos tipos de controles y ...los deconstruye.

uso arrificado

Creo un proyecto vacío, escribo el código fuente de Arrify e imprimo el valor en segundo plano, como se muestra a continuación.

// 源码部分
function arrify(value) {
	if (value === null || value === undefined) {
		return [];
	}

	if (Array.isArray(value)) {
		return value;
	}

	if (typeof value === 'string') {
		return [value];
	}

	if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	return [value];
}
// 打印值
console.log(arrify('abc'));
console.log(arrify('[a,b,c]'));
console.log(arrify(null));
console.log(arrify(undefined));
console.log(arrify(new Set('[a,b,c]')));

function App() {return (<div></div>);
}
export default App; 

Al observar el fondo, los resultados son los siguientes:

Además, el orden de los juicios en el código fuente no se puede cambiar a voluntad. Si cambiamos el iforden de los juicios y movemos los juicios del iterador al frente, los resultados serán diferentes.

function arrify(value) {
	if (value === null || value === undefined) {
		return [];
	}

	if (Array.isArray(value)) {
		return value;
	}// 调换顺序if (typeof value[Symbol.iterator] === 'function') {
		return [...value];
	}

	if (typeof value === 'string') {
		return [value];
	}

	return [value];
} 

El resultado final de la impresión es el siguiente:

Introducción a Symbol.iterator

Symbol.iterator define un iterador predeterminado para cada objeto. Este iterador puede ser utilizado por bucles for...of.... Podemos consultar la documentación relevante para personalizar el siguiente iterador.

var myIterable = {}
myIterable[Symbol.iterator] = function* () {yield 1;yield 2;yield 3;
};
[...myIterable] 
// 输出[1, 2, 3] 

Resumir

Arrify se resume de la siguiente manera:

• Primero, si el parámetro es una matriz, devuelva el parámetro original directamente; si el parámetro es stringun tipo, devuélvalo [value]; si el parámetro es nullo , undefineddevuélvalo []; si el parámetro es un objeto iterable, use el operador de extensión ...para convertirlo a una matriz.
• En segundo lugar, muchos tipos de juicios se resuelven inteligentemente mediante juicios de iteradores en el código fuente.
• Finalmente, el orden de juicio en el código fuente no se puede cambiar a voluntad, de lo contrario no se logrará el efecto esperado.

por fin

Recientemente, compilé una nota sobre JavaScript y ES, con un total de 25 puntos de conocimiento importantes, cada uno de los cuales fue explicado y analizado. Puede ayudarlo a dominar rápidamente los conocimientos relacionados con JavaScript y ES y mejorar la eficiencia del trabajo.

Los amigos necesitados pueden hacer clic en la tarjeta a continuación para recibirla y compartirla gratis.