iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
1
自我挑戰組

重新開始的Vue.js 30day系列 第 5

從頭開始的Javascript 入門 -陣列 day4

從頭開始的Javascript 入門 -陣列 day4

前言

一個小劇場(跟陣列和物件沒有關係,可跳過XD)

菜鳥:
有時覺得書上解釋都十分冰冷,不然就是常用冷僻的解釋,可能還要先查中文解釋
(老鳥:所以就跟你說英文很重要了!!!第一手資料阿)

老鳥:所以你是要生活化解釋,你看文件看不懂嗎?

菜鳥:也不是說完全看不懂,就是很難消化,不是要教我寫程式碼,
應該是偏哲學的問題吧?譬如說有些框架或工具為什麼會需要 ? 在什麼時候用?
就是會用而已 但不一定懂他之所以要這麼做的原因

老鳥:通常會一再出現的名詞,是要先搞清楚的,所以就是耐著性子,先從文件第一頁循序看下去,而不是想到要查什麼就搜尋到那頁就進去看
初學的話,建議還是把文件按照順序讀完練習

菜鳥:....

老鳥:這是靠經驗的社會,想要學,先學會適應冷冰冰的程式語言如何,不然就是試著做筆記囉!

為何要使用陣列?

陣列 array

就像一個蘿蔔一個坑
array 是個比較大的坑,藥盒子的藥,禮拜一到禮拜天規定啥時要吃什麼?

var list = [1 ,2 , 3 ];

array 陣列可以裝任何容器 從字串 string 到數字 number 甚至是另一個array

  1. 賦予名稱 使用關鍵字,後面接上陣列名稱。
  2. 指定給陣列值,會放在方括號中

陣列實字 array literal

colors= ['white','red','blue'];

陣列構造子 array constructor

var colors= new Array('white','black','custom');

var list = [1 ,“2” , [3] ];

js還有一個方法就是算一下陣列的長度,

加上length

var list = [1 ,2 , 3 ];
console.log(list.length); //3

那如果你想要指定陣列其中一個,就是指定索引值 index

但是Javascript的起始值不是從1開始算喔 是 零喔!!!

var list = [1 ,2 , 3 ];

我想拿list 第一個元素 console.log( list[0]; )

得到1
那像下面的陣列我想拿到第三個元素呢?

var list = [1 ,2 , 3 ,"aa"];

答案是:
console.log(list[3];) 取出來是 aa

var myHeroes = ['蝙蝠俠','蜘蛛人','水行俠','黑寡婦'];

console.log(myHeroes[0]); // 印出第 1 位「蝙蝠俠」
console.log(myHeroes[1]); //印出第 2 位「蜘蛛人」
console.log(myHeroes[2]); // 印出第 3 位「水行俠」

console.log(myHeroes.length); // 印出 4

  • 陣列長度等於陣列個數
  • 從零開始計算
  • 陣列是由數值做索引

怎樣能出最後一個元素?

var myHeroes = ['蝙蝠俠','蜘蛛人','水行俠','黑寡婦'];
console.log(myHeroes[myHeroes.length - 1]);

存取與改變陣列資料值

建立陣列值

var colors =['red','green','blue'];
//變更陣列第三個項目

color[2] ='beige';

// 顯示陣列第三個項目
console.log(colors[2]);

空陣列運用 新增東西

var fild= []; // 空陣列
print(fild.length); // 0

fild.push(5);
fild.push(8);
fild.push(3);
consolo.log(fild);//[5,8,3]
print(fild.length); // 3

fild[0]= 10;
fild[3]= 100;

console.log(fild.length);//4 多增加一個

陣列的操作

var myHeroes = ['蝙蝠俠','蜘蛛人','水行俠','黑寡婦'];

push() 將新元素加到陣列後面,並回傳到陣列長度。

myHeroes.push('美隊'); // push 進來的會加在最後⾯

unshift() 將新元素加入陣列最前面

myHeroes.push('鷹眼'); // unshift 進來的會放在最前⾯

pop() 傳回陣列中的最後一個元素,並移除該元素

myHeroes.pop(); // 從最後⾯取出⼀個元素,原陣列元素會少⼀個

shift() 傳回陣列中的第一個元素,並移除該元素

myHeroes.shift(); // 從最前⾯取出⼀個元素,原陣列元素會少⼀個

檢查某元素是否在陣列中?

indexOf()

var myHeroes = ['蝙蝠俠','蜘蛛人','水行俠','黑寡婦'];
console.log(myHeroes.indexOf('蟻人'));  //  不存在印出 -1
console.log(myHeroes.indexOf('水行俠'));  // 存在印出 2

上一篇
從頭開始的Javascript 入門 -函式 day3
下一篇
從頭開始的Javascript 入門 -物件 day5
系列文
重新開始的Vue.js 30day21

尚未有邦友留言

立即登入留言