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' }
沒有留言:
張貼留言