JavaScript の構造化代入について理解しましょう

この記事では、javascript に関する関連知識を提供します。主に、配列の構造化、オブジェクトの構造、構造化の使用など、代入の構造化に関する関連問題を紹介します。お役に立てば幸いです。みんな助かります。

関連する推奨事項: JavaScript 学習チュートリアル

コンセプト

ES6 では、より簡潔な割り当てモードが提供されます。配列やオブジェクトから値を抽出することは、構造化と呼ばれます

例:

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

配列構造化

配列の構造化は非常にシンプルかつ簡潔です。リテラルは代入式の左側で使用されます。配列リテラル内の各変数名は、構造化された配列の同じインデックス項目にマップされます。

これは何を意味しますか?以下の例のように、左側の配列 項目は右側の分割された配列の対応するインデックスの値をそれぞれ取得しています

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

個別代入の宣言

分割して代入することができます変数宣言で値を個別に指定する

例: 変数を宣言し、それぞれに値を割り当てる

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

デフォルト値の構造を解除する

値が取り出された場合分割することで unknown の場合、デフォルト値を設定できます:

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

上記の例では、a と b の両方にデフォルト値を設定します
この場合、値がa または b が 未定義の場合、デフォルト値が設定されます。 対応する変数に割り当てます (5 が a に割り当てられ、7 が b に割り当てられます)

変数値を交換します

以前は、## を使用して 2 つの変数を交換していました。#

//交换abc = a;a = b;b = c;

or

XORmethod

ただし、代入を分割することで、交換することができます。構造化式内の 2 つの変数値

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

関数によって返される配列の構造化

#戻り値が配列である関数を直接分解できます

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

上記の例では、**c()**[ 10, 20] の戻り値はコードの別の行で構造化を使用できます

戻り値を無視します(または項目をスキップ)

「不要な戻り値を渡す」を選択してスキップできます

function c() {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

#代入配列の残りの値を変数に代入します

配列の分割を使用すると、代入配列の残りの部分をすべて代入できます。変数を与えます。

let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

このようにすると、b も配列になり、配列内の項目はすべて残りの項目

注:

ここで注意してください 最後にカンマを書くことはできません 余分なカンマがあるとエラーが報告されます

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

ネストされた配列の構造化

オブジェクトと同様に、配列もネストされた構造化できます。

例:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

String destructuring

配列の分割では、分割対象がトラバース可能なオブジェクトであれば、All を分解して代入することができ、そのオブジェクト、つまり Iterator インターフェースを実装したデータをトラバースすることができます

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

オブジェクトの分割

#基本的なオブジェクトの分割

#

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22
console.log(z); // true

#代入 新しい変数名を指定します

変更できますオブジェクトの構造化を使用する場合の変数の名前

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

上記のコードvar {p: foo} = o

オブジェクトを取得します o プロパティ名 p が foo という名前の変数に割り当てられます

分割デフォルト値

分割で取り出したオブジェクトの値が

unknown の場合、デフォルト値

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

## を設定することができます。

#新しいオブジェクト名に値を割り当て、デフォルト値を提供します

前述したように、新しいオブジェクト名に値を割り当てます。ここで、これを与えることができます。新しいオブジェクト名は次のようになります。デフォルト値。構造化されていない場合は、デフォルト値が自動的に使用されます。

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

配列とオブジェクトの両方の構造化を使用する

構造内では、配列とオブジェクトは一緒に使用できます

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBuzz"

不完全な構造化

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined
// y = 'world'

残りの値をオブジェクトに割り当てます

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

ネストされたオブジェクトの構造化 (無視される構造化)

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

注意事項

宣言された変数を構造化に使用する場合は注意してください

エラー デモンストレーション:

let x;{x} = {x: 1};

JavaScript エンジンは

{x}

をコード ブロックとして認識するため、構文エラーが発生します。JavaScript が次のように解釈しないように、行の先頭に中かっこを記述することは避けなければなりません。コード ブロック正しい書き方:

let x;({x} = {x: 1});

正しい書き方は、構造化代入文全体を括弧で囲むことです。そうすれば、次の構造化代入を正しく実行できます。関数パラメータ

関数のパラメータは構造化代入も使用できます

function add([x, y]) {
	return x + y;}add([1, 2]);

上記のコードでは、関数 add のパラメータは表面上は配列ですが、パラメータを渡すと配列パラメータは構造化されません 変数 x と y については、関数の内部では、x と y を直接渡すのと同じです構造化の使用法

分割代入を使用する方法は多数あります

変数の値を交換する

let x = 1;
let y = 2;
[x, y] = [y, x];

上記のコードは、x と の値を交換します。 y. この記述方法は、簡潔であるだけでなく読みやすく、セマンティクスが明確です

関数からの戻り値複数の値

関数は 1 つの値のみを返すことができます。複数の値を返したい場合は、配列またはオブジェクトでのみそれらの値を返すことができます。分割代入がある場合は、オブジェクトまたはオブジェクトから返すことができます。配列からこれらの値を取得するのは次のようなものですバッグから何かを取り出す

// 返回一个数组function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 返回一个对象
  function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

使用上面的代码，我们就可以快速取出JSON数据中的值

相关推荐：javascript教程

以上がJavaScript の構造化代入について理解しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。