數組是我們在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 : 刪除數組的末尾項， 返回被刪除的項?，直接在原數組上操作的，不生成新數組
includes? ? [1,2,3].includes(2);//true? ??[1,2,3].includes(4);//false
indexof??
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
? ? ?console.log(beasts.indexOf('bison'));
? ? // expected output: 1
? ? // start from index 2
? ? ?console.log(beasts.indexOf('bison', 2));
? ? // expected output: 4
? ? console.log(beasts.indexOf('giraffe'));
? ?// expected output: -1
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
obj= {
? ? ? ? "aa" :? 123,
? ? ? ? "bb" :? ?564,
? ? ? ? "cc" :? ?989
}
var? keysArr = Object.keys(obj)? ? ? ? //返回一個包含對象key值的數組
console.log(keysArr)? ? ? ? ? ? ?//? ?['aa' , 'bb' ,'cc']
