iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0

事前準備

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

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

舉例

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

https://ithelp.ithome.com.tw/upload/images/20171223/201035180Bt9NdOQMw.png

基本型別值 (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 等能簡化且避開許多問題

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


上一篇
04. Speaking JavaScript 讀後心得 (1)
下一篇
06. Speaking JavaScript - 基礎篇 (2)
系列文
半路出家的工程師重新認識 JavaScript30

尚未有邦友留言

立即登入留言