Ⅰ JS中push的用法
push 方法改變的是數組本身,返回值是push之後數組的長度。
所以,代碼應該這樣寫:
varqueue=[];
queue.push('A','B');
console.log(queue);//output['A','B'];
Ⅱ js二維數組push的方法
這個的問題是a[0]不是數組對象, 當然沒有push方法了
使用以下方法折中
var ArrayLike = [[],{},{}]
ArrayLike[0]是個數組, 當然就能隨便用push
而[1], [2]都不是
就這樣就好
Array.prototype.push.call(ArrayLike[1],0,1)
Ⅲ 如何將一個對象用push方法扔入數組
push() 方法可向數組的末尾添加一個或多個元素,並返回新的長度。
語法:
arrayObject.push(newelement1,newelement2,....,newelementX)
參數:
newelement1 必需。要添加到數組的第一個元素。
newelement2 可選。要添加到數組的第二個元素。
newelementX 可選。可添加多個元素。
實例
在本例中,我們將創建一個數組,並通過添加一個元素來改變其長度:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
輸出:
George,John,Thomas
4
George,John,Thomas,James
Ⅳ 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
Ⅳ 在javascript的數組中有個push方法,能舉個例子說明一下么
push 方法
將新元素添加到一個數組中,並返回數組的新長度值。
arrayObj.push([item1 [item2 [. . . [itemN ]]]])
參數
arrayObj
必選項。一個 Array 對象。
item, item2,. . . itemN
可選項。該 Array 的新元素。
說明
push 方法將以新元素出現的順序添加這些元素。如果參數之一為數組,那麼該數組將作為單個元素添加到數組中。如果要合並兩個或多個數組中的元素,請使用 concat 方法
www.51windows.net
Ⅵ 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
Ⅶ js 數組push的時候如何按照指定的順序push
push() 方法可向數組的末尾添加一個或多個元素,並返回新的長度。
語法:
arrayObject.push(newelement1,newelement2,....,newelementX)
參數:
newelement1 必需。要添加到數組的第一個元素。
newelement2 可選。要添加到數組的第二個元素。
newelementX 可選。可添加多個元素。
實例在本例中,我們將創建一個數組,並通過添加一個元素來改變其長度:<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.push("James") + "<br />")document.write(arr)</script>輸出:George,John,Thomas4George,John,Thomas,James
Ⅷ Web前端開發知識點之JavaScript對象
今天小編要跟大家分享的文章是關於Web前端開發知識點之JavaScript對象。真正從事web前端工作的小夥伴們來小編一起看一看吧,希望本篇文章能夠對大家有所幫助。
1、Function對象
①對象的創建
Function對象的創建共有3種方法。
第一種方法格式如下,不符合我們寫代碼的習慣,不建議使用
varfun=newFunction(形式參數列表,方法體);
第二種方法格式如下:
function方法名稱(形式參數列表){方法體}
第三種方法格式如下:
var方法名稱=function(形式參數列表){方法體}
一般我們採用後兩種方法進行Function對象的創建。
②對象的屬性
·length屬性代表形參的個數
③對象的特點
·方法定義時,形式參數的類型不用寫,返回值類型也不寫。
·方法是一個對象,如果定義名稱相同的方法,會覆蓋。
·在JavaScript中、方法的調用只與方法的名稱有關,和參數列表無關
·在方法聲明中有一個隱藏的內置對象(數組)arguments封裝所有的實際參數
④對象的調用
方法名稱(實際參數列表);
2、Array對象
①對象的創建
Array數組對象也有三種創建方式,三種格式如下所示:
vararr=newArray(元素列表);vararr=newArray(默認長度);vararr=[元素列表];
②對象的方法
Array對象有很多方法,下面介紹兩個常用的方法:
join(參數):將數組中的元秦按照指定的分隔符拼接為字元串
push():向數組的末尾添加一個或更多元素,並返回新的長度。
③對象的屬性
·length屬性代表數組的長度
④對象的特點
在JavaScript中,數組元素的類型是可變的。
在JavaScript中,數組的長度是可變的。
3、Date對象
①對象的創建
vardata=newDate();
②對象的方法
Array對象有很多方法,下面介紹兩個常用的方法:
toLocalestring():返回當前date對象對應的時間本地字元串格式
getTime():獲取毫秒值。返回當前日期對象描述的時間到1970年1月1日零點的毫秒值差
4、Math對象
①對象的創建
Math數學對象不用創建,可以直接使用,使用方式如下:
Math.方法名();
②對象的方法
Array對象有很多方法,下面介紹四個常用的方法:
random():返回0~1之間的隨機數。含0不含1。
ceil(x):對數進行上取整。
floor(x):對數進行下取整。
round(x):對數進行四捨五入。
5、RegExp對象
在學習RegExp正則對象之前,我們首先來復習一下什麼是正則表達式?正則表達式就是定義字元串的組成規則。
單個字元用[]表示。如:
[a]表示字元a
[a-z]表示a-z中的任一字元
還有一些特殊符號代表特殊含義的單個字元。例如:
d表示單個數字字元=[0-9]
w表示單個單詞字元=[a-zA-Z0-9_]
量詞符號用?、*、+、{m,n}表示。其中
·?:表示出現0次或1次
·*:表示出現0次或多次
·+:出現1次或多次
·{m,n}:表示m<=數量<=n次
§m如果預設,即{,n}:最多n次
§n如果預設,即{m,}:最少m次
①對象的創建
RegExp正則對象的創建有兩種方法,我們一般採用第二種。
varreg=newRegExp("正則表達式");varreg=/正則表達式/;
②對象的方法
RegExp對象的常用方法只有一種:
test(參數):驗證指定的字元串是否符合正則定義的規范
6、Global對象
①對象的創建
顧名思義,Global對象就是全局對象,這個Global中封裝的方法不需要對象就可以直接調用。格式如下:
方法名();
②對象的方法
全局對象的方法有很多,下面簡單介紹幾種:
encodeURI():url編碼
decodeURI():url解碼
parseInt():將字元串轉為數字。逐一判斷每一個字元是否是數字,直到不是數字為止,將前邊數字部分轉為number
isNaN():判斷一個值是否是NaN。NaN六親不認,連自己都不認。NaN參與的==比較全部為false。
eval():將JavaScript轉化為字元串,並把它作為腳本代碼來執行。
以上就是小編今天為大家分享的關於Web前端開發知識點之JavaScript對象的文章,希望本篇文章能夠對正在從事web前端學習和工作的小夥伴們有所幫助,想要了解更多web前端知識記得關注北大青鳥web培訓官網,最後祝願小夥伴們工作順利,成為一名優秀的web前端工程師。
文章來源:原創凱哥的故事