Vue

javascript 搜尋陣列中的物件

“陣列”由方括號 [] 表示，而”物件”由大括號 {} 表示。

使用forEach迴圈判斷物件宣染到畫面

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
//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.forEach(item =>{
        if(item.company==='Amazon'){
        str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>

使用map()迴圈判斷物件宣染到畫面

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
//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.map(item =>{
        if(item.company==='Amazon'){
            return  str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>

使用find迴圈判斷物件宣染到畫面

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
//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.find(item =>{
        if(item.company==='Amazon'){
        str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>