js css 基礎知識點和麪試題複習

對日常的小知識點，會持續更新

== 對比

特殊原則

1. undefined == null / null == undefined
2. number 和 string/boolean 對比將 string/boolean 轉換爲數字類型
3. boolean 和 string 對比 將字符串轉換爲數字
4. String/Number/Symbol 和object 相比 ， toPrimitive(obj) 以後對比
5. 其餘都爲 false

eg:

console.log([10] == 10);   //true               
console.log('10' == 10);   //true            
console.log([] == 0);     //true      *        
console.log(true == 1);     //true           
console.log([] == false);       //true  *
console.log(![] == false);      // true       
console.log('' == 0);         //將字符串轉換爲number  對比  true         
console.log('' == false);    // 字符串和boolean對比 字符串轉換爲數字      true
console.log(null == false);   // false    *     
console.log(!null == true);        //true     
console.log(null == undefined);

ToPrimitive

是js將對象轉換爲原始類型的一個算法，是js內部的算法

hint 該函數的參數值爲 string/numer/default

自定義 toPrimitive

var obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint == "number") {
      return 10;
    }
    if (hint == "string") {
      return "hello";
    }
    return true;
  }
};
console.log(+obj2);     // 10      -- hint is "number"
console.log(`${obj2}`); // "hello" -- hint is "string"
console.log(obj2 + ""); // "true"  -- hint is "default"

toPrimitive參考

this 指向問題

var lang = 1;

function fn1() {
  console.info(this.lang);
}

var obj = {
  lang: 2,
  method1: function(fn) {
    fn();
    fn.call(this);
    arguments[0]();
  },
  mtehod2:function(fn){
      document.addEventListener('click',function(){
          fn()
      },true)
  }
};

obj.method1(fn1)
obj.mtehod2(fn1)

輸出結果是 1 2 undefined 
arguments[0]() 爲何輸出的是undefined 呢，能夠理解爲 arguments.0 就是argruments對象調用fn方法 因此this指向的是 arguemnts
點擊的時候輸出的是 1

變量提高問題

var a = 10;
function test() {
  if (!a) {
    var a = 100;
  }
  console.info(a);
}

test()

輸出結果 100

用css 畫一個三角形

<div style="border-top: 20px solid red;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        width: 0;
        height: 0;">

</div>

變量和函數的提高

console.info(b)
var b = 10
function b () {
}
console.info(b)


輸出結果  function b(){}  , 10
緣由 函數提高要比變量提高的優先級要高一些，且不會被變量聲明覆蓋，可是會被變量賦值以後覆蓋。

css + ~

p~ul選擇器 p以後出現的全部ul。
兩種元素必須擁有相同的父元素，可是 ul沒必要直接緊隨 p。
h1 + p {margin-top:50px;}
這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。｝；

script 標籤上的 async 和 defer

正常的script標籤html 會按照順序加載並執行腳本會阻塞後續的dom渲染
使用async 和defer 能夠解決 阻塞dom渲染的問題

async 和 defer 的區別

1. defer 會異步的加載js代碼不影響後續dom 的渲染， 而且會在 DOMContentLoaded事件調用前執行。若是多個設置了defer的script 標籤則會按照順序來執行
2. async 則不會按照順序執行，而是誰先加載完誰執行，而且跟 DOMContentLoaded事件無關

rem 算法

1rem == 設計圖100px
根元素的 font-size = 100*屏幕寬度/設計圖寬度

物理像素和邏輯像素

DIP 邏輯像素 px 也是邏輯像素的一種 反映的是css 或者js 程序中的像素點
DPR 設備像素比： 是設備的物理像素和邏輯像素之間的比

Bom 和 Dom

事件委託和事件冒泡

JSONP 跨域

原本是不想了解的 可是面了兩次都被人問了仍是瞭解一下吧

原理：依靠的是script 標籤能夠跨域請求而且會自動執行的原理

jsonp 處理分爲客戶端和服務端兩部分

客戶端

1. 在dom中添加一個script標籤，標籤的地址是服務端get的地址，地址中傳遞一個callback 的名字，和其餘的參數
2. 定義對應的callback方法方法中接受一個參數 參數就是後端返回的數據

服務端

返回一個字符串，字符串內容是調用callback 方法的js代碼，而且吧返回的數據放到callback方法的第一個函數中

HTTP 狀態碼

1. 信息，服務器收到請求，須要請求者繼續執行操做
2. 成功，操做被成功接收並處理
3. 重定向，須要進一步的操做以完成請求
   301 永久移動。
   302 臨時移動 重定向
   304 未修改 訪問緩存數據
4. 客戶端錯誤，請求包含語法錯誤或沒法完成請求
   401 身份爲認證
5. 服務器錯誤，服務器在處理請求的過程當中發生了錯誤
   500 服務器內部錯誤

（持續更新）