JavaScript的類型轉換與各類運算符

時間 2019-12-07

標籤 javascript 類型轉換各類運算符欄目 JavaScript 简体版

原文原文鏈接

第十七天筆記

類型轉換

隱式類型轉換

隱式類型轉換

JavaScript是弱類型/鬆散類型的在任何狀況下均可以強制轉換前端

//定義number類型 string類型以及boolean類型的變量
    var num = 100;
    var str = '臥龍前端';
    var boo = false;

    // 1.轉換爲string類型
    var result1 = '' + num;// 100
    console.log(typeof result1);// string
    var result2 = boo + '';// true
    console.log(typeof result2);// string

/*
    2.轉換爲number類型
     * string類型轉換爲number類型
      * 若是文本內容是普通的文本(非數字) -> 轉換後的結果爲 NaN
      * 若是文本內容是數字值 -> 轉換後的結果爲對應數字值
     * boolean類型轉換爲number類型
      * true轉換爲1
      * false轉換爲0
*/
    var result3 = +str;
    console.log(result3);// NaN
    console.log(typeof result3);// number
    var result4 = +boo;
    console.log(result4);// true爲1，false爲0
    console.log(typeof result4);// number

/*
    3.轉換爲boolean類型
      * string類型轉換爲boolean類型
      * 空字符串(''或"")轉換後的結果爲false，其他狀況都爲true
      * number類型轉換爲boolean類型
      * 0或NaN轉換後的結果爲false，其他狀況都爲true
      * undefined或null轉換後的結果爲false
*/
    var result5 = !!str;
    console.log(result5);// true
    console.log(typeof result5);// boolean
    var result6 = !!num;
    console.log(result6);// true
    console.log(typeof result6);// boolean

顯式類型轉換

使用JavaScript的包裝類型的構造函數進行類型轉換
使用數據類型的轉換函數進行類型轉換函數

//定義number類型、string類型以及boolean類型的變量
    var num = 100;
    var str = '臥龍學苑';
    var str1 = '100';
    var str2 = '100.7'
    var boo = false;

/*
    1.轉換爲string類型
    * String()函數 -> String(值)
    * toString()方法 -> 變量名.toString()
    * 對象的方法 -> 將變量看成是一個對象來使用
*/
    var result1 = String(num);
    console.log(typeof result1);// string
    var result2 = num.toString();
    console.log(typeof result2);// string

/*
    2.轉換爲number類型
    * Number()函數 -> Number(值)
    * parseInt()函數 -> parseInt(值)
    * 轉換爲number類型，轉換爲一個整數
    * parseFloat()函數 -> parseFloat(值)
    * 轉換爲number類型，轉換爲一個浮點數
*/
    var result3 = Number(boo);
    console.log(typeof result3);// number

    var result4 = parseInt(str1);
    console.log(typeof result4);// 100
    var result5 = parseFloat(str1);// 100
    console.log(result5);// 100

    var result6 = parseInt(str2);// 100.1
    console.log(result6);// 若是當前值爲小數的話，parseInt()後取整數部分 - 100
    var result7 = parseFloat(str2);// 100.1
    console.log(result7);// 100.1

/*
    3.轉換爲boolean類型
     * Boolean()函數 -> Boolean(值)
*/
    var result8 = Boolean(str);
    console.log(result8);// true

總結:
隱式類型轉換與顯式類型轉換的區別:
a.隱式轉換類型
優勢:性能好
缺點:可讀性差
b.顯式轉換類型
優勢:可讀性高
缺點:性能差
須要注意的是:任何不能正確轉換爲數字值的內容轉換成Number類型後獲得的結果都是NaN性能

運算符

運算符概述

JavaScript提供了一組用於操做數據值的運算符又稱爲操做符
運算符能夠按照做用的不一樣或者操做變量數量的不一樣進行分類code

算數運算符

1.若是運算數中的一個或兩個是字符串類型 JavaScript會自動轉換爲數字值在進行計算
2.若是運算數中的一個換兩個是字符串類型但其中的字符不是數字 JavaScript會自動轉換數字值的到NaN結果
3.任何一個運算數都是NaN 結果都是NaN
4.布爾值false和true會轉轉爲0和1進行計算對象

加法運算符

1.若是兩個操做數都是數字值的話會進行加法計算
2.若是字符串進行加法計算 - 字符串鏈接運算符(拼串)
3.若是布爾類型進行加法計算 - 將布爾類型轉換爲數字值再進行加法計算ip

減法運算符

1.減法運算以前先將其餘類型轉換爲number類型再進行計算
2.若是字符串進行減法計算的話 - 將字符串類型轉換爲數字值再進行減法計算
3.若是布爾類型進行減法計算 - 將布爾類型轉換爲數字值，再進行減法計算字符串

求餘運算符

求餘運算符用於計算兩個運算數整除後的餘數
求的結果是正數仍是負數與第一個操做數是正數或負數有關(與第二個無關)string

console.log(100 % 3);//1
    console.log(8 % 4);//0

    console.log(100 % -3);//1
    console.log(8 % 4);//0

    console.log(-100 % 3);//-1
    console.log(-8 % 4);//0

    console.log(-100 % -3);//-1
    //與減法的狀況保持一致
    console.log('臥龍學苑' % 2);//NaN

自增運算符與自減運算符

自增運算符用於整數值逐次+1 分爲:
a.前置型:自增運算符位於運算數以前先加1 再賦值it

前置自增運算符 - ++變量名

b.後置型:自增運算符位於運算數以後先賦值再加1console

後置自增運算符 - 變量名++

自減運算符用於整數值逐次-1 分爲:
a.前置型:自減運算符位於運算數以前先減1 再賦值
b.後置型:自減運算符位於運算數以前先賦值再減1

運算符的優先級別
運算符具備計算的優先級別
1.先計算優先級別高的運算符
2.運算符的級別相同，從左至右的計算
3.運算符中優先級別最高的是「()」
4.優先計算的表達式利用"()"將其包裹起來

console.log(100 + 200 - 150 * 3);// -150
    console.log(100 + 200 % 3);// 102
    console.log(2 * 200 % 3);// 1

    var num = 10;
    console.log(5 + ++num);// 16

比較運算符

JavaScript語言中的比較運算符主要用於比較兩個操做數的值是否相等或者大小狀況

一.大於與小於比較運算符

console.log(10 > 11);//false
    console.log(11 > 10);//true
    console.log(10 >= 10);//true
    // 2.boolean類型 - 將boolean類型轉換爲number類型
    console.log(true > false);//true
    console.log(true > 0);//true
/*
    3.string類型 - a.英文; b.中文
    * 英文或中文 - 將文本轉換成Unicode碼 - 對應具備數字值
    * 英文單詞 - 從左至右的一次比較字母 Unicode 碼的大小
*/
    console.log('a' < 'b');//true
    console.log('a' > 'A');//true
    console.log('abc' > 'cba');//false
    console.log('abc' > 'acd');//false

    console.log('我' > '你');//true

二.相等與不等比較運算符

相等比較運算符
*與賦值運算符的區別
*賦值運算符(=)
*相等比較運算符(==)
不等比較運算符
*符號是"!="
*不是"<>"
相等與不等比較運算符只比較操做數的值並不比較類型

// 1.number類型
    console.log(10 == 10);// true
    console.log(10 == 11);// false
    // 2.boolean類型
    console.log(true == true);// true
    console.log(true == false);// false

    console.log(true == 1);// true

    // 3.string類型
    console.log('a' == 'a');// true
    console.log('a' == 'b');// false
    
    console.log('100' == 100);// true

三.全等與不全等運算符 
全等與不全等運算符 不只比較值 還比較類型

console.log(10 === 10);// true

    console.log('10' === 10);// false
    console.log('10' == 10);// true

函數

isNaN()函數用於判斷其參數是否爲NaN值(非數字值)
做用:判斷當前值是否爲 NaN
true - 表示當前值是NaN(不是一個數字值)
false - 表示當前值不是NaN(不是一個數字值)
isFinite()函數
做用 - 判斷當前值是否爲無窮大
false - 表示當前值是無窮大
true - 表示當前值是有限數值

console.log(isNaN(100));// false
    console.log(isNaN(Number('臥龍學苑')));// true

    var result = 100/0;
    console.log(result);// Infinity
    //isFinite()函數
    console.log(isFinite(result));// false

邏輯與運算符

JavaScript運算符基本用法是用於布爾類型的計算
邏輯與運算符時若是兩個操做數都是布爾類型的話只有當兩個操做數都爲true時返回的結果才爲true 不然都爲false
1.將邏輯與運算符的兩個操做數轉換爲布爾類型
2.當左邊的操做數爲true時結果爲右邊操做數的值
3.當左邊的操做數爲false時結果爲左邊操做數的值

console.log(true && true);// true
    console.log(true && false);// false
    console.log(false && true);// false
    console.log(false && false);// false

    console.log(100 && 1);// 1
    console.log(1 && 0);// 0
    console.log(0 && 1);// 0
    console.log(0 && 0);// 0

    console.log(true && true);
    console.log(true && false);
    console.log(false && true);
    console.log(false && false);

    console.log('臥龍學苑' && '臥龍學苑');// 臥龍學苑
    console.log('臥龍學苑' && '');// ''
    console.log('' && '臥龍學苑');// ''
    console.log('' && '');// ''

    console.log('臥龍學苑' && 1);// 1
    console.log(false && 0);// false

邏輯或運算符

使用邏輯或運算符時若是兩個操做數都是布爾類型的話只有當其中一個操做類型數都爲true時返回的結果才爲true 不然都爲false

console.log(true || true);// true
    console.log(true || false);// true
    console.log(false || true);// true
    console.log(false || false);// false

    console.log(100 || 1);// 100
    console.log(1 || 0);// 1
    console.log(0 || 1);// 1
    console.log(0 || 0);// 0

    console.log(true || true);
    console.log(true || false);
    console.log(false || true);
    console.log(false || false);

    console.log('臥龍學苑' || '臥龍學苑');// 臥龍學苑
    console.log('臥龍學苑' || '');// 臥龍學苑
    console.log('' || '臥龍學苑');// 臥龍學苑
    console.log('' || '');// ''

賦值擴展運算符

JavaScript語言中的賦值運算符用於爲變量或屬性進行賦值操做
JavaScript語言中的賦值擴展運算符實際就是賦值運算符與算數運算符配合使用的簡寫模式
JavaScript語言中的賦值擴展運算符的執行效率更高

var b = 10, c = 20;

    var a = b + c;
    console.log(a);// 30

    // b = b + c;
    // 等價寫法 - 賦值擴展運算符的性能要比賦值運算符更高
    b += c;
    console.log(b);// 30

條件運算符

條件運算符首先判斷一個表達式是真是假而後根據判斷結果執行兩個給指定指令中的一個

var result = 8 > 9 ? '對' : '錯';
    console.log(result);

    var score = 95;
    score > 90 ? console.log('優秀') : console.log('及格');

嵌套條件運算符

條件運算符中每一個表達式能夠又是一個條件運算表達式稱爲條件運算的嵌套
優勢:擴展了條件運算符自己的計算能力
缺點:可讀性比較差性能隨着嵌套的層級越多越差
建議:不要最多不要超過三層嵌套

var score = 55;

    var result = score > 90 ? '優秀' : (score > 80 ? '良好' : (score > 60 ? '及格' : '不及格'));
    console.log(result);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。