JS-Array 、Object literal、Object Constructor/陣列、物件表列、物件創造

Javascript 本身是不是物件導向, 可以在前幾篇的章節看看, 總話說 Javascript 是一個需要被解釋的語言!

說到陣列我們會重新提一次資料型態( 型別 ), 當你要提取某個元素的時候, 一定要確定該元素的資料型態與你要應用的資料型態, 對應是否相符合。

• string
• number
• boolean
• null
• undefined
• symbol (ES6 新增)

除了上述這些以外的”型別”，都是物件。

參考文章

• JavaScript Object (物件)
• W3S_Javascript_pop()
• 重新認識 JavaScript: Day 22 深入理解 JavaScript 物件屬性

給我這個肝肝的工程師一些支持吧! ^v^ 

---

<陣列-語法結構>

我們可以把陣列當作一個容器, 容器裡面會有多種的元素, 這些元素供給開發者提取。

我們利用日常的”顏色”, “書籍” 來舉個例子:

• 顏色種類: 紅、綠、藍、灰、黃
• 書籍種類: CS, VB, JS, Python, SQL
• 型別: String

let color =['red', 'green', 'blue','gray','yellow' ];

let book =['CS','VB','JavaScript','Python','SQL'];

console.log(color);
console.log(book);

<陣列-不同型別顯示>

當然, 陣列不管是幾維資料, 都可以混合不同型別使用。

let array00 =['green',100,false];

let bookprices=[320,400,350,250,400];

console.log(array00);
console.log(bookprices);

<陣列-讀取>

目前學過的語言裡面, 陣列的元素順序都是從0起始。

let array00 =['green',100,false];

let bookprices=[320,400,350,250,400];


console.log(array00[0]);
console.log(array00[1]);
console.log(array00[2]);

console.log(bookprices[0]);
console.log(bookprices[1]);
console.log(bookprices[2]);

<陣列-提取變數-賦予其他變數>

既然你都知道如何提取元素, 那我們來練習如何賦予新變數的流程。

let array00 =['green',100,false];

let liaolikenumber = array00[1];

console.log(liaolikenumber); 
//  result = 100

<陣列-資料長度>

陣列內元素個數。

let number =[0,1,2,3,4,5];

console.log(number.length);
// result =6 

---

[陣列內容新增、刪除的處理方法]

如果有做過通訊處理的工程師應該很清楚…

再來就是看你該如何辨識一整堆資料裡面, 資料的種類、順序… 再來考慮該如何提取”你要的資料” 或者是該 “寫入哪一些資料” !

[新增陣列內的資料]

<陣列-Push>

• 將元素推到最後一個陣列資料

—–增加元素——

push 將元素推到最後一個陣列資料

unshift 將元素寫入最前面一個陣列

—–刪除元素——

pop 刪除資料最後一個陣列

shift 刪除資料最前面一個陣列

—–刪除特定元素——

splice 可以規定範圍做刪除

let number =[0,1,2,3,4,5];

number.push(6);

console.log(number);

<陣列-unshift>

• 將元素寫入最前面一個陣列

let array01 =['2nd','3rd','4th','5th'];

array01.unshift('1st');
console.log(array01);

[刪除陣列內的資料]

<陣列-pop>

• 刪除陣列最後一筆資料

pop是一種陣列方法 / Method

結構: 陣列名稱.pop()

let bookname =["CS","VB","JS","Python","SQL"];

bookname.pop();

console.log(bookname);

<陣列-shift>

let bookname =["CS","VB","JS","Python","SQL"];

bookname.shift();
console.log(bookname);

[有範圍規範的刪除方法]

<陣列-splice>

當陣列資料多到一種程度時, 想必你也不會想一個一個去刪除吧?

這樣沒有效率又沒有方法….

let bookname =["CS","VB","JS","Python","SQL"];

bookname.splice(0,2);

console.log(bookname);

陣列順利 0~1 受到影響, 其餘沒有!

---

[物件概要]

JavaScript 物件 (object) 是一個複合資料型態 (composite data type)，可以儲存不定數量的鍵值對 (key-value paris)，而一組鍵值對我們稱做物件的一個屬性 (property)。一個屬性的值 (value) 可以是任何資料型態 (也可以是函數)；而屬性的名稱 (key / name) 是一個字串型態。

<物件創造>

方法1: 利用new來建立自定義抽象名稱之物件

物件建構式/Object Constructor

let makenewobject = new object();

方法2: 物件實字 /Object literal

let makenewobject ={};

<物件屬性>

我們拿車子零件的例子來陳述

車子的組成一定是非常多的零件組成, 這些細部的零件 = 屬性( Attribute )

眾多屬性名單集結成一個完整的電機總成( 物件 Object)。

底下連結有白話版本的範例:
https://hugohabor.com/?p=1129

Car.LightHeader
Car.AirConditionor
Car.Compressor
Car.Alternator
Car.Starter
Car.Fuelpump

我們把物件建置的結構寫給你看, 然後試試看他的“全部清單編號” 與 “單一筆資料編號” 。

let LightHeader ="NO1";
let AirConditionor ="NO2"; 
let Compressor ="NO3";
let Alternator ="NO4";
let Starter ="NO5";
let Fuelpump ="NO6";    


let Car ={
    LightHeader,
AirConditionor,
Compressor,
Alternator,
Starter,
Fuelpump,
};

console.log(Car);
console.log(Car.AirConditionor);

總結

資料集結是一個基本的結構, 你可以用陣列或者是物件陣列來達到。

但資料歸類又是另一回事, 甚至是資料的後續產生以及資料跳島的問題, 那就真的有得玩了。

---