事前準備

接下來的文章都會帶到些許範例

所有範例都可以在 Chrome => F12 => Console 執行

舉例

> var foo = 0;
> console.log(foo);
0

基本型別值 (primitive values)

• Boolean (true, false)
• String ('abc', "abc")
• Number (1, 1.31)
• undefined (非值 nonvalues)
• null (非值 nonvalues)

// 基本值在比較的時候，都是比較「值」(by value)
> 3 === 3;
true
> 'abc' === 'abc';
true

物件 (objects)

只要是基本型別值以外的，都是物件

// 一般物件
{
    firstName: 'John',
    lastName: 'Doe'
}

// 陣列
['apple', 'banana', 'cherry']

// 正規表達式
/^a+b+$/

// 物件在比較的時候，是比較他們的「參考」 ( by reference )
> var obj1 = {};
> var obj2 = {};
> obj1 === obj2;
false

> var obj3 = {};
> var obj4 = obj3;
> obj3 === obj4;
true

undefined

undefined 代表沒有值 (no value)

會再以下幾種情況出現 undefined

• 未初始化變數
• 缺少的參數
• 讀取一個不存在特性
• 未明確回傳什麼，函式會隱含回傳 undefined

// 未初始化變數
> var foo;
> foo
undefined

// 缺少的參數
> function f(x) { return x }
> f()
undefined

// 讀取一個不存在特性
> var obj = {};
> obj.foo
undefined

// 未明確回傳的函式
> function f() {}
> f()
undefined

null

null 代表沒有物件 (no object)

> Object.getPrototypeOf(Object.prototype)
null

> /X/.exec('aaa')
null

檢查 undefined, null

// 檢查 null
if(x === null) {
    // then...
}

// 檢查 undefined
if(x === indefined) {
    // then...
}

// 檢查 undefined 或 null
if(x === null || x === undefined) {
    // then...
}

另外一種方式是利用 null, undefined 都會被視為 false 的特性

// x 有值嗎?
if(x) {
    // then..
}

// x 是 falsy 嗎?
if(!x) {
    // then..
}

今日總結

今天簡易介紹了 JavaScript 的基礎 string, number, boolean, 物件, null, undefined

讓自己有個概念以後，明天會介紹運算子的使用及 Boolean

接下來會陸續介紹 number, string 的用法及常見地雷、提升(hoisting)、函式等等

全都是 JavaScript 原生的，不會使用到 JQuery, lodash 等函式庫。

雖然使用前端框架如 Angular, Vue, React 或 JQuery, lodash 等能簡化且避開許多問題

但多了解多學習也不錯喔!