關於陣列～

這裡就要先講到 陣列跟物件 是資料集合
能有效幫助我們在設計資料的時候更加友善
目的是不用設過多多餘的編號變數

假設進入水果店 有很多水果都要設變數來放水果名稱
若不使用陣列則會產生許多筆變數
使用陣列則可以縮減在一個變數就能解決

以下是陣列與非陣列寫法的差別

//不使用陣列寫法

let color1 = 'blue';
let color2 = 'red';
let color3 = 'black';

//陣列寫法 (只需要一行則可以紀錄)

let colors = ['blue','red','black'];

let ary = ['blue',5,false]; //可以不同型態都放
console.log(ary);

let books = [5,30,400,100]
console.log(books);

let data = [ ]; //可以設空值
console.log(data);

陣列讀取教學

讀取陣列資料、需要了解陣列的長度算法

陣列從第一個是0開始算起 不是從1！！！

let colors = ['blue','red','black'];

console.log(colors[0]);  //回傳陣列第一個 blue

console.log(colors[1]);  //回傳陣列第二個 red

let likecolor = color[2]; //將第三個black傳進新宣告的變數likecolor中
console.log(likecolor)

length 讀取陣列長度流程

可以使用length來讀取出陣列的長度 如下

let colors = ['blue','red','black']; //宣告一個陣列變數

let colorsNum = colors.length; //計算colors陣列長度放進變數colorsNum

console.log(colors.length); //回傳結果

陣列預設寫入資料

// 陣列 array

let colors = [];

//寫入
colors[0]="blue";
colors[1]="red";
colors[2]="black";

colors[4]="pink"; //假設跳過3直接寫入4

console.log(colors[4]); 
//會印出5筆資料 ["blue","red","black","empty"(空白),"pink"]

console.log(colors.length); //長度會算進空白 所以還是5筆

push 寫入資料流程

push是能將資料寫入陣列最後面

// 陣列 array

let colors = ['blue','red','black'];

colors.push('pink');
colors.push('yellow');

會從陣列最後開始將資料放進去 如圖

unshift 寫入資料流程

unshift是能將資料寫入在陣列的最前面

// 陣列 array

let colors = ['blue','red','black'];

colors.unshift('pink');

從陣列最開始的地方塞資料 其他資料被往後推 如圖

pop 與 shift 刪除資料

pop從陣列最後面刪除
shift從陣列最前面刪除

// 陣列 array

let colors = ['blue','red','black'];

//新增 push、unshift
//刪除 pop、shift

colors.shift(); //從最前面開始刪除 會刪掉blue
colors.pop(); //從最後面開始刪除 會刪除black

splice 刪除指定資料

splice可以刪除指定的資料

// 陣列 array

let colors = ['blue','red','black'];

//第一個數字，起始位置
//第二個數字，要往後刪除起筆資料

colors.splice(1,2); //從第2個資料開始刪除 刪除兩筆資料

console.log(colors); //回傳blue

可以應用在按按鈕之後 刪除哪一筆資料

以上是較為簡易的陣列教學
那更多陣列應用的方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]
這邊附上六角學院的詳細教學
https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/