JavaScript基礎資料的梳理-js教程-PHP中文網

這篇文章帶給大家的內容是關於JavaScript基礎資料的梳理，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

看了一些資料，結合ES6、高程和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進行提前宣告和定義

變數只聲明，函數是宣告賦值，自執行函數定義和執行一起完成了
不受邏輯判斷條件影響
return 下面的也提升，但是return 裡面的不提升
重複的宣告可以，重新賦值即可，但是變數和方法名字不能衝突

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

登入後複製

這些類型（建構子）基本上都重寫了它們的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

登入後複製

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

登入後複製

以上是JavaScript基礎資料的梳理的詳細內容。更多資訊請關注PHP中文網其他相關文章！