JS中陣列、物件、物件陣列、陣列物件的遍歷方法

阿新 • • 發佈：2020-09-22

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <!-- 這幾種資料格式都可以用for迴圈來遍歷，for...of也都可以遍歷絕大多數的資料結構 -->
 9         <script type="text/javascript">
10             let a  
= [
11                 {
12                     name:'張三',
13                     age:'23',
14                     address:'鄭州'
15                 },
16                 {
17                     name:'李四',
18                     age:'24',
19                     address:'北京'
20                 },
21                 {
 
22                     name:'王五',
23                     age:'25',
24                     address:'這是陣列物件'
25                 },
26             ]
27             
28             for (let item in a) { //列印的item為陣列的索引：0、1、2
29                 console.log(item)
30             }
31             for (let item of a) { 
//等同於上一個的console.log(a[item])
32                 console.log(item)//{name: "張三", age: "23", address: "鄭州"}
33                 for (let key in item) { //遍歷陣列中的物件
34                     console.log(item[key])
35                 }
36             }
37             a.forEach(item => { //同上
38                 console.log(item)//{name: "張三", age: "23", address: "鄭州"}
39             })
40             
41             
42             let b = ['b','1',1,2,'這是陣列']
43             
44             for (let item in b) { //列印的item為陣列的索引：0、1、2、3、4
45                 console.log(item)
46             }
47             for (let item of b) {
48                 console.log(item)
49             }
50             b.forEach(item => {
51                 console.log(item)
52             })
53             
54             let c = {
55                 key:'object',
56                 value:'這是物件'
57             }
58             
59             for (let item in c) {//列印的item為物件的key：key、value
60                 console.log(item)
61             }
62             // c.forEach(item => {//物件不能使用forEach
63             //     console.log(item)
64             // })
65             // for (let item of c.keys()) {//物件不能直接使用of來遍歷
66                 // console.log(item)
67             // }
68             
69             // 需要新增下面這一句話後物件才可以使用of遍歷
70             //或者直接Object.keys()、Object.values()、Object.entries()
71             let {keys, values, entries} = Object
72             
73             for (let item of keys(c)) {
74                 console.log(item)
75             }
76             for (let item of values(c)) {
77                 console.log(item)
78             }
79             for (let item of entries(c)) {
80                 console.log(item)
81             }
82             
83             let d = {
84                 name:[
85                     '張三','李四','王五','這是物件陣列'
86                 ],
87                 age:[
88                     20,21,22,23
89                 ]
90             }
91             for (let item of values(d)) {
92                 console.log(item)//獲取到陣列
93                 item.forEach(items => {
94                     console.log(items) //遍歷物件中的陣列
95                 })
96             }
97         </script>
98     </body>
99 </html>