數組方法

http://www.lxweimin.com/p/f55912c20cf1

數組是我們在js中常常要用到的,但是你真的熟悉數組的方法嗎?今天我就總結一下Array對象具有哪些方法。

聲明數組:

var list = new Array()

list[0] = 0;

list[1] = 1;

list[2] = 2;

或者這樣聲明:var list = [0,1,2]

或者var d = Array.of(1,2,3); console.log(d) [1,2,3]

(1)基本的數組方法

unshift:向數組開頭增加一項 ,返回值是數組的新長度 ,

直接在原數組上操作的,不生成新數組

push:向數組的末尾增加一項 ,返回值是數組的新長度 ,

直接在原數組上操作的,不生成新數組

shift : 刪除數組開頭項 ,返回被刪除的數組項 ,直接在原數組上操作的,不生成新數組

pop : 刪除數組的末尾項, 返回被刪除的數組項 ,直接在原數組上操作的,不生成新數組

splice(2,3) :從下標為2(包含2)的項開始切取3項;如果只傳一個參數那就是切到最后

splice(start,deleteCount,val1,val2,...):從start位置開始刪除deleteCount項,并從該位置起插入val1,val2,... (切除并插值)

       **直接在原數組上操作的,返回值是切下的元素新組成的數組**

var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];

var b = a.splice(2,3); var b = a.splice(2,3,9,10); var b = a.splice(2);

console.log(a) [1,2,6,7,8] console.log(a) [1,2,9,10,6,7,8] console.log(a) [1,2]

console.log(b) [3,4,5] console.log(b) [3,4,5] console.log(b) [3,4,5,6,7,8]

slice (2,4):從下標為2(包含2)的項開始切,直到下標為4停止(不包含4),如果只傳一個參數那就是切到最后

** 原數組不變,返回值是切下的元素新組成的數組**

var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];

var b = a.slice(2,4); var b = a.slice(2);

console.log(a) [1,2,3,4,5,6,7,8] console.log(a) [1,2,3,4,5,6,7,8]

console.log(b) [3,4] console.log(b) [3,4,5,6,7,8]

concat:把一個數組和另一個數組拼接在一起 返回拼接好的數組

原數組不變,返回新的數組

var a = [1,2,3,4,5,6,7,8];

var b = [9,10,11];

var c = a.concat(b);

console.log(a) [1,2,3,4,5,6,7,8]

console.log(b) [9,10,11]

console.log(c) [1,2,3,4,5,6,7,8,9,10,11]

**join: **把數組中的每一項 按照指定的分隔符拼接成字符串

      **原數組不變,返回新的數組**

var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];

var c = a.join(''); var c = a.join('|');

console.log(a) [1,2,3,4,5,6,7,8] console.log(a) [1,2,3,4,5,6,7,8]

console.log(c) 12345678 console.log(c) 1|2|3|4|5|6|7|8

reverse:將數組反序

** 原數組改變,返回新的數組就是反序后的數組**

var a = [1,2,3,4,5];

var b = a.reverse();

console.log(a) [5,4,3,2,1]

console.log(b) [5,4,3,2,1]

toString: 可把數組轉換為字符串,并返回結果

var a = [1,2,3,4,5];

var b = a.toString();

console.log(a) [1,2,3,4,5]

console.log(b) 1,2,3,4,5

sort(orderfunction):方法將數組中的元素排序并返回排序后的數組

** 原數組也改變,返回重新排序后的新數組**

var a = [9,2,4,3,5,8,7,6];

var c = a.sort();

console.log(a) [2, 3, 4, 5, 6, 7, 8, 9]

console.log(c) [2, 3, 4, 5, 6, 7, 8, 9]

當不帶參數時,默認按照順序排序,也就是從小到大。當然,也可以直接給sort加一個比較函數比較

var arr = [1,4,7];

arr.sort();

console.log(arr);//[1,4,7]

arr.sort(function(a,b){

     returna-b;//從小到大

});

console.log(arr);//[1,4,7]

arr.sort(function(a,b){

      returnb-a;//從大到小

});

console.log(arr);//[7,4,1]

varnum =newArray('one','three','Six','Five');

num.sort();//區分大小寫排序

console.log(num);// ["Five", "Six", "one", "three"]

num.sort(function(s,t){

     vara = s.toLowerCase();

     varb = t.toLowerCase();

     if(a<b) return  -1

     if(a>b) return 1;

      return0;

});

console.log(num);// ["Five", "one", "Six", "three"]

2)ECMAScript5中的數組方法

這一類數組方法大多數有統一大致的規則。它們都不會修改原始數組。

大多數方法的第一個參數接收一個函數,并且對數組的每個元素(或一些元素)調用一次該函數。

如果是稀疏數組,對不存在的元素不調用傳遞的函數;

在大多數情況下,調用的這個函數一般使用三個參數:數組元素、元素的索引、數組本身。通常后兩個參數也不需要填寫進去。

除了這里第一個參數(函數)之外,還有第二個參數(它是可選的),如果第二個參數存在,則調用的函數將被看做是第二個參數的方法。

也就是說,在調用函數時傳遞進去的第二個參數作為它的this關鍵字的值來使用。

1.forEach()

這個方法從頭至尾遍歷數組,為每個數組調用指定的函數。

var data = [1,2,3,4,5];

var sum = 0;

data.forEach(function(value){//只使用了第一個參數(函數),調用的函數也只使用了第一個參數數組元素

     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){//調用的函數具有了三個參數

    data[item] = value*value;//取平方

});

console.log(data); // [1, 4, 9, 16, 25]

2.map()

這個方法將調用的數組中每個元素傳遞給指定的函數,并返回一個數組,它包含這個函數的返回值。

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()

這個方法返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的,該函數返回true或false。

如果返回值是true或者能轉化為true的值,那么傳遞給判定函數的元素就是這個子集的成員,它將被添加到一個作為返回值的數組中。

var data = [1,2,3,4,5];

var data1 = data.filter(function(value){

    returnvalue <= 3;

});

vardata2 = data.filter(function(value){

    returnvalue > 3;

});

console.log(data); // [1, 2, 3, 4, 5]

console.log(data1); // [1,2,3]

console.log(data2); // [4,5]

4.every()和some()

顧名思義,every()就是數組中所以元素都滿足函數指定的條件時 返回true; some()就是某一項滿足時就返回 true

var data = [1,2,3,4,5];

var data1 = data.every(function(value){

    returnvalue < 4;

});

var data2 = data.some(function(value){

    returnvalue >4;

});

console.log(data); // [1, 2, 3, 4, 5]

console.log(data1); // false

console.log(data2); // true

5.reduce()和reduceRight()

這兩個方法使用指定的函數將數組元素進行組合,生成單個值。

reduce()有兩個參數。第一個是執行化簡操作的函數,就是說用某種方法把兩個值化簡為一個值,并返回化簡后的值。

第二個參數可選,用來傳遞給第一個參數函數作為初始值。如果第二個參數沒有,則初始值就使用數組的第一個元素值。

var data = [1,2,3,4,5];

var sum = data.reduce(function(a,b){

    returna+b;

});

varsum1 = data.reduce(function(a,b){

    returna+b;

},5);

var min = data.reduce(function(a,b){

    return(a

});

console.log(data); // [1, 2, 3, 4, 5]

console.log(sum); // 15

console.log(sum1); // 20

console.log(min);// 1

sum中沒有第二個參數,所以初始值為第一個數組元素,第一步1+2=3,第二步3+3=6... 最后得15

sum1中有第二個參數,所以初始值為5,第一步5+1=6,第二步6+2=8... 最后得20

reduceRight()和reduce()差不多,不同的是它按照數組索引從高到低(從右到左)處理數組,而不是正常的從低到高。

var data = ['a','b','c'];

var str = data.reduce(function(x,y){//順序

    returnx+y;

});

var str1 = data.reduceRight(function(x,y){//逆序

    returnx+y;

});

console.log(data); // [1, 2, 3]

console.log(str); //"abc"

console.log(str1); //"cba"

6.indexOf()和lastIndexOf()

這個方法搜索整個數組中具有給定值的元素,返回找到的元素的索引(找到了一個就退出了),沒有找到則返回-1.

一個從頭至尾,一個從尾至頭

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 從倒數第二個開始

console.log(data.lastIndexOf('a',1)); //0 從順序第二個往前

7.數組類型 isArray()

判斷一個對象是不是數組

console.log(Array.isArray([])); //true

console.log(Array.isArray({})); //false

//模擬上邊的

varisArray1 = Function.isArray||function(o){

    returntypeofo ==="object"&&

    Object.prototype.toString.call(o) ==="[object Array]";

};

console.log(isArray1([])); //true

console.log(isArray1({})); //false

8.數組includes()

判斷數組是否包含某個元素,如果包含則返回true,不包含返回false

var a = [9,2,4,3,5,6,7,8];

var c = a.includes(3);

console.log(a) [9,2,4,3,5,6,7,8]

console.log(c) true

****9.數組find()****

Array.find(function(v,i,arr),thisArgs}

數組實例的find方法,用于找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個返回值為true的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined。

v:數組值

i:索引

arr:當前數組

thisArgs:fn函數中this指向

var re = [1,2,3,4].find(function**(v,i,arr){

** console**.log(arr); //[1,2,3,4]

*** console.log(this*); //{this: 'this'}

**** returnv>=2;

},{this:'this'})

****console.log(re); //2

****var *****re2*** = [1,2,3,4].find(function(v,i,arr){**

**** console.log(this); //{0: "_", 1: "t", 2: "h", 3: "i", 4: "s", length: 5}

***** returnv>=10;*

},'_this')**

*****console.log(re2**); *//undefined****

Object

****Object = {****

    "aa" :  123,

    "bb" :   564,

    "cc" :   989

****}****

****var keysArr = Object.keys(polenta) //返回一個包含對象key值的數組****

console.log(****keysArr****) // ['aa' , 'bb' ,'cc']

[圖片上傳中...(image-edb01f-1513043233796-0)]

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容