Js 基礎(chǔ)

1.數(shù)據(jù)類型

基本數(shù)據(jù)類型

string、number舟茶、null谭期、undefined、boolean

引用類型:

funaction吧凉、obj隧出、array

判斷數(shù)據(jù)類型可以用typeof,如果是引用類型用instanceof

typeof 一般只能返回如下幾個(gè)結(jié)果:"number"阀捅、"string"胀瞪、"boolean"、"object"饲鄙、"function" 和 "undefined"凄诞。?

instanceof運(yùn)算符用來測(cè)試一個(gè)對(duì)象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)的prototype屬性。

instanceof 檢測(cè)一個(gè)對(duì)象A是不是另一個(gè)對(duì)象B的實(shí)例的原理是:查看對(duì)象B的prototype指向的對(duì)象是否在對(duì)象A的[[prototype]]鏈上忍级。如果在帆谍,則返回true,如果不在則返回false。不過有一個(gè)特殊的情況轴咱,當(dāng)對(duì)象B的prototype為null將會(huì)報(bào)錯(cuò)(類似于空指針異常)汛蝙。

instanceof 具體實(shí)現(xiàn):

可以在繼承關(guān)系中用來判斷一個(gè)實(shí)例是否屬于它的父類型:

例如:function Foo(){}

Foo.prototype =newAoo();//JavaScript 原型繼承 varfoo =new Foo();

console.log(foo instanceofFoo)//true console.log(fooinstanceofAoo)//true

2.類數(shù)組和數(shù)組

1)擁有l(wèi)ength屬性,其它屬性(索引)為非負(fù)整數(shù)(對(duì)象中的索引會(huì)被當(dāng)做字符串來處理);

2)不具有數(shù)組所具有的方法朴肺;

類數(shù)組是一個(gè)普通對(duì)象窖剑,而真實(shí)的數(shù)組是Array類型。

常見的類數(shù)組有: 函數(shù)的參數(shù) arguments, DOM 對(duì)象列表(比如通過 document.querySelectorAll 得到的列表), jQuery 對(duì)象 (比如 $(“div”)).

類數(shù)組可以轉(zhuǎn)換為數(shù)組:

//第一種方法

Array.prototype.slice.call(arrayLike, start);

//第二種方法 擴(kuò)展運(yùn)算符

[...arrayLike];

//第三種方法:? Array.from()方法?

Array.from(arrayLike);

3.原型宇挫、原型鏈?

所有的js對(duì)象都有一個(gè)prototype屬性苛吱,指向他的原型對(duì)象。當(dāng)試圖訪問這個(gè)對(duì)象的屬性時(shí)器瘪,如果在這個(gè)對(duì)象上面沒有找到,他會(huì)搜尋該對(duì)象的原型绘雁,依次層層向上搜索橡疼,直到找到一個(gè)名字匹配的屬性或達(dá)到原型鏈的末尾。

JS(原型和原型鏈) - 姜皓 - 博客園

4.原型庐舟、構(gòu)造函數(shù)欣除、實(shí)例

實(shí)例:var obj=new Object();

1.每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象。 每個(gè)構(gòu)造函數(shù)本身都是一個(gè)對(duì)象挪略,它有一個(gè)屬性叫做prototype历帚,它是一個(gè)對(duì)象滔岳。

2.原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針。

3.實(shí)例都有一個(gè)屬性叫做_proto_挽牢,它是個(gè)指針谱煤,指向原型對(duì)象。

4.繼承? ?理解js繼承的6種方式 - Grace-zyy - 博客園


1.原型鏈繼承?

2.借用構(gòu)造函數(shù)繼承?.call()和.apply()

3.組合繼承(組合原型鏈繼承和借用構(gòu)造函數(shù)繼承)(常用)?

? ? 在子類的構(gòu)造函數(shù)中通過parent.call(this)繼承父類的屬性禽拔,然后改變子類的原型為new parent()來繼承父類的函數(shù)

4.寄生式繼承

5.寄生組合式繼承(常用)

? ? 將父類的原型賦值給子類刘离,并且將構(gòu)造函數(shù)設(shè)置為子類

6.class 繼承

? ? 使用extends表明繼承自哪個(gè)父類,并且在子類構(gòu)造函數(shù)中必須調(diào)用super


5. 數(shù)組

去重:

(1)Array.sort()

首先使用 sort() 將數(shù)組進(jìn)行排序睹栖,然后比較相鄰元素是否相等硫惕,從而排除重復(fù)項(xiàng)

function distinct(a, b) {

? ? let arr = a.concat(b)

? ? arr = arr.sort()

? ? let result = [arr[0]]

? ? for(let i=1, len=arr.length; i

? ? ? ? arr[i] !== arr[i-1] && result.push(arr[i])

? ? }

? ? return result

}


(2)new Set()??Set 的成員具有唯一性

function distinct(a, b) {

? ? returnArray.from(new Set([...a, ...b]))

}


(3)二、Array.filter() + indexOf

這個(gè)方法的思路是野来,將兩個(gè)數(shù)組拼接為一個(gè)數(shù)組恼除,然后使用 ES6 中的Array.filter()?遍歷數(shù)組,并結(jié)合 indexOf 來排除重復(fù)項(xiàng)

function distinct(a, b) {

? ? let arr = a.concat(b);

? ? return arr.filter((item, index)=> {

? ? ? ? return arr.indexOf(item) === index

? ? })

}


排序:JS中的算法與數(shù)據(jù)結(jié)構(gòu)——排序(Sort) - 簡(jiǎn)書

冒泡排序(排序最慢):比較相鄰的元素曼氛。如果第一個(gè)比第二個(gè)大缚柳,就交換它們兩個(gè)

選擇排序:從數(shù)組的開頭開始遍歷,將第一個(gè)元素和其他元素分別進(jìn)行比較搪锣,記錄最小的元素秋忙,等循環(huán)結(jié)束之后,將最小的元素放到數(shù)組的第一個(gè)位置上构舟,然后從數(shù)組的第二個(gè)位置開始繼續(xù)執(zhí)行上述步驟灰追。當(dāng)進(jìn)行到數(shù)組倒數(shù)第二個(gè)位置的時(shí)候,所有的數(shù)據(jù)就完成了排序狗超。

快速排序(遞歸):該算法首先要從數(shù)列中選出一個(gè)元素作為基數(shù)(pivot)弹澎。接著所有的數(shù)據(jù)都將圍繞這個(gè)基數(shù)進(jìn)行,將小于改基數(shù)的元素放在它的左邊努咐,大于或等于它的數(shù)全部放在它的右邊苦蒿,對(duì)左右兩個(gè)小數(shù)列重復(fù)上述步驟,直至各區(qū)間只有1個(gè)數(shù)渗稍。

//快速排序functionquickSort( arr ){if( arr.length ==0) {return[]; }varleft = [];varright = [];varpivot = arr[0];for(vari =1; i < arr.length; i++) {if(arr[i] < pivot) { left.push( arr[i] ); }else{ right.push( arr[i] ); } }returnquickSort( left ).concat( pivot, quickSort( right ));}

插入排序佩迟、 希爾排序、sort排序

最大值竿屹、最小值:

* 數(shù)組sort()排序

* apply

* for 循環(huán)

var data = [1,25,3,4.23]

var maxData = minData= data[0];

for (var i = 0; i < data.length; i++) {

if (data[i]>maxData) {

maxData = data[i]; ?// 最大值

};

if (data[i]<minData) {

minData = data[i]; ?// 最小值

}

}?


6.閉包

定義:函數(shù)A里面有一個(gè)函數(shù)B报强,函數(shù)B可以調(diào)用函數(shù)A的變量,函數(shù)B就是閉包

優(yōu)勢(shì):

a.函數(shù)外部可以讀取函數(shù)內(nèi)部的局部變量,實(shí)現(xiàn)變量數(shù)據(jù)共享

b.保存變量不會(huì)被銷毀拱燃,始終存在在內(nèi)存中

劣勢(shì):

a.保存變量秉溉,增加內(nèi)存開銷 (?相當(dāng)于返回一個(gè)函數(shù),延遲處理)

b.在Ie中可能導(dǎo)致內(nèi)存泄漏,網(wǎng)頁性能降低

解決辦法:

a.退出函數(shù)之前召嘶,將不使用的局部變量全部刪除? eg: str=undefined;

b.使用settimeout父晶,通過第三個(gè)參數(shù)傳入變量

c.使用塊級(jí)作用域,讓變量成為上下文的屬性弄跌,避免共享,eg:

for(vari= 0; i< list.length; i ++){

? ? list[i].addEventListener('click',function(){

? ? ? ? console.log(i)

? ? })

}

1.利用let塊級(jí)作用域的特性?? for(let i= 0; i< list.length; i ++){ }

2. 匿名自執(zhí)行函數(shù)

(function() {

????var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

????today = new Date(),

????msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate(); alert(msg);

} ());?

使用場(chǎng)景:

a.循環(huán)遍歷嵌套定時(shí)器

7.內(nèi)存泄漏

定義:由于疏忽或錯(cuò)誤造成程序未能釋放已經(jīng)不再使用的內(nèi)存甲喝。

原因:

a.意外的全局變量,無法回收

b.定時(shí)器,未被正確關(guān)閉碟绑,導(dǎo)致所用的外部變量無法被釋放

c.閉包

d.DOM泄漏:

游覽器中DOM和js采用的是不一樣的引擎俺猿,DOM采用的是渲染引擎,而js采用的是v8引擎格仲,所以在用js操作DOM時(shí)會(huì)比較耗費(fèi)性能押袍,因?yàn)樗麄冃枰獦騺礞溄铀麄儭榱藴p少DOM的操作凯肋,我們一般將常用的DOM谊惭。我們會(huì)采用變量引用的方式會(huì)將其緩存在當(dāng)前環(huán)境。如果在進(jìn)行一些刪除侮东、更新操作之后圈盔,可能會(huì)忘記釋放已經(jīng)緩存的DOM,話不多說直接來個(gè)例子

e.console.log

?在代碼運(yùn)行之后需要在開發(fā)工具能查看對(duì)象信息悄雅,所以傳遞給console.log的對(duì)象是不能被垃圾回收驱敲。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市宽闲,隨后出現(xiàn)的幾起案子众眨,更是在濱河造成了極大的恐慌,老刑警劉巖容诬,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件娩梨,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡览徒,警方通過查閱死者的電腦和手機(jī)狈定,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來习蓬,“玉大人纽什,你說我怎么就攤上這事∮仰ǎ” “怎么了稿湿?”我有些...
    開封第一講書人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)押赊。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么流礁? 我笑而不...
    開封第一講書人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任涕俗,我火速辦了婚禮,結(jié)果婚禮上神帅,老公的妹妹穿的比我還像新娘再姑。我一直安慰自己,他們只是感情好找御,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開白布元镀。 她就那樣靜靜地躺著,像睡著了一般霎桅。 火紅的嫁衣襯著肌膚如雪栖疑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,578評(píng)論 1 305
  • 那天滔驶,我揣著相機(jī)與錄音遇革,去河邊找鬼。 笑死揭糕,一個(gè)胖子當(dāng)著我的面吹牛萝快,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播著角,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼揪漩,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了吏口?” 一聲冷哼從身側(cè)響起奄容,我...
    開封第一講書人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锨侯,沒想到半個(gè)月后嫩海,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡囚痴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年叁怪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片深滚。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡奕谭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出痴荐,到底是詐尸還是另有隱情血柳,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布生兆,位于F島的核電站难捌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜根吁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一员淫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧击敌,春花似錦介返、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至衡瓶,卻和暖如春徘公,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鞍陨。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工步淹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人诚撵。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓缭裆,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親寿烟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子澈驼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容