iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Modern Web

30天入門JavaScript系列 第 6

【Day 6】陣列(一):陣列 array簡介

  • 分享至 

  • xImage
  •  

逐漸詞窮.jpg

前幾天提到的變數可以記錄單一個值,但假如我們想紀錄每天花的錢

let expense0901 =250; //九月一號花的錢
let expense0902 =265;
let expense0903 =300;
let expense0904 =590;
let expense0905 =1400;
let expense0906 =150

...才六天就要宣告六個變數,一個月要宣告三十個變數,一年要(略
這時候只要用陣列就能輕鬆處理

陣列 array

陣列(Array)是一種值的集合,適合用來記錄相同類型的連續資料

//宣告陣列時用一組方括號[]包起來
//建立一個空陣列
let emptyArr = [];
//建立一個陣列
let arr = [1, 2, 3, 4];
//來將上面的支出表改成array
let expense202009 = [250,265,300,590,1400,150];

陣列的索引

陣列可以用索引值(index)來查找或改變資料,
索引是從0開始,假如有目前陣列有六個資料,索引值就是0~5

(突然的糞手寫圖)

let expense202009 = [250, 265, 300, 590, 1400, 150];

console.log(expense202009[4]); //1400
console.log(expense202009[7]); //試著存取無資料的位置 會得到undefined

expense202009[4] = 3000; //可以用利用索引修改值
console.log(expense202009[4]); //3000

陣列的長度

使用陣列.length可以存取陣列的長度,方便知道陣列的資料數量,
這個值是可以手動修改的,沒事不要亂修改

let arr = ['資料一', '資料二', '資料三', '資料四', '資料五'];

console.log(arr.length); //5
console.log(arr[arr.length - 1]); //資料五 用長度取到最後一個資料

陣列方法

寫程式時常會操作陣列的資料,總不可能全部傻傻用索引跟長度來處理,
這時候利用JS內建的方法會方便許多,今天先介紹最簡單的幾種

push()跟pop()方法

push()方法可以在陣列最後加入新的值
pop()方法則是把最後的值移出後回傳

let arr = ['資料一', '資料二', '資料三', '資料四', '資料五'];

arr.push('資料六');  //加入資料六
console.log(arr.length); //6 加入新值後長度也會改變
arr.push('資料七', '資料八');//一次可以加入多個資料
console.log(arr); // ["資料一", "資料二", "資料三", "資料四", "資料五", "資料六", "資料七", "資料八"]

console.log(arr.pop()); // 資料八  此筆資料會被移出陣列
console.log(arr); // ["資料一", "資料二", "資料三", "資料四", "資料五", "資料六", "資料七"]

shift()跟unshift()

push()pop()差不多,只是這次是從陣列開頭加入或移出

直接看範例就懂

let arr = ['資料一', '資料二', '資料三', '資料四', '資料五'];

console.log(arr.shift()); //資料一 此時從前面被移出
console.log(arr); // ["資料二", "資料三", "資料四", "資料五"]

arr.unshift('新的資料一'); //從前面加入新資料
console.log(arr); // ["新的資料一", "資料二", "資料三", "資料四", "資料五"]

今天先講陣列最基本的資料加入取出跟修改,其它的明日繼續


上一篇
【Day 5】if、switch判斷式
下一篇
【Day 7】陣列(二):各種陣列的處理方法
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言