iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 22

[想試試看JavaScript ] 陣列

陣列

當我會想儲存比較複雜的資料的時後就會使用物件

除了物件,當這些資料有順序的話,我也可以使用陣列來儲存

新建陣列

要建立新的陣列,可以使用 new 關鍵字來建立

var a=new Array();

並且透過 = 指定運算子將資料放進去

var a=new Array();
a[0]='John';
a[1]='Mary';
a[2]='Tom';
console.log(a) // 印出 ['John','Mary','Tom']

索引 (index)

陣列中的每一個值稱之為元素,每個元素存在陣列中固定的位置,稱作索引( index )

索引值從 0 開始,表示陣列中的第一個元素。

索引值 1 就是陣列中的第二個元素以此類推。

所以, a[0]='John' 就是我在第一個位置將字串 John 放進去。

a[1]='Mary' 就是在第二個位置將字串 Mary 放進去

a[2]='Tom' 就是在第三個位置將字串 Tom 放進去

存取陣列中的元素

要存取陣列中的元素,要使用索引值

語法:

array[index]

例如,我要印出第一個元素與第二個元素

var a=new Array();
a[0]='John';
a[1]='Mary';
a[2]='Tom';
console.log(a[0]) // 印出 'John'
console.log(a[1]) // 印出 'Mary'

陣列實字

陣列有個更方便與直覺地建立方式

var a=[];  // 建立空陣列
a[0]=1;    // 將 1 放進第一個資料
a[1]=2;    // 將 2 放進第二個資料
a[2]=3;

還有更方便的

var a=['apple','banana','Tomato']; // 建立陣列同時將資料指定進去。

陣列長度

陣列的長度可以知道陣列裡有幾筆資料

使用 Array.length 可以得到陣列長度

var a=['apple','banana','Tomato'];
console.log(a.length);  // 印出 3

將資料自動放進網頁

現在我們學會建立陣列、索引值、陣列長度這些觀念,接著可以搭配之前學的迴圈,自動將陣列裡面的資料印出來

var a=['apple','banana','tomato'];

for(var i=0;i<a.length;i++){
	console.log(a[i]);
}

這樣就可以自動依序印出字串

搭配之前學的 DOM,將資料依序自動顯示在畫面上

<body>
		<div id="root">
    </div>
    <script>
        var a=['apple','banana','tomato'];
        var root=document.getElementById('root');
        for(let i=0;i<a.length;i++){
            root.innerHTML+=a[i]+" ";
        }
    </script>
</body>

最後在網頁上的結果應該會長這樣
https://ithelp.ithome.com.tw/upload/images/20210922/20140896CyCvrgl0uo.jpg


上一篇
[想試試看JavaScript ] 事件物件
下一篇
[想試試看JavaScript ] 陣列一些操作陣列好用的方法
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言