角括弧[]内のキーと値のペアはどういう意味ですか?

20
mkHun 2019-05-18 07:10.

以下が私の目的であると考えてみましょう:

var n = {"aa":"x","dd":'d'};

で角かっこを使用していObject.assignます。次のような結果になります。[aa: "x", dd: "d"]。最終的なコードは次のとおりです。

var n = {"aa":"x","dd":'d'};
var m = Object.assign([],n);

// result is 
[aa: "x", dd: "d"]

console.logで、__proto__これが配列であることが示されます。これが配列である場合、次のコードは、unexpected token error

var v = ["sss":"ddd","ccc":"ddd"]; 

どういう意味?

5 answers

19
ggorlen 2019-05-18 07:16.

配列はJSのオブジェクトです

JSの配列はエキゾチックなオブジェクトであるため、他のオブジェクトと同じようにプロパティを割り当てることができます。

MDNによると:

配列はリストのようなオブジェクトです

..。

配列は(連想配列のように)要素インデックスとして文字列を使用できませんが、整数を使用する必要があります。ブラケット表記(またはドット表記)を使用して非整数を介して設定またはアクセスすると、配列リスト自体から要素が設定または取得されませんが、その配列のオブジェクトプロパティコレクションに関連付けられた変数が設定またはアクセスされます。配列のオブジェクトプロパティと配列要素のリストは別々であり、配列のトラバーサル操作とミューテーション操作をこれらの名前付きプロパティに適用することはできません。

Object.assign は配列とオブジェクトの違いを認識せず、パラメータ2+からパラメータ1のオブジェクトにキーを割り当てるだけです。この動作はそれほど驚くべきことではありません。

const a = [];
a.foo = 42;
const b = Object.assign([], a);                  // sure, why not?
console.log(typeof a, typeof b, b.foo);          // => object object 42
console.log(Array.isArray(a), Array.isArray(b)); // => true true

var a = ["foo": "bar"]JSの配列初期化子が関数呼び出しに似た構文をたどるための構文は動作しません。配列初期化子がある糖衣構文ではないのArrayコンストラクタが、それはそれは式のコンマ区切りのリストを受け入れることで類似しています。独自の仕様を持つオブジェクトリテラル var obj = {"foo": "bar"}構文と同じように動作する必要があると考える理由はありません。関数をKey-Valueオブジェクトとして悪用するのと同じくらい、配列をKey-Valueオブジェクトとして悪用するのは悪い習慣なので、これは良いことです。

const func = () => "hello";
func.foo = 42;
console.log(func.foo, typeof func, func()); // => 42 function hello

配列リテラルに関するMDNの記事から:

配列リテラルは、0個以上の式のリストであり、各式は角括弧([])で囲まれた配列要素を表します。配列リテラルを使用して配列を作成すると、指定された値を要素として初期化され、その長さは指定された引数の数に設定されます。

式は「値に解決される有効なコード単位」です。key: value構文は表現自体、構文初期化子オブジェクトの一部だけではなく、それはで不在だMDN表現のリファレンスページ。


ブラウザコンソールの印刷は実装定義です

離れてJSからとブラウザに移動し、あなたがショーの特性とどのようにクロームログのアレイを掲載しましたが、これは、以下の仕様に従って実装定義である画像がで見つかっにconsole.log > - console.logger - > console.printer:

プリンターの操作は実装によって定義されます。重大度を示すログレベル、出力する引数のリスト、および実装固有のフォーマットオプションのオプションのオブジェクトを受け入れます。argsに表示される要素は、次のいずれかになります。

  • あらゆるタイプのJavaScriptオブジェクト。

  • スタックトレースやグループなど、印刷可能なものの実装固有の表現。

  • どちらかとオブジェクトの書式設定、一般的なJavaScriptオブジェクトや便利な書式設定を最適に適用しました。

..。

実装が引数を出力する方法は実装次第ですが、開発者の期待になっているため、実装ではオブジェクトをスペースなどで区切る必要があります。

さらに、2.3.3。一般的なオブジェクト形式の状態:

通常、オブジェクトはそのコンテキストに適した形式で印刷されます。このセクションでは、オブジェクトがそのコンテキストで最も役立つようにフォーマットされる一般的な方法について説明します。このセクションで説明するフォーマットは、実装固有のオブジェクト表現に適用され、最終的にはプリンターに渡され、フォーマットの実際の副作用が見られることに注意してください。

ジェネリックJavaScriptオブジェクトのフォーマットを持つオブジェクトは、ジェネリックJavaScriptオブジェクトの潜在的に拡張可能な表現です。最適に有用なフォーマットを持つオブジェクトは、最大限に有用で有益であると判断されたオブジェクトの実装固有の潜在的にインタラクティブな表現です。

経験的証拠は、上記のステートメントをサポートしています。

Firefox 67.0

エッジ42.17134.1.0

どちらのブラウザも、角かっこで囲まれた配列のプロパティを表示せず、数値でインデックス付けされた要素(存在する場合)のみを表示します。Chromeがコンソール仕様の実装でこれらのプロパティをレンダリングするという事実は、JSが配列初期化子でこの構文を許可する必要があることを義務付けたり暗示したりするものではありません。ブラウザのコンソール表示と言語の構文の間には、まったく関係がありません。

5
baao 2019-05-18 07:15.

ここにあるのは、オブジェクトリテラルとして悪用されている配列です。たとえば、配列にはlengthプロパティもあります。このように、配列にキーを割り当てることができますが、そうすべきではありません。

ここで何をしたいかは完全には明確ではありません。通常、配列ではなくオブジェクトリテラルでObject.assign()を使用します。それらには独自の機能があります。

Object.assign({}, n);

正気のユースケースになります。

5
adiga 2019-05-18 07:24.

Object.assign()2番目のパラメーター以降のすべてのオブジェクトの列挙可能なキーをループして、それらをtargetオブジェクトに追加するだけです。

したがって、Object.assign(arr, obj) 大まかに言えば(polyfill):

for(key in obj)
  arr[key] = obj[key]

この手法は、元の配列を変更せずに配列の特定のインデックスを更新する場合に使用できます(reactのように)

だから、このコード

const arr = [1, 2, 3, 4]
const clone = [...arr]
clone[2] = 10;
console.log(arr, clone)

このように書くことができます:

const arr = [1, 2, 3, 4]
const clone = Object.assign([], arr, { [2]: 10 })
console.log(arr, clone)

2
Marius Danciu 2019-06-05 23:02.

オブジェクトを配列に変更する場合は、次のようにする必要があります。

var n = {"aa":"x","dd":'d'};

for (let [key, value] of Object.entries(n)) {
console.log(`${key}: ${value}`);
}

Object.entries()メソッドは、for ... inループによって提供されるのと同じ順序で、指定されたオブジェクト自体の列挙可能な文字列キープロパティ[key、value]ペアの配列を返します(違いはfor- in loopは、プロトタイプチェーンのプロパティも列挙します)。Object.entries()によって返される配列の順序は、オブジェクトの定義方法に依存しません。

1
SoEzPz 2019-06-06 05:57.

配列はJavascriptでは{}です

考えてみましょう:

let obj = {"keyOne":"keyOneValue!", "keyTwo":'keyTwoValue!'};
let array = Object.assign([], obj);

console.log('Array is', array);
console.log('Array keys are currently: ', Object.keys(array));
console.log('array.keyOne value:', array.keyOne);
console.log('array.keyTwo value:', array.keyTwo);
console.log('But Array length is', array.length);
array.push('hello');
console.log('Array push one element array.push("hello")');
console.log('Array length after push', array.length);
console.log('Array keys are now!!!', Object.keys(array));

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

作家のアンバー・ラフィンとジェニー・ヘーゲルが上司のセス・マイヤーズを引き継ぐのを見る

作家のアンバー・ラフィンとジェニー・ヘーゲルが上司のセス・マイヤーズを引き継ぐのを見る

深夜のアンバー・ラフィンとジェニー・ヘーゲルが繰り返し「ジョーク・セス・カント・テル」で戻ってきました。これらのジョークの多くは観客をがっかりさせますが、最初から最後まで素晴らしいです。ルフィンとヘーゲルは黒人女性として自己紹介します。とゲイの女性、それぞれ、したがって、セスマイヤーズが10フィートのポールで触れることができない主題について賢明にクラックすることができます。

ジョンウィック:第3章は2019年5月に劇場への道を容赦なく殺します

ジョンウィック:第3章は2019年5月に劇場への道を容赦なく殺します

(写真:ライオンズゲート)この「キアヌ・リーブスはダッパースーツを着て人々を殺害する」というモチーフ全体が手元にあることをはっきりと知っているライオンズゲートは、スタイリッシュで復讐に燃えるジョン・ウィックのフランチャイズで3回目のリリース日を設定しました。犬をベースにした復讐のためのババ・ヤガの果てしない十字軍を支えるバットシット神話をより深く掘り下げることを約束する3番目のジョン・ウィック映画は、2019年5月17日に設定されました。これまでのところ、それはその日に上陸した唯一の映画です。

このパイロットは、This IsUsの残りの部分に高い基準を設定します

このパイロットは、This IsUsの残りの部分に高い基準を設定します

写真:NBCパイロットは良すぎるのでしょうか?ありそうもないようですが、This IsUsのファンの場合はそうかもしれません。クレイジー、バカ、ラブライターのダン・フォーゲルマンからの待望の新シリーズは、ツイストエンディングを中心に展開しています。シリーズを適切に設定しますが、非常に巧妙に行われているため、改善の余地はあまりありません。

ああ、GIFがついにFacebookで機能する

ああ、GIFがついにFacebookで機能する

ここにいくつかのニュースがあります:あなたは今FacebookにGIFを埋め込むことができます。まあ、技術的には、GIFへのリンクを投稿することができ、Facebookは、他のほとんどすべてのソーシャルネットワークが何年も行ってきたようにアニメーションを作成します。

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Cómo mejoramos la accesibilidad de nuestro componente de precio, y cómo nos marcó el camino hacia nuevos saberes para nuestro sistema de diseño. Por Ana Calderon y Laura Sarmiento Leer esta historia en inglés.

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

Language