① js常用的方法有幾種
concat()連接兩個或更多的數組，並返回結果。
join()把數組的所有元素放入一個字元串。元素通過指定的分隔符進行分隔。
pop()刪除並返回數組的最後一個元素
push()向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()顛倒數組中元素的順序。
② 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
③ js中操作數組的幾個常用方法
1. Array.shift()------刪除並返回第一個元素
作用：從數組中刪除第一個元素（即下標為0的元素），並返回該元素。
注意：1）刪除元素之後，數組的長度-1。2）如果數組是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。
④ underscorejs中比較好用的函數有哪些
jquery主要是用於處理js和html頁面交互的，封裝了很多操作dom的方法，以及ajax，相比於原生的js更加的簡潔，提高了開發效率。而underscore則可以理解為一個js的函數庫，其中主要封裝了一些常用的js方法，比如數組操作的map，rece，filter等等，不過這些函數大多在es6中已經實現了。類似underscore的還是lodash，都是輔助js開發的。
⑤ 細談JS刷新頁面常用方法有哪些
js常見的幾種頁面刷新方法如下：
1 history.go(0);
2 location.reload();
3 location=location;
4 location.assign(location);
5 document.execCommand(『Refresh『);
6 window.navigate(location);
7 location.replace(location);
8 document.URL=location.href;
以上幾種方法都是單純的屬性當前頁面，如果框架頁面中有子頁面，只想刷新子頁面的時候，可以用以下方法：
top.location.reload(); 刷新整頁
self.location.reload(); 刷新本頁
window.location.href="自定義頁面地址";
自動刷新頁面的方法:
在<head>標簽中加入<meta http-equiv="refresh" content="10">
其中content是時間間隔，每10s刷新一次
在body中添加onload="opener.location.reload()"，即<body onload="opener.location.reload()"> 為頁面啟動時刷新
在body中添加onUnload="opener.location.reload()"，即<bodyonUnload="opener.location.reload()"> 為頁面關閉時刷新
⑥ 關於JS截取字元串以及截取數組項的幾種常見方法解析
關於js數組的用法有很多，下面主要針對一些簡單的操作，比如合並，反轉，添加刪除等簡單的操作總結一下。
關於js數組的用法有很多，下面主要針對一些簡單的操作，比如合並，反轉，添加刪除等簡單的操作總結一下。
第一：讀取數組 for循環
方法如下：
var ay=[1,"sdsd","sdsd"]for (var i=0;i<ay.length;i++) {
console.log("index:"+i+" "+ay[i]) //index：0 1 index：1 sdsd index：2 sdsd
}
第二：合並數組 concat
方法如下：
var arr1=['w','e','s'];
var arr2=['e','y','u'];var arr3=arr1.concat(arr2);console.log(arr3) //['w','e','s''e','y','u'];第三：數組變為字元串格式 join
方法如下：
var arr1=['w','e','s'];
var arr4=arr1.join()console.log(arr4) //w,e,s
第四：刪除最後一個元素,針對老數組是刪除最後一個,針對新數組是返回最後一個 pop
var arr6=["d","s","t"];var arr7=arr6.pop();console.log(arr6) // ["d","s"];console.log(arr7);// t
第五：添加最後一個元素，針對老數組最後一個元素後面添加一個元素，新數組返回元素個數 push
var arr8=["i","u","t"];
var arr9=arr8.push("k");
console.log(arr8); //["i","u","t","k"];
console.log(arr9); // 4
第六：shift() 和pop()一樣，不同的是操作的是開頭刪除的元素shift（）；具體操作不在展示第七：unshiift()和push一樣，不同的是操作的是開頭添加的元素unshift（）；具體操作不再展示
第八：反轉數組 reverse
方法如下：
var arr1=['w','e','s'];
var arr10=arr1.reverse()
console.log(arr10) //['s','e','w'];
第九：數組排序 sort a-b正向 b-a 反向
正向
var arr11=[3,1,5,8,28]var arr12=arr11.sort(function (a,b) {return a-b;})console.log(arr12) //[1,3,5,8,28];
反向
var arr13=arr11.sort(function (a,b) {return b-a;})console.log(arr13) //[28,8,5,3,1]
第十：數組截取 數組截取的方法主要有slice 和splice，另外說到截取我這里隨便也把字元串截取帶上，字元串截取的方法主要有substr 和substring
（1）slice 使用方法arr.slice(m,n);其中arr為數組，m，n為兩個參數，意思是從已有數組中返回選定的元素，截取位置均為下標，其中m必須，為起始位置，可以為負值，n為結束位置（截取位置並不包含）。
示例如下：
①只有起起始值，並且為正，默認的從起始位置一直到整個數組結束，起始下標從0開始
var arr=[2,3,5,6,8,9]var arr1=arr.slice(1)console.log(arr) // [2,3,5,6,8,9] 老數組是沒有變化的，下面不在列舉，都是一樣的console.log(arr1) //[3,5,6,8,9] 只有起始參數，並且為正值，返回新數組從下標1開始截取
②只有起始值，並且為負，默認的是從起始位置一直到整個數組結束，此處沒有起始值，數組的最後一個下標是-1，比如此例，如果從-6開始取，必定是整個數組
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-1)console.log(arr1) //[9] 只有起始參數，並且為負值，從數組尾部截取元素
③有起始值和結束值，並且為正，此處需注意下標是從小到大，比如你（3，1）肯定是取不到值的，另外截取的下標個數並不包含最後一個下標
var arr=[2,3,5,6,8,9]var arr1=arr.slice(1,4)console.log(arr1) //[3,5,6] 此時是從下標1開始到下標4，但是需要注意的是並不包含下標4，准確的說是1-3的下標
④有起始值和結束值，並且為負，此處需注意下秒也是從小到大，同理，比如（-1，-6）也是肯定取不到值的，另外截取的下標個數也並不包含最後一個下標
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-6,-1)console.log(arr1) //[2,3,5,6,8]
⑤有起始值和結束值，並且正負都有
負值到0
var arr=[2,3,5,6,8,9]var arr1=arr.slice(-1,0)
//剛剛都看到了，數組下標都是從小到大的，所以說如果正負都有的情況下，理論上應該可以取值的，比如這個例子，-1為9的小標，0為2的下標，所以取值應該為 [9]，但是結果並不是這樣的console.log(arr1) //[ ] 從這里可以看出他的結果是為空的，所以從負值到0結果是取不到的
負值到正直
var arr=[2,3,5,6,8,9]
var arr1=arr.slice(-1,2)
//那從負值到正值呢，同樣也是取不到值的
console.log(arr1) //[ ]
正直到負值
var arr=[2,3,5,6,8,9]
var arr1=arr.slice(2,-1)
//那從正直到負值，這個理論上是取不到的，但是看下結果
console.log(arr1) //[ 5，6，8] 從結果可以看出是可以取的 原理是2的下標為5，-1的下標為9，不包含結束位置下標
總結：這個方法看著可能會麻煩些（也可能被我寫的麻煩啦），比如正到負等，不知道大家都是怎麼操作，我一般用這個取值都是只截取正的，所以這個實際操作還是非常簡單的。
（2）splice 像數組中添加或者刪除元素 arr.splice(m,n,index,index1,...,indexx) m是起始位置，n是刪除元素的個數，index是要添加的元素，在不添加元素的前提下，只有第一個參數是必須的，後面兩個都不是必須的，在需要添加元素的情況下，三個元素都是必須的，此方法和slice是不一樣的，這個返回的是被刪除的元素
示例如下：
只刪除不添加
注意看此例，是（1，2）刪除兩個，如果是（1，0），則表示刪除零個，也就是不刪除的意思，如果只有一個參數則表示從這里開始刪除，比如是（1）則為[2]，當然這個也是可以取負值，但是這個和slice是不一樣的，只能起始位置取負值，因為刪除的個數不可能為負值，slice可以取（2，-1），這個就截然不同啦，但是剛剛也說啦，slice是不可以起始位置取負值，結束位置取正的，但是這個是可以的，比如（-1，0）則表示從-1開始刪除零個，結果為[2,3,5,6,8,9]，（-6，2),結果為[5,6,8,9]，另外這個刪除的第二個值如果寫的過大，也只是刪除從本下標到最後一個，比如（2，78）為[2,3]
var arr=[2,3,5,6,8,9]var arr1=arr.splice(1,2)console.log(arr) // [2,6,8,9] 注意看此處才是我們要的數組，從下標1開始刪除刪除兩個console.log(arr1) //[3,5] 此處是我們刪除掉的數組
刪除加添加 具體的和上面的差不多，主要添加了添加元素的效果，這個也可以添加多個元素
var arr=[2,3,5,6,8,9]var arr1=arr.splice(1,2,"il")console.log(arr) //[2,"li",6,8,9] console.log(arr1) //[3,5]
總結：此方法用的時候，一般也都是只取正值
（3）substr 這個是字元串的用法 用法arr.substr(m,n) m必選也可以負值 n選填，注意看這個並不是結束為止而是截取的個數
示例如下：
只有一個參數 默認從此下標開始，取後面所有的
正值
var arr="sdhgfhf"var arr1=arr.substr(1)console.log(arr)// "sdhgfhf"這個是不變的，下面不再列舉console.log(arr1)// "dhgfhf" 從下標1開始取後面所有的
負值
var arr="sdhgfhf"var arr1=arr.substr(-2)console.log(arr1)// "hf" 從下標-2開始取後面所有的
兩個參數，從第一個下標開始，截取到下標2的長度
var arr="sdhgfhf"var arr1=arr.substr(1，3)console.log(arr1)// "dhg" 從下標1開始取後面所有的 同理如果為負值，比如（-6，3）則為"hjf";後面的始終為長度
總結：此方法需注意不要和數組的混淆，這個是截取長度的
（4）substring 用法arr.substring(m,n) 兩個參數，m必須，起始位置 ，n選填，截取下標的結束位置，此用法和上面slice有點類似，但是需要注意的是此方法是不支持負值的
示例如下：
只有一個參數
var arr="sdhgfhf"var arr1=arr.substring(1)console.log(arr1)//"dhgfhf"從下標1開始取後面所有的
兩個參數
var arr="sdhgfhf"var arr1=arr.substring(1,3)console.log(arr1)// "dh"從下標1開始截取到下標3，但是不包含3
總結：此方法不支持負值，只針對下標來截取的
⑦ 如何封裝常用的JS方法
1、JS封裝就是盡量把使用的方式簡單化，內部邏輯和使用解耦。通俗的說就是使用的時候只需要知道參數和返回值，其他條件盡量不要使用人員進行設置。
2、JS封裝的方法有函數方式、對象的方式、閉包的方式。
舉例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1）函數方式
function kk(a,b){
內部對a，b怎麼處理就不需要關心了
}
2）對象方式
function kk(a,b){
this.x = a;
this.y = b;
}
var k = new kk(1,2);//通過面向對象的方式
alert(k.x);
3）閉包方式
function kk(a,b){
var k = 1;
return function tt(){
k++;
}
}
var u = kk(1,2);
u();//閉包實現累加
u();//閉包實現累加
⑧ Web前端工程師應該知道的提高JavaScript技能的技巧!
今天小編要跟大家分享的文章是關於Web前端工程師應該知道的提高JavaScript
技能的技巧!熟悉web前端工作的小夥伴都知道，JavaScript是前端工程師的必備技能。JavaScript
是一種復雜的語言。如果是你是高級或者初級web開發人員，了解它的基本概念非常重要。本篇文章小編就為大家介紹幾種提高JavaScript
技能的技巧，下面讓我們一起來看一看吧!
01、變數賦值(值vs引用)
理解JavaScript如何給變數賦值可以幫助我們減少一些不必要的bug。如果你不理解這一點，可能很容易地編寫被無意中更改值的代碼。
JavaScript總是按照值來給變數賦值。這一部分非常重要：當指定的值是JavaScript的五種基本類型之一(即
Boolean，null，undefined，String和Number)時，將分配實際值。但是，當指定的值是
Array，Function或Object時，將分配對內存中對象的引用給變數。
在以下代碼段中，使用var1對var2進行賦值。由於var1是基本類型(String)，因此var2的值等於var1的String
值，並且可以認為此時與var1完全不同。因此，重新賦值var2對var1沒有影響。letvar1='Mystring'
letvar2=var1;
var2='Mynewstring'
console.log(var1);
//'Mystring'
console.log(var2);
//'Mynewstring'
接著，與對象賦值進行比較。letvar1={name:'Jim'}
letvar2=var1;
var2.name='John'
console.log(var1);
//{name:'John'}
console.log(var2);
//{name:'John'}
如果你期望它會像原始類型賦值那樣，很可能會出問題!如果你創建了一個無意中會改變對象的函數，就會出現一些非預期的行為。
02、閉包
閉包是一個重要的JavaScript模式，可以私有訪問變數。在本例中，createGreeter返回一個匿名函數，這個函數可以訪問參數
greeting(在這里是「Hello」)。在後續的調用中，sayHello將有權訪問這個greeting!functioncreateGreeter(greeting){
returnfunction(name){
console.log(greeting+','+name);
}
}
constsayHello=createGreeter('Hello');
sayHello('Joe');
//Hello,Joe
在更真實的場景中，你可以設想一個初始函數apiConnect(apiKey)，它返回一些使用APIkey的方法。在這種情況下，apiKey
只需要提供一次即可。functionapiConnect(apiKey){
functionget(route){
returnfetch(`${route}?key=${apiKey}`);
}
functionpost(route,params){
returnfetch(route,{
method:'POST',
body:JSON.stringify(params),
headers:{
'Authorization':`Bearer${apiKey}`
}
})
}
return{get,post}
}
constapi=apiConnect('my-secret-key');
//
api.get('#/get-endpoint');
api.post('#/post-endpoint',{name:'Joe'});
03、解構
JavaScript參數解構可以從對象中干中提取所需屬性的常用方法。constobj={
ame:'Joe',
food:'cake'
}
const{name,food}=obj;
console.log(name,food);
//'Joe''cake'
如果要以其他名稱提取屬性，可以使用如下方式：constobj={
ame:'Joe',
food:'cake'
}
const{name:myName,food:myFood}=obj;
console.log(myName,myFood);
//'Joe''cake'
解構經常也用於直接用於提取傳給函數的參數。如果你熟悉React，可能已經見過這個：constperson={
ame:'Eddie',
age:24
}
functionintroce({name,age}){
console.log(`I'm${name}andI'm${age}yearsold!`);
}
console.log(introce(person));
//"I'mEddieandI'm24yearsold!"
04、展開運算
ES6的一個常用之一的特性就是展開(...)運算符了,在下面的例子中，Math.max不能應用於arr
數組，因為它不將數組作為參數，但它可以將各個元素作為參數傳入。展開運算符...可用於提取數組的各個元素。constarr=[4,6,-1,3,10,4];
constmax=Math.max(...arr);
console.log(max);
//10
05、剩餘參數
剩餘參數語法和展開語法看起來的一樣的，不同的是展開語法是為了結構數組和對象;而剩餘參數和展開運算符是相反的，剩餘參數收集多個元素合成一個數組。functionmyFunc(...args){
console.log(args[0]+args[1]);
}
myFunc(1,2,3,4);
//3
restparameters和arguments的區別
1.arguments是偽數組，包含所有的實參
2.剩餘參數是標準的數組，可以使用數組的方法
06、數組方法
JavaScript數組方法通常可以提供令人難以置信的、優雅的方法來執行所需的數據轉換。作為StackOverflow
的貢獻者，我經常看到關於如何以某種方式操縱對象數組的問題，這往往也是數組方法的完美用例。
map、filter、rece
JavaScript數組方法map、filter和rece容易混淆，這些都是轉換數組或返回聚合值的有用方法。
map：返回一個數組，其中每個元素都使用指定函數進行過轉換。constarr=[1,2,3,4,5,6];
constmapped=arr.map(el=>el+20);
console.log(mapped);
//[21,22,23,24,25,26]
filter：返回一個數組，只有當指定函數返回true時，相應的元素才會被包含在這個數組中。constarr=[1,2,3,4,5,6];
constfiltered=arr.filter(el=>el===2||el===4);
console.log(filtered);
//[2,4]
rece:按函數中指定的值累加constarr=[1,2,3,4,5,6];
constreced=arr.rece((total,current)=>total+current);
console.log(reced);
//21
find,findIndex,indexOf
find：返回與指定條件匹配的第一個實例，如果查到不會繼續查找其他匹配的實例。constarr=[1,2,3,4,5,6,7,8,9,10];
constfound=arr.find(el=>el>5);
console.log(found);
//6
再次注意，雖然5之後的所有元素都滿足條件，但是只返回第一個匹配的元素。當你發現匹配項時，通常會中斷for循環，在這種情況下，這實際上非常有用。
findIndex：這與find幾乎完全相同，但不是返回第一個匹配元素，而是返回第一個匹配元素的索引。constarr=['Nick','Frank','Joe','Frank'];
constfoundIndex=arr.findIndex(el=>el==='Frank');
console.log(foundIndex);
//1
indexOf：與findIndex幾乎完全相同，但它不是將函數作為參數，而是採用一個簡單的值。
當w你需要更簡單的邏輯並且不需要使用函數來檢查是否存在匹配時，可以使用此方法。
constarr=['Nick','Frank','Joe','Frank'];
constfoundIndex=arr.indexOf('Frank');
console.log(foundIndex);
//1
push,pop,shift,unshift
push：這是一個相對簡單的方法，它將一個項添加到數組的末尾。它就地修改數組，函數本身會返回添加到數組中的項。
letarr=[1,2,3,4];
constpushed=arr.push(5);
console.log(arr);
//[1,2,3,4,5]
console.log(pushed);
//5
pop:這將從數組中刪除最後一項。同樣，它在適當的位置修改數組，函數本身返回從數組中刪除的項。
letarr=[1,2,3,4];
constpopped=arr.pop();
console.log(arr);
//[1,2,3]
console.log(popped);
//4
shift:從數組中刪除第一項。同樣，它在適當的位置修改數組。函數本身返回從數組中刪除的項。
letarr=[1,2,3,4];
constshifted=arr.shift();
console.log(arr);
//[2,3,4]
console.log(shifted);
//1
unshift:將一個或多個元素添加到數組的開頭。同樣，它在適當的位置修改數組。與許多其他方法不同，函數本身返回數組的新長度。
letarr=[1,2,3,4];
constunshifted=arr.unshift(5,6,7);
console.log(arr);
//[5,6,7,1,2,3,4]
console.log(unshifted);
//7
splice,slice
splice：通過刪除或替換現有元素和/或添加新元素來更改數組的內容，此方法會修改了數組本身。
下面的代碼示例的意思是：在數組的位置1上刪除0個元素，並插入b。
letarr=['a','c','d','e'];
arr.splice(1,0,'b')
slice：從指定的起始位置和指定的結束位置之前返回數組的淺拷貝。如果未指定結束位置，則返回數組的其餘部分。
重要的是，此方法不會修改數組，而是返回所需的子集。
letarr=['a','b','c','d','e'];
constsliced=arr.slice(2,4);
console.log(sliced);
//['c','d']
console.log(arr);
//['a','b','c','d','e']
sort
sort：根據提供的函數對數組進行排序。這個方法就地修改數組。如果函數返回負數或0，則順序保持不變。如果返回正數，則交換元素順序。
letarr=[1,7,3,-1,5,7,2];
constsorter=(firstEl,secondEl)=>firstEl-secondEl;
arr.sort(sorter);
console.log(arr);
//[-1,1,2,3,5,7,7]
07、Generators(生成器)
生成器是一種特殊的行為，實際上是一種設計模式，我們通過調用next()方法來遍歷一組有序的值。想像一下，例如使用遍歷器對數組[1,2,3,4,5]進行遍歷。第一次調用next()方法返回1，第二次調用next()方法返回2，以此類推。當數組中的所有值都返回後，調用next()方法將返回null或false或其它可能的值用來表示數組中的所有元素都已遍歷完畢。
function*greeter(){
yield'Hi'
yield'Howareyou?'
yield'Bye'
}
constgreet=greeter();
console.log(greet.next().value);
//'Hi'
console.log(greet.next().value);
//'Howareyou?'
console.log(greet.next().value);
//'Bye'
console.log(greet.next().value);
//undefined
使用生成器生成無限個值：
function*idCreator(){
leti=0;
while(true)
yieldi++;
}
constids=idCreator();
console.log(ids.next().value);
//0
console.log(ids.next().value);
//1
console.log(ids.next().value);
//2
//etc...
08、恆等運算符(===)與相等運算符(==)
大家一定要知道JavaScript中的恆等運算符(===)和相等運算符(==)之間的區別!
==運算符在比較值之前會進行類型轉換，而===運算符在比較之前不會進行任何類型轉換。
console.log(0==Ɔ');
//true
console.log(0===Ɔ');
//false
09、對象比較
我看到JavaScript新手所犯的錯誤是直接比較對象。變數指向內存中對象的引用，而不是對象本身!實際比較它們的一種方法是將對象轉換為JSON
字元串。這有一個缺點：對象屬性順序不能保證!比較對象的一種更安全的方法是引入專門進行深度對象比較的庫(例如，lodash的isEqual)。
下面的對象看起來是相等的，但實際上它們指向不同的引用。
constjoe1={name:'Joe'};
constjoe2={name:'Joe'};
console.log(joe1===joe2);
//false
相反，下面的計算結果為true，因為一個對象被設置為與另一個對象相等，因此指向相同的引用(內存中只有一個對象)。
constjoe1={name:'Joe'};
constjoe2=joe1;
console.log(joe1===joe2);
//true
相反，以下計算結果為true，因為一個對象設置為等於另一個對象，因此指向相同的引用(內存中只有一個對象)。
constjoe1={name:'Joe'};
constjoe2=joe1;
console.log(joe1===joe2);
//true
10、回調函數
很多人都被JavaScript回調函數嚇倒了!他們很簡單，舉個例子。console.log函數作為回調傳遞給myFunc。
它在setTimeout完成時執行。
functionmyFunc(text,callback){
setTimeout(function(){
callback(text);
},2000);
}
myFunc('Helloworld!',console.log);
//'Helloworld!'
11、Promises
一旦你理解了JavaScript回調，很快就會發現自己陷入了「回調地獄」中。這個時候可以使用promise,將非同步邏輯包裝在promise
中，成功時resolve或在失敗時reject使用「then」來處理成功的情況，使用catch來處理異常。
constmyPromise=newPromise(function(res,rej){
setTimeout(function(){
if(Math.random()<0.9){
returnres('Hooray!');
}
returnrej('Ohno!');
},1000);
});
myPromise
.then(function(data){
console.log('Success:'+data);
})
.catch(function(err){
console.log('Error:'+err);
});
//IfMath.random()returnslessthan0.9thefollowingislogged:
//"Success:Hooray!"
//IfMath.random()returns0.:
//"Error:Onno!"
12、Async/Await
在掌握了promise的用法後，你可能也會喜歡asyncawait，它只是一種基於promise
的「語法糖」。在下面的示例中，我們創建了一個async函數，並awaitgreeterpromise。
constgreeter=newPromise((res,rej)=>{
setTimeout(()=>res('Helloworld!'),2000);
})
asyncfuncti