JavaScript Day 10. 阵列

为什麽需要学到阵列？

假设今天这里有100样东西，我们必须设法执行它，而这时候如果不使用阵列，东西都是独立状态的时候，我们可能需要给100样东西都取名才能操作，其实不难想像这种情况的程序码，有多麽的冗长且没效率。因此，如果我们可以把整组的资料都传递到 function 去做运算，或是从阵列或物件捞出各个值，怎麽样都会比变数来到快速有效率。

什麽是阵列 (Array)？

以我自己对阵列的理解，大概可以这麽解读，将几个不同属性的值用中括号分成一组，里面的属性记得用逗号隔开，并给这个组一个变数名称，此时的型态就是阵列，如同范例上的样子。

let colors = ['white','black','red','green'];

阵列等於是涵盖着许多属性或物件的一个大型资料库，供写程序的时候更有效率的取用。

阵列写法

上面我们看到阵列的状态，可以给予一个变数，并在中括号里面增加几个字串，但其实阵列不只可以塞字串进去，它还可以塞进更多其他的资料。

// 不只能放字串，也可以放数字
let ary = [5,30,400,100];

// 也可以字串、数字、布林值
let ary = ['Teddy',5,30,true];

//甚至也可以是空字串
let ary = [];

这边要特别说一下，什麽情况下我们会需要设一个空字串；当我们需要把某一笔资料捞出来额外使用的时候，就会需要把那笔资料放入自己新增的空阵列里。

读取阵列

在 console 里面写入变数名称，是最直觉的读取方式，但是在阵列里面，这样子代表的是读取整个阵列的资料，但我们今天要讨论的是读取阵列里的某一个属性的资料，就像底下这个范例：

let colors = ['white','black','red','green'];
console.log(colors); // 'white','black','red','green'

假设我们只想要抓取 black 的话，就必须这麽处理：

let colors = ['white','black','red','green'];
console.log(colors[1]); // black

在这边要注意的地方是，阵列的排序是从 0 开始，所以 black 的位置是 1。

将阵列资料取出，并赋予变数

经过上面许多范例，到了这边其实也不难思考会是怎麽样的写法，这边的步骤其实就是读取加新增变数这两个动作而已，假设我想要取出 red，并额外对它新增一个变数：

let colors = ['white','black','red','green'];
let myColor = colors[2];
console.log(myColor); // red

使用 length 读取阵列长度

这个作法很常用在需要一次修改几笔资料，或是只修改特定几笔资料的时候。不过这里只会说明如何读取阵列长度。

let colors = ['white','black','red','green'];
let myColor = colors.length;
console.log(myColor); // 4 

写入阵列

上面有提到阵列也可以设一个空阵列，是为了让我们写入资料用的，底下这个范例可以看到如何将资料写进阵列。

let colors = [];
colors[0] = 'green';
colors[1] = 'red';
console.log(colors); // 'green','red'

提到了读取、写入、赋予属性变数、阵列长度之後，我们或许还会思考，还有没有更多写法能够改变阵列内容，使它可以越来越灵活的被取用，随着程序码越写越多，当然也会希望资料的取用能够更有效率；其实是有的，底下就简单的也讨论一下 push、unshift、shift、pop、splice。

push

push 是另一种替阵列加入资料的方式，它会在所有资料的最後面加入一个新的资料。

let colors = ['white','black','red','green'];
colors.push("pink");
// 也可以直接增加数字、布林值
colors.push(5);
console.log(colors); // 'white','black','red','green','pink',5

unshift

unshift 也是将资料写入，但与 push 不同的是，unshift 将资料新增在最前面，这比较常使用在留言板，我们希望可以看到最新留言的时候就可以使用。

let colors = ['white','black','red','green'];
colors.unshift("Haru");
// 也可以直接增加数字、布林值
colors.unshift(99);
console.log(colors); // 99,'Haru','white','black','red','green'

shift 与 pop

shift 和 pop 都是删除资料，差别在於 shift 是从前面开始删除，而 pop 则从後面删除资料。

let colors = ['white','black','red','green'];
colors.shift();
console.log(colors); // 'black','red','green'

colors.pop();
console.log(colors); // 'black','red'

splice

splice 也是删除资料，只是比较特别一点的是，它可以直接指定要删除的资料。

let colors = ['white','black','red','green'];
// 第一个数字代表起始位置
// 第二个数字，往後删除几个
colors.splice(1,2);
console.log(colors); // 'white', 'green'