活動流程
Who am I
葉裕安 Evan Ye
JIgsaw / @jigsawye
練習環境
瀏覽器的 devtools
↑ 就是這個東西（按下 F12 或 cmd+opt+i ）
或建立 html 檔案
陣列
陣列就是一個含有多個元素的集合
// 宣告陣列
var someArray = ['Apple', 'Banana', 'Car', 'Dog'];
存取陣列元素
var arr = ['do', 're', 'mi'];�
/**� * +-------+------+------+------+� * | value | 'do' | 're' | 'mi' |� * +-------+------+------+------+� * | key | 0 | 1 | 2 |� * +-------+------+------+------+� */
�console.log(arr[1]);
// 're'
新增元素
透過 key
var arr = ['Apple', 'Banana', 'Car'];��arr[3] = 'Dog';��console.log(arr);�// outputs ["Apple", "Banana", "Car", "Dog"]
透過方法
push() 新增元素至陣列末端
var arr = ['Apple', 'Banana', 'Car'];��arr.push('Dog');��console.log(arr);�// outputs ["Apple", "Banana", "Car", "Dog"]
unshift() 新增元素至陣列開頭
var arr = ['Apple', 'Banana', 'Car'];��arr.unshift('Zoo');��console.log(arr);�// outputs ["Zoo", "Apple", "Banana", "Car"]
移除元素
透過方法
pop() 移除陣列末端元素
var arr = ['Apple', 'Banana', 'Car'];��arr.pop();��console.log(arr);�// outputs ["Apple", "Banana"]
shift() 移除陣列首端元素
var arr = ['Apple', 'Banana', 'Car'];��arr.shift();��console.log(arr);�// outputs ["Banana", "Car"]
陣列長度
array.length 取得陣列長度
var arr = ['Apple', 'Banana', 'Car'];��console.log(arr.length);�// outputs 3
迴圈
for 迴圈
/**� * 起始值 執行條件 迭代方式� */ | | |�for (var i = 0; i <= 10; i++) {� console.log(i);�}��// outputs 0 1 2 3 4 5 6 7 8 9 10
// i++ ⇔ i = i + 1
// i-- ⇔ i = i - 1
// i += j ⇔ i = i + j
// i -= j ⇔ i = i - j
for 迴圈尬陣列
var topMovie = ['Hotel Transylvania 2', 'The Intern', 'Maze Runner: The Scorch Trials'];�var movie = '';��for (var i = 0; i < topMovie.length; i++) {� movie += topMovie[i];�� if (i != topMovie.length - 1) {� movie += ', ';� } �}�console.log(movie);
// outputs Hotel Transylvania 2, The Intern, Maze Runner: The Scorch Trials
當然有更好的做法
join() 將陣列合併成字串
var topMovie = ['Hotel Transylvania 2', 'The Intern', 'Maze Runner: The Scorch Trials'];��movie = topMovie.join(', ');��console.log(movie);�// outputs Hotel Transylvania 2, The Intern, Maze Runner: The Scorch Trials
教授最愛問 a 九九乘法表
for (var x = 1; x <= 9; x++) {� var tmp = [];� for (var y = 2; y <= 9; y++) {� tmp.push(y + ' * ' + x + ' = ' + x * y);� }� console.log(tmp.join("\t"));�}
while 迴圈
var i = 0;
�do {� console.log(i);
i ++;�} while (i < 0)
// outputs 0
var i = 0;�/**
* 執行條件� */ | �while (i < 10) {� console.log(i);
i ++;�}
while 迴圈尬 if
var i = 0;�var sum = 0;��while (i < 50) {� if ((i % 2) == 0) {� console.log(i);� sum += i;� }� i++;�}��console.log('sum = ' + sum);
別讓你的 while 迴圈條件永遠為 true
while (true) {� console.log('不行！會壞掉！');�}
迭代
迭代就是指將陣列的每個元素跑過一次
var arr = ['Apple', 'Banana', 'Car', 'Dog'];��for (var i = 0; i < arr.length; i++) {� console.log(arr[i]);�}�
forEach 迭代方法
var arr = ['Apple', 'Banana', 'Car', 'Dog'];��arr.forEach(function (value, key) {� console.log('key: ' + key + ', value: ' + value);�});
map 迭代方法
var arr = ['Apple', 'Banana', 'Car', 'Dog'];��var newArr = arr.map(function (value, key) {� return 'key: ' + key + ', value: ' + value;�});
console.log(newArr);
javascript 常用陣列方法:
http://neighborhood999.github.io/blog/2015/08/07/javascript-array-basic-use/
MDN:
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript
ES5 JavaScript Style Guide：
Any Question?
Thanks for listening!