本文目錄一覽：
- 1、Web前端開發知識點之JavaScript的介紹與語法
- 2、Web前端工程師要知道的JavaScript變數命名規範
- 3、學習Web前端要知道的JavaScript基礎語法規則
- 4、Web前端工程師應該知道的JavaScript的10個難點！
Web前端開發知識點之JavaScript的介紹與語法
今天小編要跟大家分享的文章是關於Web前端開發知識點之JavaScript的介紹與語法。正在學習web前端相關知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
一、JavaScript介紹
JavaScript是一門客戶端腳本語言，是適應動態網頁製作的需要而誕生的一種編程語言。這門語言可用於HTML和web，更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。
在HTML基礎上，使用Javascript可以開發互動式Web網頁，可以增強用戶和HTML頁面的交互過程，可以控制HTML元素讓頁面有一些動態的效果，增強用戶的體驗。
JavaScript使有規律地重複的HTML文段簡化，減少下載時間。
二、JavaScript語法
①與HTML的結合方式
JavaScript與HTML的結合方式有兩種，一種是內部JavaScript，一種是外部JavaScript，定義的方式與CSS類似。
內部JavaScript需要定義一對標籤，標籤體的內容就是JavaScript代碼。例如：
alert(“我的第一個JavaScript”);
外部JavaScript也需要定義一對標籤，通過src屬性引入外部的就是文件。例如：
注意：JavaScript可以定義在HTML頁面的任何地方，但是定義的位置會影響執行的順序。而且可以在HTML文檔中放入不限數量的腳本。通常的做法是把函數放入部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
②注釋
JavaScript的注釋與java相同，一種是「//」單行注釋，一種是「/**/」多行注釋。例如
//這是單行注釋
/*
這是多行注釋
這是多行注釋*/
③數據類型
JavaScript的數據類型包括兩大類：原始數據類型和引用數據類型。
原始數據類型包括：
·number數字：包括整數、小數和NaN(notanumber不是數字的數字類型)
·string字元串
·boolean布爾型：包括true和false
·null：一個對象為空的佔位符
·undefined：未定義
引用數據類型就是指對象類型。
④變數
所謂變數就是一小塊存儲數據的內存空間。java語言是強類型語言，在開闢變數存儲空間時就定義了存儲數據的類型，而且只能存儲固定類型的數據;JavaScript是弱類型語言，在開闢變數存儲空間時不定義存儲數據的類型，可以存儲任意類型的數據。
聲明變數用var關鍵字，例如：
vara=3;
我們可以使用typeof運算符獲取變數的類型。
⑤運算符
JavaScript中的運算符與java中的基本一致，大家可以參考這個鏈接複習一下，接下來我再說說JavaScript里比較特殊的運算符。
在說運算符之前先說一個注意事項：在JavaScript中如果運算數不是運算符所要求的的類型，那麼JavaScript引擎會自動將運算數進行類型轉換。
因此在JavaScript中1==”1″的結果是true，那麼我想讓他的結果是false該怎麼辦呢?所以JavaScript引入了新的運算符全等於(===)，此時1===”1″的結果就是false了。
⑥流程式控制制語句
JavaScript中流程式控制制語句包括if…else…、switch、while、do…while…、for等，語法規則與java中完全一致，點擊上方關鍵詞可查看java語法規則。
⑦特殊語法(不建議)
JavaScript語句以;結尾，如果一行只有一條語句則;可以省略。
變數定義是使用var關鍵字，也可以不使用。
以上就是小編今天為大家分享的關於Web前端開發知識點之JavaScript的介紹與語法的文章，希望本篇文章能夠對正在從事web前端工作和學習的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
文章來源：原創凱哥的故事凱哥的故事
Web前端工程師要知道的JavaScript變數命名規範
今天小編要跟大家分享的文章是關於Web前端工程師要知道的JavaScript變數命名規範，正在從事Web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
JavaScript變數命名規範：只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。
下列都是非常正確的變數命名：
varhaha=250;
varxixi=300;
vara1=400;
vara2=400;
varabc_123=400;
var$abc=999;
var$o0_0o$=888;
var$=1000;
var_=2000;
var________=3000;
下列都是錯誤的命名：
vara-1=1000;//不能有怪異符號
vara@=2000;//不能有怪異符號
var2year=3000;//不能以數字開頭
vara￥=4000;//不能有怪異符號
vara*#$#$@=5000;//不能有怪異符號
varab=300;//不能有空格
下列的單詞，叫做保留字，就是說不允許當做變數名
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
需要注意大寫字母是可以使用的，並且大小寫敏感。也就是說A和a是兩個變數。
1varA=250;
2vara=888;
以上就是小編今天為大家分享的關於Web前端工程師要知道的JavaScript變數命名規範的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利!
學習Web前端要知道的JavaScript基礎語法規則
今天小編要跟大家分享的文章是關於學習web前端要知道的JavaScript基礎語法規則。俗話說，「無規矩不成方圓」。用在計算機語言上也同樣使用。每種計算機語言都有自己的語法規則，只有遵循語法規則才能寫出符合要求的代碼。JavaScript也不例外，在使用JavaScript語言時，需要遵循某些語法規則，如執行順序、大寫和注釋規範。下面我們就以來介紹下，JavaScript基礎語法規則。
1.按從上到下的順序執行
JavaScript程序按照在HTML文檔中的排列順序逐行執行。如果代碼(例如函數、全局變數等)需要在整個HTML文件中使用，最好將這些代碼放在HTML文件的標記中。
2.區分大小寫字母
JavaScript嚴格區分字母大小寫。也就是說，在輸入關鍵字、函數名、變數以及其他標識符時，都必須採用正確的大小寫形式。例如，變數username與變數UserName是兩個不同的變數。
3.每行結尾的分號可有可無
JavaScript語言並不要求必須以分號「;」”作為語句的結束標記。如果語句的結束處沒有分，JavaScript會自動將該行代碼的結尾作為整個語句的結束。例如，下面兩行示例代碼，雖然第一行代碼結尾沒有寫分號，但也是正確的。(注意：書寫JavaScript代碼時，為了保證代碼的嚴謹性、準確性，最好在每行代碼的結尾加上分號。)
alert
alert
4、注釋規範
使用JavaScript時，為了使代碼易於閱讀，需要為
JavaScript代碼加一些注釋。JavaScript代碼注釋和CSS代碼注釋方式相同，也分為單行注釋和多行注釋，示例代碼如下：
//我是單行注釋
/*
我是多行注釋1
我是多行注釋2
我是多行注釋3
*/
以上就是小編今天為大家分享的關於學習web前端要知道的JavaScript基礎語法規則的文章，希望本篇文章能夠對正在從事會計相關工作的小夥伴們有所幫助。想要了解更多會計相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利成為一名優秀的web前端工程師！
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
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/249860.html
微信掃一掃 
支付寶掃一掃 