JavaScript 陣列轉物件 convert array to object

JavaScript把陣列(Array)轉成物件(Object)的方式如下。

for迴圈

使用傳統的for迴圈遍歷Array。建立一個空的Object，然後for迴圈遍歷Array並取得元素放入Object。例如下面Object的key為Array的索引(index)，值為Array的元素。

const arr = ['a', 'b', 'c'];

function toObject(arr) {
  let obj = {};
  for (i = 0; i < arr.length; i++) {
    obj[i] = arr[i];
  }
  return obj;
}

let obj = toObject(arr);
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c' }

下面則把Array的元素設為Object的key。

const arr = ['a', 'b', 'c'];

function toObject(arr) {
  let obj = {};
  for (i = 0; i < arr.length; i++) {
    obj[arr[i]] = arr[i];
  }
  return obj;
}

let obj = toObject(arr);
console.log(obj); // { a: 'a', b: 'b', c: 'c' }

Array.prototype.reduce

使用ES6的Array.prototype.reduce()。reduce()第一個參數為callback箭頭函式((pv, cv, i) => {...})；第二個參數({})為callback首次呼叫第一個參數pv的初值。

callback第一個參數pv為上一次callback的回傳值，若callback是第一次呼叫則為reduce()的第二個參數，在這邊為要轉成的Object({})，第二個參數cv為依序傳入的Array元素，第三個參數i為目前Array元素的索引。每次callback函式中以索引i為key把傳入的元素cv放入物件pv後回傳為下一次callback的pv。reduce()回傳的結果為最後一次callback的回傳結果。

const arr = ['a', 'b', 'c'];

function toObject(arr) {
  return arr.reduce((pv, cv, i) => {
    pv[i] = cv;
    return pv;
  }, {});
}

let obj = toObject(arr);
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c' }

Object.assign

使用ES6的Object.assign()把Array複製到目標物件。

const arr = ['a', 'b', 'c'];

function toObject3(arr) {
  let obj = {};
  Object.assign(obj, arr); // copy arr elements to obj
  return obj;
}

let obj = toObject(arr);
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c' }

Spread syntax

使用ES8的Spread syntax(...)。

const arr = ['a', 'b', 'c'];

function toObject(arr) {
  return { ...arr };
}

let obj = toObject(arr);
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c' }

• Convert Array to Object