Javascript中Array方法的總結(jié)

tracymac7 發(fā)布于2019-08-22 10:34 / 3262人閱讀

摘要：新建數(shù)組新建數(shù)組的方法有三種方法一方法二方法三新增是中新增的將一組值轉(zhuǎn)換為數(shù)組的方法，該方法的出現(xiàn)時(shí)為了彌補(bǔ)構(gòu)造函數(shù)因?yàn)閰?shù)不同導(dǎo)致的不同行為。

原文鏈接：http://mrzhang123.github.io/2016/08/03/js-Array

在ECMAScript中最常用的類型之一就是Array類型，Array類型的方法也有很多，所以在這篇文章中，梳理一下Array類型的方法。

新建數(shù)組

新建數(shù)組的方法有三種：

/*方法一*/
var a = new Array(1,2,3);
/*方法二*/
var b = [1,2,3];
/*方法三（ES6新增）*/
var c = Array.of(1,2,3);

Array.of()是ES6中新增的將一組值轉(zhuǎn)換為數(shù)組的方法，該方法的出現(xiàn)時(shí)為了彌補(bǔ)構(gòu)造函數(shù)Array()因?yàn)閰?shù)不同導(dǎo)致的不同行為。

Array()         //[]
Array(3)        //[ , , ]
Array(1,2,3)    //[1,2,3]

從上面可以看出，只有在參數(shù)個(gè)數(shù)不少于2時(shí)候，才會返回新的數(shù)組。

數(shù)組的檢測

對于一個(gè)網(wǎng)頁或者一個(gè)全局作用域而言，使用instanceof操作符檢測，通過返回的boolean值可以得出是否為數(shù)組，但是這樣檢測的問題在如果網(wǎng)頁中包含兩個(gè)以上不同的全局作用域，就會從在兩個(gè)以上不同版本的Array構(gòu)造函數(shù)，如果從一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組，那么傳入的數(shù)組與第二個(gè)框架中原聲創(chuàng)建的數(shù)組分別有不同的構(gòu)造函數(shù)。
在ES5中引入的Array.isArray()解決了這個(gè)問題，但如果在不支持ES5的瀏覽器中檢測數(shù)組，則需要些兼容性方法，所以檢測數(shù)組的方法如下：

function checkArray(arr) {
    if(typeof Array.isArray){
        return Array.isArray(arr);
    }else{
        return Object.prototype.toString.call(arr)==="[object Array]";
    }
}

數(shù)組中的方法： 更改原數(shù)組 添加項(xiàng)

push()
接收任意數(shù)量的參數(shù)，逐個(gè)將其添加至數(shù)組末尾，返回修改后的數(shù)組的長度

unshift()
在數(shù)組的前端添加任意個(gè)項(xiàng)并返回新數(shù)組的長度

移除項(xiàng)

pop()
從數(shù)組末尾移除最后一項(xiàng)，返回移除的項(xiàng)

shift()
移除數(shù)組中的第一項(xiàng)并返回該項(xiàng)

排序

reverse()
反轉(zhuǎn)數(shù)組項(xiàng)的順序

var values = [1,2,3,4,5];
values.reverse();
console.log(values); // =>5,4,3,2,1

sort()
按照升序排列數(shù)組項(xiàng)，但是它在實(shí)現(xiàn)排序時(shí)會調(diào)用每個(gè)數(shù)組項(xiàng)的toString()放法，去比較字符串，所以會出現(xiàn)如下情況

var values = [0,1,5,10,15];
values.sort();
console.log(values); // => 0,1,10,15,5

為了在使用sort()方法時(shí)返回正確的排序，我們需要給sort()傳入一個(gè)比較函數(shù)，該比較函數(shù)傳入兩個(gè)參數(shù)，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之前則返回一個(gè)負(fù)數(shù)，如果兩個(gè)參數(shù)相等返回0，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之后則返回一個(gè)正數(shù)。

/*升序
降序則更改返回值即可*/
function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else {
        return 0;
    }
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values);

對于數(shù)值類型或者其valueOf()方法會返回?cái)?shù)值類型的對象類型，可以使用一個(gè)簡單的比較函數(shù)

function compare(value1,value2){
    return value2 - value1;
}

copyWithin()

參數(shù)：

target(必需)：從該位置開始替換數(shù)據(jù)

start (可選)：從該位置開始讀取數(shù)據(jù)，默認(rèn)為0。如果為負(fù)值，表示倒數(shù)

end (可選)：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度。如果為負(fù)值表示倒數(shù)

在當(dāng)前數(shù)組內(nèi)部將指定位置的成員復(fù)制到其他位置，會覆蓋原來的成員。修改原來的數(shù)組形成新的數(shù)組

var a = [1,2,3];
var b = a.copyWithin(0);    // =>[1,2,3]
var c = a.copyWithin(0,1);  // =>[2,3,3]
var d = a.copyWithin(0,1,2);// =>[2,2,3]

上面例子可以看出，雖然copyWithin的后兩個(gè)參數(shù)是可選的，但是需要寫第二個(gè)參數(shù)，否則返回的只是原數(shù)組本身。

不更改原素組，生成新數(shù)組 截取

slice()
接受一個(gè)或兩個(gè)參數(shù)，要返回的起始位置到結(jié)束位置但不包括結(jié)束位置項(xiàng)，如果只寫一個(gè)參數(shù)則截取數(shù)組到最后。可以接收負(fù)數(shù)作為參數(shù)

splice()
做多可以接收三個(gè)參數(shù)，分別為起始位置，要?jiǎng)h除的項(xiàng)目數(shù)，要插入的任意數(shù)量的項(xiàng)，同個(gè)這三個(gè)參數(shù)是否傳入可以實(shí)現(xiàn)刪除，插入，替換

var colors =["red","green","blue"];
var removed =colors.splice(0,1);    //刪除第一項(xiàng)
console.log(colors);                //green,blue
console.log(removed);               //redm,返回的數(shù)組中只包含一項(xiàng)

removed = colors.splice(1,0,"yellow","orange"); //從位置1開始插入兩項(xiàng)
console.log(colors);                //green,yellow,orange,blue
console.log(removed);               //返回的是一個(gè)空數(shù)組

removed = color.splice(1,1,"red","purple");  //插入兩項(xiàng)，刪除一項(xiàng)
console.log(colors);                //green,yellow,purple,orange,blue
console.log(removed);               //返回yellow

連接

concat()
這個(gè)方法會先創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾并返回副本。

var a = [1,2,3];
var b = a.concat("a","b",["c","d","e"]);
console.log(a); // =>1,2,3
console.log(b);

尋找

indexOf()、lastIndexOf()與includes()

indexOf()與lastIndexOf()用于查找數(shù)組中是否有該方法，如果有則返回該元素的位置，否則返回-1。
但是這個(gè)方法有兩個(gè)缺點(diǎn)：

不夠語義化

它內(nèi)部使用嚴(yán)格等于運(yùn)算符===，導(dǎo)致了對NaN的誤判。所以ES7新增includes()去克服這些缺點(diǎn)。

ES7新增
ES7中新增includes()方法，用于查找數(shù)組總是否包含某個(gè)元素，返回布爾值，接受兩個(gè)參數(shù) 要查找的元素 和 查找的起始位置。

find()和findIndex()

參數(shù)：一個(gè)回掉函數(shù)
回調(diào)的參數(shù)：當(dāng)前值、當(dāng)前位置、原數(shù)組

find()
方法用于找出第一個(gè)符合條件的數(shù)組成員。

findIndex()
方法返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合，則返回-1。

var a = [1,4,-5,10];
a.find((n)=> n<0);  // -5

var b = [1,5,10,15];
b.findIndex(function(value,index,arr){
    return value > 9;
});//=>2

迭代方法

ES5為數(shù)組定義了五個(gè)迭代方法
每個(gè)方法都接收兩個(gè)參數(shù)：要在每一項(xiàng)上運(yùn)行的函數(shù)和（可選的）運(yùn)行該函數(shù)的作用域?qū)ο?/em>----影響this的值。
傳入這些方法中的函數(shù)會接收三個(gè)參數(shù)：數(shù)組項(xiàng)的值、該項(xiàng)在數(shù)組中的位置和數(shù)組對象本身。

every():對數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對每一項(xiàng)都返回true,則返回true

some():對數(shù)組中每一項(xiàng)運(yùn)行給定的函數(shù)，如果該函數(shù)對任一項(xiàng)返回true，則返回true

filter():對數(shù)組中每一項(xiàng)運(yùn)行給定的函數(shù)，返回該函數(shù)會返回true的項(xiàng)組成的數(shù)組

forEach():對數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù)。沒有返回值

map():對數(shù)組中的每一項(xiàng)運(yùn)行給定的函數(shù)，返回每次調(diào)用的結(jié)果組成的數(shù)組
歸并方法
reduce()

該方法可以傳遞兩個(gè)參數(shù)：化簡函數(shù)，傳遞給函數(shù)的初始值（可選）。
化簡函數(shù)的參數(shù)：上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue），當(dāng)前被處理的元素，當(dāng)前被處理的元素的索引，調(diào)用 reduce 的數(shù)組。
這個(gè)方法，可以用于求數(shù)組元素的和、積、最大值。

var a = [1,2,3,4,5] /*求和*/ var sum = a.reduce((x,y)=>x+y,0); /*求積*/ var product = a.reduce((x,y)=>x*y,1); /*求最大值*/ var max = a.reduce((x,y)=>(x>y)?x:y);

這個(gè)方法的簡單用法就是這樣，在《javascript高級程序設(shè)計(jì)》（第三版）中只是介紹了這個(gè)用法，但是在《javascript權(quán)威指南》（第六版）中提到了reduce的高級用法。
例1：求任意數(shù)目對象的“并集”

/* 返回一個(gè)新對象，這個(gè)對象同時(shí)擁有o和p的屬性如果o和p中有重名屬性，使用p中屬性 */ function union(o,p){ return extend(extend({},o),p); } var objects = [{x:1},{y:2},{z:3}]; var merged = objects.reduce(union); // =>{x:1,y:2,z:3}

例2：統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)的重復(fù)次數(shù)

var arr = "abcdabcdadbc"; var info = arr.split("").reduce((p,k) => (p[k]++ || (p[k] = 1), p), {}); console.log(info); //=> Object {a: 3, b: 3, c: 3, d: 3}

這兩個(gè)例子，尤其是第二個(gè)例子可以看出，reduce()并不單單只是用于數(shù)學(xué)計(jì)算，在第二個(gè)例子中可以明顯看出在reduce()第二個(gè)參數(shù)傳入一個(gè)空對象，此時(shí)它最終返回的就是一個(gè)對象。由于本身傳入的初始值是對象，所以返回對象。如果傳入一個(gè)空數(shù)組，則返回?cái)?shù)組。所以可以看出，最終reduce()函數(shù)返回什么，取決于第二個(gè)參數(shù)的形式。
join()
Array.join()方法將數(shù)組中的所有元素都轉(zhuǎn)化為字符串并連接起來，返回最后生成的字符串?？梢灾付ㄒ粋€(gè)可選的字符串在生成的字符串中分隔數(shù)組的各個(gè)元素，如不指定，默認(rèn)用逗號隔開。
fill()
參數(shù)：填充項(xiàng)、填充的起始位置、填充的結(jié)束位置
fill()方法用于使用給定的值填充數(shù)組。

new Array(3).fill(7); //=>[7,7,7]
轉(zhuǎn)換為數(shù)組的方法(ES6新增) Array.from();
該方法接收兩個(gè)參數(shù)要轉(zhuǎn)換的非數(shù)組對象,對每個(gè)元素進(jìn)行處理的方法（可選）

在js中，有很多類數(shù)組對象（array-like object）和可遍歷（iterable）對象（包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map），常見的類數(shù)組對象包括document.querySelectorAll()取到的NodeList，以及函數(shù)內(nèi)部的arguments對象。它們都可以通過Array.from()轉(zhuǎn)換為真正的數(shù)組，從而使用數(shù)組的方法。事實(shí)上只要對象具有length屬性，就可以通過Array.from()轉(zhuǎn)換為真正的數(shù)組。

var a = { 0:"li", 1:"li", 2:"li", length:3 }; console.log(Array.from(a)); // => ["li","li","li"];

Array.from([1,2,3],(x)=>x*x); // =>1,4,9
擴(kuò)展運(yùn)算符（...）
//arguments對象 function foo(){ var args = [...arguments]; } //nodelist [...document.querySelectorAll("div")];

云服務(wù)器 GPU云服務(wù)器 vps日常維護(hù)中的一些要點(diǎn)總結(jié) array方法 javascript的方法方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90844.html

上一篇：利用Vue.js實(shí)現(xiàn)拼圖游戲

下一篇：和BEM的戰(zhàn)斗：10個(gè)常見問題及如何避免

相關(guān)文章

javascript 判斷變量是否是數(shù)組（Array）

摘要：過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意這個(gè)懊惱的行為，今天的文章跟大家分享下如何判斷便是是數(shù)組。過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意...這個(gè)懊惱的行為，今天的文章跟大家分享下：javascript如何判斷便是是數(shù)組。 1. typeof真的那...

lyning 2019-08-19 17:38 評論0 收藏0

javascript 判斷變量是否是數(shù)組（Array）

摘要：過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意這個(gè)懊惱的行為，今天的文章跟大家分享下如何判斷便是是數(shù)組。過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意...這個(gè)懊惱的行為，今天的文章跟大家分享下：javascript如何判斷便是是數(shù)組。 1. typeof真的那...

RayKr 2019-08-30 12:48 評論0 收藏0

javascript 判斷變量是否是數(shù)組（Array）

摘要：過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意這個(gè)懊惱的行為，今天的文章跟大家分享下如何判斷便是是數(shù)組。過完春節(jié)又有好多人尋找新的機(jī)會，旁邊的人面試完就會分享一些問題，明明會的但是面試的時(shí)候，想不全，面試官不滿意...這個(gè)懊惱的行為，今天的文章跟大家分享下：javascript如何判斷便是是數(shù)組。 1. typeof真的那...

RichardXG 2019-08-01 15:06 評論0 收藏0

【JS】JavaScript數(shù)組以及數(shù)組API學(xué)習(xí)總結(jié)

摘要：返回?cái)?shù)組內(nèi)容的字符串表示形式將數(shù)組中每個(gè)元素轉(zhuǎn)為字符串，并用逗號連接。拍照連接符將數(shù)組中每個(gè)元素轉(zhuǎn)為字符串，用自定義的連接符連接每個(gè)元素需要用變量借助。關(guān)于數(shù)組篇的記錄，純自己總結(jié)，會持續(xù)更新～原生js方法 1:創(chuàng)建數(shù)組的幾種方法： var arr = []; var arr = new Array(); var arr = [1,2]; var arr = new Arr...

roundstones 2019-08-21 18:26 評論0 收藏0

javascript數(shù)組方法總結(jié)

摘要：返回值如果查找到該元素則返回否則返回方法用法該方法為數(shù)組中的項(xiàng)執(zhí)行直到找到一個(gè)滿足條件的即返回否則返回被調(diào)用時(shí)不會改變數(shù)組。返回值排序后的數(shù)組注意原數(shù)組已經(jīng)修改 javascript數(shù)組方法給數(shù)組增加元素 (1) array.push(element1,...,elementN) 用途：push方法在原來的數(shù)組末尾添加一個(gè)或者多個(gè)元素;返回值是：新數(shù)組的長度; (2) ...

HitenDev 2019-08-26 12:19 評論0 收藏0

JavaScript學(xué)習(xí)總結(jié)（二）數(shù)組和對象部分

摘要：屬性是一個(gè)值或一組值以數(shù)組或?qū)ο蟮男问?，是對象的成員?？梢允褂脙?nèi)置構(gòu)造函數(shù)和創(chuàng)建包裝對象。因此下面的代碼將會使人很迷惑結(jié)果結(jié)果，此數(shù)組長度為應(yīng)該盡量避免使用數(shù)組構(gòu)造函數(shù)創(chuàng)建新數(shù)組。給數(shù)組對象添加返回?cái)?shù)組中最大元素值的方法。對象部分 Object類型 Object 是一個(gè)無序的集合，可以存放任意類型對象，所有其他對象都繼承自這個(gè)對象。創(chuàng)建Object類型有兩種，一種是使用new運(yùn)算符，...

Lsnsh 2019-08-21 12:27 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

tracymac7

男|高級講師

我要關(guān)注我要私信

TA的文章
閱讀更多

深入理解取整、取余與取模問題

閱讀 3964·2021-11-17 09:33

程序員的自我修養(yǎng) 第四章實(shí)現(xiàn)C語言運(yùn)行庫

閱讀 3299·2021-10-08 10:05

如何使用云主機(jī)-云主機(jī)怎么使用？

閱讀 3126·2021-09-22 15:36

Postman接口自動(dòng)化測試之——批量執(zhí)行（集合操作）

閱讀 1156·2021-09-06 15:02

十幾行代碼教你實(shí)現(xiàn)一個(gè)最簡版的promise

閱讀 2782·2019-08-29 12:45

Javascript運(yùn)行機(jī)制

閱讀 1607·2019-08-26 13:40

ES6常用知識學(xué)習(xí)札記

閱讀 3415·2019-08-26 13:37

KOA2框架原理解析和實(shí)現(xiàn)

閱讀 436·2019-08-26 13:37

最新活動(dòng)

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript中Array方法的總結(jié)

indexOf()、lastIndexOf()與includes()

find()和findIndex()

reduce()

相關(guān)文章

javascript 判斷變量是否是數(shù)組（Array）

javascript 判斷變量是否是數(shù)組（Array）

javascript 判斷變量是否是數(shù)組（Array）

【JS】JavaScript數(shù)組以及數(shù)組API學(xué)習(xí)總結(jié)

***javascript數(shù)組方法總結(jié)***

JavaScript學(xué)習(xí)總結(jié)（二）數(shù)組和對象部分

發(fā)表評論

0條評論

tracymac7

男|高級講師

TA的文章

深入理解取整、取余與取模問題

程序員的自我修養(yǎng) 第四章實(shí)現(xiàn)C語言運(yùn)行庫

如何使用云主機(jī)-云主機(jī)怎么使用？

Postman接口自動(dòng)化測試之——批量執(zhí)行（集合操作）

十幾行代碼教你實(shí)現(xiàn)一個(gè)最簡版的promise

Javascript運(yùn)行機(jī)制

ES6常用知識學(xué)習(xí)札記

KOA2框架原理解析和實(shí)現(xiàn)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript中Array方法的總結(jié)

indexOf()、lastIndexOf()與includes()

find()和findIndex()

reduce()

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

indexOf()、lastIndexOf()與includes()