JavascriptをES6非構造は、私は、オブジェクトの単純な配列を持っているし、最初の要素のlocation属性を取得したい

Question

識別子「場所」は既に宣言されています行方不明？

Answer 1

グローバル変数locationを定数として再定義することはできません。 let [{location}] = companiesを使用した場合、エラーは発生しませんでしたが、値をwindow.locationに割り当ててページをリダイレクトしようとすると、間違った動作をしたことになります。

考えられる解決策：

• 変更（プロパティ名と一緒に）変数名
• ブロックでコードをラップ（私たちはES6を使用しているため、生命維持、この場合には必要ありません）
• あなたは

const companies = [ 
 
    {name: 'Google',loc: 'Mountain View'}, 
 
    {name: 'Facebook', loc: 'Menlo Park'}, 
 
    {name: 'Uber', loc: 'San Francisco'} 
 
]; 
 

 
const [{loc}] = companies; 
 
console.log(loc); 
 

 
// Block scope 
 
{ 
 
    const companies = [ 
 
    {name: 'Google', location: 'Mountain View'}, 
 
    {name: 'Facebook', location: 'Menlo Park'}, 
 
    {name: 'Uber', location: 'San Francisco'} 
 
    ]; 
 
    const [{location}] = companies; 
 
    console.log(location); 
 
} 
 

 
// Variable name doesn't have to be the same as property 
 
const [{ location: loca }] = [{location: 'Mountain View'}] 
 
console.log(loca);

最後の例を参照して、プロパティ名を維持し、変数名を変更することができます

Answer 2

const companies = [ 
    { name: 'Google', location: 'Mountain View' }, 
    { name: 'Facebook', location: 'Menlo Park' }, 
    { name: 'Uber', location: 'San Francisco' } 
]; 

console.log(companies[0].location); 

Answer 3

ここでの問題は、あなたが関数内のコードをラップしていないということです。

IIFE（Immediately Invocated Function Expression）を使用する場合、同じコードが機能します。

あなたのコードが失敗する理由は、定数/変数名がすでに使用されている場合、同じスコープ内で定数を宣言できないためです。

constの代わりにvarを使用しましたが、それはwindow.locationに割り当てられ、効果的にページをリロードし、そのURLが存在しないため、404ページになります。

グローバル名空間の汚染や修正が困難な厄介なバグを防ぐために、コードを常にIIFEで記述する必要があります。いっそ

(() => { // ES2015 IIFE 
 
    "use strict"; 
 
    
 
    const companies = [ 
 
     { name: 'Google', location: 'Mountain View' }, 
 
     { name: 'Facebook', location: 'Menlo Park' }, 
 
     { name: 'Uber', location: 'San Francisco' } 
 
    ]; 
 
    
 
    const [{ location }] = companies; 
 
    console.log(location); 
 
})();

または：：

は、ここで同じ生命維持（追加strictモード）とのコードだ

{ // ES2015 block 
 
    "use strict"; 
 
    
 
    const companies = [ 
 
     { name: 'Google', location: 'Mountain View' }, 
 
     { name: 'Facebook', location: 'Menlo Park' }, 
 
     { name: 'Uber', location: 'San Francisco' } 
 
    ]; 
 
    
 
    const [{ location }] = companies; 
 
    console.log(location); 
 
};

のTh ES2015ブロックの電子の使用は、すべてのブラウザがまだES2015構文をサポートしているわけではないことを覚えて、常に、あなたはまた、

のみletとconstを使用して（とvarを使用していない）ことがありますことを考えると、グローバルスコープを汚染しません。したがって、コードはBabel JSまたは同様のツールを使用してトランスバイルされなければなりません。

Answer 4

locationは既にグローバルスコープでwindow.locationと宣言されているためです。

これを回避するには、このコードをローカルスコープ、つまりブロックで実行しないでください。これはES6ですが、IIFEはES5の残しです。

{ 
    ... 
    const [{ location }] = companies; 
} 

典型的なES6の使用はモジュラー環境です。現在のスコープがCommonJSまたはES6モジュールであることを考慮すると、問題は決して現れません。