前端知識點梳理(一)

  這幾天又回顧了一些知識點,發現自己之前理解的很淺很淺。在這裏我也整理並記錄了下來。

一、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__這兩個問題的指向。這次主要圍繞這張圖進行講解。

  1. 對象有__proto__屬性,函數有prototype屬性;
  2. 對象由函數生成;
  3. 生成對象時,對象的__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 的值來決定的,其中它們值計算規則如下:

  1. A 的值等於 1 的前提是存在內聯樣式, 否則 A = 0;
  2. B 的值等於 ID選擇器 出現的次數;
  3. C 的值等於 類選擇器 和 屬性選擇器 和 僞類 出現的總次數;
  4. 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("")  ;
}

這次呢就先分享到這,下次在和大家繼續分享我整理的知識點,每次分享的知識點不多。

如果有錯誤的地方,歡迎大家指出

如果有更快速理解的方法,也希望留下你的方法,我們共同進步😝

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章