Date成分値を数値配列で取得する方法の選択肢を知りたい

Question

Dateオブジェクトから成分値(年~ミリ秒)を数値配列として取得する場合、1つずつ取得する方法しか思いつきません。Dateのメソッドはまだ理解が及んでいない部分も残っているため、実際にはより適切な方法があるのではないかと疑っています。 これは現在、数値配列で成分値を取得するという目標を達成するための最良かつ唯一の方法ですか？

const date = new Date();
const array =[date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()];

Comments

[yambejp]

date.getMonth()でよいのですか？
0月から始まる数値ですが・・・

[3_April_2021]

はい、問題ありません。

[3_April_2021]

いただいた回答や回答後の新たな調査を踏まえると、質問メソッドの使用を避けたい場合は、文字列や文字列を追加した形式への変換を介することは避けがたいようですね。どちらの方のコードも参考になりましたが、見た目だけではどちらが良いか判別しかねたので、処理時間でベストアンサーを判断することにします。もう少しお待ちください。

[3_April_2021]

suwmn50799ユーザーのDateTimeFormat（イテラブルも方法として参考になったのですが内部で行われていることは実質的に同じなので今回は省かせていただきました）およびyambejpユーザーの2つのコードと比較しました。 計測方法に関して厳密な方法まで調べようとすると締め切りに時間がかかりそうだったので、計測に関しては少し調べた範囲の非常に簡単な試験しか行っていないことを強調したいと思います。

Answer 1

問題点が具体化されていない

const date = new Date();
const array =[date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()];

このコードの問題点が具体化されていないのが、本質問の問題と感じています。
私の見立てでは問題点が見当たりませんが、何が問題なのでしょうか。

Dateのメソッドはまだ理解が及んでいない部分も残っているため、実際にはより適切な方法があるのではないかと疑っています。

問題点を洗い出してから質問をするのがよいと思います。
ないかもしれない問題点を回答者が洗い出すのは難儀な作業依頼(リファクタリング依頼)になります。

XY問題

これは現在、数値配列で成分値を取得するという目標を達成するための最良かつ唯一の方法ですか？

最適解を得るには「上位の目的」を明らかにする必要があります。

• XY問題 - Wikipedia

X(Dateオブジェクトから成分値(年~ミリ秒)を数値配列として取得する)は判明していますが、Yが判明していないので回答不可能になっています。

Y

例えば、「new Date をシリアライズする(Y)」の為に「Dateオブジェクトから成分値(年~ミリ秒)を数値配列として取得する(X)」を実装したいとします。

const Date2 = {
  stringify: date => [date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()],
  parse: dateData => new Date(...dateData)
};

const dateData = Date2.stringify(new Date(2021,8,10,15,30,0,0)); // [2021, 8, 10, 15, 30, 0, 0]
console.log(dateData);              // [2021, 8, 10, 15, 30, 0, 0]
console.log(Date2.parse(dateData)); // Fri Sep 10 2021 15:30:00 GMT+0900 (日本標準時)

一見、正常動作しているように見えますが、new Date はブラウザのロケールを元にタイムゾーンを設定する為、「Date2.stringify() 実行時のロケール」と「Date2.parse() 実行時のロケール」が不一致の場合に期待通りに復元できません。

---

私が考える最もスマートな方法は、ISO 8601形式でシリアライズすることです。

const input = '2021-09-10T06:41:16.081Z';
const output = new Date(input).toISOString();
console.log(input === output); // true

Re: 3_April_2021 さん

Comments

[think49]

回答を書いた時点で終わっていましたが、書いたものは投下しておきます。

Answer 2

自分で書かないですでにある便利グッズを利用するというスタンスもありでっか？ ええんやったら、Dayjs に toArrayプラグインを追加すればいけまっせ。

const now = new Date();

const arr = dayjs(now).toArray();

console.log(arr); // => [2021,8,8,18,40,33,301]

➡ サンプル

補足(Dateをイテラブルにしてまう）：

自分で書く案、一個挙げときます。もし頻繁にDateオブジェクトからその配列にする場合があるんやったら、いっそDateをイテラブルに拡張してしまって、スプレッド構文でバラせるようにしとけば？

ゆうて、こない

Date.prototype[Symbol.iterator] = function* () {
    yield* [
      this.getFullYear(),
      this.getMonth(),
      this.getDate(),
      this.getHours(),
      this.getMinutes(),
      this.getSeconds(),
      this.getMilliseconds()
    ];
}

な仕込みしといてからの

const d = new Date('2021-09-08T19:12:34.567');

const arr = [...d];

console.log(arr); // => [2021,8,8,19,12,34,567]

for (let x of d) {
  console.log(x); // => 2021,8,8,19,12,34,567 が順に出力される
}

みたいな。 ➡ サンプル

補足(Intl.DateTimeFormat使うてみる)：

const date = new Date('2021-09-08T19:12:34.567');

const arr = new Intl.DateTimeFormat('ja-jp', {
                  year: 'numeric', month: 'numeric', day: 'numeric',
                  hour: 'numeric', minute: 'numeric', second: 'numeric', fractionalSecondDigits: 3
                })
                .formatToParts(date)
                .filter(({type}) => type !== 'literal')
                .map(({value}, i) => +value - (i==1));

console.log(arr); // => [2021,8,8,19,12,34,567]

➡ サンプル

Comments

[3_April_2021]

ありがとうございます。正直なところ、質問者自身はライブラリの情報を積極的に求めていません。ただ、この質問ページにとっては良い情報だと思います。 イテラブルはまだ調査や検証ができていませんが、見た感じでは活用できそうです。
DateTimeFormatの方法に関してですが、formatToParts()で作成された配列からfilterでtypeがliteralのオブジェクトを省いた配列を再作成し、その配列からmapで月で-1した配列を再作成で合っているでしょうか?{}と (i==1)の正体が掴めなかったため理解に自信がありません。

[退会済みユーザー]

> ・・・再作成で合っているでしょうか?

はい､合ってます。

> {}と (i==1)の正体が掴めなかったため理解に自信がありません。

1. {} について

({type}) だったり({value}のことでしょうか？これらは分割代入です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
の中の節「引数に指定されたオブジェクトの属性への参照」に説明があります。

2. (i==1)　について

.map(({value}, i) => +value - (i==1));
のところですが、もし、得たい配列の月を表す整数値が、月そのまま（つまり9月なら 9 ）でよければ、
- (i==1)
は不要で、
.map(({value}) => +value);
でよいです。（+valueの+は、文字列の数字を数値に変換してくれます。）
月の値のみ 1 を引くために、filter 後の配列の２番目の要素のvalue を整数に変換して 1 を引けばよいので、丁寧に書けば

.map(({value}, i) => i === 1 ? +value - 1 : +value);

ですが、これをはしょって、boolean が数式の中で、trueは1に、falseは0 に評価されることを利用して

.map(({value}, i) => +value - (i == 1));

としています。（読みやすいコードはどちらか？といえば、はしょらない方がいいです）

[3_April_2021]

丁寧にありがとうございます。 完全に理解できました。書いていなかった単項プラス演算子についても言及していただきありがとうございます。愚かな勘違いの存在に気付くのに時間がかかるところでした。
(formatToParts配列の中身まで確認していたにも関わらずnumeric部をnumberとみなしていました)

[3_April_2021]

ベストアンサーの選択については、質問への追記欄に書いた通りです、投稿すべきかも悩んだうえでしたような質問だったため回答もほとんど期待しておらず、複数の人から回答があったのは想定外でした。 後
になって急いで処理時間という基準を設定してしまい申し訳ありません。どちらの回答も私にはそれぞれ参考になる部分があったので、そのままでは比較することができませんでした。

[退会済みユーザー]

おおきに〜。かまへんでー。

Answer 3

文字列でうけてsplitしては？
(msは返ってこないので別途処理)

const date = new Date();
const ms=date.getMilliseconds();
const res=[...date.toLocaleString().split(/[/ :]/).map(x=>parseInt(x)),ms];
res[1]--;
console.log(res);

別解

const date = new Date();
const res=["FullYear","Month","Date","Hours","Minutes","Seconds","Milliseconds"].map(x=>Date.prototype[`get${x}`].call(date));
console.log(res);

Comments

[3_April_2021]

Dateの「まだ理解が及んでいない部分」に直撃しているため、検証のために次のアクションが遅れることをあらかじめお詫び申し上げます。 ありがとうございます。

[yambejp]

ゴミの行があったので削りました

[3_April_2021]

/[/ :]/の調査がまだできていないのは引っかかりますが*、おそらく理解したと思います。toLocaleStringで行われていることは確認しましたし、日時文字列からの変換自体は、他のJavaScriptベースの言語でもほぼ同じことを行ったことがあるので。
（*調べるべきものの察しはついていますが、理解するのに時間がかかりそうなので、保留にしました）

toLocaleStringについては、localesでより分割しやすい形式がないかどうか探していますが、いくつかの例を見る限り、そこにあまり希望はなさそうですね。

[yambejp]

ついでなので別解載せておきました
（効率的かといわれると微妙ですが）

[3_April_2021]

別解にも目を通し理解したことを報告します。 今の自分は思いつかなかった視点でした。 ありがとうございます。
（念の為に、処理時間は最良の回答を選択するために急ぎ用意した基準に過ぎないため、深く心配する必要はありません。）