changed 5 years ago
Linked with GitHub

基礎 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 →

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

使用 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'

運算子

參考資料 JavaScript 的文法學

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

寫 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

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 平方

  1. >>:將位元往右移一位,可將其看成除以 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 的二進制表示法為 01101037 的二進制表示法為 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)

Select a repo