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

tags: Tag(JavaScript)

JavaScript 的概念

• 是一種物件導向的「腳本」語言
• JavaScript 是用來改進 Web 瀏覽器的客戶端體驗

目的性及用意

• 改善網站性能（歸功於 Ajax）
• 修復瀏覽器缺陷（CSS 較新特性的支援）
• 用於行動裝置
• 將一些處理從伺服端改到客戶端，降低伺服器負載

參考資料 JavaScript 基本認識

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

Node.js

Node.js 是一個能執行 JavaScript 的環境

執行方法：

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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

javascript 物件

參考資料 關於 Object ，一口氣全說完

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

分為基本型別 與物件型別

• 基本型別：數字、字串、布林、null、undefined
• 物件型別：任何非基本型別的值皆為物件

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

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

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

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

如果要判斷一個變數是否為 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'

運算子

參考資料 JavaScript 的文法學

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

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

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

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

物件特性

參考資料 Javascript 基礎

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

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

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

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

短路特性（邏輯運算）

參考資料 重新認識 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
   

Image Not Showing Possible Reasons

• The image file may be corrupted
• The server hosting the image is unavailable
• The image path is incorrect
• The image format is not supported

Learn More →

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

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

&（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)