JS陣列和物件相互轉換方法「實用」

轉至特殊中的當前陣列是什麼意思

陣列轉物件

展開運算子 (...)

這是一個簡單快速的方法

const arr = ［‘one’，‘two’，‘three’］；const obj = {。。。arr}； console。log（obj）； // { 0： ‘one’， 1： ‘tow’， 2： ‘three’ }

Objcet.assign(target, ...sources)

將所有可列舉屬性的值從一個或多個源物件分配到目標物件

引數： target：目標物件、。。。sources：源物件

返回值：目標物件

const arr = ［‘one’，‘two’，‘three’］；const obj = Object。assign（{}， arr）；console。log（obj）； // { 0： ‘one’， 1： ‘tow’， 2： ‘three’ }

Object.fromEntries(iterable)

把鍵值對轉換為一個物件。

引數：類似Array、Map

返回值：由該迭代物件條目提供對應屬性的新物件

當我們遇到如下的結構時我們可以很輕鬆的將這個陣列轉換為物件

const arr = ［ ［‘a’， 1］， ［‘b’， 2］， ［‘c’， 3］ ］；const obj = Object。fromEntries（arr）；console。log（obj）； // { a：1 ， b： 2， c： 3 }

forEach

const arr = ［1，2，3，4，5］；let obj = {}；arr。forEach（（item，index） => { obj［index］ = item；}）console。log（obj）； //{ 0： 1， 1： 2， 2： 3， 3： 4， 4： 5 }

物件轉陣列

Object.entries(obj)

把一個鍵值對轉換為陣列

引數： 可以返回其自身可列舉屬性的鍵值對的物件

返回值：返回一個其自身可列舉屬性的鍵值對陣列

當我們遇到如下的結構時我們可以很輕鬆的將這個物件轉換為陣列

const obj = { a：1 ， b： 2， c： 3 }；const arr = Object。entries（obj）；console。log（arr）； // ［ ［‘a’， 1］， ［‘b’， 2］， ［‘c’， 3］ ］

Object.keys(obj)

由給定的物件自身可列舉的屬性組成的陣列

引數：物件

返回值：給定物件的屬性組成的字串陣列

通常會配合一些陣列的方法使用，如下

const obj = { a：1 ， b： 2， c： 3 }；const arr = Object。keys（obj）。map（item => obj［item］）；console。log（arr）； // ［1， 2， 3］；也可以得到上面那樣的結果const arr = Object。keys（obj）。map（item => ［item， lobj［item］］）；console。log（arr）； // ［ ［‘a’， 1］， ［‘b’， 2］， ［‘c’， 3］ ］

Object.values(obj)

由給定的物件自身可列舉的屬性值組成的陣列

引數：物件

返回值：給定物件的屬性值組成的字串陣列

const obj = { a：1 ， b： 2， c： 3 }；const arr = Object。values（obj）；console。log（arr）； // ［1， 2， 3］；

Array.from(array, fn, this)

從一個類似陣列物件或可迭代物件建立一個新的，淺複製的陣列例項。

引數：

array：要變換成陣列的為陣列物件或可迭代物件 fn： 指定了該引數，新陣列中的每個元素都會執行該回調函式 this： 執行回撥函式時的this物件

返回值：一個新的陣列例項

先來說說什麼是類似陣列：就是含有length和索引屬性的物件，如下就是一個簡單的類似陣列物件

const obj = { 0： ‘name’， 1： ‘age’， 2： ‘sex’， 3： ‘height’ length： 3，}

注意：類似陣列物件的length的值，決定了返回陣列的長度

什麼是可迭代物件：Array、Set、Map和字串都是可迭代物件，更直接的是在控制檯上看看當前的物件的原型鏈上是否有 Symbol的方法 ，看看下面透過生成器建立的可迭代物件

const obj = { 0： ‘name’， 1： ‘age’， 2： ‘sex’， 3： ‘height’，}function *createIterator（obj）{ for（let value in obj）{ yield obj［value］； }}let iterator = createIterator（obj）；

好的，我們來試試用Array。from建立一個數組吧。

類似陣列物件const obj = { 0： ‘name’， 1： ‘age’， 2： ‘sex’， 3： ‘height’， length： 3，}const arr = Array。from（obj）；console。log（arr）； //［‘name’， ‘age’， ‘sex’ ］；輸出3個是因為上面說的length的長度決定了陣列的長度可迭代物件const obj2 = { 0： ‘name’， 1： ‘age’， 2： ‘sex’， 3： ‘height’}function *createIterator（obj）{ for（let value in obj）{ yield obj［value］； }}let iterator = createIterator（obj）；const arr2 = Arry。from（iterator）；console。log（arr2）； //［‘name’， ‘age’， ‘sex’， ‘height’ ］；