成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JS核心知識(shí)點(diǎn)梳理——變量篇

aristark / 2489人閱讀

摘要:核心知識(shí)點(diǎn)梳理數(shù)據(jù)篇看了一些資料,結(jié)合高程和對(duì)核心知識(shí)點(diǎn)進(jìn)行了梳理。所以,一共有種聲明變量的方法。凡是在聲明之前就使用這些變量,就會(huì)報(bào)錯(cuò)。還是那句話,建議大家掌握核心知識(shí)點(diǎn),細(xì)枝末節(jié)的東西就隨意啦。

JS核心知識(shí)點(diǎn)梳理——數(shù)據(jù)篇

看了一些資料,結(jié)合ES6、高程和MDN,對(duì)JS核心知識(shí)點(diǎn)進(jìn)行了梳理。由于篇幅有限,這里只對(duì)我認(rèn)為重要的知識(shí)做了介紹。一些常識(shí)性的東西可以參考高程,另外一些核心知識(shí)點(diǎn)的擴(kuò)展可以參考我其他的文章。本文適合作JS知識(shí)點(diǎn)復(fù)習(xí)/突擊用,亦可作為前端面試指導(dǎo)。

7種數(shù)據(jù)類型

基礎(chǔ)數(shù)據(jù)類型:存儲(chǔ)到棧內(nèi)存中,操作的是值

null:空指針,所以typeof null ==>Object

undefined:定義了未賦值

Number:數(shù)字

String:字符串

Symbol:一種實(shí)例是唯一且不可改變的數(shù)據(jù)類型。

Boolean:布爾值

引用數(shù)據(jù)類型:儲(chǔ)存在堆內(nèi)存種,操作的是空間地址

Object:具體可以是Array,F(xiàn)unction,RegExp,Date

判斷數(shù)據(jù)類型(方法,優(yōu)劣)

typeof:只能判斷基礎(chǔ)類型中的非Null,不能判斷引用數(shù)據(jù)類型(因?yàn)槿繛閛bject)它是操作符

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

instanceof:用于測(cè)試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置,可以用它來判斷Array但是不夠優(yōu)雅且有一定風(fēng)險(xiǎn)

let arr = [1,2,3]
arr instanceof Array //==>true
arr instanceof Object //==>true
instanceof操作符的問題在于,它只有一個(gè)全局執(zhí)行環(huán)境,如果網(wǎng)頁(yè)有多個(gè)框架,那實(shí)際上就存在兩個(gè)以上的不同的全局執(zhí)行環(huán)境,從而存在兩個(gè)以上不同版本的Array構(gòu)造函數(shù)。如果從一個(gè)框架想另外一個(gè)框架傳入一個(gè)數(shù)組,那么傳入的數(shù)組與在第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具備各自不同的構(gòu)造函數(shù) ----高程page88 (筆者白話問翻譯一下:風(fēng)險(xiǎn)來至原型鏈的重寫

constructor:原理也是基于原型鏈,風(fēng)險(xiǎn)同樣來之于原型鏈的重寫,比如當(dāng)你在多個(gè)frame中來回穿梭的時(shí)候,這兩種方法就亞歷山大了。由于每個(gè)iframe都有一套自己的執(zhí)行環(huán)境,跨frame實(shí)例化的對(duì)象彼此是不共享原型鏈的,因此導(dǎo)致上述檢測(cè)代碼失效!

isNaN:這個(gè)方法會(huì)先調(diào)用Number,所以不是很好用

   console.log(isNaN("1px"));   //先調(diào)用Number("1px"),返回NaN,然后再調(diào)用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]

-------------------------------------------------優(yōu)雅的方法---------------------

如果需要多帶帶判斷Array

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

如果需要多帶帶判斷null

let a = null
Object.is(a , null) //==>true
6種聲明變量的方法
ES5 只有兩種聲明變量的方法:var命令和function命令。ES6 除了添加let和const命令,后面章節(jié)還會(huì)提到,另外兩種聲明變量的方法:import命令和class命令。所以,ES6 一共有 6 種聲明變量的方法。 --es6
var:變量提升,沒有塊級(jí)作用域

說到var肯定要提變量提升:當(dāng)前作用域,js(函數(shù))執(zhí)行前,瀏覽器會(huì)把帶var或者function進(jìn)行提前聲明和定義

變量只聲明,函數(shù)是聲明+賦值,自執(zhí)行函數(shù)定義和執(zhí)行一起完成了

不受邏輯判斷條件影響

return 下面的也提升,但是return 里面的不提升

重復(fù)的聲明可以,重新賦值即可,但是變量和方法名字不能沖突

const: 常量,地址不變,但是屬性可以變 let: 塊作用域,暫時(shí)性死區(qū)(TDZ),不進(jìn)行變量提升,不允許重復(fù)聲明
//只要塊級(jí)作用域內(nèi)存在let命令,它所聲明的變量就“綁定”(binding)這個(gè)區(qū)域,不再受外部的影響。所以下面代碼不報(bào)錯(cuò),外層作用域和里層作用域都有一個(gè)tmp
let tmp = 123;
    if (true) {
      let tmp =123;    
    }
//ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令,這個(gè)區(qū)塊對(duì)這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會(huì)報(bào)錯(cuò)。
    let tmp = 123;
    if (true) {
      tmp = "abc"; // ReferenceError
      let tmp;    
    }
import:es6模塊化解決方案 class:es6繼承解決方案 類型轉(zhuǎn)化

這一塊內(nèi)容太多,太雜了,其實(shí)我不怎么想寫,因?yàn)楹苌儆腥藭?huì)這么寫代碼。但是這塊太重要了,面試必考。建議大家掌握這塊的核心內(nèi)容以及原則,不要關(guān)注奇淫巧技。

1.自動(dòng)裝包

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

let s1 = "123"
let s2 = s1.slice(2)         // a是基本類型,它是沒有slice方法的這里實(shí)際上后臺(tái)完成了一個(gè)自動(dòng)裝包
---下面是實(shí)際發(fā)生的事---------
let s1 = new string("123")
let s2 = s1.slice(2)     
s1 = null      //注意這里用完就銷毀了

//所以如果添加某個(gè)屬性后面是調(diào)用不出來的
let s1 = "123"
s1.color = "red"
console.log(s1.color) // ==> undefind

//這里特別說一下 為什么123.toString會(huì)報(bào)錯(cuò)  //Uncaught SyntaxError: Invalid or unexpected token
//這個(gè)是語(yǔ)法錯(cuò)誤,因?yàn)榫幾g的時(shí)候沒有辦法判斷是小數(shù)點(diǎn)還是調(diào)用方法

這些類型(構(gòu)造函數(shù))基本都重寫了它們的tostring方法

2.強(qiáng)行轉(zhuǎn)化為數(shù)字

Number :將其他數(shù)據(jù)類型的值強(qiáng)制轉(zhuǎn)換成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 :經(jīng)常用于字符串提取數(shù)字的方法; 把字符串中從左到右依次識(shí)別,直到遇到一個(gè)非有效數(shù)字,停止,把找到的數(shù)字返回;

  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 : 保留小數(shù)點(diǎn)位數(shù)的方法,返回值是一個(gè)字符串

幾個(gè)需要特別的用法

 console.log(Number("1px"));   //==> NAN
 console.log(parseInt("1px"));   //==> 1
 console.log(parseInt("p1px"));   //==> NaN
 //轉(zhuǎn)化整數(shù)
  ~~1.2  //1
  ~~"1.2" //1
  ~~"1.2px" //0 先調(diào)用Number()轉(zhuǎn)換成數(shù)字,再調(diào)用~~轉(zhuǎn)換成整數(shù)
 //轉(zhuǎn)換成小數(shù)
  1*‘1.1’  //1.1
  1*"1.1px" //NaN
3.-轉(zhuǎn)化

會(huì)先把字符串轉(zhuǎn)換成數(shù)字(Number),然后再進(jìn)行計(jì)算,注意NaN,undifined參與的任何計(jì)算都是NaN

  console.log("6" - 2);//==> 4
  console.log("5px"-"4")//==> NaN (NaN-4還是NaN)
  
4.+轉(zhuǎn)化

具體調(diào)用string還是number請(qǐng)看下表

            || 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 | 
    //字符串和任何類型相加都是調(diào)用String
    var  a = typeof 10 + true + [] + null + undefined+{};
    console.log(a); //==>numbertruenullundefined[object Object],{}
    console.log("6px"+undefined); ==> 6pxundefined
    console.log(NaN+"undefined");==> NaNundefined
    //經(jīng)典面試題
    [1,2]+[2,1]  //==>都調(diào)用toString "1,2"+"2,1"===>"1,22,1"
5.布爾值Boolean

其他數(shù)據(jù)類型轉(zhuǎn)布爾類型是false有且只有五個(gè)值: 0 "" NaN null undefined
所以boolean({}) 或者boolean([]) 都是真

6.==和===

===是全等,==是類型轉(zhuǎn)化后再判斷,規(guī)則比較復(fù)雜。這里我認(rèn)為除了準(zhǔn)備面試需要看看,平時(shí)基本不會(huì)用,所以這個(gè)知識(shí)性價(jià)比非常低,學(xué)了用不到也會(huì)忘,大家自己把握,詳細(xì)規(guī)則可以搜我其他文章
平時(shí)除了判斷a是否是undefined或者是null(jq源碼里面都用法)都時(shí)候其他情況下都用===

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

這里再補(bǔ)充一個(gè),判斷數(shù)字和字符串相等的以后用==也非常好用。比如后臺(tái)返回的數(shù)據(jù)一會(huì)是1一會(huì)兒是‘1’你需要封裝一個(gè)通用方法的時(shí)候,可以使用==來進(jìn)行判斷

總結(jié)

本期文章估計(jì)大家看的很煩,無奈,我寫起來也非??菰铩R?yàn)椴粌H得講規(guī)則,還得寫用例。還是那句話,建議大家掌握核心知識(shí)點(diǎn),細(xì)枝末節(jié)的東西就隨意啦。這一期文章還有許多東西可以展開來講,篇幅有限,我將會(huì)在后面的文章中一一涉及。感謝大家的閱讀,本人水平有限,如果有不對(duì)的地方請(qǐng)?jiān)谠u(píng)論區(qū)指出。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/102207.html

相關(guān)文章

  • JS核心識(shí)點(diǎn)梳理——上下文、作用域、閉包、this(中)

    摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關(guān)的面試題,對(duì)核心知識(shí)點(diǎn)中的作用域閉包上下文進(jìn)行了梳理。本篇重點(diǎn)介紹閉包和。所以,有另一種說法認(rèn)為閉包是由函數(shù)和與其相關(guān)的引用環(huán)境組合而成的實(shí)體。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨,面試必bei系列,參考大量資料,并集...

    rottengeek 評(píng)論0 收藏0
  • JS核心識(shí)點(diǎn)梳理——正則(上)

    摘要:正則引言正則是一個(gè)前端必須掌握的知識(shí)。這里上篇先介紹正則的規(guī)則,下篇結(jié)合一些具體題目,帶大家重新學(xué)習(xí)鞏固一下正則,爭(zhēng)取面試給自己加分。 正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正則是一個(gè)前端必須掌握的知識(shí)。但是由于用的少,忘了記,記了忘,導(dǎo)致面試經(jīng)常坐蠟。這里上篇先介紹正則的規(guī)則,下篇結(jié)合一些...

    happyhuangjinjin 評(píng)論0 收藏0
  • JS核心識(shí)點(diǎn)梳理——正則(下)

    摘要:正則引言正則是一個(gè)前端必須掌握的知識(shí)。但是由于用的少,忘了記,記了忘,導(dǎo)致面試經(jīng)常坐蠟。這里上篇先介紹正則的規(guī)則,下篇結(jié)合一些具體題目,帶大家重新學(xué)習(xí)鞏固一下正則,爭(zhēng)取面試給自己加分。 正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正則是一個(gè)前端必須掌握的知識(shí)。但是由于用的少,忘了記,記了忘,導(dǎo)致面...

    jemygraw 評(píng)論0 收藏0
  • JS核心識(shí)點(diǎn)梳理——上下文、作用域、閉包、this(上)

    摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關(guān)的面試題,對(duì)核心知識(shí)點(diǎn)中的作用域閉包上下文進(jìn)行了梳理。如果在小區(qū)這個(gè)作用域找到了張老師,我就會(huì)在張老師的輔導(dǎo)下學(xué)鋼琴我張老師房間鋼琴構(gòu)成了學(xué)琴的上下文環(huán)境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨,面試必bei系列,參考大...

    Andrman 評(píng)論0 收藏0
  • JS核心識(shí)點(diǎn)梳理——原型、繼承(上)

    摘要:同理,原型鏈也是實(shí)現(xiàn)繼承的主要方式的只是語(yǔ)法糖。原型對(duì)象也可能擁有原型,并從中繼承方法和屬性,一層一層以此類推。利用構(gòu)造函數(shù)小明張三張三小明缺點(diǎn)每次實(shí)例化都需要復(fù)制一遍函數(shù)到實(shí)例里面。寄生構(gòu)造函數(shù)模式只有被類出來的才能用。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 最近又攀登了一下JS三座大山中的第二...

    villainhr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<