JS 陣列 – (JS教學) Array為程式設計中最基本元素之一. 陣列就是用一個variable記下多個同類的值(記憶體中的位置), 以供日後所調用.
為何需要應用陣列
- 試想想如果要把每個的variable都declare一次, 如果有一百個, 就要輸入一百次, 加上其負帶的程式碼, 假設有十行, 就是要輸入1000行. 大量重覆的代碼使程式碼變得很長, 大大增加了Programmer輸入, 維護程式的時間.
- 而用Array就可以解決述的問題, Array的用處就是用一個variable儲存同類的值, 以避免用戶要大量輸入variable. 加上佩合for, foreach迴圈的使用, 大量減少了程式碼的輸入. 運用Array, 只需把陣列宣告一次. 因為有用for迴圈的關係, 也只需要輸入一次程式碼, 如果程式碼只有十行, 而加上for statement, 總共就是十一行, 大大簡化了程式碼. 這對輸入, 編碼, 及日後維護很有益處.
應用陣列的例子
- 如果JS用在Server Side, 最常見的就是從Database中抽取Data, 一個Table有多個列, 每一個列就用一個維度作儲存. 加上Rsjs等的應用, 令到資料可以像SQL般在程序內處理, 更準確起拿資料.
- 如果用在Client Side的版面, 抽取出來的Data要可能要Display, 那一列列的資料就可用一個for loop表示出來, 用一些Framework, 例如Vue或Angular等都很方便可以顯示出來.
- 如果要在Client Side做Automation Test, 如用Selenium模擬user的動作, 那Set好一套後, 可以用for loop, 加上Parameter (儲在Array), 進行測試.
陣列應用一覽表
Javascript有8種最基本應用方法, 分別為 陣列初始化 , 陣列加入值 , 陣列插入值 , 陣列更新值 , 陣列刪除值 , 陣列抽取值 , 陣列排序 , 陣列foreach迴圈 , 為最基礎, 最重要, 最常使用, 以下就作出介紹.
| 方法 | 例子: |
| 初始化1, 不包含值: Array Init 1: | owners = []; //加入空的值 console.log(owners.length); // 0 |
| 初始化2, 包含值 Array Init 2: | owners = [“陳大文”, “張秀華”, “華文”, “華生”]; console.log(owners); // [ ‘陳大文’, ‘張秀華’, ‘華文’, ‘華生’ ] |
| 初始化3, 包含值 Array Init 3: | owners = new Array(“陳大文”, “張秀華”, “華文”, “華生”); console.log(owners); // [ ‘陳大文’, ‘張秀華’, ‘華文’, ‘華生’ ] |
| 加入值 Array Push | owners = [“陳大文”, “張秀華”, “華文”, “華生”]; owners.push(“森馬”); console.log(owners); // [ ‘陳大文’, ‘張秀華’, ‘華文’, ‘華生’, ‘森馬’ ] |
| 加入多個值 Array Concat | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; owners2 = [“John”, “Peter”]; owners1 = owners1.concat(owners2); console.log(owners1); // [ ‘陳大文’, ‘張秀華’, ‘華文’, ‘華生’, ‘John’, ‘Peter’ ] |
| 插入多個值 Array Splice | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; owners1.splice(2, 0, “John”, “Peter”); console.log(owners1); // [ ‘陳大文’, ‘張秀華’, ‘John’, ‘Peter’, ‘華文’, ‘華生’ ] |
| 更新值 Array Update | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; owners1[2] = “林一月”; console.log(owners1); // [ ‘陳大文’, ‘張秀華’, ‘林一月’, ‘華生’ ] |
| 刪除值 Array Remove | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; delete owners1[2] // [ ‘陳大文’, ‘張秀華’, <1 empty item>, ‘華生’ ] |
| 切片 (抽取值) Array Slice | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; owners1 = owners1.slice(2) console.log(owners1); // [ ‘華文’, ‘華生’ ] |
| 排序 Array Sort Array Reverse | owners1 = [“陳大文”, “張秀華”, “華文”, “華生”]; owners1.sort(); owners1.reverse(); console.log(owners1); // [ ‘陳大文’, ‘華生’, ‘華文’, ‘張秀華’ ] |
| 取走第一個值 Array Shift | owners = [“陳大文”, “張秀華”, “華文”, “華生”]; owners.shift(); console.log(owners); // [ ‘張秀華’, ‘華文’, ‘華生’ ] |
| 加入在第一個值前 Array Unshift | owners = [“陳大文”, “張秀華”, “華文”, “華生”]; owners.unshift(“森馬”); console.log(owners); // [ ‘森馬’, ‘陳大文’, ‘張秀華’, ‘華文’, ‘華生’ ] |
| foreach迴圈 Array ForEach | function func(value) { console.log(value); } owners = [“陳大文”, “張秀華”, “華文”, “華生”]; owners.forEach(func); //陳大文 //張秀華 //華文 //華生 |
| (等如) | |
| for迴圈 Array For | owners = [“陳大文”, “張秀華”, “華文”, “華生”]; for(i = 0; i < owners.length; i++) { console.log(owners [i]); } //陳大文 //張秀華 //華文 //華生 |
相關頁面:
JS Set – 學會Set的基本4種應用方法 – 初始化, 加入值, 刪除值, foreach迴圈
JS Map – 學會Map的基本5種應用方法 – 初始化, 加入值, 更新值, 刪除值, foreach迴圈
資料參考: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array