實戰api串接或是第三方資料，不是所有資料都是給予“陣列”，就無法使用如：forEach、map、reduce、find… 迴圈，物件資料如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //物件形式
const roles = {
'001': {
name: '海綿寶寶',
expert: '吸收很快',
},
'002': {
name: '耶夢',
expert: '任意門',
},
'004': {
name: '超人',
expert: '英雄',
},
};
|
錯誤示範是使用forEach
要對物件使用陣列方法，ES6 的語法對物件使用陣列方法=>將物件轉為陣列
- Object.values
- Object.keys
- Object.entries
使用 Object.values 物件轉陣列forEatch迴圈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| const roles = {
'001': {
name: '海綿寶寶',
expert: '吸收很快',
img:'https://cdn.pixabay.com/photo/2017/05/08/13/15/bird-2295431_1280.jpg'
},
'002': {
name: '耶夢',
expert: '任意門',
img:'https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_1280.jpg'
},
'004': {
name: '超人',
expert: '英雄',
img:'https://cdn.pixabay.com/photo/2017/05/08/13/15/bird-2295431_1280.jpg'
},
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
//Object.values 與 forEach
Object.values(roles).forEach((item) => {
console.log(item);
//加法赋值运算符
str +=
`<li class="card col-md-3 mb-2">
<span class="card-body">
<span style="width:50px;height:50px;overflow:hidden"><img src="${item.img}" style="width:80px;height:auto;"></span>
<span><b>${item.name}</b></span>
專業能力：
<span> ${item.expert} </span>
</span>
</li>`;
});
list.innerHTML = str;
|
使用 Object.keys物件轉陣列forEatch迴圈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| const roles = {
'001': {
name: '海綿寶寶',
expert: '吸收很快',
},
'002': {
name: '耶夢',
expert: '任意門',
},
'004': {
name: '超人',
expert: '英雄',
},
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
Object.keys(roles).forEach((key) => {
console.log(roles[key]);
str +=
`<li class="card col-md-3 mb-2">
<span><b>${roles[key].name}</b></span>
<spanclass="card-body">
專業能力：
<span> ${roles[key].expert} </span>
</span>
</li>`;
});
list.innerHTML = str;
|
使用 Object.entries 物件轉陣列forEatch迴圈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| const roles = {
'001': {
name: '海綿寶寶',
expert: '吸收很快',
},
'002': {
name: '耶夢',
expert: '任意門',
},
'004': {
name: '超人',
expert: '英雄',
},
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
Object.entries(roles).forEach((obj) => {
console.log(obj[0], obj[1]);
str +=
`<li class="card col-md-3 mb-2">
<span><b>${obj[0].name, obj[1].name}</b></span>
<span class="card-body">
專業能力：
<span> ${obj[0].expert, obj[1].expert} </span>
</span>
</li>`;
});
list.innerHTML = str;
|
參考資料
參閱mozilla Object.values()
參閱Object.keys() & Object.values() & Object.entries()