JS核心知識點梳理——變量篇

JS核心知識點梳理——數據篇

看了一些資料，結合ES六、高程和MDN,對JS核心知識點進行了梳理。因爲篇幅有限，這裏只對我認爲重要的知識作了介紹。一些常識性的東西能夠參考高程，另一些核心知識點的擴展能夠參考我其餘的文章。本文適合做JS知識點複習/突擊用，亦可做爲前端面試指導。

7種數據類型

• 基礎數據類型：存儲到棧內存中，操做的是值

  • null：空指針，因此typeof null ==>Object
  • undefined：定義了未賦值
  • Number：數字
  • String：字符串
  • Symbol：一種實例是惟一且不可改變的數據類型。
  • Boolean：布爾值

• 引用數據類型：儲存在堆內存種，操做的是空間地址

  • Object：具體能夠是Array，Function，RegExp，Date

判斷數據類型（方法，優劣）

• typeof：只能判斷基礎類型中的非Null,不能判斷引用數據類型（由於所有爲object）它是操做符

typeof ''  // ==> string
typeof 1  //==> number
typeof true  //==>boolean
typeof undefined  //==>undefined
let b = Symbol() ; typeof b //==>symbol
-----------------下面的判斷不了實際類型了-----------------------
typeof function fn(){} //==>function
typeof null //==>object
typeof [1,2,3] //==>object
typeof {} //==>object

• instanceof：用於測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置,能夠用它來判斷Array可是不夠優雅且有必定風險

let arr = [1,2,3]
arr instanceof Array //==>true
arr instanceof Object //==>true

instanceof操做符的問題在於，它只有一個全局執行環境，若是網頁有多個框架，那實際上就存在兩個以上的不一樣的全局執行環境，從而存在兩個以上不一樣版本的Array構造函數。若是從一個框架想另一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具有各自不一樣的構造函數 ----高程page88 （筆者白話問翻譯一下： 風險來至原型鏈的重寫）

• constructor：原理也是基於原型鏈，風險一樣來之於原型鏈的重寫，好比當你在多個frame中來回穿梭的時候，這兩種方法就亞歷山大了。因爲每一個iframe都有一套本身的執行環境，跨frame實例化的對象彼此是不共享原型鏈的，所以致使上述檢測代碼失效!
• isNaN：這個方法會先調用Number，因此不是很好用

console.log(isNaN("1px"));   //先調用Number('1px')，返回NaN，而後再調用isNaN(NaN)返回true
   //燃鵝 '1px'客觀並非NaN

[1,2,3,1].constructor === Array; // true

-----------------------------------------------比較好的方法--------------------------------

• Object.prototype.toString.call()

Object.prototype.toString.call(null) // ==> [object Null]
    Object.prototype.toString.call([]) // ==> [object Array]

-------------------------------------------------優雅的方法---------------------

• 若是須要單獨判斷Array

Array.isArray([]) //==>true

• 若是須要單獨判斷null

let a = null
Object.is(a , null) //==>true

6種聲明變量的方法

ES5 只有兩種聲明變量的方法：var命令和function命令。ES6 除了添加let和const命令，後面章節還會提到，另外兩種聲明變量的方法：import命令和class命令。因此，ES6 一共有 6 種聲明變量的方法。 --es6

var：變量提高，沒有塊級做用域

說到var確定要提變量提高：當前做用域，js（函數）執行前，瀏覽器會把帶var或者function進行提早聲明和定義

1. 變量只聲明，函數是聲明+賦值，自執行函數定義和執行一塊兒完成了
2. 不受邏輯判斷條件影響
3. return 下面的也提高，可是return 裏面的不提高
4. 重複的聲明能夠，從新賦值便可，可是變量和方法名字不能衝突

const: 常量，地址不變，可是屬性能夠變

let: 塊做用域，暫時性死區(TDZ)，不進行變量提高，不容許重複聲明

//只要塊級做用域內存在let命令，它所聲明的變量就「綁定」（binding）這個區域，再也不受外部的影響。因此下面代碼不報錯，外層做用域和裏層做用域都有一個tmp
let tmp = 123;
    if (true) {
      let tmp =123;    
    }
//ES6 明確規定，若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯。
    let tmp = 123;
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;    
    }

import:es6模塊化解決方案

class:es6繼承解決方案

類型轉化

這一塊內容太多，太雜了，其實我不怎麼想寫，由於不多有人會這麼寫代碼。可是這塊過重要了，面試必考。建議你們掌握這塊的核心內容以及原則，不要關注奇淫巧技。

1.自動裝包

三種包裝類型：Number,Boolean,String

let s1 = '123'
let s2 = s1.slice(2)         // a是基本類型，它是沒有slice方法的這裏實際上後臺完成了一個自動裝包
---下面是實際發生的事---------
let s1 = new string('123')
let s2 = s1.slice(2)     
s1 = null      //注意這裏用完就銷燬了

//因此若是添加某個屬性後面是調用不出來的
let s1 = '123'
s1.color = 'red'
console.log(s1.color) // ==> undefind

//這裏特別說一下 爲何123.toString會報錯  //Uncaught SyntaxError: Invalid or unexpected token
//這個是語法錯誤，由於編譯的時候沒有辦法判斷是小數點仍是調用方法

這些類型（構造函數）基本都重寫了它們的tostring方法

2.強行轉化爲數字

• Number :將其餘數據類型的值強制轉換成number類型；

console.log(Number({}));//NaN
    console.log(Number(null));// 0
    console.log(Number(undefined));// NaN
    console.log(Number([]));// 0
    console.log(Number(""));// 0
    console.log(Number(true));// 1
    console.log(Number(false));

• parseInt :常常用於字符串提取數字的方法； 把字符串中從左到右依次識別，直到遇到一個非有效數字，中止，把找到的數字返回；

console.log(parseInt("12px12"));// 12
  console.log(parseInt("12.666.777px12"));// 12
  console.log(parseInt("px12.666px12"));// NaN
  console.log(parseInt(""));// NaN
  console.log(parseInt(true));// NaN
  console.log(parseInt({}));// NaN
  console.log(parseInt([]));// NaN
  console.log(parseInt(null));// NaN
  console.log(parseInt(undefined));// NaN

• toFixed : 保留小數點位數的方法，返回值是一個字符串；
• 幾個須要特別的用法

console.log(Number("1px"));   //==> NAN
 console.log(parseInt("1px"));   //==> 1
 console.log(parseInt("p1px"));   //==> NaN
 //轉化整數
  ~~1.2  //1
  ~~'1.2' //1
  ~~'1.2px' //0 先調用Number()轉換成數字，再調用~~轉換成整數
 //轉換成小數
  1*‘1.1’  //1.1
  1*'1.1px' //NaN

3.-轉化

會先把字符串轉換成數字(Number)，而後再進行計算，注意NaN,undifined參與的任何計算都是NaN

console.log("6" - 2);//==> 4
  console.log("5px"-"4")//==> NaN (NaN-4仍是NaN)

4.+轉化

具體調用string仍是number請看下錶

|| undefined | null   | boolean | number | string | object |
=========================================================================
 undefined  || number    | number | number  | number | string | string | 
 null       || number    | number | number  | number | string | string | 
 boolean    || number    | number | number  | number | string | string | 
 number     || number    | number | number  | number | string | string | 
 string     || string    | string | string  | string | string | string | 
 object     || string    | string | string  | string | string | string |

//字符串和任何類型相加都是調用String
    var  a = typeof 10 + true + [] + null + undefined+{};
    console.log(a); //==>numbertruenullundefined[object Object]，{}
    console.log("6px"+undefined); ==> 6pxundefined
    console.log(NaN+"undefined");==> NaNundefined
    //經典面試題
    [1,2]+[2,1]  //==>都調用toString '1,2'+'2,1'===>'1,22,1'

5.布爾值Boolean

其餘數據類型轉布爾類型是false有且只有五個值： 0 "" NaN null undefined
因此boolean({}) 或者boolean([]) 都是真

6.==和===

===是全等，==是類型轉化後再判斷，規則比較複雜。這裏我認爲除了準備面試須要看看，平時基本不會用，因此這個知識性價比很是低，學了用不到也會忘，你們本身把握，詳細規則能夠搜我其餘文章
平時除了判斷a是不是undefined或者是null(jq源碼裏面都用法)都時候其餘狀況下都用===

console.log(null==undefined) // true
console.log(undefined==undefined) // true

這裏再補充一個，判斷數字和字符串相等的之後用==也很是好用。好比後臺返回的數據一會是1一下子是‘1’你須要封裝一個通用方法的時候，可使用==來進行判斷

總結

本期文章估計你們看的很煩，無奈，我寫起來也很是枯燥。由於不只得講規則，還得寫用例。仍是那句話，建議你們掌握核心知識點，細枝末節的東西就隨意啦。這一期文章還有許多東西能夠展開來說，篇幅有限，我將會在後面的文章中一一涉及。感謝你們的閱讀，本人水平有限，若是有不對的地方請在評論區指出。