javascript Array 數(shù)組常用方法
(1)基本的數(shù)組方法
1.join()
Array.join()方法將數(shù)組中所有元素都轉(zhuǎn)化為字符串并連接在一起,返回最后生成的字符串??梢宰约褐付ǚ指舻姆?hào),如果不指定,默認(rèn)使用逗號(hào)
var arr = [1,2,3]; console.log(arr.join());//"1,2,3" console.log(arr.join("-"));//"1-2-3" var a = new Array(10); //長度為10的空數(shù)組 組成下邊字符串 console.log(a.join("-"));//"---------"
2.reverse()
Array.reverse()方法將數(shù)組中的元素顛倒順序,返回逆序的數(shù)組(返回的數(shù)組是其本身,原始數(shù)組已經(jīng)改變了)
var arr = [1,2,3]; arr.reverse(); console.log(arr.join());//"3,2,1"
所以,如果想把一個(gè)字符串逆序的話,可以這樣
var str = "abcdefg"; console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值 console.log(str); //"abcdefg" 當(dāng)然了,原始的是不會(huì)變的.
3.sort()
Array.sort()方法將數(shù)組中的元素排序并返回排序后的數(shù)組。
當(dāng)不帶參數(shù)時(shí),默認(rèn)按照順序排序,也就是從小到大。當(dāng)然,也可以直接給sort加一個(gè)比較函數(shù)比較
var arr = [1,4,7]; arr.sort(); console.log(arr); //[1,4,7] arr.sort(function(a,b){ return a-b; //從小到大 }); console.log(arr); //[1,4,7] arr.sort(function(a,b){ return b-a; //從大到小 }); console.log(arr); //[7,4,1] var num = new Array('one','three','Six','Five'); num.sort(); //區(qū)分大小寫排序 console.log(num); // ["Five", "Six", "one", "three"] num.sort(function(s,t){ var a = s.toLowerCase(); var b = t.toLowerCase(); if(a<b) return -1; if(a>b) return 1; return 0; }); console.log(num); // ["Five", "one", "Six", "three"]
4.concat()
Array.concat()方法創(chuàng)建并返回一個(gè)新數(shù)組,它的元素包括調(diào)用concat()的原始數(shù)組的元素和concat()的每個(gè)參數(shù)。
如果這些參數(shù)中的任何一個(gè)自身是數(shù)組,則連接的是數(shù)組的元素,而非數(shù)組本身。
但要注意,concat()不會(huì)遞歸扁平化數(shù)組的數(shù)組。concat()也不會(huì)修改調(diào)用的數(shù)組。
var arr = [1,2,3]; console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3] console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5] console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7] console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]] console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]
5.slice()
Array.slice()方法返回指定數(shù)組的一個(gè)片段或子數(shù)組。它的兩個(gè)參數(shù)分別指定了片段開始和結(jié)束的位置(a,b)。返回的是從a開始到b的不包括b的數(shù)組元素。
如果只有一個(gè)參數(shù)(a).則代表從a到數(shù)組結(jié)尾的元素。
如果參數(shù)中出現(xiàn)負(fù)數(shù)(-a). 則表示相對于數(shù)組中最后一個(gè)元素相距a的位置。比如(-3)代表倒數(shù)第三個(gè)元素到末尾。出現(xiàn)負(fù)數(shù)就先換算出來,然后按照范圍規(guī)則找出來
他也是返回新的數(shù)組,不會(huì)修改原始數(shù)組
var arr = [1,2,3,4,5]; console.log(arr.slice(0,3)); // [1, 2, 3] console.log(arr); // [1, 2, 3, 4, 5] console.log(arr.slice(3));//[4, 5] console.log(arr.slice(-3));// [3, 4, 5] console.log(arr.slice(-3,-1));// [3, 4] console.log(arr.slice(2,-1));// [3, 4]
6. splice()
Array.splice()方法是在數(shù)組中插入或者刪除元素的通用方法。它會(huì)修改原始數(shù)組的值,并返回一個(gè)新的數(shù)組序列
splice()的第一個(gè)參數(shù)指定了插入或刪除的起始位置,第二個(gè)參數(shù)指定了應(yīng)該從數(shù)組中刪除的元素的個(gè)數(shù)。第二個(gè)參數(shù)省略則默認(rèn)刪到末尾。
var arr = [1,2,3,4,5,6,7,8]; console.log(arr.splice(4)); //[5, 6, 7, 8] console.log(arr); // [1, 2, 3, 4] console.log(arr.splice(1,2));// [2, 3] console.log(arr); // [1, 4]
splice()的前兩個(gè)參數(shù)指定了需要?jiǎng)h除的數(shù)組元素。緊隨其后的任意個(gè)數(shù)的參數(shù)指定了需要插入到數(shù)組中的元素,并從第一個(gè)參數(shù)代表的位置開始插入。
不同于上邊的concat(),splice()是直接把數(shù)組插進(jìn)去,比如下面的[1,2]
var arr = [1,2,3,4,5]; console.log(arr.splice(2,0,'a','b')); // [] console.log(arr); // [1, 2, "a", "b", 3, 4, 5] console.log(arr.splice(2,1,[1,2],3));// ["a"] console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]
7.push() pop() unshift() shift()
把這些方法看成棧操作就行:前兩者正常的棧操作,后兩者是反向的棧操作
push()和unshift()往數(shù)組中從后面、前面添加元素,并返回新數(shù)組的長度
pop()和shift()刪除數(shù)組中最后、最前的元素,并返回刪除的元素
var arr = []; console.log(arr.push(1,2,3));//3 console.log(arr);//[1, 2, 3] console.log(arr.pop());// 3 console.log(arr);//[1,2] console.log(arr.push([4,5]));//3 console.log(arr);// [1, 2, [4, 5]]
var arr = []; console.log(arr.unshift(1,2,3));//3 console.log(arr);//[1, 2, 3] console.log(arr.shift());// 1 console.log(arr);// [2, 3] console.log(arr.unshift([4,5]));//3 console.log(arr);//[[4, 5], 2, 3]
(2)ECMAScript5中的數(shù)組方法
這一類數(shù)組方法大多數(shù)有統(tǒng)一大致的規(guī)則。它們都不會(huì)修改原始數(shù)組。
大多數(shù)方法的第一個(gè)參數(shù)接收一個(gè)函數(shù),并且對數(shù)組的每個(gè)元素(或一些元素)調(diào)用一次該函數(shù)。
如果是稀疏數(shù)組,對不存在的元素不調(diào)用傳遞的函數(shù);
在大多數(shù)情況下,調(diào)用的這個(gè)函數(shù)一般使用三個(gè)參數(shù):數(shù)組元素、元素的索引、數(shù)組本身。通常后兩個(gè)參數(shù)也不需要填寫進(jìn)去。
除了這里第一個(gè)參數(shù)(函數(shù))之外,還有第二個(gè)參數(shù)(它是可選的),如果第二個(gè)參數(shù)存在,則調(diào)用的函數(shù)將被看做是第二個(gè)參數(shù)的方法。
也就是說,在調(diào)用函數(shù)時(shí)傳遞進(jìn)去的第二個(gè)參數(shù)作為它的this關(guān)鍵字的值來使用。
1.forEach()
這個(gè)方法從頭至尾遍歷數(shù)組,為每個(gè)數(shù)組調(diào)用指定的函數(shù)。
var data = [1,2,3,4,5]; var sum = 0; data.forEach(function(value){ //只使用了第一個(gè)參數(shù)(函數(shù)),調(diào)用的函數(shù)也只使用了第一個(gè)參數(shù)數(shù)組元素 sum += value; }); console.log(sum);//15 console.log(data);// [1, 2, 3, 4, 5]
var data = [1,2,3,4,5]; var sum = 0; data.forEach(function(value,item,data){ //調(diào)用的函數(shù)具有了三個(gè)參數(shù) data[item] = value*value; //取平方 }); console.log(data);// [1, 4, 9, 16, 25]
2.map()
這個(gè)方法將調(diào)用的數(shù)組中每個(gè)元素傳遞給指定的函數(shù),并返回一個(gè)數(shù)組,它包含這個(gè)函數(shù)的返回值。
var data = [1,2,3,4,5]; var data1 = data.map(function(value){ return ++ value; }); console.log(data); // [1, 2, 3, 4, 5] console.log(data1);// [2, 3, 4, 5, 6]
3.filter()
這個(gè)方法返回的數(shù)組元素是調(diào)用的數(shù)組的一個(gè)子集。傳遞的函數(shù)是用來邏輯判定的,該函數(shù)返回true或false。
如果返回值是true或者能轉(zhuǎn)化為true的值,那么傳遞給判定函數(shù)的元素就是這個(gè)子集的成員,它將被添加到一個(gè)作為返回值的數(shù)組中。
var data = [1,2,3,4,5]; var data1 = data.filter(function(value){ return value <= 3; }); var data2 = data.filter(function(value){ return value > 3; }); console.log(data); // [1, 2, 3, 4, 5] console.log(data1);// [1,2,3] console.log(data2);// [4,5]
4.every()和some()
顧名思義,every()就是數(shù)組中所以元素都滿足函數(shù)指定的條件時(shí) 返回true; some()就是某一項(xiàng)滿足時(shí)就返回 true
var data = [1,2,3,4,5]; var data1 = data.every(function(value){ return value < 4; }); var data2 = data.some(function(value){ return value >4; }); console.log(data); // [1, 2, 3, 4, 5] console.log(data1);// false console.log(data2);// true
5.reduce()和reduceRight()
這兩個(gè)方法使用指定的函數(shù)將數(shù)組元素進(jìn)行組合,生成單個(gè)值。
reduce()有兩個(gè)參數(shù)。第一個(gè)是執(zhí)行化簡操作的函數(shù),就是說用某種方法把兩個(gè)值化簡為一個(gè)值,并返回化簡后的值。
第二個(gè)參數(shù)可選,用來傳遞給第一個(gè)參數(shù)函數(shù)作為初始值。如果第二個(gè)參數(shù)沒有,則初始值就使用數(shù)組的第一個(gè)元素值。
var data = [1,2,3,4,5]; var sum = data.reduce(function(a,b){ return a+b; }); var sum1 = data.reduce(function(a,b){ return a+b; },5); var min = data.reduce(function(a,b){ return (a<b)?a:b; }); console.log(data); // [1, 2, 3, 4, 5] console.log(sum);// 15 console.log(sum1);// 20 console.log(min);// 1
sum中沒有第二個(gè)參數(shù),所以初始值為第一個(gè)數(shù)組元素,第一步1+2=3,第二步3+3=6... 最后得15
sum1中有第二個(gè)參數(shù),所以初始值為5,第一步5+1=6,第二步6+2=8... 最后得20
reduceRight()和reduce()差不多,不同的是它按照數(shù)組索引從高到低(從右到左)處理數(shù)組,而不是正常的從低到高。
var data = ['a','b','c']; var str = data.reduce(function(x,y){ //順序 return x+y; }); var str1 = data.reduceRight(function(x,y){ //逆序 return x+y; }); console.log(data);// [1, 2, 3] console.log(str);//"abc" console.log(str1);//"cba"
6.indexOf()和lastIndexOf()
這個(gè)方法搜索整個(gè)數(shù)組中具有給定值的元素,返回找到的元素的索引(找到了一個(gè)就退出了),沒有找到則返回-1.
一個(gè)從頭至尾,一個(gè)從尾至頭
var data = ['a','b','a','c','a']; console.log(data.indexOf('a')); //0 console.log(data.indexOf('d')); //-1 console.log(data.lastIndexOf('a'));//4 console.log(data.lastIndexOf('a',-2));//2 從倒數(shù)第二個(gè)開始 console.log(data.lastIndexOf('a',1));//0 從順序第二個(gè)往前
7.數(shù)組類型 isArray()
判斷一個(gè)對象是不是數(shù)組
console.log(Array.isArray([]));//true console.log(Array.isArray({}));//false //模擬上邊的 var isArray1 = Function.isArray||function(o){ return typeof o === "object" && Object.prototype.toString.call(o) === "[object Array]"; }; console.log(isArray1([]));//true console.log(isArray1({}));//false
相關(guān)文章
JavaScript字符串操作的四個(gè)實(shí)用技巧
在制作前端頁面的過程中,經(jīng)常需要用到JavaScript進(jìn)行邏輯處理,很多時(shí)候都需要對字符串進(jìn)行操作,這篇文章主要給大家介紹了關(guān)于JavaScript字符串操作的四個(gè)實(shí)用技巧,需要的朋友可以參考下2021-07-07JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作,結(jié)合實(shí)例形式分析了javascript不依賴第三方接口計(jì)算銀行卡歸屬地相關(guān)信息操作技巧,需要的朋友可以參考下2019-01-01微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能,結(jié)合具體實(shí)例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01js/jquery解析json和數(shù)組格式的方法詳解
本篇文章主要是對js/jquery解析json和數(shù)組格式的方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01Jquery作者John Resig自己封裝的javascript 常用函數(shù)
Jquery作者John Resig自己封裝的常用函數(shù), 大家可以參考下。2009-11-11