前端開關邏輯js

㈠ Web前端工程師要掌握的JavaScript代碼片段(一)

今天小編要跟大家分享的文章是關於Web前端工程師要掌握的JavaScript代碼片段(一)。正在從事web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。

1、Anagramsofstring(帶有重復項)


使用遞歸。對於給定字元串中的每個字母，為字母創建字謎。使用map()將字母與每部分字謎組合，然後使用rece()將所有字謎組合到一個數組中，最基本情況是字元串長度等於2或1。


constanagrams=str=>{


if(str.length<=2)returnstr.length===2?[str,str[1]+str[0]]:
[str];


returnstr.split('').rece((acc,letter,i)=>


acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=>
letter+val)),[]);


};


//anagrams('abc')->['abc','acb','bac','bca','cab','cba']


2、數組平均數


使用rece()將每個值添加到累加器，初始值為0，總和除以數組長度。


constaverage=arr=>arr.rece((acc,val)=>acc+val,0)/
arr.length;


//average([1,2,3])->2


3、大寫每個單詞的首字母


使用replace()匹配每個單詞的第一個字元，並使用toUpperCase()來將其大寫。


constcapitalizeEveryWord=str=>str.replace(/[a-z]/g,char=>
char.toUpperCase());


//capitalizeEveryWord('helloworld!')->'HelloWorld!'


4、首字母大寫


使用slice(0,1)和toUpperCase()大寫第一個字母，slice(1)獲取字元串的其餘部分。省略lowerRest參數以保持字元串的其餘部分不變，或將其設置為true以轉換為小寫。(注意：這和上一個示例不是同一件事情)


constcapitalize=(str,lowerRest=false)=>


str.slice(0,1).toUpperCase()+(lowerRest?str.slice(1).toLowerCase():
str.slice(1));


//capitalize('myName',true)->'Myname'


5、檢查迴文


將字元串轉換為toLowerCase()，並使用replace()從中刪除非字母的字元。然後，將其轉換為tolowerCase()，將('')拆分為單獨字元，reverse()，join('')，與原始的非反轉字元串進行比較，然後將其轉換為tolowerCase()。


constpalindrome=str=>{


consts=str.toLowerCase().replace(/[W_]/g,'');


returns===s.split('').reverse().join('');


}


//palindrome('tacocat')->true


6、計數數組中值的出現次數


每次遇到數組中的特定值時，使用rece()來遞增計數器。


constcountOccurrences=(arr,value)=>arr.rece((a,v)=>v===
value?a+1:a+0,0);


//countOccurrences([1,1,2,1,2,3],1)->3


7、當前URL


使用window.location.href來獲取當前URL。


constcurrentUrl=_=>window.location.href;


//currentUrl()->'https://google.com'


8、Curry


使用遞歸。如果提供的參數(args)數量足夠，則調用傳遞函數f，否則返回一個curried函數f。


constcurry=(fn,arity=fn.length,...args)=>


arity<=args.length


?fn(...args)


:curry.bind(null,fn,arity,...args);


//curry(Math.pow)(2)(10)->1024


//curry(Math.min,3)(10)(50)(2)->2


9、Deepflattenarray


使用遞歸，使用rece()來獲取所有不是數組的元素，flatten每個元素都是數組。


constdeepFlatten=arr=>


arr.rece((a,v)=>a.concat(Array.isArray(v)?deepFlatten(v):v),
[]);


//deepFlatten([1,[2],[[3],4],5])->[1,2,3,4,5]


10、數組之間的區別


從b創建一個Set，然後在a上使用Array.filter()，只保留b中不包含的值。


constdifference=(a,b)=>{consts=newSet(b);returna.filter(x
=>!s.has(x));};


//difference([1,2,3],[1,2])->[3]


11、兩點之間的距離


使用Math.hypot()計算兩點之間的歐幾里德距離。


constdistance=(x0,y0,x1,y1)=>Math.hypot(x1-x0,y1-y0);


//distance(1,1,2,3)->2.23606797749979


12、可以按數字整除


使用模運算符(%)來檢查余數是否等於0。


constisDivisible=(dividend,divisor)=>dividend%divisor===0;


//isDivisible(6,3)->true


13、轉義正則表達式


使用replace()來轉義特殊字元。


constescapeRegExp=str=>str.replace(/[.*+?^${}()|[]\]/g,
'\$&');


//escapeRegExp('(test)')->\(test\)


14、偶數或奇數


使用Math.abs()將邏輯擴展為負數，使用模(%)運算符進行檢查。如果數字是偶數，則返回true;如果數字是奇數，則返回false。


constisEven=num=>num%2===0;


//isEven(3)->false


15、階乘


使用遞歸。如果n小於或等於1，則返回1。否則返回n和n-1的階乘的乘積。


constfactorial=n=>n<=1?1:n*factorial(n-1);


//factorial(6)->720


16、斐波那契數組生成器


創建一個特定長度的空數組，初始化前兩個值(0和1)。使用Array.rece()向數組中添加值，後面的一個數等於前面兩個數相加之和(前兩個除外)。


constfibonacci=n=>


Array(n).fill(0).rece((acc,val,i)=>acc.concat(i>1?acc[i-
1]+acc[i-2]:i),[]);


//fibonacci(5)->[0,1,1,2,3]


17、過濾數組中的非唯一值


將Array.filter()用於僅包含唯一值的數組。


constfilterNonUnique=arr=>arr.filter(i=>arr.indexOf(i)===
arr.lastIndexOf(i));


//filterNonUnique([1,2,2,3,4,4,5])->[1,3,5]


18、Flatten數組


使用rece()來獲取數組中的所有元素，並使用concat()來使它們flatten。


constflatten=arr=>arr.rece((a,v)=>a.concat(v),[]);


//flatten([1,[2],3,4])->[1,2,3,4]


19、從數組中獲取最大值


使用Math.max()與spread運算符(...)結合得到數組中的最大值。


constarrayMax=arr=>Math.max(...arr);


//arrayMax([10,1,5])->10


20、從數組中獲取最小值


使用Math.min()與spread運算符(...)結合得到數組中的最小值。


constarrayMin=arr=>Math.min(...arr);


//arrayMin([10,1,5])->1


21、獲取滾動位置


如果已定義，請使用pageXOffset和pageYOffset，否則使用scrollLeft和scrollTop，可以省略el來使用window的默認值。


constgetScrollPos=(el=window)=>


({x:(el.pageXOffset!==undefined)?el.pageXOffset:el.scrollLeft,


y:(el.pageYOffset!==undefined)?el.pageYOffset:el.scrollTop});


//getScrollPos()->{x:0,y:200}


22、最大公約數(GCD)


使用遞歸。基本情況是當y等於0時。在這種情況下，返回x。否則，返回y的GCD和x/y的其餘部分。


constgcd=(x,y)=>!y?x:gcd(y,x%y);


//gcd(8,36)->4


23、Headoflist


返回ARR[0]


consthead=arr=>arr[0];


//head([1,2,3])->1


24、list初始化


返回arr.slice(0，-1)


constinitial=arr=>arr.slice(0,-1);


//initial([1,2,3])->[1,2]


以上就是小編今天為大家分享的關於Web前端工程師要掌握的JavaScript代碼片段(一)的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識和想要了解後面的代碼片段的小夥伴，記得關注北大青鳥web培訓官網。

㈡ JSP和JS的區別

JS全稱是JavaScript，是運行的客戶端的一種頁面前端的腳本語言。用於做前端頁面特效 數據校驗 等等諸多功能。

JSP全稱Java Server Pages，是一種運行在伺服器端 用來編寫動態網站後台的語言，使用JPS可以製作JSP動態網站。它的特點是安全新能可靠，一般用於政府及銀行級別的網站開發，學習難度比較高

具體的詳細對比：
（一 簡述）
JS，是JavaScript的縮寫形式，而JavaScript是一種基於對象和事件驅動並且具有相對安全性的客戶端腳本語言。
它在Web開發中JS占據著舉足輕重的地位，所有交互、邏輯層的代碼都應該由它來實現。
（二 具體角色）
如果把網站建設比喻成蓋樓房，那麼HTML就是這個樓房的鋼筋水泥，CSS就是樓房的布局裝飾，而JS就是樓房中大大小小無處不在的開關了。
從這樣的角度而言，JS就是Web開發中負責邏輯層的語言，而現如今相當火熱的「用戶體驗」的概念，最重要的代碼部分還是需要JS來編寫。
（三 使用方式）
JS的引入方式大體可以分為兩種：
第一種是直接寫入當前頁面中，需要寫在標簽之間即可。
第二種是寫入一個js的文件中，然後通過

（一JSP簡介）

1.）JSP全稱Java Server Pages，是一種動態網頁開發技術。它使用JSP標簽在HTML網頁中插入Java代碼。標簽通常以<%開頭以%>結束。

2.）JSP是一種Java servlet，主要用於實現Java web應用程序的用戶界面部分。網頁開發者們通過結合HTML代碼、XHTML代碼、XML元素以及嵌入JSP操作和命令來編寫JSP。

3.）JSP通過網頁表單獲取用戶輸入數據、訪問資料庫及其他數據源，然後動態地創建網頁。

4.）JSP標簽有多種功能，比如訪問資料庫、記錄用戶選擇信息、訪問JavaBeans組件等，還可以在不同的網頁中傳遞控制信息和共享信息。

（二jsp與其他後台語言的優勢）

1.）性能更加優越，因為JSP可以直接在HTML網頁中動態嵌入元素而不需要單獨引用CGI文件。

2.）伺服器調用的是已經編譯好的JSP文件，而不像CGI/Perl那樣必須先載入解釋器和目標腳本。

3.）JSP基於Java Servlets API，因此，JSP擁有各種強大的企業級Java API，包括JDBC，JNDI，EJB，JAXP等等。

4.）JSP頁面可以與處理業務邏輯的servlets一起使用，這種模式被Java servlet 模板引擎所支持。

最後，JSP是Java EE不可或缺的一部分，是一個完整的企業級應用平台。這意味著JSP可以用最簡單的方式來實現最復雜的應用。

以下列出了使用JSP帶來的其他好處：

1.）與ASP相比：JSP有兩大優勢。首先，動態部分用Java編寫，而不是VB或其他MS專用語言，所以更加強大與易用。第二點就是JSP易於移植到非MS平台上。

2.）與純 Servlets相比：JSP可以很方便的編寫或者修改HTML網頁而不用去面對大量的println語句。

3.）與SSI相比：SSI無法使用表單數據、無法進行資料庫鏈接。

4.）與JavaScript相比：雖然JavaScript可以在客戶端動態生成HTML，但是很難與伺服器交互，因此不能提供復雜的服務，比如訪問資料庫和圖像處理等等。

5.）與靜態HTML相比：靜態HTML不包含動態信息。

㈢ Web前端工程師應該知道的JavaScript使用小技巧

今天小編要跟大家分享的文章是關於Web前端工程師應該知道的JavaScript使用小技巧。任何一門技術在實際中都會有一些屬於自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯網上，時不時的有很多同行朋友會總結(或收集)一些這方面的小技巧。

今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關於JavaScript的小技巧，希望能夠對大家的學習和工作有所幫助。


一、數組


先來看使用數組中常用的一些小技巧。


01、數組去重


ES6提供了幾種簡潔的數組去重的方法，但該方法並不適合處理非基本類型的數組。對於基本類型的數組去重，可以使用...new
Set()來過濾掉數組中重復的值，創建一個只有唯一值的新數組。constarray=[1,1,2,3,5,5,1]

constuniqueArray=[...newSet(array)];

console.log(uniqueArray);

>Result:(4)[1,2,3,5]

這是ES6中的新特性，在ES6之前，要實現同樣的效果，我們需要使用更多的代碼。該技巧適用於包含基本類型的數組：undefined、null、boolean、string和number。如果數組中包含了一個object,function或其他數組，那就需要使用另一種方法。


除了上面的方法之外，還可以使用Array.from(newSet())來實現：constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

>Result:(4)[1,2,3,5]

另外，還可以使用Array的.filter及indexOf()來實現：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=>array.indexOf(arr)===index)

>Result:(4)[1,2,3,5]

注意，indexOf()方法將返回數組中第一個出現的數組項。這就是為什麼我們可以在每次迭代中將indexOf()方法返回的索引與當索索引進行比較，以確定當前項是否重復。


02、確保數組的長度


在處理網格結構時，如果原始數據每行的長度不相等，就需要重新創建該數據。為了確保每行的數據長度相等，可以使用Array.fill來處理：letarray=Array(5).fill('');

console.log(array);

>Result:(5)["","","","",""]

03、數組映射


不使用Array.map來映射數組值的方法。constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constname=Array.from(array,({name})=>name)

>Result:(2)["大漠","Airen"]

04、數組截斷


如果你想從數組末尾刪除值(刪除數組中的最後一項)，有比使用splice()更快的替代方法。


例如，你知道原始數組的大小，可以重新定義數組的length屬性的值，就可以實現從數組末尾刪除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

>Result:10

array.length=4

console.log(array)

>Result:(4)[0,1,2,3]

這是一個特別簡潔的解決方案。但是，slice()方法運行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

>Result:[0,1,2,3]

05、過濾掉數組中的falsy值

如果你想過濾數組中的falsy值，比如0、undefined、null、false，那麼可以通過map和filter方法實現：

constarray=[0,1,Ɔ',Ƈ','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN',Ƈ'+0]

array.map(item=>{

returnitem

}).filter(Boolean)

>Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]

06、獲取數組的最後一項


數組的slice()取值為正值時，從數組的開始處截取數組的項，如果取值為負整數時，可以從數組末屬開始獲取數組項。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

>Result:[1]

constlastArrayVal=array.slice(-1)

>Result:[7]

console.log(array.slice(1))

>Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

>Result:[]

正如上面示例所示，使用array.slice(-1)獲取數組的最後一項，除此之外還可以使用下面的方式來獲取數組的最後一項：

console.log(array.slice(array.length-1))

>Result:[7]

07、過濾並排序字元串列表


你可能有一個很多名字組成的列表，需要過濾掉重復的名字並按字母表將其排序。


在我們的例子里准備用不同版本語言的JavaScript
保留字的列表，但是你能發現，有很多重復的關鍵字而且它們並沒有按字母表順序排列。所以這是一個完美的字元串列表(數組)來測試我們的JavaScript小知識。

varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];

因為我們不想改變我們的原始列表，所以我們准備用高階函數叫做filter，它將基於我們傳遞的回調方法返回一個新的過濾後的數組。回調方法將比較當前關鍵字在原始列表裡的索引和新列表中的索引，僅當索引匹配時將當前關鍵字push到新數組。


最後我們准備使用sort方法排序過濾後的列表，sort只接受一個比較方法作為參數，並返回按字母表排序後的列表。


在ES6下使用箭頭函數看起來更簡單:

=keywords

.filter((keyword,index)=>keywords.lastIndexOf(keyword)===index)

.sort((a,b)=>a
這是最後過濾和排序後的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

>Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']

08、清空數組


如果你定義了一個數組，然後你想清空它。通常，你會這樣做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，這有一個效率更高的方法來清空數組。你可以這樣寫:

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多維數組


使用...運算符，將多維數組拍平：


10、從數組中獲取最大值和最小值


可以使用Math.max和Math.min取出數組中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

>Result:90

console.log(minInNumbers)

>Result:-99

另外還可以使用ES6的...運算符來完成：

constnumbers=[1,2,3,4];

Math.max(...numbers)

>Result:4

Math.min(...numbers)

>>Result:1

二、對象


在操作對象時也有一些小技巧。


01、使用...運算符合並對象或數組中的對象


同樣使用ES的...運算符可以替代人工操作，合並對象或者合並數組中的對象。

//合並對象

constobj1={

ame:'大漠',

url:'#'

}

constobj2={

ame:'airen',

age:30

}

constmergingObj={...obj1,...obj2}

>Result:{name:"airen",url:"#",age:30}

//合並數組中的對象

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constresult=array.rece((accumulator,item)=>{

return{

...accumulator,

[item.name]:item.email

}

},{})

>Result:{大漠:"w3cplus@#",Airen:"airen@#"}

02、有條件的添加對象屬性


不再需要根據一個條件創建兩個不同的對象，以使它具有特定的屬性。為此，使用...操作符是最簡單的。

constgetUser=(emailIncluded)=>{

return{

ame:'大漠',

blog:'w3cplus',

...emailIncluded&&{email:'w3cplus@#'}

}

}

constuser=getUser(true)

console.log(user)

>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

>Result:{name:"大漠",blog:"w3cplus"}

03、解構原始數據


你可以在使用數據的時候，把所有數據都放在一個對象中。同時想在這個數據對象中獲取自己想要的數據。


在這里可以使用ES6的Destructuring特性來實現。比如你想把下面這個obj中的數據分成兩個部分：

constobj={

ame:'大漠',

blog:'w3cplus',

email:'w3cplus@#',

joined:񟭓-06-19',

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,...userDetails}=obj)

>{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}

console.log(user)

>Result:{name:"大漠",email:"w3cplus@#"}

console.log(userDetails)

>Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}

04、動態更改對象的key


在過去，我們首先必須聲明一個對象，然後在需要動態屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實現的。不過在ES6中，我們可以實現：

constdynamicKey='email'

letobj={

ame:'大漠',

blog:'w3cplus',

[dynamicKey]:'w3cplus@#'

}

console.log(obj)

>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

05、判斷對象的數據類型


使用Object.prototype.toString配合閉包來實現對象數據類型的判斷：

constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType('Array')([1,2,3])

console.log(isArray)

>Result:true

上面的代碼相當於：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType('Array')([1,2,3])

>Result:true

或者：

constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType('String')

constres=isString((Ƈ'))

console.log(res)

>Result:true

06、檢查某對象是否有某屬性


當你需要檢查某屬性是否存在於一個對象，你可能會這樣做：

varobj={

ame:'大漠'

}

if(obj.name){

console.l

㈣ web前端里的js技術

JS，全稱為JavaScript，是一種客戶端腳本語言，是前端開發學習內容當中的一個重要部分。

JavaScript可運行在所有主要平台的所有主流瀏覽器上，也可運行在每一個主流操作系統的伺服器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用JavaScript寫前端的開發人員。我有web前端開發課程的全套視頻資料，可以發給你自學。

要學的內容主要有：

①計算機基礎以及PS基礎

②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）

③移動開發

④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）

⑤小程序開發

⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）

⑦就業拓展（網站SEO與前端安全技術）

互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。

想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。

祝你學有所成，望採納。

㈤ 【Web前端基礎】js運算符有哪些

JavaScript中的運算符有很多，主要分為算術運算符，等同全同運算符，比較運算符，字元串運算符，邏輯運算符，賦值運算符等。這些運算符都有一些屬於自己的運算規則，下面就為大家介紹一下JavaScript中的運算符。
一、JavaScript運算符的種類
1、算術運算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、 ++ 、 --
2、等同全同運算符：== 、 ===、 !== 、 !===
3、比較運算符：< 、 > 、 <= 、 >=
4、字元串運算符：< 、 > 、 <= 、 >= 、 = 、 +
5、邏輯運算符：&& 、 ||、 !、
6、賦值運算符：=、 +=、 *=、 -=、 /=

㈥ 我做前端開發，但是javascript總是搞不懂，也不會寫出什麼效果，邏輯和大腦空空，覺定轉行！

我覺得吧你首先要確定自己是否真的努力了，是否有好好學習javascript、jquery、css、html了，如果你努力了，和高手探討一下自己的努力方向是否走偏，如果就是覺得不適合，就是不愛做，那好吧，放手吧。
如果沒有努力，沒有好好學學javascript，那麼好好學一下，可以先學一下jquery，很簡單，可以立即讓你對javascript感到驚艷，美輪美奐。
我也是做前端的，我很喜歡前端的工作，我們這邊也有後端的同事轉過來了，他已經做到了項目經理級別，後端做長了就會感覺，前面一律，模式已經固化了，做前端每天你可以看到嶄新的東西，每天都有有趣的東西出現。
推薦你基本書吧，javascript權威指南(第六版)，javascript高級程序設計，javascript語言精粹，javascript設計模式，javascript經典實例。
可以先看jquery方面的書，推薦兩本jquery語言基礎，鋒利的jquery。
希望對你有用

㈦ Web前端初學者要知道的JavaScript技巧

今天小編要跟大家分享的文章是關於Web前端初學者要知道的JavaScript技巧。本篇文章小編為大家准備了一些JavaScript的編程技巧。熟悉Web前端工作的小夥伴都知道JavaScript的重要性。這篇文章是為初學者准備的，但我希望即使是中級JavaScript開發人員也能在這個列表中找到一些新的東西。下面我們一起來看一看吧！

1、...過濾唯一值


Set對象類型是在ES6中引入的，配合展開操作...一起，我們可以使用它來創建一個新數組，該數組只有唯一的值。constarray=[1,1,2,3,5,5,1]

constuniqueArray=[...newSet(array)];

console.log(uniqueArray);//Result:[1,2,3,5]

在ES6之前，隔離惟一值將涉及比這多得多的代碼。


此技巧適用於包含基本類型的數組：undefined，null，boolean，string和number。
(如果你有一個包含對象，函數或其他數組的數組，你需要一個不同的方法!)


2、與或運算


三元運算符是編寫簡單(有時不那麼簡單)條件語句的快速方法，如下所示：x>100?'Above100':'Below100'

x>100?(x>200?'Above200':'Between100-200'):'Below100'

但有時使用三元運算符處理也會很復雜。相反，我們可以使用'與'&&和'或'||邏輯運算符以更簡潔的方式書寫表達式。
這通常被稱為「短路」或「短路運算」。


它是怎麼工作的


假設我們只想返回兩個或多個選項中的一個。


使用&&將返回第一個條件為假的值。如果每個操作數的計算值都為true，則返回最後一個計算過的表達式。letone=1,two=2,three=3;

console.log(one&&two&&three);//Result:3

console.log(0&&null);//Result:0

使用||將返回第一個條件為真的值。如果每個操作數的計算結果都為false，則返回最後一個計算過的表達式。letone=1,two=2,three=3;

console.log(one||two||three);//Result:1

console.log(0||null);//Result:null

例一


假設我們想返回一個變數的長度，但是我們不知道變數的類型。


我們可以使用if/else語句來檢查foo是可接受的類型，但是這可能會變得非常冗長。或運行可以幫助我們簡化操作：


return(foo||[]).length


如果變數foo是true，它將被返回。否則，將返回空數組的長度:0。


例二


你是否遇到過訪問嵌套對象屬性的問題?你可能不知道對象或其中一個子屬性是否存在，這可能會導致令人沮喪的錯誤。


假設我們想在this.state中訪問一個名為data的屬性，但是在我們的程序成功返回一個獲取請求之前，data是未定義的。


根據我們使用它的位置，調用this.state.data可能會阻止我們的應用程序運行。為了解決這個問題，我們可以將其做進一步的判斷：if(this.state.data){

returnthis.state.data;

}else{return'FetchingData'

}

但這似乎很重復。'或'運算符提供了更簡潔的解決方案：


return(this.state.data||'FetchingData');


一個新特性:OptionalChaining


過去在Object屬性鏈的調用中，很容易因為某個屬性不存在而導致之後出現Cannotreadpropertyxxx
ofundefined的錯誤。


那optionalchaining就是添加了?.這么個操作符，它會先判斷前面的值，如果是null或undefined，就結束調用、返回
undefined。


例如，我們可以將上面的示例重構為this.state.data?.()。或者，如果我們主要關注state是否已定義，我們可以返回
this.state?.data。


該提案目前處於第1階段，作為一項實驗性功能。你可以在這里閱讀它，你現在可以通過Babel使用你的JavaScript，將
@babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。


3、轉換為布爾值


除了常規的布爾值true和false之外，JavaScript還將所有其他值視為『truthy』或『falsy』。


除非另有定義，否則JavaScript中的所有值都是'truthy'，除了0，「」，null，undefined，NaN，當然還有
false，這些都是'falsy'


我們可以通過使用負算運算符輕松地在true和false之間切換。它也會將類型轉換為「boolean」。constisTrue=!0;

constisFalse=!1;

constalsoFalse=!!0;

console.log(isTrue);//Result:true

console.log(typeoftrue);//Result:"boolean"

4、轉換為字元串


要快速地將數字轉換為字元串，我們可以使用連接運算符+後跟一組空引號""。

constval=1+"";

console.log(val);//Result:"1"

console.log(typeofval);//Result:"string"

5、轉換為數字


使用加法運算符+可以快速實現相反的效果。

letint="15";int=+int;

console.log(int);//Result:15

console.log(typeofint);Result:"number"

這也可以用於將布爾值轉換為數字，如下所示

console.log(+true);//Return:1

console.log(+false);//Return:0

在某些上下文中，+將被解釋為連接操作符，而不是加法操作符。當這種情況發生時(你希望返回一個整數，而不是浮點數)，您可以使用兩個波浪號:
~~。


連續使用兩個波浪有效地否定了操作，因為—_(_—_n_—_1)_—_1=n+1_—_1=n。換句話說，~—16等於15。

constint=~~"15"console.log(int);//Result:15

console.log(typeofint);

Result:"number"

雖然我想不出很多用例，但是按位NOT運算符也可以用在布爾值上：~true=-2和~false=-1。


6、性能更好的運算


從ES7開始，可以使用指數運算符**作為冪的簡寫，這比編寫Math.pow(2,3)更快。
這是很簡單的東西，但它之所以出現在列表中，是因為沒有多少教程更新過這個操作符。


console.log(2**3);//Result:8


這不應該與通常用於表示指數的^符號相混淆，但在JavaScript中它是按位異或運算符。


在ES7之前，只有以2為基數的冪才存在簡寫，使用按位左移操作符<<


Math.pow(2,n);


2<<(n-1);2**n;


例如，2<<3=16等於2**4=16。


7、快速浮點數轉整數


如果希望將浮點數轉換為整數，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用
|(位或運算符)將浮點數截斷為整數。

console.log(23.9|0);//Result:23

console.log(-23.9|0);//Result:-23

|的行為取決於處理的是正數還是負數，所以最好只在確定的情況下使用這個快捷方式。


如果n為正，則n|0有效地向下舍入。如果n為負數，則有效地向上舍入。
更准確地說，此操作將刪除小數點後面的任何內容，將浮點數截斷為整數。


你可以使用
~~來獲得相同的舍入效果，如上所述，實際上任何位操作符都會強制浮點數為整數。這些特殊操作之所以有效，是因為一旦強制為整數，值就保持不變。


刪除最後一個數字


按位或運算符還可以用於從整數的末尾刪除任意數量的數字。這意味著我們不需要使用這樣的代碼來在類型之間進行轉換。

letstr="1553";

Number(str.substring(0,str.length-1));

相反，按位或運算符可以這樣寫：

console.log(1553/10|0)//Result:155

console.log(1553/100|0)//Result:15

console.log(1553/1000|0)//Result:1

8、類中的自動綁定


我們可以在類方法中使用ES6箭頭表示法，並且通過這樣做可以隱含綁定。這通常會在我們的類構造函數中保存幾行代碼，我們可以愉快地告別重復的表達式，例如
this.myMethod=this.myMethod.bind(this)

importReact,{Component}fromReact;

{

constructor(props){

super(props);

this.state={};

}

myMethod=()=>{

//Thismethodisboundimplicitly!}

render(){

return(

<>