JS筆記（二）

一、完整的JavaScript由核心（ECMAScipt）、文檔對象模型（DOM）、瀏覽器對象模型（BOM）組成。

二、<script>標籤的用法：引用位置、src、async、defer、<noscript>

三、語法：變量、函數名和操做都區分大小寫；標識符；註釋；嚴格模式；語句（分號結尾、多條語句用{ }組合在一個代碼塊中）

四、關鍵字和保留字

五、變量：聲明未初始化->undefined；做用域；省略var操做符->全局變量（不推薦）

六、數據類型：Undefined、Null、Boolean、Number、String、Object

　　（1）typeof：檢測給定變量的數據類型

　　（2）Undefined類型：惟一值undefined。對未初始化的變量執行typeof操做會返回undefined，對未聲明的變量執行typeof操做也是undefined。

undefined + 1    //NaN
undefined - 1    //NaN
undefined * 1    //NaN
undefined / 1    //NaN
undefined + '10'    //"undefined10"
undefined - '10'    //NaN
undefined * '10'    //NaN
undefined / '10'    //NaN

除去加字符串操做爲拼接，其他undefined操做都是NaN

　　（3）Null類型：惟一值null。表示一個空對象指針，null值執行typeof操做會返回object。所以定義的變量準備保存對象，則初始化爲null。

null + 1    //1
null - 1    //-1
null * 1    //0
null / 0    //0
null + '1'    //"null1"
null - '1'    //-1
null * '1'    //0
null / '1'    //0
null + true    //1
null + false    //0
null + [1, 2, 3]    //"null1,2,3"
null - [1, 2, 3]    //NaN
null + {id: 1}    //"null[object Object]"
null - {id: 1}    //NaN

　　（4）Boolean類型：有true和false兩個值。Boolean()--->布爾值

　　（5）Number類型：整數和浮點數值。十進制、八進制（0 + （0~7））、十六進制（待完善）

var floatNum = 3.125e7;    //等於3.125乘以10的7次方 = 31250000
var floatNum1 = 3e-17;    //等於3乘以10的負17次方 = 0.00000000000000003


0.1 + 0.2 = 0.30000000000000004;

0.15 + 0.15 = 0.3;

0.05 + 0.25 = 0.3;

 　　（6）String類型：由雙引號（"）或單引號（'）表示。toString()、String()、

'10\n' + 10    //"10
                    10"    
'10\n' - 10    //0
'10\n' * 10    //100
'10\n' / 10    //1

'10\r' + 10    //"1010"
'10\r' - 10    //0
'10\r' * 10    //100
'10\r' * 10    //1

'10\t' + 10    //"10 10"
'10\t'  - 10    //0
'10\t'* 10    //100
'10\t' / 10    //1

// \b, \f, \\, \', \", \xnn, \unnnn

　　（7）Object類型：經過new Object()建立。屬性和方法有：

　　　　1）Constructor：構造函數：保存當前對象的函數

　　　　2）hasOwnProperty(propertyName)：檢查給定的屬性在當前對象實例中是否存在

　　　　3）isPrototypeOf(object)：檢查傳入的對象是不是另外一個對象的原型

　　　　4）propertyIsEnumerable(proertyName)：檢查給定的屬性是否可以使用for-in語句枚舉

　　　　5）toLocaleString()：返回對象的字符串表示

　　　　6）toString()：返回對象的字符串表示

　　　　7）valueOf()：返回對象的字符串、數值或布爾值比表示。一般與toString()方法返回的值相同。

class Polygon {
  constructor() {
    this.name = "Polygon";
  }
}

var poly1 = new Polygon();

poly1.name;    //"Polygon"
poly1.hasOwnProperty('name');    //true
poly1.propertyIsEnumerable('name');    //true
poly1.toLocaleString();    //"[object Object]"
poly1.toString();    //"[object Object]"
poly1.valueOf();    //Polygon {name: "Polygon"}

七、操做符：包括算術操做符、位操做符、關係操做符和相等操做符等。

　　（1）一元操做符：只操做一個值的操做符。

var age = 29;
++age;
console.log(age);    //30


var age = 29;
age = age + 1;
console.log(age);    //30


var age = 29;
--age;
console.log(age);     //28


var age = 29;
var anotherAge = --age + 2;
console.log(age);    //28
console.log(anotherAge);    //30


var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;    //21
var num4 = num1 + num2;    //21


var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;    //22
var num4 = num1 + num2;    //21

var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var o = {
    valueOf: function() {
        return -1;
    }
};


s1++;    //3
++s1;    //3
s2++;    //NaN
++s2;    //NaN
b++;    //1
++b;    //1  
f--;    //0.10000000000000009
--f;    //0.10000000000000009
o--;     //-2
--o;     //-2

var s1 = "01";
var s2 = "1.1";
var s3 = 'z';
var b = false;
var f = 1.1;
var o = {
    valueOf: function() {
        return -1;
    }
};


s1 = +s1;    //1
s2 = +s2;    //1.1
s3 = +s3;    //NaN
b = +b;    //0
f = +f;    //1.1
o = +o;    //-1

s1 = -s1;    //-1
s2 = -s2;    //-1.1
s3 = -s3;    //NaN
b = -b;    //0
f = -f;    //-1.1
o = -o;    //1

 　　（2）位操做符：在數字底層（即表示數字的 32 個數位）進行操做的。

var iNum = 18;
alert(iNum.toString(2));    //"10010"


var iNum = -18;
alert(iNum.toString(2));    //"-10010"
 

　　　　這段代碼只輸出 "10010"，而不是 18 的 32 位表示。其餘的數位並不重要，由於僅使用前 5 位便可肯定這個十進制數值。以下圖所示：

　　　　

　　　　1）按位非NOT（~）：執行按位非的結果就是返回數值的反碼。

var iNum1 = 25;        //25 等於 00000000000000000000000000011001
var iNum2 = ~iNum1;    //轉換爲 11111111111111111111111111100110
iNum2;    //-26  在數值表示的最底層執行操做，速度更快



var iNum1 = 25;
var iNum2 = -iNum1 -1;
iNum2;    //-26

　　　　2）按位與AND（&）：

var a = 25 & 3;    //1

var a = 25 & 0;    //0

var a = 0 & 0;    //0

　　　　3）按位或OR（|）：

var a = 25 | 3;    //27

var a = 25 | 0;    //25

var a = 0 | 0;    //0 

　　　　25 和 3 進行 OR 運算的結果是 27：

　　　　25 = 0000 0000 0000 0000 0000 0000 0001 1001
 　　　　3 = 0000 0000 0000 0000 0000 0000 0000 0011
　　　　--------------------------------------------
　　　　OR = 0000 0000 0000 0000 0000 0000 0001 1011

　　　　能夠看出，在兩個數字中，共有 4 個數位存放的是 1，這些數位被傳遞給結果。二進制代碼 11011 等於 27。

　　　　4）按位異或XOR（^）：

var a = 25 ^ 3;    //26

var a = 25 ^ 0;    //25

var a = 0 ^ 0;    //0

　　　　25 和 3 進行 XOR 運算的結果是 26：

 　　　　25 = 0000 0000 0000 0000 0000 0000 0001 1001
  　　　　3 = 0000 0000 0000 0000 0000 0000 0000 0011
　　　　---------------------------------------------
　　　　XOR = 0000 0000 0000 0000 0000 0000 0001 1010

　　　　能夠看出，在兩個數字中，共有 4 個數位存放的是 1，這些數位被傳遞給結果。二進制代碼 11010 等於 26。

 　　　　5）左移、有符號的右移、無符號的右移

　　（3）布爾操做符：非（NOT）、與（AND）、或（OR）。

　　　　1）非（!）：

!false;    //true
!"blue";    //false
!0;    //true
!NaN;    //true
!"";    //true
!12345;    //false
!null;    //true
!undefined;    //true



!!false;    //false
!!"blue";    //true
!!0;    //true
!!NaN;    //true
!!"";    //true
!!12345;    //true
!!null;    //false
!!undefined;    //false

　　　　2）與（&&）：

true && aa;    //Uncaught ReferenceError: aa is not defined

false && aa;    //false

{id: 1} && {id: 2};    //{id: 2}

{id:1} && 3;    //Uncaught SyntaxError: Unexpected token &&

true && {id: 1};    //{id: 1}

true && NaN;    //NaN

true && undefined;     //undefined

false && NaN;    //false

　　　　3）或（||）：

true || aa;    //true

false || aa;    //Uncaught ReferenceError: aa is not defined

{id: 1} || {id: 2};    //Uncaught SyntaxError: Unexpected token ||

{id:1} || 3;    //Uncaught SyntaxError: Unexpected token ||

true || {id: 1};    //true

true || NaN;    //true

true || undefined;     //true

false || NaN;    //NaN

　　（4）乘性操做符：包括乘法、出發和求模。空字符串被當作0，布爾值true將被看成1.

　　　　1）乘法（*）：

3 * 3    //9
3 * -3    //-9
3 * NaN    //NaN
Infinity * 0    //NaN
Infinity * 3    //Infinity
Infinity * -3    //-Infinity
3 * '3'    //9
3 * ''    //0
3 * true    //3
3 * false    //0
3 * 'aa'　　//NaN

　　　　2）除法（/）：

3 / 3    //1
3 / -3    //-1
3 / NaN    //NaN
Infinity / 0    //Infinity
Infinity    //Infinity
Infinity / -3    //-Infinity
3 / '3'    //1
3 / ''    //Infinity
3 / true    //3
3 / false    //Infinity
3 / 'aa'　　//NaN

　　　　3）求模（%）：

3 % 3    //0
3 % -3    //0
3 % NaN    //NaN
Infinity % 0    //NaN
Infinity % 3    //NaN
Infinity % -3    //NaN
3 % '3'    //0
3 % ''    //NaN
3 % true    //0
3 % false    //NaN
3 % 'aa'　　//NaN

 　　（5）加性操做符：包括加法和減法。

　　　　1）加法：

1 + NaN    //NaN
Infinity + Infinity    //Infinity
Infinity + 1    //Infinity
Infinity + (-Infinity)    //NaN
-Infinity + (-Infinity)    //-Infinity
+0 + 0    //0
-0 + (-0)    //-0
0 + (-0)    //0
1 + 6    //7
1 + '7'    //"17"
1 + 'ee'    //"1ee"
1 + null    //1
1 + undefined    //NaN
1 + true    //2
1 + [1,2,3]    //"11,2,3"
1 + {id: 1}    //"1[object Object]"

　　　　2）減法：

1 - NaN    //NaN
Infinity - Infinity    //NaN
Infinity - 1    //Infinity
Infinity - (-Infinity)    //Infinity
-Infinity - (-Infinity)    //NaN
+0 - 0    //0
-0 - (-0)    //0
0 - (-0)    //0
-0 - 0    //-0
1 - 6    //-5
1 - '7'    //-6
1 - 'ee'    //NaN
1 - null    //1
1 - undefined    //NaN
1 - true    //0
1 - [1,2,3]    //NaN
1 - {id: 1}    //NaN

 　　（6）關係操做符：包括小於（<）、大於（>）、小於等於（<=）、大於等於（>=）。結果都返回一個布爾值。

6 > 9    //false
6 > 5    //true
'11' > 4    //true
'11' > '78'    //false
'aa' > '3'    //true
'aa' > '90'    //true
'aa' > 'rr'    //false
'ta' > 'rr'    //true
'ee' > undefined    //false
'ee' > null    //false
'ee' < null    //false