方括號[]中的鍵值對是什么意思？

Question

讓我們考慮以下是我的目標：

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__告訴這是Array，如果是代碼后面的數組給出了unexpected token error

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

這是什么意思？

Answer 1

數組是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"}語法相同，它有自己的規范。 這是一件好事，因為濫用數組作為鍵值對象是不好的做法 ，就像濫用函數作為鍵值對象一樣：

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

來自關於數組文字的MDN文章 ：

數組文字是零個或多個表達式的列表，每個表達式表示一個數組元素，用方括號（ [] ）括起來。 使用數組文字創建數組時，會使用指定的值作為其元素進行初始化，並將其長度設置為指定的參數數。

表達式是“解析為值的任何有效代碼單元”。 key: value語法本身不是表達式，只是對象初始化程序語法的一部分，並且在MDN表達式參考頁面中不存在。

---

瀏覽器控制台打印是實現定義的

遠離JS並進入瀏覽器，您發布的圖像顯示了Chrome如何使用屬性記錄數組，但這是根據console.log - > console.logger - > console.printer中的以下規范實現定義的：

打印機操作是實現定義的。 它接受指示嚴重性的日志級別，要打印的參數列表以及特定於實現的格式化選項的可選對象。 出現在args中的元素將是以下之一：

• 任何類型的JavaScript對象。

• 特定於實現的可打印事物表示，例如堆棧跟蹤或組。

• 應用了通用JavaScript對象格式或最佳有用格式的 對象 。

...

實現如何打印args取決於實現，但實現應該通過空格或類似的東西來分隔對象，因為這已成為開發人員的期望。

此外， 2.3.3。 常見對象格式說明：

通常，對象將以適合其上下文的格式打印。 本節介紹了將對象格式化為在其上下文中最有用的常用方法。 應該注意的是，本節中描述的格式應用於最終將傳遞到打印機的特定於實現的對象表示，其中將看到格式的實際副作用。

具有通用JavaScript對象格式的對象是通用JavaScript對象的潛在可擴展表示。 具有最佳有用格式的對象是被判斷為最有用且信息豐富的對象的特定於實現的，可能交互式的表示。

經驗證據支持上述陳述：

Firefox 67.0

Edge 42.17134.1.0

兩個瀏覽器都沒有顯示括號之間的數組屬性，只顯示其數字索引元素（如果存在）。 Chrome在其控件規范的實現中呈現這些屬性這一事實並不意味着或暗示JS應該在其數組初始化程序中允許這種語法。 瀏覽器的控制台演示文稿與語言的語法之間根本沒有任何關系。

Answer 2

你在這里有一個被濫用為對象文字的數組。 例如，數組也具有length屬性。 就像這樣，您可以為數組分配鍵，但不應該這樣做。

目前還不完全清楚你想要的是什么，通常使用Object.assign（）和對象文字而不是數組。 他們有自己的功能。

Object.assign({}, n);

將是一個理智的用例。

Answer 3

Object.assign()只是從第二個參數開始循環遍歷所有對象的可枚舉鍵，並將它們添加到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) 

Answer 4

如果要將對象更改為數組，則應執行以下操作：

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

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

Object.entries（）方法返回給定對象自己的可枚舉字符串鍵控屬性[key，value]對的數組，其順序與for ... in循環提供的順序相同（不同之處在於 - in循環枚舉原型鏈中的屬性）。 Object.entries（）返回的數組的順序不依賴於對象的定義方式。

Answer 5

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));