這幾天又回顧了一些知識點,發現自己之前理解的很淺很淺。在這裏我也整理並記錄了下來。
一、javaScript中類型轉換問題
js中的基礎類型分爲:number、string、boolean、null、undefined、symbol和引用類型object這些,那麼當這一塊計算的時候改如何進行轉換的呢?
強制類型轉換:Number()、parseInt()、parseFloat()、toString()、String()、Boolean()
隱式類型轉換:邏輯運算符(&&、 ||、 !)、運算符(+、-、*、/)、關係操作符
(>、 <、 <= 、>=)、相等運算符(==)或者 if/while 的條件。
今天主要講的就是隱式類型轉換的問題,我們在進行計算的時候總會得出一些意料之外的答案😱,比如:{}+[] 你認爲應該等於什麼呢?(後面會有解析)
首先附上一張類型轉換表大全😎
從上面的表中可以總結:
轉爲false的主要有:0、false、null、undefined、""、NaN
轉爲數值類型時需要注意:null => 0、undefined => NaN、數組如果只有一個元素(且可轉爲number類型)會返回第一個元素值,否則返回NaN。
說說例題,{}+[] 、[]+{}
對於[]+{},調用 [] 的toString => “”,{} => “[object Object]”,結果:"[object Object]"
對於{}+[],這種情況下{}會被當成代碼塊來執行無返回結果,而 [] => 0,結果:0
//如果不被當成代碼塊,可以加個小括號
({})+[] => "[object Object]"
({}) + 1 => "[object Object]1"
[] + 1 => "1" //[]調用ToPrimitive,返回空字符串
//快速隱式轉換
+"123" => 123 //可以把字符串快速的轉爲數值型
123+"" => "123" //把數字轉爲字符串
//null 和 undefined問題
//今天做題有個選擇題
undefined==false //false
//後來搜了下只存在null==undefined,undefind==undefined、null==null,其餘都返回false
例子中的null==0也很好的證明了上面所說的問題,但是null>=0、null<=0是怎樣比較的呢? 其實null>=0是根據null<0來比較的,因爲null<0 爲false,所以null>=0爲true。
二、javaScript中原型問題再次理解
關於原型最主要也就是理解prototype和__proto__這兩個問題的指向。這次主要圍繞這張圖進行講解。
- 對象有__proto__屬性,函數有prototype屬性;
- 對象由函數生成;
- 生成對象時,對象的__proto__屬性指向函數的prototype屬性;
從上往下順序來舉例子
1、函數
function foo(){}
var f1=new foo();
f1.__proto__ === foo.prototype; //true
foo.__proto__ === Function.prototype; //true
foo.prototype.__proto__ === Object.prototype; //true
Function.prototype.__proto__ === Object.prototype; //true
Object.prototype.__proto__ === null; //true null爲原型鏈的終點
2、對象
var obj = {};
obj.__proto__ === Object.prototype ; //true;
Object.__proto__===Function.prototype; //true
3、Function
Function.prototype===Function.prototype; //true
Function.__proto__===Function.prototype; //true
以上呢就是對原型圖的理解,其實對原型的理解還是要回歸到真實的題目中去的。大家可以在底下做一下:f1. _ proto_、f1._ proto_._ proto_、f1._ proto_._ proto_._ proto_
三、css選擇器權重問題
CSS選擇器優先級:內聯 > ID選擇器 > 類選擇器 =屬性=僞類> 標籤選擇器=僞元素>*
這是針對出現簡單的選擇器的時候,但是如果當出現多層疊加的情況就會比較懵😖
//html
<div class="a b c">
<p class="d">test</p>
</div>
//css
.a .d{color:green}
p.d{color:yellow}
.a.b p.d{color:red}
.a p.d{color:black}
大家覺得會是什麼顏色呢😀?
噔噔噔,是紅色 。
what?😮 why?😤
到具體的計算層面,優先級是由 A 、B、C、D 的值來決定的,其中它們值計算規則如下:
- A 的值等於 1 的前提是存在內聯樣式, 否則 A = 0;
- B 的值等於 ID選擇器 出現的次數;
- C 的值等於 類選擇器 和 屬性選擇器 和 僞類 出現的總次數;
- D 的值等於 標籤選擇器 和 僞元素 出現的總次數 。
//在這個題中
1、{0 0 2 0}
2、{0 0 1 1}
3、{0 0 3 1} //yes
4、{0 0 2 1}
我們的比較優先級的方式是從A到D去比較值的大小,A、B、C、D權重從左到右,依次減小。判斷優先級時,從左到右,一一比較,直到比較出最大值,即可停止。
編程題:實現大數相加
昨天做筆試的時候有這麼一道題,實現兩個大數相加。思想就是:把兩個數轉爲字符串,每次相加的數保存到數組中,定義遍歷來保存進位的數。
function bigNumberAdd(a,b){
let arr=(a+'').split("");
let brr=(b+'').split(""); //分割成數組來保存每一位
let result=[]; //用來保存相加之後的每一位和(餘數+上一次進位)
let prefix=0; //用來表示進位數(商+上一次進位數)
let aLen=arr.length , bLen=brr.length;
let cLen=Math.max(aLen,bLen); //求出最長數字的長度
for(let i=0;i<cLen;i++){
let a = aLen-i-1>=0 ? parseInt(arr[aLen-i-1]) : 0; //獲取兩位數字,從後向前獲取
let b = bLen-i-1>=0 ? parseInt(brr[bLen-i-1]) : 0;
result[i] = (a+b+prefix) % 10;
prefix = Math.floor((a+b+prefix) / 10);
}
return result.reverse().join("") ;
}
這次呢就先分享到這,下次在和大家繼續分享我整理的知識點,每次分享的知識點不多。
如果有錯誤的地方,歡迎大家指出
如果有更快速理解的方法,也希望留下你的方法,我們共同進步😝