javascript10的簡單介紹

Web前端工程師應該知道的JavaScript的10個難點！

今天小編要跟大家分享的文章是關于Web前端工程師應該知道的JavaScript的10個難點。相信很多正在學習Web前端知識的小伙伴對于JavaScript存在很多疑問，為了幫助大家更好的學習Web前端知識，成為一名優秀的web前端工程師，今天小編為大家分享了這篇Web前端應該知道的JavaScript難點的問題，下面我們一起看一看吧！

創新互聯專注于雙江企業網站建設,成都響應式網站建設公司,商城系統網站開發。雙江網站建設公司,為雙江等地區提供建站服務。全流程定制網站制作，專業設計，全程項目跟蹤，創新互聯專業和態度為您提供的服務

1、立即執行函數

立即執行函數，即ImmediatelyInvokedFunctionExpression

(IIFE)，正如它的名字，就是創建函數的同時立即執行。它沒有綁定任何事件，也無需等待任何異步操作：

1.(function(){

2.

3.//代碼

4.

5.//...

6.

7.})();

function(){}是一個匿名函數，包圍它的一對括號將其轉換為一個表達式，緊跟其后的一對括號調用了這個函數。立即執行函數也可以理解為立即調用一個匿名函數。立即執行函數最常見的應用場景就是：將var變量的作用域限制于你們函數內，這樣可以避免命名沖突。

2、閉包

對于閉包(closure)，當外部函數返回之后，內部函數依然可以訪問外部函數的變量。

1.(function(){

2.

3.//代碼

4.

5.//...

6.

7.})();

代碼中，外部函數f1只執行了一次，變量N設為0，并將內部函數f2賦值給了變量result。由于外部函數f1已經執行完畢，其內部變量N應該在內存中被清除，然而事實并不是這樣：我們每次調用result的時候，發現變量N一直在內存中，并且在累加。為什么呢?這就是閉包的神奇之處了!

3、使用閉包定義私有變量

通常，JavaScript開發者使用下劃線作為私有變量的前綴。但是實際上，這些變量依然可以被訪問和修改，并非真正的私有變量。這時，使用閉包可以定義真正的私有變量：

1.functionProduct(){

2.

3.varname;

4.

5.this.setName=function(value){

6.name=value;

7.};

8.

9.this.getName=function(){

10.returnname;

11.};

12.}

13.

14.varp=newProduct();

15.p.setName("Fundebug");

16.

17.console.log(p.name);//輸出undefined

18.console.log(p.getName());//輸出Fundebug

代碼中，對象p的的name屬性為私有屬性，使用p.name不能直接訪問。

4、prototype

每個JavaScript構造函數都有一個prototype屬性，用于設置所有實例對象需要共享的屬性和方法。prototype屬性不能列舉。JavaScript僅支持通過prototype屬性進行繼承屬性和方法。

1.functionRectangle(x,y)

2.{

3.this._length=x;

4.this._breadth=y;

5.}

6.

7.Rectangle.prototype.getDimensions=function()

8.{

9.return{

10.length:this._length,

11.breadth:this._breadth

12.};

13.};

14.

15.varx=newRectangle(3,4);

16.vary=newRectangle(4,3);

17.

18.console.log(x.getDimensions());//{length:3,breadth:4}

19.console.log(y.getDimensions());//{length:4,breadth:3}

代碼中，x和y都是構造函數Rectangle創建的對象實例，它們通過prototype繼承了getDimensions方法。

5、模塊化

JavaScript并非模塊化編程語言，至少ES6落地之前都不是。然而對于一個復雜的Web應用，模塊化編程是一個最基本的要求。這時，可以使用立即執行函數來實現模塊化，正如很多JS庫比如jQuery以及我們Fundebug都是這樣實現的。

1.varmodule=(function(){

2.varN=5;

3.

4.functionprint(x){

5.console.log("Theresultis:"+x);

6.}

7.

8.functionadd(a){

9.varx=a+N;

10.print(x);

11.}

12.

13.return{

14.description:"Thisisdescription",

15.add:add

16.};

17.})();

18.

19.

20.console.log(module.description);//輸出"thisisdescription"

21.

22.module.add(5);//輸出“Theresultis:10”

所謂模塊化，就是根據需要控制模塊內屬性與方法的可訪問性，即私有或者公開。在代碼中，module為一個獨立的模塊，N為其私有屬性，print為其私有方法，decription為其公有屬性，add為其共有方法。

6、變量提升

JavaScript會將所有變量和函數聲明移動到它的作用域的最前面，這就是所謂的變量提升(Hoisting)。也就是說，無論你在什么地方聲明變量和函數，解釋器都會將它們移動到作用域的最前面。因此我們可以先使用變量和函數，而后聲明它們。但是，僅僅是變量聲明被提升了，而變量賦值不會被提升。如果你不明白這一點，有時則會出錯：

1.console.log(y);//輸出undefined

2.

3.y=2;//初始化y

上面的代碼等價于下面的代碼：

1.vary;//聲明y

2.

3.console.log(y);//輸出undefined

4.

5.y=2;//初始化y

為了避免BUG，開發者應該在每個作用域開始時聲明變量和函數。

7、柯里化

柯里化，即Currying，可以是函數變得更加靈活。我們可以一次性傳入多個參數調用它;也可以只傳入一部分參數來調用它，讓它返回一個函數去處理剩下的參數。

1.varadd=function(x){

2.returnfunction(y){

3.returnx+y;

4.};

5.};

6.

7.console.log(add(1)(1));//輸出2

8.

9.varadd1=add(1);

10.console.log(add1(1));//輸出2

11.

12.varadd10=add(10);

13.console.log(add10(1));//輸出11

代碼中，我們可以一次性傳入2個1作為參數add(1)(1)，也可以傳入1個參數之后獲取add1與add10函數，這樣使用起來非常靈活。

8、apply，call與bind方法

JavaScript開發者有必要理解apply、call與bind方法的不同點。它們的共同點是第一個參數都是this，即函數運行時依賴的上下文。

三者之中，call方法是最簡單的，它等價于指定this值調用函數：

1.varuser={

2.name:"RahulMhatre",

3.whatIsYourName:function(){

4.console.log(this.name);

5.}

6.};

7.

8.user.whatIsYourName();//輸出"RahulMhatre",

9.

10.varuser2={

11.name:"NehaSampat"

12.};

13.

14.user.whatIsYourName.call(user2);//輸出"NehaSampat"

·apply方法與call方法類似。兩者唯一的不同點在于，apply方法使用數組指定參數，而call方法每個參數單獨需要指定：

·apply(thisArg,[argsArray])

1.varuser={

2.greet:"Hello!",

3.greetUser:function(userName){

4.console.log(this.greet+""+userName);

5.}

6.};

7.

8.vargreet1={

9.greet:"Hola"

10.};

11.

12.user.greetUser.call(greet1,"Rahul");//輸出"HolaRahul"

13.user.greetUser.apply(greet1,["Rahul"]);//輸出"HolaRahul"

使用bind方法，可以為函數綁定this值，然后作為一個新的函數返回：

1.varuser={

2.greet:"Hello!",

3.greetUser:function(userName){

4.console.log(this.greet+""+userName);

5.}

6.};

7.

8.vargreetHola=user.greetUser.bind({greet:"Hola"});

9.vargreetBonjour=user.greetUser.bind({greet:"Bonjour"});

10.

11.greetHola("Rahul")//輸出"HolaRahul"

12.greetBonjour("Rahul")//輸出"BonjourRahul"

9、memoization

Memoization用于優化比較耗時的計算，通過將計算結果緩存到內存中，這樣對于同樣的輸入值，下次只需要中內存中讀取結果。

1.functionmemoizeFunction(func)

2.{

3.varcache={};

4.returnfunction()

5.{

6.varkey=arguments[0];

7.if(cache[key])

8.{

9.returncache[key];

10.}

11.else

12.{

13.varval=func.apply(this,arguments);

14.cache[key]=val;

15.returnval;

16.}

17.};

18.}

19.

20.

21.varfibonacci=memoizeFunction(function(n)

22.{

23.return(n===0||n===1)?n:fibonacci(n-1)+fibonacci(n-2);

24.});

25.

26.console.log(fibonacci(100));//輸出354224848179262000000

27.console.log(fibonacci(100));//輸出354224848179262000000

代碼中，第2次計算fibonacci(100)則只需要在內存中直接讀取結果。

10、函數重載

所謂函數重載(method

overloading)，就是函數名稱一樣，但是輸入輸出不一樣。或者說，允許某個函數有各種不同輸入，根據不同的輸入，返回不同的結果。憑直覺，函數重載可以通過if...else或者switch實現，這就不去管它了。jQuery之父John

Resig提出了一個非常巧(bian)妙(tai)的方法，利用了閉包。

從效果上來說，people對象的find方法允許3種不同的輸入:

0個參數時，返回所有人名;1個參數時，根據firstName查找人名并返回;2個參數時，根據完整的名稱查找人名并返回。

難點在于，people.find只能綁定一個函數，那它為何可以處理3種不同的輸入呢?它不可能同時綁定3個函數find0,find1與find2啊!這里的關鍵在于old屬性。

由addMethod函數的調用順序可知，people.find最終綁定的是find2函數。然而，在綁定find2時，old為find1;同理，綁定find1時，old為find0。3個函數find0,find1與find2就這樣通過閉包鏈接起來了。

根據addMethod的邏輯，當f.length與arguments.length不匹配時，就會去調用old，直到匹配為止。

1.functionaddMethod(object,name,f)

2.{

3.varold=object[name];

4.object[name]=function()

5.{

6.//f.length為函數定義時的參數個數

7.//arguments.length為函數調用時的參數個數

8.if(f.length===arguments.length)

9.{

10.returnf.apply(this,arguments);

11.}

12.elseif(typeofold==="function")

13.{

14.returnold.apply(this,arguments);

15.}

16.};

17.}

18.

19.

20.//不傳參數時，返回所有name

21.functionfind0()

22.{

23.returnthis.names;

24.}

25.

26.

27.//傳一個參數時，返回firstName匹配的name

28.functionfind1(firstName)

29.{

30.varresult=[];

31.for(vari=0;i

32.{

33.if(this.names[i].indexOf(firstName)===0)

34.{

35.result.push(this.names[i]);

36.}

37.}

38.returnresult;

39.}

40.

41.

42.//傳兩個參數時，返回firstName和lastName都匹配的name

43.functionfind2(firstName,lastName)

44.{

45.varresult=[];

46.for(vari=0;i

47.{

48.if(this.names[i]===(firstName+""+lastName))

49.{

50.result.push(this.names[i]);

51.}

52.}

53.returnresult;

54.}

55.

56.

57.varpeople={

58.names:["DeanEdwards","AlexRussell","DeanTom"]

59.};

60.

61.

62.addMethod(people,"find",find0);

63.addMethod(people,"find",find1);

64.addMethod(people,"find",find2);

65.

66.

67.console.log(people.find());//輸出["DeanEdwards","AlexRussell","DeanTom"]

68.console.log(people.find("Dean"));//輸出["DeanEdwards","DeanTom"]

69.console.log(people.find("Dean","Edwards"));//輸出["DeanEdwards"]

以上就是小編今天為大家分享的關于Web前端工程師應該知道的JavaScript的10個難點。希望本篇文章能夠對正在從事Web前端學習的小伙伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥Web培訓官網最后祝愿小伙伴們工作順利！

原文鏈接：#/a/1190000010371988

用javascript語言編寫一個程序輸入10個整數顯示出最大值和最小值

function?f(){

var?numbers?=?prompt("請輸入10個整數,?以?','?分割");

if(!/^(\d+,){9}\d+$/.test(numbers)){

alert("輸入不合法");

return;

}

alert("最大值為:"+Math.max.apply(null,?numbers.split(","))+"---最小值為:?"?+?Math.min.apply(null,?numbers.split(",")));

}

f();

JavaScript中10%屬于什么數據類型，該如何在數據傳遞時讓百分號起作用

javascript是弱數據類型，你把10%賦給一個變量，它自動識別這個值是一個浮點數。不存在什么數據類型

JavaScript要求用戶使用循環產生10個隨機數存在數組中,且隨機數不能重復

function getRandomArray()

{

var arr = [];

while (arr.length 10)

{

var random = Math.floor(Math.random() * 10) + 1;

if (arr.indexOf(random) 0)

{

arr.push(random);

}

}

return arr;

}

alert(getRandomArray());

分享文章：javascript10的簡單介紹
當前鏈接：http://m.kartarina.com/article20/dseeeco.html

成都網站建設公司_創新互聯，為您提供網站排名、網站營銷、網站設計、網站維護、網站建設、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯