2017-10-22 15 views
2

whois()関数がdisplayName2とname1にアクセスするのはなぜですか?それはのdisplayNameやfullName.firstNameへのアクセス権を持っている必要があるように見える素人目に構造化パラメータの構造化に戸惑う

function whois({displayName: displayName2, fullName: {firstName: name1}}){ 
 
    console.log(`${displayName2} is ${name1}`) 
 
} 
 

 
let user = { 
 
    displayName: "jdoe", 
 
    fullName: { 
 
     firstName: "John", 
 
     lastName: "Doe" 
 
    } 
 
} 
 
whois(user) // "jdoe is John"

。破壊は逆のJSONのように見えます。

何が起こっているのですか?

+1

パラメータは関数は、コロンの右側のもの( '')であるにアクセスできるようになり、そして唯一のオブジェクト表記の最も深い入れ子レベル。この場合、 'displayName2'と' name1'はそこで作成される唯一の変数です。 – trincot

+0

はい、[それは破壊しています](https://stackoverflow.com/q/10804982/1048572)。そしてそれは逆にオブジェクトリテラルのように実際に動作します。 – Bergi

答えて

2

displayNamefirstNameassigned new namesた - displayName2とreceptively firstName1、および値にアクセスするには、エイリアスを使用する必要があります。

エイリアスのみが変数として定義されているため、古い名前を使用して値にアクセスしようとすると、「変数が定義されていません」というエラーがスローされます。また

const destructure1 = ({ a: aa }) => console.log(aa); 
 
destructure1({ a: 5 }); // gets the value 
 

 
const destructure2 = ({ a: aa }) => console.log(a); 
 
destructure2({ a: 5 }); // throw an error because a is not defined

computed property namesで構造化代入使用しているとき、あなたは新しい変数名に割り当てる必要があります、分割代入で

​​

+0

私はありがとうございます。 JSONのように見えますが、実際はそうではありません。これは、再割り当ての略語です。したがって:var o = {p:42、q:true}; var {p:foo、q:bar} = o;実際にはfoo = o.pを意味します。 bar = o.q; –

+0

[destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names)について、私が追加したリンクを正確に見てください。 –

1

positionは、値が代入される変数になります。

宣言の位置(関数パラメータのような)で使用すると、値の位置の名前は、値が割り当てられる前に現在のスコープで宣言されます。

例で示すように、値の位置は、上記の同じパターンに従う記述された構造に一致する値を期待するときに、中断されるオブジェクトを記述することもあります。

// The data object 
 
const data = {foo: "bar"}; 
 

 
// A destructuring declaration and assignment. 
 
// The assignment target's structure matches that of the data 
 
let {foo: localVar} = data; 
 

 
console.log(localVar); // bar 
 

 
// Same, but using the existing `localVar` variable with no new declaration. 
 
({foo: localVar} = {foo: "baz"}); 
 

 
console.log(localVar); // baz