JavaScript基礎視頻教程總結（011-020章）

時間 2019-12-09
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>011-020章總結</title>
</head>
<body>
<pre> 011. 強制類型轉換-String
強制類型轉換
- 指將一個數據類型強制轉換爲其餘的數據類型
- 類型轉換主要指，將其餘的數據類型，轉換爲
String Number Boolean

將其餘的數據類型轉換爲String
 方式一：
- 調用被轉換數據類型的toString()方法
- 該方法不會影響到原變量，它會將轉換的結果返回
- 可是注意：null和undefined這兩個值沒有toString()方法，報錯。
若是調用他們的方法，會報錯

toString()函數的返回值爲String類型。返回當前對象的字符串形式。
JavaScript的許多內置對象都重寫了該函數，以實現更適合自身的功能須要。

對於Number調用toString()時能夠在方法中傳遞一個整數做爲參數
此時它將會把數字轉換爲指定的進制,若是不指定則默認轉換爲10進制
  
方式二：
- 調用String()函數，並將被轉換的數據做爲參數傳遞給函數
- 使用String()函數作強制類型轉換時，
對於Number和Boolean實際上就是調用的toString()方法
可是對於null和undefined，就不會調用toString()方法
它會將 null 直接轉換爲 "null"
將 undefined 直接轉換爲 "undefined".
</pre>
<script type="text/javascript">
    console.log("第011");
    
    // 調用對象的toString()方法
    // 調用xxx的yyy()方法，就是xxx.yyy()
    var ts_123 = 123;
    var ts_true = true;
    var ts_null = null;
    var ts_undefined = undefined;
    var s_null = null;
    var s_undefined = undefined;
    
    ts_123 = ts_123.toString();
    ts_true = ts_true.toString();
    //ts_null = ts_null.toString();
    //ts_undefined = ts_undefined.toString();
    s_null = String(null);
    s_undefined = String(undefined);
    
    console.log("toString(123) ->" + ts_123 ); //123
    console.log("toString(true) ->" + ts_true ); //true
    //console.log("toString(null) ->" + ts_null ); // 沒有報錯
    //console.log("toString(undefined) ->" + ts_undefined ); // 沒有報錯
    console.log("String(null) ->" + s_null );  // null
    console.log("String(undefined) ->" + s_undefined ); //undefined
    
    //對於Number調用toString()時能夠在方法中傳遞一個整數做爲參數
    //此時它將會把數字轉換爲指定的進制,若是不指定則默認轉換爲10進制
    var at =55
    at = at.toString(16);
    
    console.log(at); //37
    console.log(typeof at); //string
</script>

<pre> 012. 強制類型轉換-Number
將其餘的數據類型轉換爲Number
轉換方式一：
使用Number()函數
- 字符串 --> 數字
1.若是是純數字的字符串，則直接將其轉換爲數字
2.若是字符串中有非數字的內容，則轉換爲NaN
3.若是字符串是一個空串或者是一個全是空格的字符串，則轉換爲0
- 布爾 --> 數字
true 轉成 1
false 轉成 0

- null --> 數字  0
- undefined --> 數字  NaN

轉換方式二：
- 這種方式專門用來對付字符串
- parseInt() 把一個字符串轉換爲一個整數
- parseFloat() 把一個字符串轉換爲一個浮點數
</pre>
<script type="text/javascript">
    console.log("第012");
    
    var n_123 = Number("123");
    var n_123safsd = Number("123safsd");
    var n_ = Number("");
    var n_true = Number(true);
    var n_false = Number(false);
    var n_null = Number(null);
    var n_undefined = Number(undefined);
    
    var p_123safsd = parseInt("123safsd");
    var p_float = parseFloat("4323.54353fsdfasd");
    
    console.log("Number('123') ->" + n_123 ); // 123
    console.log("Number('123safsd') ->" + n_123safsd ); //NaN
    console.log("Number('') ->" + n_ ); //0
    console.log("Number(true) ->" + n_true ); //1
    console.log("Number(false) ->" + n_false ); //0
    console.log("Number(null) ->" + n_null ); //0
    console.log("Number(undefined) ->" + n_undefined );//NaN
    
    console.log("parseInt('123safsd') ->" + p_123safsd ); //123
    console.log("parseFloat('4323.54353fsdfasd') ->" + p_float ); //4323.54353
</script>

<pre> 013. 其餘進制的數字
若是須要表示16進制的數字，則須要以0x開頭
若是須要表示8進制的數字，則須要以0開頭
若是要要表示2進制的數字，則須要以0b開頭，可是不是全部的瀏覽器都支持
</pre>
<script type="text/javascript">
    console.log("第013");
    
    var a ;
    //十六進制
    a = 0x10;
    a = 0xff;
    a = 0xCafe;
    
    //八進制數字
    a = 070;
    
    //二進制數字
    //a =0b10;
    
    //向"070"這種字符串，有些瀏覽器會當成8進制解析，有些會當成10進制解析
    a = "070";
    
    //能夠在parseInt()中傳遞一個第二個參數，來指定數字的進制
    a = parseInt(a,10);

    console.log(typeof a); // number
    console.log(a); //70
</script>

<pre> 014. 轉換爲Boolean
將其餘的數據類型轉換爲Boolean
- 使用Boolean()函數
- 數字 ---> 布爾
- 除了0和NaN，其他的都是true

- 字符串 ---> 布爾
- 除了空串，其他的都是true

- null和undefined都會轉換爲false
- 對象也會轉換爲true
</pre>
<script type="text/javascript">
    console.log("第014");
    
    var b_123 =Boolean(123); //true
    var b_0 =Boolean(0); //false
    var b_nan =Boolean(NaN); //false
    var b_string =Boolean("fdada"); //true
    var b_kong =Boolean(""); //false
    var b_null =Boolean(null); //false
    var b_undefined =Boolean(undefined); //false
    var b_object =Boolean(Object); //true
    
    console.log("Boolean(123) ->" + b_123); //true
    console.log("Boolean(0) ->" + b_0); //false
    console.log("Boolean(NaN) ->" + b_nan); //false
    console.log("Boolean('fdada') ->" + b_string); //true
    console.log("Boolean('') ->" + b_kong); //false
    console.log("Boolean(null) ->" + b_null); //false
    console.log("Boolean(undefined) ->" + b_undefined); //false
    console.log("Boolean(Object) ->" + b_object);  //true
</script>

<pre> 015. 算數運算符
運算符也叫操做符
經過運算符能夠對一個或多個值進行運算,並獲取運算結果
好比：typeof就是運算符，能夠來得到一個值的類型
它會將該值的類型以字符串的形式返回
number string boolean undefined object
運算符通常不會改變原變量的值。

算數運算符
當對非Number類型的值進行運算時，會將這些值轉換爲Number而後在運算
任何值和NaN作運算都得NaN

+
能夠對兩個值進行加法運算，並將結果返回
若是對兩個字符串進行加法運算，則會作拼串
會將兩個字符串拼接爲一個字符串，並返回
任何的值和字符串作加法運算，都會先轉換爲字符串，而後再和字符串作拼串的操做
- 能夠對兩個值進行減法運算，並將結果返回
* 能夠對兩個值進行乘法運算
/ 能夠對兩個值進行除法運算
% 取模運算（取餘數）
</pre>
<script type="text/javascript">
    console.log("第015");
    
    var a = 123;
    var result = typeof a;
    
    console.log(typeof result); //string
    result = a + 1; // 124
    result = 456 + 789;
    result = true + 1; //2
    result = true + false; //1
    result = 2 + null;  //2
    result = 2 + NaN; // nan
    result = "你好" + "大帥哥";
    console.log(result); //你好大帥哥
    
    var str = "鋤禾日當午，" +
              "汗滴禾下土，" +
              "誰知盤中餐，" +
              "粒粒皆辛苦";
              
    result = 123 + "1"; 
    console.log(result); //字符串1231
    result = true + "hello"; 
    console.log(result); //"truehello"
    
    //任何值和字符串相加都會轉換爲字符串，並作拼串操做
    /*
     * 咱們能夠利用這一特色，來將一個任意的數據類型轉換爲String
     *  咱們只須要爲任意的數據類型 + 一個 "" 便可將其轉換爲String
     *  這是一種隱式的類型轉換，由瀏覽器自動完成，實際上它也是調用String()函數
     */
    var c = 123;
    c = c + "";
    
    //c = null;
    //c = c + "";

    console.log(typeof c); //string
    console.log("c = "+c); //123
    
    result = 1 + 2 + "3"; 
    console.log(result); //33
    result = "1" + 2 + 3; 
    console.log(result); //123
    
    result = 100 - 5;
    result = 100 - true;
    result = 100 - "1";
    result = 2 * 2;
    result = 2 * "8";
    result = 2 * undefined;
    result = 2 * null;
    result = 4 / 2;
    result = 3 / 2;
    console.log("result = "+result); //1.5
    /*
     * 任何值作- * /運算時都會自動轉換爲Number
     *  咱們能夠利用這一特色作隱式的類型轉換
     *      能夠經過爲一個值 -0 *1 /1來將其轉換爲Number
     *      原理和Number()函數同樣，使用起來更加簡單
     */
    
    var d = "123";
    
    //console.log("result = "+result);
    
    d = d - 0;
    console.log(typeof d); //number
    console.log(d); //123
    
    result = 9 % 3;
    result = 9 % 4;
    result = 9 % 5;
    
    console.log("result = "+result); //4
</script>

<pre> 016. 一元運算符
 一元運算符，只須要一個操做數
+ 正號
- 正號不會對數字產生任何影響
- 負號
- 負號能夠對數字進行負號的取反

- 對於非Number類型的值，
它會將先轉換爲Number，而後在運算
能夠對一個其餘的數據類型使用+,來將其轉換爲number
它的原理和Number()函數同樣
</pre>
<script type="text/javascript">
    console.log("第016");
    
    var a = 123;
    a = -a;
    a = true;
    a = "18";
    a = +a;
    /*console.log("a = "+a);
    console.log(typeof a);*/
    var result = 1 + +"2" + 3;
    
    console.log("result = "+result); //6
</script>

<pre> 017. 自增和自減
自增 ++
- 經過自增可使變量在自身的基礎上增長1
- 對於一個變量自增之後，原變量的值會當即自增1
- 自增分紅兩種：後++(a++) 和 前++(++a)   
不管是a++ 仍是 ++a，都會當即使原變量的值自增1
不一樣的是a++ 和 ++a的值不一樣
a++的值等於原變量的值（自增前的值）
++a的值等於新值 （自增後的值）

自減 --
- 經過自減可使變量在自身的基礎上減1
- 自減分紅兩種：後--(a--) 和 前--(--a)
不管是a-- 仍是 --a 都會當即使原變量的值自減1
不一樣的是a-- 和 --a的值不一樣
a-- 是變量的原值 （自減前的值）
--a 是變量的新值 （自減之後的值）
</pre>
<script type="text/javascript">
    console.log("第017");
    
    var ziZeng = 1;
    
    //使ziZeng自增1
    //ziZeng++;
    //++ziZeng;
    console.log(ziZeng++); //1
    console.log(ziZeng); //2
    console.log(++ziZeng); //3
    console.log(ziZeng); // 3
    var result = ziZeng++ + ++ziZeng + ziZeng; // 3+ 5 + 5 =13
    
    console.log(result);
    
    var c = 10;
    c++;
    c++;
    //第一次c++，是在10的基礎上自增
    //第二次c++，是在11的基礎上自增
    console.log("c = " + c); //12
    
    var d = 20;
    d = d++; // 20
    var e = d++; //20
    d = e; //20
    console.log("d = "+d); //20
    
    //num--;
    //--num;
    var num = 10;
    console.log(num--); //10
    console.log(--num); //8
    
    console.log("num = "+num); //8

</script>

<pre> 018. 自增練習 </pre>
<script type="text/javascript">
    console.log("第018");
    
    var n1=10;
    var n2=20;
    
    var n = n1++; //n1 = 11  n1++ = 10
    
    console.log('n='+n);  // 10
    console.log('n1='+n1); //11
    
    n = ++n1 //n1 = 12  ++n1 =12
    console.log('n='+n); //12
    console.log('n1='+n1); //12
    
    n = n2--;// n2=19 n2--=20
    console.log('n='+n); //20
    console.log('n2='+n2); //19
    
    n = --n2; //n2=18 --n2 = 18
    console.log('n='+n); //18
    console.log('n2='+n2); //18
</script>

<pre> 019. 邏輯運算
JS中爲咱們提供了三種邏輯運算符
! 非
- !能夠用來對一個值進行非運算
- 所謂非運算就是值對一個布爾值進行取反操做，
true變false，false變true
- 若是對一個值進行兩次取反，它不會變化
- 若是對非布爾值進行元素，則會將其轉換爲布爾值，而後再取反
因此咱們能夠利用該特色，來將一個其餘的數據類型轉換爲布爾值
能夠爲一個任意數據類型取兩次反，來將其轉換爲布爾值，
原理和Boolean()函數同樣

&& 與
- &&能夠對符號兩側的值進行與運算並返回結果
- 運算規則
- 兩個值中只要有一個值爲false就返回false，
只有兩個值都爲true時，纔會返回true
- JS中的「與」屬於短路的與，
若是第一個值爲false，則不會看第二個值

|| 或
- ||能夠對符號兩側的值進行或運算並返回結果
- 運算規則：
- 兩個值中只要有一個true，就返回true
若是兩個值都爲false，才返回false
- JS中的「或」屬於短路的或
若是第一個值爲true，則不會檢查第二個值
</pre>
<script type="text/javascript">
    console.log("第019");
    
    //若是兩個值都是true則返回true
    var result = true && true;
    
    //只要有一個false，就返回false
    result = true && false;
    result = false && true;
    result = false && false;
    
    console.log("result = "+result); //false
    
    //第一個值爲true，會檢查第二個值
    //true && alert("看我出不出來！！"); //常常用到
    
    //第一個值爲false，不會檢查第二個值
    //false && alert("看我出不出來！！");
    
    //兩個都是false，則返回false
    result = false || false;
    
    //只有有一個true，就返回true
    result = true || false;
    result = false || true ;
    result = true || true ;
    
    console.log("result = "+result); //true
    
    //第一個值爲false，則會檢查第二個值
    //false || alert("123");
    
    //第一個值爲true，則再也不檢查第二個值
    //true || alert("123");

    var a = false;
    
    //對a進行非運算
    a = !a;
    console.log("a = "+a); //true
    
    var b = 10;
    b = !!b; // b轉換爲boolean爲true，!b是false ,!!b爲true
    
    console.log("b = "+b); //true
    console.log(typeof b); //boolean
</script>

<pre> 020. 非布爾值的與或運算
- 對於非布爾值進行與或運算時，
會先將其轉換爲布爾值，而後再運算，而且返回原值
- 與運算：
- 若是第一個值爲true，則必然返回第二個值
- 若是第一個值爲false，則直接返回第一個值

- 或運算
- 若是第一個值爲true，則直接返回第一個值
- 若是第一個值爲false，則返回第二個值
</pre>
<script type="text/javascript">
    console.log("第020");
    
    //true && true
    //與運算：若是兩個值都爲true，則返回後邊的
    var result = 5 && 6;
    console.log(result); //6
    
    //與運算：若是兩個值中有false，則返回靠前的false
    //false && true
    result = 0 && 2;
    console.log(result); //0
    result = 2 && 0; 
    console.log(result); //0
    //false &&　false
    result = NaN && 0;
    console.log(result); //NaN
    result = 0 && NaN;
    console.log(result); //0
    
    //true || true
    //若是第一個值爲true，則直接返回第一個值
    result = 2 || 1;
    result = 2 || NaN;
    console.log(result); //2
    result = 2 || 0;
    console.log(result); //2
    
    //若是第一個值爲false，則直接返回第二個值
    result = NaN || 1;
    result = NaN || 0;
    console.log(result); //0
    
    result = "" || "hello"; //false
    console.log("result = "+result); // hello
    result = -1 || "你好"; 

    console.log("result = "+result); // -1
</script>
</body>
</html>