The array conversion tool arrify has only a dozen lines of source code. Learn it quickly.

Preface

I used arrifythe tool in the project a few days ago, and I read arrifythe source code today. The entire source code is only a dozen lines long, and it is not difficult, so I would like to share my reading experience.

Introduction to arrify

What arrify is and what it does, some friends may not know yet. To understand it simply, it is an array conversion tool. Officially, it converts any passed in value into an array.

Let’s install arrify first .

npm install arrify

In this way we can officially introduce the tool into the project.

import arrify from 'arrify';

Source code introduction

Below is the source code part.

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];
}

The source code is very simple, only a dozen lines. Four judgments are made in it if. The first three judgments are easy to understand. In the fourth judgment, an iterator judgment is added. If the incoming parameter is an iterable object, the spread operator is used to convert it into an array. To put it simply, it solves many types of checks and ...deconstructs them.

arrify use

I create an empty project, write the arrify source code, and print the value in the background, as shown below.

// 源码部分
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;

By observing the background, the results are as follows:

In addition, the order of judgments in the source code cannot be changed at will. If we change the iforder of judgments and move the iterator judgments to the front, the results will be different.

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];
}

The final print result is as follows:

Introduction to Symbol.iterator

Symbol.iterator defines a default iterator for each object. This iterator can be used by for...of... loops. We can refer to the relevant documentation to customize the following iterator.

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

Summarize

Arrify is summarized as follows:

First, if the parameter is an array, return the original parameter directly; if the parameter is stringa type, return it [value]; if the parameter is nullor , undefinedreturn it []; if the parameter is an iterable object, use the spread operator ...to convert it to an array.
Secondly, many types of judgments are cleverly solved through iterator judgments in the source code.
Finally, the order of judgment in the source code cannot be changed at will, otherwise the expected effect will not be achieved.

at last

Recently, I compiled a note on JavaScript and ES, with a total of 25 important knowledge points, each of which was explained and analyzed. It can help you quickly master JavaScript and ES related knowledge and improve work efficiency.

Friends in need can click on the card below to receive it and share it for free