摘要:核心知識點梳理數據篇看了一些資料,結合高程和對核心知識點進行了梳理。所以,一共有種聲明變量的方法。凡是在聲明之前就使用這些變量,就會報錯。還是那句話,建議大家掌握核心知識點,細枝末節的東西就隨意啦。
JS核心知識點梳理——數據篇
看了一些資料,結合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) //==>true6種聲明變量的方法
ES5 只有兩種聲明變量的方法:var命令和function命令。ES6 除了添加let和const命令,后面章節還會提到,另外兩種聲明變量的方法:import命令和class命令。所以,ES6 一共有 6 種聲明變量的方法。 --es6var:變量提升,沒有塊級作用域
說到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 //這里特別說一下 為什么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" //NaN3.-轉化
會先把字符串轉換成數字(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([]) 都是真
===是全等,==是類型轉化后再判斷,規則比較復雜。這里我認為除了準備面試需要看看,平時基本不會用,所以這個知識性價比非常低,學了用不到也會忘,大家自己把握,詳細規則可以搜我其他文章
平時除了判斷a是否是undefined或者是null(jq源碼里面都用法)都時候其他情況下都用===
console.log(null==undefined) // true console.log(undefined==undefined) // true
這里再補充一個,判斷數字和字符串相等的以后用==也非常好用。比如后臺返回的數據一會是1一會兒是‘1’你需要封裝一個通用方法的時候,可以使用==來進行判斷
總結本期文章估計大家看的很煩,無奈,我寫起來也非常枯燥。因為不僅得講規則,還得寫用例。還是那句話,建議大家掌握核心知識點,細枝末節的東西就隨意啦。這一期文章還有許多東西可以展開來講,篇幅有限,我將會在后面的文章中一一涉及。感謝大家的閱讀,本人水平有限,如果有不對的地方請在評論區指出。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102207.html
摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關的面試題,對核心知識點中的作用域閉包上下文進行了梳理。本篇重點介紹閉包和。所以,有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨,面試必bei系列,參考大量資料,并集...
摘要:正則引言正則是一個前端必須掌握的知識。這里上篇先介紹正則的規則,下篇結合一些具體題目,帶大家重新學習鞏固一下正則,爭取面試給自己加分。 正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正則是一個前端必須掌握的知識。但是由于用的少,忘了記,記了忘,導致面試經常坐蠟。這里上篇先介紹正則的規則,下篇結合一些...
摘要:正則引言正則是一個前端必須掌握的知識。但是由于用的少,忘了記,記了忘,導致面試經常坐蠟。這里上篇先介紹正則的規則,下篇結合一些具體題目,帶大家重新學習鞏固一下正則,爭取面試給自己加分。 正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正則是一個前端必須掌握的知識。但是由于用的少,忘了記,記了忘,導致面...
摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關的面試題,對核心知識點中的作用域閉包上下文進行了梳理。如果在小區這個作用域找到了張老師,我就會在張老師的輔導下學鋼琴我張老師房間鋼琴構成了學琴的上下文環境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨,面試必bei系列,參考大...
摘要:同理,原型鏈也是實現繼承的主要方式的只是語法糖。原型對象也可能擁有原型,并從中繼承方法和屬性,一層一層以此類推。利用構造函數小明張三張三小明缺點每次實例化都需要復制一遍函數到實例里面。寄生構造函數模式只有被類出來的才能用。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 最近又攀登了一下JS三座大山中的第二...
閱讀 2631·2021-10-12 10:12
閱讀 784·2019-08-29 17:25
閱讀 2785·2019-08-29 17:24
閱讀 3215·2019-08-29 17:19
閱讀 1802·2019-08-29 15:39
閱讀 3046·2019-08-26 16:50
閱讀 1990·2019-08-26 12:17
閱讀 2699·2019-08-26 12:16