數(shù)組方法匯總

cnio 發(fā)布于2019-08-22 10:59 / 3203人閱讀

摘要：返回值為排序后的新數(shù)組。會(huì)有一個(gè)函數(shù)作為的參數(shù)，該函數(shù)也有個(gè)參數(shù)，分別為調(diào)用的數(shù)組的每一項(xiàng)元素對(duì)應(yīng)元素所在的位置表示該數(shù)組過(guò)濾方法。返回滿足條件的元素組成的數(shù)組。

原生javascript方法

創(chuàng)建數(shù)組

var colors = [];
var colors = ["red", "blue"];

檢測(cè)數(shù)組

if(arr instanceof Array) {}

如果網(wǎng)頁(yè)中包含多個(gè)框架，則需要使用下面的方式檢測(cè)數(shù)組

if(Array.isArray(arr)) {}

arr.valueOf()

var colors = ["red", "yellow"];
colors.valueOf();
// > ["red", "yellow"]

arr.toString()

var colors = ["red", "yellow"];
colors.toString();
// > "red,yellow"

arr.push(item)

從數(shù)組末尾添加元素，并返回新數(shù)組的長(zhǎng)度

var colors = ["red", "yellow"];
colors.push("pink");
// > 3

arr.pop()

從數(shù)組末尾刪除元素，并返回被刪除的元素

var colors = ["red", "yellow"];
colors.pop();
// > "yellow"

arr.unshift(item)

從數(shù)組頭部添加元素，并返回新數(shù)組的長(zhǎng)度

var colors = ["green", "pink"];
colors.unshift("pink");
// > 3

arr.shift()

從數(shù)組頭部刪除元素，并返回被刪除的元素

var colors = ["yellow", "orange"];
colors.shift();
// > "yellow"

arr.reverse()

反轉(zhuǎn)數(shù)組的順序，并返回重新排序之后的數(shù)組，原數(shù)組會(huì)被改變

[1, 2, 3, "reer", "game", 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]

arr.sort(fn)

如果不傳參數(shù)，默認(rèn)情況下數(shù)組內(nèi)的元素會(huì)被轉(zhuǎn)換為字符串進(jìn)行比較，因此一般不推薦直接使用默認(rèn)的arr.sort()進(jìn)行排序。
返回值為排序后的新數(shù)組。原數(shù)組會(huì)被改變

將數(shù)組內(nèi)數(shù)值元素從小到大排序。

var demo = [1, 4, 2, "reee", "name", "9", "doc"];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

將數(shù)組內(nèi)數(shù)值元素從大到小排序

var demo = [1, 4, 2, "reee", "name", "9", "doc"];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]

arr.concat(otherArr)

參數(shù)中傳入元素或者數(shù)組，會(huì)將該參數(shù)合并到arr中，返回合并后新的數(shù)組，原數(shù)組不會(huì)改變

var arr = [1, 3, "jake"];
arr.concat("rose", [2, "fi"]);
// > [1, 3, "jake", "rose", 2, "fi"]

arr.slice()

剪切數(shù)組，返回剪切之后的數(shù)組，元素不會(huì)改變

傳入一個(gè)參數(shù)，表示起始位置，結(jié)束位置為最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

傳入2個(gè)參數(shù)，表示起始位置與結(jié)束位置，但不包括結(jié)束位置所在的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]

arr.splice()

根據(jù)參數(shù)的不同，可以分別實(shí)現(xiàn)刪除，插入，替換元素的作用，會(huì)改變?cè)紨?shù)組

刪除

傳入2個(gè)參數(shù)，分別表示起始位置與要?jiǎng)h除元素的個(gè)數(shù)，返回被刪除掉的元素組成的數(shù)組

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, "9", "doc"]

插入

傳入3個(gè)參數(shù)， [起始位置 | 要?jiǎng)h除的項(xiàng)數(shù) 為0 | 要插入的元素]，最終返回刪除掉的元素組成的數(shù)組，因?yàn)檫@里刪除項(xiàng)數(shù)為0，因此會(huì)返回空數(shù)組

var arr = [2, 4, 6];
arr.splice(2, 0, "red", "green"); 
// > []
// arr: [2, 4, "red", "green", 6]

替換

傳入三個(gè)參數(shù)， [ 起始位置 | 要?jiǎng)h除的項(xiàng)數(shù) 為1 | 要插入的元素 ]，最終返回被刪除掉的元素組成的數(shù)組

var arr = [2, 4, 9];
arr.splice(1, 1, ["tim", "tom"]);
// > [4]
// arr: [2, ["tim", "tom"], 9]

總結(jié) 因此，這個(gè)方法會(huì)因?yàn)閰?shù)的不同而實(shí)現(xiàn)不同的功能，所有的參數(shù)從頭到尾依次為

[ 起始位置 | 要?jiǎng)h除元素的個(gè)數(shù) | 要插入元素的值，可以寫入多個(gè)值 ]

arr.indexOf(item)

驗(yàn)證數(shù)組中是否含有某個(gè)元素，返回第一個(gè)匹配到的元素在數(shù)組中所在的位置，如果沒有，則返回 -1

var arr = [2, "tim", 4, 5, 2];
arr.indexOf("tim");
// > 1
arr.indexOf("jake");
// > -1

arr.lastIndexOf(item)

驗(yàn)證數(shù)組中是否含有某個(gè)元素，不過(guò)是從數(shù)組尾部開始查找，返回第一個(gè)匹配到的元素所在的位置，如果沒有，則返回-1

var arr = [2, "tim", 4, 5, 2];
arr.lastIndexOf("tim");
// > 1
arr.indexOf("jake");
// > -1

IE6, 7, 8 不支持indexOf與lastIndexOf方法

arr.every()

對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true。會(huì)有一個(gè)函數(shù)作為every的參數(shù)，該函數(shù)也有3個(gè)參數(shù)，分別為
[ 調(diào)用every的數(shù)組的每一項(xiàng)元素 | 對(duì)應(yīng)元素所在的位置 | 表示該數(shù)組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.every(function(item, index, array) {
    return item > 2;
})
// > false

arr.some()

對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)其中一項(xiàng)返回true，則返回true。會(huì)有一個(gè)函數(shù)作為every的參數(shù)，該函數(shù)也有3個(gè)參數(shù)，分別為
[ 調(diào)用every的數(shù)組的每一項(xiàng)元素 | 對(duì)應(yīng)元素所在的位置 | 表示該數(shù)組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true

arr.filter(fn)

過(guò)濾方法。返回滿足條件的元素組成的數(shù)組。fn的參數(shù)為
[ 調(diào)用every的數(shù)組的每一項(xiàng)元素 | 對(duì)應(yīng)元素所在的位置 | 表示該數(shù)組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

arr.map(fn)

對(duì)數(shù)組的每一項(xiàng)進(jìn)行計(jì)算等處理，返回處理結(jié)果組成的數(shù)組，fn的參數(shù)為
[ 調(diào)用every的數(shù)組的每一項(xiàng)元素 | 對(duì)應(yīng)元素所在的位置 | 表示該數(shù)組 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

arr.forEach(fn)

遍歷數(shù)組，沒有返回值，fn的參數(shù)為
[ 調(diào)用every的數(shù)組的每一項(xiàng)元素 | 對(duì)應(yīng)元素所在的位置 | 表示該數(shù)組 ]

numbers.forEach(function(item, index) {
    // do something
})

arr.reduce(fn)

縮減方法。fn的參數(shù)為
[ 前一個(gè)元素 | 當(dāng)前元素，從1開始 | 后一個(gè)元素的序列，從1開始計(jì)數(shù) | 表示該數(shù)組 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的結(jié)果分別為
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15

arr.reduceRight(fn)

與reduce一模一樣，只是方向相反。

jQuery相關(guān)方法

$.each(arr, fn)

遍歷數(shù)組或者對(duì)象，fn有2個(gè)參數(shù)，分別為，比原生的for in 更加健壯
[ 數(shù)組的索引或者對(duì)象的key值 | 索引或者key值對(duì)應(yīng)的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

跳過(guò)一次循環(huán) return | return true

終止循環(huán) return false

$.grep(arr, fn)

過(guò)濾方法，功能類同原生中的arr.filter(fn)。此處fn的參數(shù)如下
[ value: 對(duì)象/數(shù)組的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不會(huì)改變

$.map(arr, fn)

對(duì)每項(xiàng)進(jìn)行處理，返回處理結(jié)果組成的數(shù)組，此處fn的參數(shù)如下
[ value: 對(duì)象/數(shù)組的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原數(shù)組不受影響

$.inArray(item, array)

檢測(cè)某一個(gè)元素item是否存在與數(shù)組之中，返回其所在的位置，如果不在，則返回-1

$.inArray(3, [1, 2, 3]);
// > 2

$.merge(arr1, arr2)

合并數(shù)組，會(huì)改變第一個(gè)參數(shù)的數(shù)組為合并之后的數(shù)組，返回合并之后的數(shù)組

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 為了防止第一個(gè)數(shù)組被改變，可以使用下面的方式來(lái)寫
$.merge($.merge([], arr), arr2);

$.unique(arr)

過(guò)濾DOM數(shù)組中重復(fù)的元素

$.makeArray(obj)

將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組

$(elem).toArray()

將jQuery對(duì)象集合恢復(fù)成DOM數(shù)組

GPU云服務(wù)器云服務(wù)器 16種常用的數(shù)據(jù)分析方法匯總數(shù)組方法數(shù)組操作方法構(gòu)造方法數(shù)組

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91581.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

cnio

男|高級(jí)講師

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

TA的文章

C/C++游戲項(xiàng)目詳細(xì)教程：《黃金礦工》

閱讀 1995·2021-11-11 16:55
Captura – 免費(fèi)錄屏軟件安裝體驗(yàn) 可選擇安裝版或便攜版

閱讀 2215·2021-10-08 10:13
html+css 實(shí)現(xiàn)導(dǎo)航欄文字居中

閱讀 806·2019-08-30 11:01
你不知道的CSS

閱讀 2227·2019-08-29 13:19
CSS 選擇器

閱讀 3346·2019-08-28 18:18
業(yè)務(wù)，程序員都是怎么做好的

閱讀 2678·2019-08-26 13:26
Javascript事件循環(huán)機(jī)制以及渲染引擎何時(shí)渲染UI

閱讀 635·2019-08-26 11:40
ES6—字符串模板引擎（4）

閱讀 1944·2019-08-23 17:17

資訊專欄INFORMATION COLUMN

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