摘要:注意啦,這個方法會改變原數組長度的,一般場合都用不到數組對象的方法方法將把它的參數插入的頭部,并將已經存在的元素順次地移到較高的下標處,以便留出空間。
平時工作中,少不了使用數組,對于后端的返回數據有時若不是符合dom樹渲染的數據前端還是會自己重新用后端返回數據重組來進行dom渲染。
廢話不多說,我們先來看看數組所包含的方法,也許不是很全,不足處請大家補充,大家相互成長才是寫這篇文章的目的不是嗎?!
ES5中Array常用API:
1、join()
2、push()
3、pop()
4、splice()
5、indexOf()
6、lastIndexOf()
7、reverse()
8、slice()
9、every()
10、some()
11、reduce()
12、reduceRight()
13、forEach()
14、map()
15、filter()
16、sort()
17、concat()
18、shift()
19、unshift()
20、toLocaleString()
ES6新增:
1、擴展運算符 ...的使用
2、Array.form()
3、Array.of()
4、copyWithin()
5、find()
6、findIndex()
7、fill()
8、entries()
9、flat()
10、flatMap()
11、keys()
12、values()
13、數組的空位
tips:es6的好多用法本菜雞還不熟悉,中間借鑒了阮一峰大神的API(沒錯就是連目錄都是抄的)中間加了一些自己使用時的心得看法,大家噴我的時候輕點(我就是抄了,你們說我我也不改)附上阮一峰大神撰寫的文檔鏈接http://es6.ruanyifeng.com/#do...
廢話不多說直接上正題
1:數組對象的join方法:
join方法是將數組對象中的,每個對象轉換成字符串,并用傳入參數字符串進行拼接,并返回一個字符串
let Arr = [1,2,3,4] console.log(Arr.join(",")) //1,2,3,4 console.log(Arr.join("-")) //1-2-3-4 let Arr2 = [1,2,[3,4],[5,6]] console.log(Arr2.join(",")) //1,2,3,4,5,6 //若數組中有對象,則會對對象先使用tostring方法,所以對象將會被轉換成[object Object],一般不會這么做也不多做說明 let Arr3 =[1,2,{name:"name1",value:1}]//1,2,[object Object] console.log(Arr3.join(","))
2:數組對象的push方法:
該方法相信大家都很熟悉,是向數組末尾追加元素,但是其實這個方法是有一個反參的,大家可能沒有注意
let arr = [1,2,3] console.log(`push返回參數:${arr.push(4)} 追加后的數組對象:${arr} `)//打印結果 push返回參數:4 追加后的數組對象:1,2,3,4 // 注意到打印出的arr.push(4)的反參4沒有,沒錯就是返回拼接后的數組的長度(length屬性)
//數組對象是可以接受所有對象的,所以push方法的入參是可以是所有合法對象(Symbol對象這塊好像是不行,或者說是我沒有轉換) let arr = [1,2] arr.push("String") arr.push(Symbol("symbol")) arr.push({name:"testName",value:"Saurfang"}) arr.push([3,4]) arr.push(undefined) arr.push(null) arr.push(NaN) arr.push(new Date()) console.dir(arr)
輸出結果:
2:數組對象的pop方法:
pop() 方法將刪除 arrayObject 的最后一個元素,把數組長度減 1,并且返回它刪除的元素的值。如果數組已經為空,則 pop() 不改變數組,并返回 undefined 值。
//pop let arr = [1,2,3] console.log(arr.pop()) //3 返回的是刪除的元素 console.log(arr) //[1, 2] 刪除最后一位元素的數組 let arr2 = [1] console.log(arr2.pop()) //1 console.log(arr2) //[] let arr3 = [] console.log(arr3.pop()) //undefined console.log(arr3) //[]
3:數組對象的splice()方法
splice() 方法向/從數組中添加/刪除項目,然后返回被刪除的項目
splice方法有多個參數不必要每個都填寫,具體參數我借用w3cschool給我們的文檔說明
參數以及用法
index:必需。整數,規定添加/刪除項目的位置,使用負數可從數組結尾處規定位置。
howmany:必需。要刪除的項目數量。如果設置為 0,則不會刪除項目。
item1, ..., itemX:可選。向數組添加的新項目。
//splice let arr =[1,2,3,4] // arr.splice(1,2) //從數組indexOf為1的位置刪除兩個元素并返回一個數組 console.log(arr.splice(1,2))//?[2, 3] console.log(arr) //[1,4] let arr2=[1,2,3,4] arr2.splice(1,2,666,777,888) //從arr2indexOf為1的位置刪除兩個元素并插入666,777,888三個元素 console.log(arr2) //[1, 666, 777, 888, 4] let arr3 = [1,2,3,4] arr3.splice(-1,1,7777)//從arr3末尾刪除1個元素并在刪除元素位置插入7777 console.log(arr3) //[1, 2, 3, 7777] let arr4 = [1,2,3,4] arr4.splice(-1,0,6666)//從arr4末尾刪除0個元素并在刪除元素位置插入7777 console.log(arr4) //[1, 2, 3, 6666, 4] let arr5 = [1,2,3,4] arr5.splice(-2,3,9999) console.log(arr5)//[1, 2, 9999]
5:數組對象的indexOf方法:
返回輸入參數在數組中的位置(第一次出現)
//indexOf let arr =["a","b","c","d"] console.log(arr.indexOf("c")) //2 let arr2 = ["a","b","b","b"] console.log(arr2.indexOf("b")) //1
6:數組對象的lastIndexOf方法:
返回輸入參數在數組中的位置(最后一次出現) 用法就不多做闡述了和indexOf()一樣
7:數組對象的reverse方法:
顛倒數組中元素的位置
//reverse let arr = [1,2,3,4] arr.reverse() console.log(arr) //[4, 3, 2, 1]
8:數組對象的slice方法:
從已有的數組中返回選定的元素 用法:arrayObject.slice(start,end)
start:必需。規定從何處開始選取。如果是負數,那么它規定從數組尾部開始算起的位置。也就是說,-1 指最后一個元素,-2 指倒數第二個元素,以此類推。
可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數,那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數,那么它規定的是從數組尾部開始算起的元素。
//slice let arr = [1,2,3,4] console.log(arr.slice(0,2))//[1, 2] //返回arr中第1個元素開始截取兩個長度的數組長度 console.log(arr)//[1, 2, 3, 4]//該方法與splice方法不同,只是返回其中一截的數組長度并拼接成數組返回,并不會改變原數組
9:數組對象的every方法
檢索數組對象中每個元素是否都符合要求
let arr = [10,11,12,13] console.log(arr.every(i=>i>10))//判斷arr中所有元素是否大于10//false console.log(arr.every(i=>i>9)) //判斷arr中所有元素是否大于9//true
10:數組對象的some方法
檢索數組對象中是否有符合規則的元素
let arr = [10,11,12,13] console.log(arr.some(i=>i<9)) //判斷arr中是否有元素小于9 //false console.log(arr.some(i=>i<11)) //判斷arr中是否有元素小于11 //true
11:數組對象的reduce方法
累加器方法,和forEach方法有點類似對數組中對象進行遍歷計算并返回最終結果
//reduce let arr = [1,2,3,4,5,6,7,8,9,10] console.log( "結果:"+ arr.reduce((x,y)=>{ console.log(`x=>${x}`) console.log(`y=>${y}`) return x+y }) ) //55
從輸出結果來看你們可以發現第一次運行回調函數的時候x為1,y為2,而第二次x=3,y=3,第三次輸出為x=6,y=4,由此可以看出第一次x等于數組的第一個元素值,第二個元素為數組的第二個元素值,而往后,x為回調函數返回的值,y為arr[次數]的值
11:數組對象的reduceRight方法
//reduceRight let arr = [1,2,3,4,5,6,7,8,9,10] console.log( "結果:"+ arr.reduceRight((x,y)=>{ console.log(`x=>${x}`) console.log(`y=>${y}`) return x+y }) ) //55
從輸出結果來看可以看出,reduceRight方法與reduce方法一樣,之后過是從末尾計算追加
12:數組對象的forEach方法
方法用于調用數組的每個元素,并將元素傳遞給回調函數
let arr = ["aaa","ccc","ffffd","eee","bbb"] arr.forEach((currentValue,index,arr)=>{ console.log(`index:${index},value:${currentValue}`) console.log(arr) }) /* 此為輸出結果 index:0,value:aaa ["aaa","ccc","ffffd","eee","bbb"]... forEach方法對數組中的元素進行遍歷,進行操作回調函數中的currentValue為遍歷的當前元素值,index為當前元素索引,arr是當前元素返回的數組 forEach 方法用于調用數組的每個元素,并將元素傳遞給回調函數。 如果對數組中的每個元素都要進行操作或者判斷則可以使用此方法,如果遍歷需要回返則不建議使用 */
過多的我就不說了,這個平時用的比較多大家基本上都知道用法
13:數組對象的map方法
這個和forEach方法很像,區別我寫在代碼備注里了
`let arr = ["aaa","ccc","ffffd","eee","bbb"]
console.log(arr.map((currentValue,index,arr)=>{ return currentValue+index })) /* 此為輸出結果 [aaa1,ccc2,ffffd3,eee4,bbb5] map方法和forEach方法很像回調方法的都是必傳當前遍歷元素的值與選填的當前元素索引選填的當前元素所在數組唯一不同的是forEach方法沒有返回值但是map方法卻會返回一個新數組這用于要對數組中加入一些新子元素非常方便(操作數組) */`
14:數組對象的filter方法
過濾器方法,過濾出數組對象中符合自定義規則的元素并組合成一個新數組返回
//filter let arr = [111,222,333,444,555,666] console.log( arr.filter((currentValue,index,arr)=>{ return currentValue>333 }) ) //輸出結果 [444,555,666] /** * filter方法的入參用法用forEach map一樣都是currentValue必填,index,arr選填 * filter將會返回一個過濾掉不符合自定義規則的數組的新數組 * */
15:數組對象的sort方法
多用于數組的排序可傳入一個回調函數來定義排序方式,一般在比較Number元素大小時可用,如果數組中元素都是Number類型而又沒有傳入回調函數則返回原數組,說白了不傳回調函數比較大小只對String類型有效,所以又想不傳入回調函數又想排序純Number數組就要先把所有數組元素轉換成String類型進行排序,廢話不多說直接上代碼
let arr = [333,11,666,2,8,123,0] let arr2 = ["zzz","eee","sss","aaa","ffffd"] console.log(arr2.sort()) //?["aaa", "ffffd", "eee", "sss", "zzz"] console.log(arr.sort()) //[0, 11, 123, 2, 333, 666, 8] //由此可見不傳回調函數對純Number類型的數組是不生效的,可見sort方法的排序方式是通過編碼來對數組元素進行排序的 //純Number類型數組從小到大排序 console.log(arr.sort((a,f)=>{ return a-f }))//[0, 2, 8, 11, 123, 333, 666] //純Number類型數組從大到小排序 console.log(arr.sort((a,f)=>{ return -(a-f) }))//[666, 333, 123, 11, 8, 2, 0]
16:數組對象的concat方法:
這方法現在不怎么用了吧還是講一講,該方法用于拼接數組,可傳入多個參數(至少傳入一個)返回一個新數組,如果傳入的是一個數組則會拼接入數組中的元素而不是數組
let arr = [1,2,3,4,5] console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]
過多的我也不講了,ES6中有更好用的方法,我會在下一篇博客中說明
17:數組對象的shift方法:
這個不太好用我就簡單說明,畢竟一家人最重要的是整整齊齊
如果數組是空的,那么 shift() 方法將不進行任何操作,返回 undefined 值。
//shift let arr = [1,2,3,4,5] console.log(arr.shift()) //1 console.log(arr) //[2,3,4,5] //注意啦,這個方法會改變原數組長度的,一般場合都用不到
18:數組對象的unshift方法:
unshift() 方法將把它的參數插入 arrayObject 的頭部,并將已經存在的元素順次地移到較高的下標處,以便留出空間。該方法的第一個參數將成為數組的新元素 0,如果還有第二個參數,它將成為新的元素 1,以此類推。(這段我直接抄的因為不知道如何表達)
廢話不多說,上代碼
//unshift let arr = [1,2,3,4,5] console.log(arr.unshift(6)) //6 console.log(arr.unshift([7,8,9]))//7 console.log(arr) //[[7,8,9],6,1,2,3,4,5] //unshift方法返回的是新數組長度,而shift方法是返回第一個被刪除的元素,這兩個方法都會改變數組長度,而傳入的參數如果是個數組將不會和concat方法一樣將傳入數組元素打散
好啦,我能想的起來的數組方法只有這么多了,這些都是es6之前的,es6中有好多新的好用的操作數組的api我將在下一篇博客中講,同時也會說一些我在平時工作中操作數組的騷操作,希望大家能指正我的意見,寫博客的目的不就是共同成長嗎?我現在只是只小菜雞望諸君多多提點同時望諸君代碼永無bug
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109634.html
摘要:的暑期實習面試到現在差不多都結束了,算下來自己也投了十幾家簡歷,經歷的差不多十場筆試,現場和電話面試也差不多有五六家公司。阿里三面三面不知道是不是交叉面,不過這次面試面試官說他是北京的之前都是杭州。 2017的暑期實習面試到現在差不多都結束了,算下來自己也投了十幾家簡歷,經歷的差不多十場筆試,現場和電話面試也差不多有五六家公司。雖然最后只拿到兩個offer,所幸是自己期待的公司,下面從...
摘要:感覺對我這種沒實習沒工作的新手,雖然一些高級的功能暫時用不上,但是一些基礎的知識還是為平時的開發提供了巨大的便利。學習告一段落,現在結合平時的開發,總結一些常用的知識。日常開發中,塊級作用域中使用的變量,盡量使用或者聲明。使用時,進行合并。 很早之前就學過TypeScript和ES6,后來做項目的時候零零散散用了些。這幾天又系統地把ES6的知識看了一遍。感覺對我這種沒實習沒工作的新手,...
摘要:結合工作中使用情況,簡單對進行一些復習總結,包括常用的語法,等,以及短時間內要上手需要重點學習的知識點不同工作環境可能有一些差別,主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下,是一個標準化組織,他們 結合工作中使用情況,簡單對es6進行一些復習總結,包括常用的語法,api等,以及短時間內要上手需要重點學習的知識點(不同工作環境可能有一些差別),...
閱讀 747·2021-07-25 21:37
閱讀 3660·2019-08-30 15:55
閱讀 2574·2019-08-30 15:54
閱讀 1722·2019-08-30 15:44
閱讀 3126·2019-08-30 15:44
閱讀 862·2019-08-30 15:43
閱讀 1031·2019-08-29 15:36
閱讀 3043·2019-08-29 10:58