iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

30天前端網頁技術超入門介紹系列 第 11

Day11. JavaScript 基礎常識介紹(三) - 陣列

超入門介紹到現在也1/3了,不知道大家有什麼想法。
今天的主角是陣列(array)
其實筆者一直覺得他跟物件很像...都是在範圍內新增東西然後使用(廢話!

我要怎麼用陣列?

var typeMoon = ['Mahoutsukai no Yoru', 'kara no kyoukai', 'tsukihime', 'fate'];

這樣就宣告完畢了。用逗號將值隔開,然後可以在陣列中新增你要的東西喔喔喔喔!

要查看裡面的值,就在陣列的名稱後面新增[],[]裡面放索引值。
索引值就像目錄一樣,一個值對應一個索引值。索引值常常搭配 indexOf 來搜尋一些東西,是個非常棒的特性。

console.log(typeMoon[1]); // kara no kyoukai

疑? 明明是1為什麼是跑出第二個值?
因為我沒看魔法使之夜所以不會顯示因為陣列的索引值是從0開始。
證明:

console.log(typeMoon[0]); // Mahoutsukai no Yoru

索引值為負數的話會從陣列的最後面開始。

console.log(typeMoon[-1]); // fate

常看到 new Array,那個也是陣列?

對喔,那是用建構式創造的陣列。

var oldArray = new Array();
console.log(oldArray); // []

他也會創造出一個陣列,這個方法基本上我沒在用,因為沒需求。還是說有人知道什麼情況下一定要用建構式創造陣列不可?知道的話麻煩幫我補充喽~~

還有嘛?

var anotherArray = Array();
console.log(anotherArray); // []

一樣同上,理由也是。

新增、修改陣列的值

直接在陣列後面加值(X
雖然邏輯上沒錯啦...不過通常由 AJAX 取回來的值不會出現在原本的陣列中。

這裡要說的是用 .push() 這個方法把他丟到陣列中。

var typeMoon = ['Mahoutsukai no Yoru', 'kara no kyoukai', 'tsukihime', 'fate'];
typeMoon.push('tsukihime remake');
console.log(typeMoon); // (5) ["Mahoutsukai no Yoru", "kara no kyoukai", "tsukihime", "fate", "tsukihime remake"]

被丟入的值會被放在陣列的最後面。

另外直接從索引值賦予也可以

var typeMoon = ['Mahoutsukai no Yoru', 'kara no kyoukai', 'tsukihime', 'fate'];
typeMoon[4] = 'tsukihime remake'
console.log(typeMoon); // (5) ["Mahoutsukai no Yoru", "kara no kyoukai", "tsukihime", "fate", "tsukihime remake"]

以上面的範例來看,可以新增,當然也能修改

var typeMoon = ['Mahoutsukai no Yoru', 'kara no kyoukai', 'tsukihime', 'fate'];
typeMoon[2] = 'tsukihime remake'
console.log(typeMoon[2]); // tsukihime remake

清空陣列的值

因為目前沒有要介紹方法的應用,所以僅用一些特性來說明

清空到目前為止,我覺得算是我最常用的幾個方法。

var typeMoon = ['Mahoutsukai no Yoru', 'kara no kyoukai', 'tsukihime', 'fate'];
typeMoon = []
console.log(typeMoon); // []
console.log(typeMoon[0]); // undefined

這樣整個陣列的值就消失了


其實這章只是超入門介紹陣列,但不小心順便寫了 push() 的用法。可惡,原本預定是要到後面應用篇才要寫的,不過寫都寫了就算了吧~
明天就要介紹物件了,盡請期待吧~~


上一篇
Day10. JavaScript 基礎常識介紹(二) - function
下一篇
Day12. JavaScript 基礎常識介紹(四) - 物件
系列文
30天前端網頁技術超入門介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言