# 基礎 JavaScript - 物件特性,位元運算

###### tags: `Tag(JavaScript)`
###### JavaScript 的概念
- 是一種物件導向的「腳本」語言
- JavaScript 是用來改進 Web 瀏覽器的客戶端體驗
###### 目的性及用意
- 改善網站性能（歸功於 Ajax）
- 修復瀏覽器缺陷（CSS 較新特性的支援）
- 用於行動裝置
- 將一些處理從伺服端改到客戶端，降低伺服器負載

>[參考資料](http://test.domojyun.net/MEMO/JavaScript/) JavaScript 基本認識

## :memo: Node.js
Node.js 是一個==能執行 JavaScript 的環境==

### 執行方法：

直接執行 `node`，再輸入你的程式

## :memo: javascript 物件

>[參考資料](https://medium.com/enjoy-life-enjoy-coding/javascript-%E9%97%9C%E6%96%BC-object-%E4%B8%80%E5%8F%A3%E6%B0%A3%E5%85%A8%E8%AA%AA%E5%AE%8C-4bb924bcc79f) 關於 Object ，一口氣全說完

##### 一個物件可以是個零至多種屬性的集合，而屬性是鍵 (key) 與值 (value) 之間的關聯。 一個屬性的「值」可以是某個基本型別，也可以是另一個物件，甚至可以是一個函數。物件可以是瀏覽器預先定義好的，當然也可以是由自己定義物件的屬性與內容。

分為基本型別 與物件型別
- [x] 基本型別：數字、字串、布林、null、undefined
- [x] 物件型別：任何非基本型別的值皆為物件
###### null 是基本型別之一，但 typeof null 卻得到 object，而非 null！這可說是一個 bug，可是若因為修正了這個 bug 則可能會導致很多網站壞掉，因此就不修了！

#### 建立物件的方式
直接用大括號 `{ }`，即可建立起一個新的物件，並且在建立物件的同時直接指定屬性至該物件內

var person = {
  name: 'Kuro',
  job: 'Front-end developer',
  sayName: function() {
    alert( this.name );
  }
};

#### 如何存取物件
##### 物件本身的組成是由一個 `{屬性(property) / 值(value)}` 組成的，可以透過 JavaScript 的規則定義一個物件的名稱
Property 的 value 可以是任何的型態值，包括 string 、 integer 、 function 又或是另一個 Object

:::success
##### 使用 Object 中的 Property 方式有兩種
1. 物件的屬性可以透過` .` 來進行存取
2. 或是可以透過` [ ] `來進行存取

//使用 . 點號運算子
console.log(mary.name)  
//印出 Mary

//使用 [] 中刮號運算子
const propertyNameA = 'say'
const propertyNameB = 'Hello'
mary[propertyNameA + propertyNameB]()  
//取出 function 後執行，印出 Hello Mary

##### 判斷屬性是否存在
`in` 運算子 與 `hasOwnProperty()`

var obj = {
  name: 'Object'
};

// 透過 in 檢查屬性
console.log( 'name' in obj );     // true
console.log( 'value' in obj );    // false

// 透過 hasOwnProperty() 方法檢查
obj.hasOwnProperty('name');       // true
obj.hasOwnProperty('value');      // false

`雖然兩者都可以檢查物件的屬性是否存在，但 hasOwnProperty() 方法不會往上檢查物件的原型鏈 (prototype chain)，只會檢查物件本身是否存在這個屬性，而 in 運算子則會繼續往物件原型鏈上檢查`

:::
##### 如果要判斷一個變數是否為 Object 可以使用 `typeof `
但是要注意，除了真正的 Object 外， null 、 Array 也都會回傳 Object ，因此在判斷時，記得先處理掉變數型態可能是 null 或Array 的可能性

typeof 'Hello World!'; // 'string'
typeof true; // 'boolean'
typeof 1234567; // 'number'
typeof null; // 'object'
typeof undefined; // 'undefined'
typeof { name: 'Jack' }; // 'object'
typeof Symbol(); // 'symbol'
typeof function() {}; // 'function'
typeof [1, 2, 3]; // 'object'
typeof NaN; // 'number'

### 運算子

>[參考資料](https://wcc723.github.io/javascript/2017/12/11/javascript-grammar/) JavaScript 的文法學

###### `+`、`=`、`==` 都是運算子，本身這也是屬於函式的一種，是用來將它本身 ==前後方的值== 做計算，然後回傳一個新的值

:::info
##### 方向及優先性
寫 JavaScript 時也是習慣由左到右撰寫，但其實 JavaScript 文法並不是只有由左到右，而是依據 結合性 (Associativity) 決定它是由左至右，還是由右至左閱讀

// 將 5 的數值賦予給 b ，再由 b 賦予給 a，所以 a 的值會得到 5
a = b = 5;
console.log(a);

除此之外，JavaScript 還有一個優先性，==高優先性 (Precedence) 的運算子會被優先執行==

3 + 3 * 3 // 得到 12，因為 * 的優先值高於 +
(3 + 3) * 3 // 得到 18，因為 () 內的優先計算

:::

- `=` ：「得到或指定至」，把右邊運算結果傳至左邊（==賦值==）
- `==`：「等於」，進行類型轉換，較寬鬆(==判斷相等，不判斷型態==)
- `===` ：「嚴格等於」，不進行類型轉換，較嚴格(==判斷相等，型態也相同==)
- `!==`:不等於
- `&&`:and

var a1 =  true && true;     // t && t 回傳 true
var a2 =  true && false;    // t && f 回傳 false
var a3 = false && true;     // f && t 回傳 false
var a4 = false && (3 == 4); // f && f 回傳 false
var a5 = "Cat" && "Dog";    // t && t 回傳 Dog
var a6 = false && "Cat";    // f && t 回傳 false
var a7 = "Cat" && false;    // t && f 回傳 false

- `||`:or

var o1 =  true || true;     // t || t 回傳 true
var o2 = false || true;     // f || t 回傳 true
var o3 =  true || false;    // t || f 回傳 true
var o4 = false || (3 == 4); // f || f 回傳 false
var o5 = 'Cat' || 'Dog';    // t || t 回傳 Cat
var o6 = false || 'Cat';    // f || t 回傳 Cat
var o7 = 'Cat' || false;    // t || f 回傳 Cat

- `!`:not

## :memo: 物件特性

>[參考資料](https://kennyliblog.nctu.me/2019/06/17/Javascript-basic/#Handling-Events) Javascript 基礎

對複合值的比對使用的是參考記憶體位址
在 JavaScript 中，==物件是比較記憶體位置==

var a = { name: "eason", action: "haha" };

var b = { name: "eason", action: "haha" };

console.log(a === b); //false

### 短路特性（邏輯運算）

>[參考資料](https://ithelp.ithome.com.tw/articles/10191343) 重新認識 JavaScript

##### ` javascript 裡面只要是 0、""、null、false、undefined、NaN 都會被判定為 false`
邏輯與 && 的運算方式

var a = 5 && 6;

console.log(a); //返回的結果為 6

var a = false && 6;

console.log(a); //返回的結果為 false

邏輯與 || 的運算方式

var a = false || 6;

console.log(a); //返回的結果為6

var a = true || 6;

console.log(a); //返回的結果為true

### 位元位移

1. `<<`：將位元往左移一位，可將其看成乘以 2 的幾次方
10 << 2 = 10 * 2^2 = 40

上面的 2^2，是表示 2 的 2 平方

2. `>>`：將位元往右移一位，可將其看成除以 2 的幾次方。若不能整除會直接捨去
1024 >> 2 = 1024 / 2^2

## :memo: 位元運算 AND （&）、OR（|）、NOT（!）、XOR（^）


`26` 的二進制表示法為 `011010` 、 `37` 的二進制表示法為 `10010`

:::warning
`&&` 為邏輯運算，而 `&` 為位元運算，`||` 為邏輯運算，而 `|` 為位元運算

:::

### `&（and)`

當成位元間的 &&，以 0011 & 1001 ( 3 & 9 ) 為例，會回傳 0001( 1 )
可以拆解成

- n `&` 1 效果如同 n `%` 2 → 1 ， 代表 n 的最後 1 個位元數 ( 2⁰ ) 是 1， n 為 奇數
- n `&` 1 效果如同 n `% `2 → 0 ， 代表 n 的最後 1 個位元數 ( 2⁰ ) 是 0，n 為 偶數

### `（|）OR`

當成位元間的 `||`，以 `0011` `|` `1001` ( `3` `|` 9` ) 為例，會回傳 `1011` ( `11 )
可以拆解成

### `^` 位元 `XOR` (EXCLUSIVE OR)
##### 其中一個位元為 1 而另一個為 0 時輸出才是 1


AND運算：
0 AND 0         0
0 AND 1         0
1 AND 0         0
1 AND 1         1

OR運算：
0 OR 0          0
0 OR 1          1
1 OR 0          1
1 OR 1          1

XOR運算：
0 XOR 0         0
0 XOR 1         1
1 XOR 0         1
1 XOR 1         0

NOT運算：
NOT 0           1
NOT 1           0

#### 指派運算子 (Assignment Operator)