前言

今天先介紹一下JavaScript的一些背景, 再說一下JavaScript的變數與資料類型。

JavaScript是一種Programming language, 無論是前端還是後端, 都能夠看到它的身影。 而JavaScript的演化過程, 絕對是比HTML精彩。

• 1995年 - Netscape的LiveScript
• 1996年 - Microsoft的JScript
• 1997年 - 由ECMA標準化, 標準為ECMAScript language specification
• 1998年 - ECMAScript 3
• 2009年 - ECMAScript 5
• 2015年 - 廣為人知的ECMAScript 6
• ...

變數

在JavaScript中, 有2種方法可以幫助我們宣告變數: var跟let。

var num1 = 1;
let num2 = 2;

console.logo(num1); // 1
console.logo(num2); // 2

而2者有什麼不同呢? 其中一個分別就是Hoisting。使用var的時候, var的變數宣告會被移動到程式區塊的頂端, 而let則不會。

例如:

num = 6;
console.log(num + 7); // 13
var num;

會變成

var num; // 提升到頂端
num = 6;
console.log(num + 7); // 13

若使用let的話, 會有什麼效果呢?

num = 6;
console.log(num + 7); // error: Cannot access 'num' before initialization
let num; // 不會提升到頂端

正因為code的順序與實際運行有所不同, var盡可能就不用。

資料類型

JavaScript支援以下資料類型

• number
  • 數值
  • 例如: 123, -3.14, 1e10
• boolean
  • 真假值
  • 例如: true, false
• string
  • 字串
  • 例如: 'hi', "hello", `good job`
• symbol
  • 用於產生唯一值(unique value)
  • Symbol('123') === Symbol('123') // false
• undefined
  • 未被定義
• null
  • 空值
• object
  • 資料的集合
  • 例如: {age: 10, name: 'Peter'}
• array
  • 陣列
  • 例如: ['a', 'b', 'c']
• function
  • 函數
  • 例如: function print() { console.log('hello'); }

資料類型看似簡單, 但也有幾個點要注意。

在Object中的undefined

undefined如果為Object中的某個值, 那麼, 其對應的键值應該被理解為未定義。

例如

{
  name: "Peter",
  age: undefined
}

應被理解為

{
  name: "Peter"
}

這2個Object雖然並不相等, 但對於其他不支援Undefined的Programming language來說, 如C#, 它們是一樣的, 所以, 這樣的理解有助我們日後與其他系統交流。

Array 跟 Object

如果我們巧妙的利用這兩個資料類型, 它們大多情況下都可以表達出一樣的資料。

const peter = [];
const mary = {};

peter.name = "Peter";
peter[999] = "text";

mary.name = "Mary";
mary[999] = "test";

那麼, 應該在什麼時候用Array或是Object, 又或者, 2者的分別是什麼?

1. Array是iterable, Object則不是

若果要對資料進行Loop的話, 使用Array比較方便。

const people = ['Peter', 'Mary'];

for (const person of people) {
    console.log(person); // output: Peter...Mary
}

const peopleInObject = {0: 'Peter', 1: 'Mary'};

for (const person of Object.values(peopleInObject)) {
    console.log(person); // output: Peter...Mary
}

2. Array的鍵會影響Array長度

const myArray = [];

myArray[999] = 10;

console.log(myArray.length); // 1000

for (const element of myArray) {
  // 這裡會Loop 1000次
}

結語

今天先到這裡, 明天說一下函數。