シーケンス ジェネレーターは、指定された開始値と終了値を持つシーケンスを生成し、指定された間隔の長さに基づいてシーケンス配列を生成します。
この関数を完了するには、Array 組み込みオブジェクトの from() オブジェクトと、配列のような関連知識が必要です。デモンストレーションに関連するケースは、前の記事にあります。
アドレス1：JavaScript組み込みオブジェクト - Array配列(2) - Method_覚醒マスターブログ-CSDNブログ
アドレス2: JavaScript組み込みオブジェクト - Array配列(3) - Custom ArrayList_Awakening Master's Blog-CSDN Blog
1. クラス配列
配列のようなオブジェクトは、インデックス プロパティを通じて要素にアクセスでき、長さプロパティを持つオブジェクトを指します。
配列のようなオブジェクトと配列の違いは、配列のようなオブジェクトは配列メソッドを直接呼び出すことができず、Function.call および Function.apply を通じて間接的に呼び出す必要があることです。
配列のようなオブジェクトは 0 から始まり、増加する整数をキーとして使用し、長さが要素の数を表すオブジェクトを定義します。これは配列のようなオブジェクトと呼ばれます。
クラス配列や Array.from() メソッドについては馴染みのない方も多いと思いますが、今回の事例を通じてその機能や利便性を理解していただければ幸いです。
例：
const objArr = {
0: "How",
1: "are",
2: "you",
length: 3
}2. from() メソッド
Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトから新しい配列を作成し、それを返します。from() メソッドの詳細については、「アドレス 1」を参照してください。ここで、クラス配列を新しい配列インスタンスに変換できることがわかります。例は次のとおりです。
const objArr = { 0: "How", 1: "are", 2: "you", length: 3 }
console.log(Array.from(objArr));出力は次のとおりです。
[ '元気ですか' ]
3. シーケンスジェネレーターの実装
3.1 指定した長さの配列を生成する
クラス配列を作成して長さを指定し、Array.from()メソッドで指定した長さの空の配列に変換し、ループで要素インクリメント関数を実装します。
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) => {
// 生成一个指定长度的空数组
let arr = Array.from({ length: (end - start) / step + 1 });
console.log(arr);
}
// 生成0~9元素的数组，每递增为1
generatorSequence(0, 9, 1);出力結果:
[
未定義、未
定義、未定義、未定義、未
定義、未定義、未定義
、未定義、
未定義、未定義
]
3.2 インクリメンタル関数の実装
Array.from() メソッドの 2 番目のパラメーターが指定されている場合、コールバック関数は新しい配列の各要素に対して実行されます。したがって、この機能を使用して、空の配列内のすべての未定義ループを値をシーケンス値にインクリメントすることができます。
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) => {
// 生成一个指定长度的空数组
// (_, i) 因为空数组，所以第一个参数 “_” 返回结果为undefined，第二个参数“i”为索引值
let arr = Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
console.log(arr);
}
// 生成0~9元素的数组，每递增为1
generatorSequence(0, 9, 1);出力結果:
[
0、1、2、3、4、5、6、7、8、9
]
_
この時点で、シーケンス ジェネレーターが実装されました。この関数は複雑ではありません。最適化してみましょう。コードは次のとおりです。
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成0~9元素的数组，每递增为1
const arr = generatorSequence(0, 5, 1);
// 输出结果
console.log(arr);出力結果:
[ 0、1、2、3、4、5 ]
3.3 偶数の生成
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成偶数
const arr = generatorSequence(0, 10, 2);
// 输出结果
console.log(arr);出力結果:
[ 0、2、4、6、8、10 ]
3.4 作成年
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成0~9元素的数组，每递增为1
const arr = generatorSequence(2010, 2023, 1);
// 输出结果
console.log(arr);出力結果:
[
2010年、2011年、2012年
、2013年、2014年、
2015年、2016年、2017年、
2018年、2019年、2020年、2021年、
2022年、2023年
]
3.5 年をオブジェクトに変換する
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成0~9元素的数组，每递增为1
const arr = generatorSequence(2010, 2023, 1).map(item => {
return {
label: item,
value: item
}
});
// 输出结果
console.log(arr);出力結果:
[
{ ラベル: 2010, 値: 2010 },
{ ラベル: 2011, 値: 2011 },
{ ラベル: 2012, 値: 2012 },
{ ラベル: 2013, 値: 2013 },
{ ラベル: 2014, 値: 2014 } 、
{ ラベル: 2015、値: 2015 }、
{ ラベル: 2016、値: 2016 }、{
ラベル: 2017、値: 2017 }、
{ ラベル: 2018、値: 2018 }、
{ ラベル: 2019、値: 2019 } 、
{ ラベル: 2020、値: 2020 }、
{ ラベル: 2021、値: 2021 }、
{ ラベル: 2022、値: 2022 }、
{ ラベル: 2023、値: 2023 }
]
3.6 A~Z の文字を生成する
ここでは charCodeAt() メソッドを使用します。これは、特定の文字の Unicode 値を取得するために使用される文字列メソッドです。A ～ Z の間の Unicode コードを生成する場合は、fromCharCode() メソッドを使用する必要があります。このメソッドも文字列メソッドであり、Unicode コードを文字に変換するために使用されます。
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1);
// 输出结果
console.log(arr);出力結果:
[
65、66、67、68、69、70、71、72、73、74、75、76、77、78、79、80、81、82、83、84、85、86、87、88、89
_
_
_ 、90
]
上記はすべて Unicode コードなので、シーケンス配列を生成した後、Array.map() メソッドを使用してすべての値を文字に変換できます。
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1)
.map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);出力結果:
[
'A'、'B'、'C'、'D'、'E'、'F'、'G'、'
H'、'I'、'J'、'K'、'L'、
' M'、'N'、'O'、'P'、'Q'、'R'、'S'、'T'、'U
'、'V'、'W'、'X'、
'Y' 、「Z」
]
3.7 漢字生成
文字も生成できるので、漢字も生成できます。ただし、Unicode は中国語の文字を十分にサポートしていません。簡体字と繁体字の中国語の文字は合計 60,000 ～ 70,000 個あり、UCS-2 は最大 65,536 個まで表現できるため、Unicode はめったに使用されない一部の中国語文字しか除外できません。
例：
/**
* 序列生成器
*/
const generatorSequence = (start, end, step) =>
Array.from(
{ length: (end - start) / step + 1 },
(_, i) => start + (i * step)
);
// 生成汉字
const arr = generatorSequence('一'.charCodeAt(0), '二'.charCodeAt(0), 1)
.map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);出力結果:
[
'一'、'丁'、'丂'、'七'、'丄'、'丅'、'丆'、'万'、'张'、'三'、'上'、'下'、
' 「丏」、「不」、「和」、「丏」、「乞食」、「醜」、「丒」、「Zhuan」、「Qi」、「Pi」、「世」、「丗」、「Qiu
」 、'bing'、'ye'、'cong'、'dong'、'si'、'cheng'、'die'、'丠'、'両'、'die'、'丣'、'two'、
'ヤン、ビン、サン、丨、丩、ゲ、丫、丬、中、丮、丯、フォン、
丱、「チュアン」、「丳」、「リン」、「丵」、「丶」、「丷」、「ワン」、「ダン」、「魏」、「朱」、
'丼'、'丽'、'ジュ'、'丿'、'乀'、'乁'、'乂'、'ナイ'、'乄'、'ジウ'、'乆'、'乇'、'灹
' '、'Yi'、'乊'、'Zhi'、'Wu'、'Zha'、'Hu'、'Wu'、'Le'、'乑'、'Ping'、'Pong'、'Qiao'
、「乕」、「グアイ」、「成」、「成」、「イー」、「乚」、「乛」、「乜」、「九」、「乞」、「イェ」、「シ」、「」 xiang
' '、'乢'、'乣'、
... 41 個のアイテム
]'Wu'、'Zha'、'Hu'、'Wu'、'Le'、'乑'、'Ping'、'Pong '、'Qiao'、'乕'、'Guai'、'成'、'成'、'yi'、'乚'、'乛'、'乜'、'九'、'beg'、'ye'、'xi'、'xiang'、'乢'、'乣'、... 41その他のアイテム]'Wu'、'Zha'、'Hu'、'Wu'、'Le'、'乑'、'Ping'、'Pong '、'Qiao'、'乕'、'Guai'、'成'、'成'、'yi'、'乚'、'乛'、'乜'、'九'、'beg'、'ye'、'xi'、'xiang'、'乢'、'乣'、... 41その他のアイテム]
ここではシーケンスジェネレータの関連機能をひとまず紹介しますので、皆様のお役に立てれば幸いです。