前端面試JS方向-基本方法(1-13)

?1、JavaScript中如何檢測一個變量是一個String類型?請寫出函數(shù)實現(xiàn)

typeof(obj) === "string"

typeof obj === "string"

obj.constructor === String

2、請用js去除字符串空格?

方法一:使用replace正則匹配的方法

去除所有空格: str = str.replace(/\s*/g,"");? ? ??

去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格: str = str.replace( /^\s*/, “”);

去除右空格: str = str.replace(/(\s*$)/g, "");

str為要去除空格的字符串,實例如下:

var str = " 23 23 ";

var str2 = str.replace(/\s*/g,"");

console.log(str2); // 2323

方法二:使用str.trim()方法

str.trim()局限性:無法去除中間的空格,實例如下:

var str = "? ?xiao? ming? ?";

var str2 = str.trim();

console.log(str2);? ?//xiao? ming?

同理,str.trimLeft(),str.trimRight()分別用于去除字符串左右空格。

方法三:使用jquery,$.trim(str)方法

$.trim(str)局限性:無法去除中間的空格,實例如下:

var str = "? ?xiao? ming? ?";

var str2 = $.trim(str)

console.log(str2);? ?//? xiao? ming

3、你如何獲取瀏覽器URL中查詢字符串中的參數(shù)?

測試地址為:http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

實例如下:

function showWindowHref(){

? ? var sHref = window.location.href;

? ? var args = sHref.split('?');

? ? if(args[0] == sHref){

? ? ? ? return "";

? ? }

? ? var arr = args[1].split('&');

? ? var obj = {};

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

? ? ? ? var arg = arr[i].split('=');

? ? ? ? obj[arg[0]] = arg[1];

? ? }

? ? return obj;

}

var href = showWindowHref(); // obj

console.log(href['name']); // xiaoming

4.js 字符串操作函數(shù)

  我這里只是列舉了常用的字符串函數(shù),具體使用方法,請參考網(wǎng)址。

concat() – 將兩個或多個字符的文本組合起來,返回一個新的字符串。

indexOf() – 返回字符串中一個子串第一處出現(xiàn)的索引。如果沒有匹配項,返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一個子串最后一處出現(xiàn)的索引,如果沒有匹配項,返回 -1 。

match() – 檢查一個字符串是否匹配一個正則表達式。

substr() 函數(shù) -- 返回從string的startPos位置,長度為length的字符串

substring() – 返回字符串的一個子串。傳入?yún)?shù)是起始位置和結(jié)束位置。

slice() – 提取字符串的一部分,并返回一個新字符串。

replace() – 用來查找匹配一個正則表達式的字符串,然后使用新字符串代替匹配的字符串。

search() – 執(zhí)行一個正則表達式匹配查找。如果查找成功,返回字符串中匹配的索引值。否則返回 -1 。

split() – 通過將字符串劃分成子串,將一個字符串做成一個字符串數(shù)組。

length – 返回字符串的長度,所謂字符串的長度是指其包含的字符的個數(shù)。

toLowerCase() – 將整個字符串轉(zhuǎn)成小寫字母。

toUpperCase() – 將整個字符串轉(zhuǎn)成大寫字母。

5、怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點?

?1)創(chuàng)建新節(jié)點

  createDocumentFragment() //創(chuàng)建一個DOM片段

  createElement() //創(chuàng)建一個具體的元素

  createTextNode() //創(chuàng)建一個文本節(jié)點

2)添加、移除、替換、插入

  appendChild() //添加

  removeChild() //移除

  replaceChild() //替換

  insertBefore() //插入

3)查找

  getElementsByTagName() //通過標簽名稱

  getElementsByName() //通過元素的Name屬性的值

  getElementById() //通過元素Id,唯一性

6、寫出3個使用this的典型應(yīng)用

(1)、在html元素事件屬性中使用,如:

<input type=”button” onclick=”showInfo(this);” value=”點擊一下”/>

(2)、構(gòu)造函數(shù)

function Animal(name, color) {

  this.name = name;

  this.color = color;

}

(3)、input點擊,獲取值

<input type="button" id="text" value="點擊一下" />

<script type="text/javascript">

? ? var btn = document.getElementById("text");

? ? btn.onclick = function() {

? ? ? ? alert(this.value);? ? //此處的this是按鈕元素

? ? }

</script>

(4)、apply()/call()求數(shù)組最值

var? numbers = [5, 458 , 120 , -215 ];?

var? maxInNumbers = Math.max.apply(this, numbers);??

console.log(maxInNumbers);? // 458

var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);?

console.log(maxInNumbers);? // 458

7、比較typeof與instanceof?

相同點:JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空,或者是什么類型的。

typeof的定義和用法:返回值是一個字符串,用來說明變量的數(shù)據(jù)類型。

細節(jié)

(1)、typeof 一般只能返回如下幾個結(jié)果:number,boolean,string,function,object,undefined。

(2)、typeof 來獲取一個變量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因為如果 a 不存在(未聲明)則會出錯。

(3)、對于 Array,Null 等特殊對象使用 typeof 一律返回 object,這正是 typeof 的局限性。

Instanceof定義和用法:instanceof 用于判斷一個變量是否屬于某個對象的實例。

實例演示:

a instanceof b?alert("true"):alert("false"); //a是b的實例?真:假

var a = new Array();?

alert(a instanceof Array);? // true

alert(a instanceof Object)? // true

如上,會返回 true,同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。

function test(){};

var a = new test();

alert(a instanceof test)? ?// true

細節(jié):

(1)、如下,得到的結(jié)果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object,不是指 dom 模型對象。

if (window instanceof Object){ alert('Y')} else {? alert('N');}? // 'N'

?8、如何理解閉包?

1、定義和用法:當一個函數(shù)的返回值是另外一個函數(shù),而返回的那個函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量,如果返回的這個函數(shù)在外部被執(zhí)行,就產(chǎn)生了閉包。

2、表現(xiàn)形式:使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量。

3、實例如下

(1)、根據(jù)作用域鏈的規(guī)則,底層作用域沒有聲明的變量,會向上一級找,找到就返回,沒找到就一直找,直到window的變量,沒有就返回undefined。這里明顯count 是函數(shù)內(nèi)部的flag2 的那個count 。

var count=10;? ?//全局作用域 標記為flag1

function add(){

? ? var count=0;? ? //函數(shù)全局作用域 標記為flag2

? ? return function(){

? ? ? ? count+=1;? ?//函數(shù)的內(nèi)部作用域

? ? ? ? alert(count);

? ? }

}

var s = add()

s();//輸出1

s();//輸出2

變量的作用域

要理解閉包,首先必須理解Javascript特殊的變量作用域。

變量的作用域分類:全局變量和局部變量。

特點:

1、函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量;在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量。

2、函數(shù)內(nèi)部聲明變量的時候,一定要使用var命令。如果不用的話,你實際上聲明了一個全局變量!

使用閉包的注意點

1)濫用閉包,會造成內(nèi)存泄漏:由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中,內(nèi)存消耗很大,所以不能濫用閉包,否則會造成網(wǎng)頁的性能問題,在IE中可能導致內(nèi)存泄露。解決方法是,在退出函數(shù)之前,將不使用的局部變量全部刪除。

2)會改變父函數(shù)內(nèi)部變量的值。所以,如果你把父函數(shù)當作對象(object)使用,把閉包當作它的公用方法(Public Method),把內(nèi)部變量當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數(shù)內(nèi)部變量的值。

?9.什么是跨域?跨域請求資源的方法有哪些?

1、什么是跨域?

由于瀏覽器同源策略,凡是發(fā)送請求url的協(xié)議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況:

網(wǎng)絡(luò)協(xié)議不同,如http協(xié)議訪問https協(xié)議。

端口不同,如80端口訪問8080端口。

域名不同,如qianduanblog.com訪問baidu.com。

子域名不同,如abc.qianduanblog.com訪問def.qianduanblog.com。

域名和域名對應(yīng)ip,如www.a.com訪問20.205.28.90.

2、跨域請求資源的方法:

(1)、porxy代理

定義和用法:proxy代理用于將請求發(fā)送給后臺服務(wù)器,通過服務(wù)器來發(fā)送請求,然后將請求的結(jié)果傳遞給前端。

實現(xiàn)方法:通過nginx代理;

注意點:1、如果你代理的是https協(xié)議的請求,那么你的proxy首先需要信任該證書(尤其是自定義證書)或者忽略證書檢查,否則你的請求無法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法:是現(xiàn)代瀏覽器支持跨域資源請求的一種最常用的方式。

使用方法:一般需要后端人員在處理請求數(shù)據(jù)的時候,添加允許跨域的相關(guān)操作。如下:

res.writeHead(200, {

? ? "Content-Type": "text/html; charset=UTF-8",

? ? "Access-Control-Allow-Origin":'http://localhost',

? ? 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

? ? 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

(3)、jsonp

定義和用法:通過動態(tài)插入一個script標簽。瀏覽器對script的資源引用沒有同源限制,同時資源加載到頁面后會立即執(zhí)行(沒有阻塞的情況下)。

特點:通過情況下,通過動態(tài)創(chuàng)建script來讀取他域的動態(tài)資源,獲取的數(shù)據(jù)一般為json格式。

實例如下:

<script>

? ? function testjsonp(data) {

? ? ? ?console.log(data.name); // 獲取返回的結(jié)果

? ? }

</script>

<script>

? ? var _script = document.createElement('script');

? ? _script.type = "text/javascript";

? ? _script.src = "http://localhost:8888/jsonp?callback=testjsonp";

? ? document.head.appendChild(_script);

</script>

缺點:

  1、這種方式無法發(fā)送post請求(這里)

  2、另外要確定jsonp的請求是否失敗并不容易,大多數(shù)框架的實現(xiàn)都是結(jié)合超時時間來判定。

10、談?wù)劺厥諜C制方式及內(nèi)存管理

回收機制方式

1、定義和用法:垃圾回收機制(GC:Garbage Collection),執(zhí)行環(huán)境負責管理代碼執(zhí)行過程中使用的內(nèi)存。

2、原理:垃圾收集器會定期(周期性)找出那些不在繼續(xù)使用的變量,然后釋放其內(nèi)存。但是這個過程不是實時的,因為其開銷比較大,所以垃圾回收器會按照固定的時間間隔周期性的執(zhí)行。

3、實例如下

function fn1() {

? ? var obj = {name: 'hanzichi', age: 10};

}

function fn2() {

? ? var obj = {name:'hanzichi', age: 10};

? ?return obj;

}

var a = fn1();

var b = fn2();

fn1中定義的obj為局部變量,而當調(diào)用結(jié)束后,出了fn1的環(huán)境,那么該塊內(nèi)存會被js引擎中的垃圾回收器自動釋放;在fn2被調(diào)用的過程中,返回的對象被全局變量b所指向,所以該塊內(nèi)存并不會被釋放。

?4、垃圾回收策略:標記清除(較為常用)和引用計數(shù)。

標記清除:

  定義和用法:當變量進入環(huán)境時,將變量標記"進入環(huán)境",當變量離開環(huán)境時,標記為:"離開環(huán)境"。某一個時刻,垃圾回收器會過濾掉環(huán)境中的變量,以及被環(huán)境變量引用的變量,剩下的就是被視為準備回收的變量。

  到目前為止,IE、Firefox、Opera、Chrome、Safari的js實現(xiàn)使用的都是標記清除的垃圾回收策略或類似的策略,只不過垃圾收集的時間間隔互不相同。

引用計數(shù):

  定義和用法:引用計數(shù)是跟蹤記錄每個值被引用的次數(shù)。

  基本原理:就是變量的引用次數(shù),被引用一次則加1,當這個引用計數(shù)為0時,被視為準備回收的對象。

?內(nèi)存管理

1、什么時候觸發(fā)垃圾回收?

垃圾回收器周期性運行,如果分配的內(nèi)存非常多,那么回收工作也會很艱巨,確定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據(jù)內(nèi)存分配量運行的,當環(huán)境中的變量,對象,字符串達到一定數(shù)量時觸發(fā)垃圾回收。垃圾回收器一直處于工作狀態(tài),嚴重影響瀏覽器性能。

IE7中,垃圾回收器會根據(jù)內(nèi)存分配量與程序占用內(nèi)存的比例進行動態(tài)調(diào)整,開始回收工作。

2、合理的GC方案:(1)、遍歷所有可訪問的對象; (2)、回收已不可訪問的對象。

3、GC缺陷:(1)、停止響應(yīng)其他操作;

4、GC優(yōu)化策略:(1)、分代回收(Generation GC);(2)、增量GC

11、開發(fā)過程中遇到的內(nèi)存泄露情況,如何解決的?

1、定義和用法

內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用,又不能回收,直到瀏覽器進程結(jié)束。C#和Java等語言采用了自動垃圾回收方法管理內(nèi)存,幾乎不會發(fā)生內(nèi)存泄露。我們知道,瀏覽器中也是采用自動垃圾回收方法管理內(nèi)存,但由于瀏覽器垃圾回收方法有bug,會產(chǎn)生內(nèi)存泄露。

2、內(nèi)存泄露的幾種情況:

(1)、當頁面中元素被移除或替換時,若元素綁定的事件仍沒被移除,在IE中不會作出恰當處理,此時要先手工移除事件,不然會存在內(nèi)存泄露。

實例如下:

<div id="myDiv">

? ? <input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

? ? var btn = document.getElementById("myBtn");

? ? btn.onclick = function(){

? ? ? ? document.getElementById("myDiv").innerHTML = "Processing...";

? ? }

</script>

解決方法如下:

<div id="myDiv">

? ? <input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

? ? var btn = document.getElementById("myBtn");

? ? btn.onclick = function(){

? ? btn.onclick = null;

? ? ? ? document.getElementById("myDiv").innerHTML = "Processing...";

? ? }

</script>

(2)、由于是函數(shù)內(nèi)定義函數(shù),并且內(nèi)部函數(shù)--事件回調(diào)的引用外暴了,形成了閉包。閉包可以維持函數(shù)內(nèi)局部變量,使其得不到釋放。

實例如下:

function bindEvent(){

? ? var obj=document.createElement("XXX");

? ? obj.onclick=function(){

? ? ? ? //Even if it's a empty function

? ? }

}

解決方法如下:

function bindEvent(){

? ? var obj=document.createElement("XXX");

? ? obj.onclick=function(){

? ? ? ? ?//Even if it's a empty function

? ? }

? ? obj=null;

}

?12、javascript面向?qū)ο笾欣^承實現(xiàn)?

面向?qū)ο蟮幕咎卣饔校悍忾]、繼承、多態(tài)。

在JavaScript中實現(xiàn)繼承的方法:

1. 原型鏈(prototype chaining)

2. call()/apply()

3. 混合方式(prototype和call()/apply()結(jié)合)

4. 對象冒充

繼承的方法如下:

1、prototype原型鏈方式:

?function teacher(name){

? ? this.name = name;

}

teacher.prototype.sayName = function(){

? ? console.log("name is "+this.name);

}

var teacher1 = new teacher("xiaoming");

teacher1.sayName();


function student(name){

? ? this.name = name;

}

student.prototype = new teacher()

var student1 = new student("xiaolan");

student1.sayName();

//? name is xiaoming

//? name is xiaolan

2、call()/apply()方法

function teacher(name,age){

this.name = name;

this.age = age;

this.sayhi = function(){

alert('name:'+name+", age:"+age);

}

}

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

// teacher.apply(this,arguments);

}

var teacher1 = new teacher('xiaoming',23);

teacher1.sayhi();

var student1 = new student('xiaolan',12);

student1.sayhi();

// alert: name:xiaoming, age:23

// alert: name:xiaolan, age:12

3、混合方法【prototype,call/apply】

function teacher(name,age){

this.name = name;

this.age = age;

}

teacher.prototype.sayName = function(){

console.log('name:'+this.name);

}

teacher.prototype.sayAge = function(){

console.log('age:'+this.age);

}

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

}

student.prototype = new teacher();

var student1 = new student('xiaolin',23);

student1.sayName();

student1.sayAge();

// name:xiaolin

// age:23

4、對象冒充

function Person(name,age){

this.name = name;

this.age = age;

this.show = function(){

console.log(this.name+", "+this.age);

}

}

function Student(name,age){

this.student = Person; //將Person類的構(gòu)造函數(shù)賦值給this.student

this.student(name,age); //js中實際上是通過對象冒充來實現(xiàn)繼承的

delete this.student; //移除對Person的引用

}

var s = new Student("小明",17);

s.show();

var p = new Person("小花",18);

p.show();

// 小明, 17

// 小花, 18

13、判斷一個字符串中出現(xiàn)次數(shù)最多的字符,統(tǒng)計這個次數(shù)

var str = 'asdfssaaasasasasaa';

var json = {};

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

? ? if(!json[str.charAt(i)]){

? ? ? ?json[str.charAt(i)] = 1;

? ? }else{

? ? ? ?json[str.charAt(i)]++;

? ? }

};

var iMax = 0;

var iIndex = '';

for(var i in json){

? ? if(json[i]>iMax){

? ? ? ? ?iMax = json[i];

? ? ? ? ?iIndex = i;

? ? }

}? ? ? ??

console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

結(jié)果如下:出現(xiàn)次數(shù)最多的是:a出現(xiàn)9次

---------------------?

作者:wdlhao?

來源:CSDN?

原文:https://blog.csdn.net/wdlhao/article/details/79079660?

版權(quán)聲明:本文為博主原創(chuàng)文章,轉(zhuǎn)載請附上博文鏈接!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,140評論 2 17
  • Lua 5.1 參考手冊 by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 14,259評論 0 38
  • 本篇收錄了一些面試中經(jīng)常會遇到的經(jīng)典面試題以及自己面試過程中遇到的一些問題,并且都給出了我在網(wǎng)上收集的答案。馬上就...
    菲菲菲菲妞閱讀 1,006評論 0 3
  • 標題測試,這是H1 標題測試,這是H2 正文測試dsa大會盡快發(fā)到拉薩分節(jié)點雷克薩分節(jié)點雷克薩發(fā)開發(fā)了第三今飛凱達...
    renyu310閱讀 170評論 0 0
  • 今天是進入銜接班的第17天,上午本該我們組早會不過由于十號線故障大家都來的比較遲,來到銜接班之后就開始聽鑫享這款產(chǎn)...
    瓊林玉質(zhì)閱讀 229評論 0 0

友情鏈接更多精彩內(nèi)容