當前位置:首頁 » 網頁前端 » web前端數組push使用方法
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web前端數組push使用方法

發布時間: 2022-10-03 21:02:43

Ⅰ 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前端工程師。


文章來源:原創凱哥的故事