的Javascript ES6解構 - 標識符「位置」已經聲明

Question

我有對象的簡單數組，並希望得到的第一個元素的位置屬性：

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

 
const [{ location }] = companies; 
 
// expected: Mountain View but got Uncaught SyntaxError: Identifier 
 
//'location' has already been declared at <anonymous>:1:1

我是什麼失蹤？

Answer 1

您不能將全局變量location重新定義爲常量。如果您使用let [{location}] = companies，則不會出現錯誤，但是您會遇到錯誤的行爲，因爲它會嘗試將值分配給window.location並重定向頁面。

可能的解決方案：

• 變化的變量名（與屬性名一起）
• 裹在一個塊代碼（IIFE是不是在這種情況下，必要的，因爲我們使用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（立即調用函數表達式），則相同的代碼將起作用。

你的代碼失敗的原因是你不能在同一個作用域中聲明一個常量，如果已經使用了常量/變量名。

您可能已經使用var而不是const，但將分配給window.location，有效地重新加載頁面並帶您進入404頁面，因爲該URL不存在。

這就是爲什麼你應該總是寫你的代碼在一個IIFE，以防止全球名稱空間污染和難以修復的討厭的錯誤。

下面是相同的代碼與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); 
 
})();

或者更好的是：

{ // 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); 
 
};

釷E使用ES2015塊不會污染全球範圍內，因爲你將只使用let和const（而不是使用var）

此外，永遠記住，不是所有的瀏覽器都支持ES2015還沒有語法，所以目前代碼必須使用Babel JS或類似工具進行傳輸。

Answer 4

這是因爲location已經宣佈全球範圍內，爲window.location。

爲了避免這種情況，這一段代碼不應該在本地範圍內被執行，即，一個塊。這是ES6，而IIFE是ES5的剩餘部分：

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

ES6的典型用途是模塊化環境。考慮到目前的範圍是CommonJS或ES6模塊，問題將不會出現。