配列変換ツール arrify のソースコードはわずか十数行なので、すぐに習得できます。

序文

arrify数日前にプロジェクトでこのツールを使用しarrify、今日ソースコードを読んでみましたが、ソースコード全体の長さはわずか十数行で、それほど難しいものではなかったので、読んだ経験を共有したいと思います。

恐怖の紹介

arrifyとは何か、そしてそれが何をするのか、まだ知らない友人もいるかもしれません。簡単に理解すると配列変換ツールです。公式には、渡された値を配列に変換します。

まずはarrifyをインストールしましょう。

npm install arrify

このようにして、ツールをプロジェクトに正式に導入できます。

import arrify from 'arrify';

ソースコードの紹介

以下はソースコード部分です。

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

ソースコードは非常にシンプルで、わずか十数行です。その中で 4 つの判定が行われますif。最初の 3 つの判定は理解しやすいです。4 番目の判定では、反復子の判定が追加されます。入力されたパラメータが反復可能なオブジェクトの場合、スプレッド演算子を使用して配列に変換されます。簡単に言うと、さまざまな種類のチェックを解決し、...それらを分解します。

使用を確認します

以下に示すように、空のプロジェクトを作成し、arrifyソースコードを記述して、バックグラウンドで値を出力します。

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

背景を観察すると、次のような結果が得られます。

また、ソースコード中の判定順序は任意に変更することはできませんので、if判定順序を変更してイテレータの判定を前に移動すると結果が異なります。

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

最終的な印刷結果は次のようになります。

Symbol.iterator の概要

Symbol.iterator は、各オブジェクトのデフォルトのイテレータを定義します。このイテレータはfor...of...ループで使用できます。関連するドキュメントを参照して、次のイテレータをカスタマイズできます。

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

要約する

Arrify を要約すると次のようになります。

まず、パラメータが配列の場合は、元のパラメータを直接返します。パラメータがstring型の場合は、それを返します[value]。パラメータがnullorの場合は、それをundefined返します[]。パラメータが反復可能なオブジェクトの場合は、スプレッド演算子を使用して...それを変換します。配列。
第二に、多くの種類の判断は、ソースコード内の反復子の判断を通じて巧みに解決されます。
最後に、ソースコード内の判定順序を任意に変更することはできず、そうしないと期待した効果が得られません。

やっと

最近、JavaScriptとESに関する重要な知識を合計25個、それぞれ解説・分析したnoteをまとめました。JavaScriptやES関連の知識を素早く習得し、作業効率を向上させることができます。

必要な友達は下のカードをクリックして受け取り、無料で共有できます