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

javascript中創(chuàng)建數(shù)組的方式有兩種：

• 第一種是 使用Array構(gòu)造函數(shù):

var arr1 = new Array();//創(chuàng)建一個(gè)空數(shù)組
var arr2 = new Array(20);//創(chuàng)建一個(gè)包含20項(xiàng)的數(shù)組
var arr3 = new Array("hello","world");//創(chuàng)建一個(gè)包含2個(gè)字符串的數(shù)組

• 第二種是 使用數(shù)組字面量表示法

var arr4 = [];//創(chuàng)建一個(gè)空數(shù)組
var arr5 = [20];//創(chuàng)建一個(gè)包含20項(xiàng)的數(shù)組
var arr6 = ["hello","world"];//創(chuàng)建一個(gè)包含2個(gè)字符串的數(shù)組

javascript中數(shù)組的length屬性是可以修改的：

var arr = ["hello","world","hi"];//創(chuàng)建一個(gè)包含3個(gè)字符串的數(shù)組
arr[arr.length] = "apple";//在下標(biāo)為3處（也就是數(shù)組尾部）添加一項(xiàng)“apple”
arr.length=arr.length-1;//將數(shù)組的最后一項(xiàng)刪除

判斷一個(gè)對(duì)象是不是數(shù)組對(duì)象：

• 在ECMAScript5之前译株，我們可以通過(guò) instanceof Array 去判斷；

這個(gè)操作符和JavaScript中面向?qū)ο笥悬c(diǎn)關(guān)系烟具，了解這個(gè)就先得了解JavaScript中的面向?qū)ο蟆Ｒ驗(yàn)檫@個(gè)操作符是檢測(cè)對(duì)象的原型鏈?zhǔn)欠裰赶驑?gòu)造函數(shù)的prototype對(duì)象的。

• 在ECMAScript5中藤违，新增了Array.isArray()方法粥脚。

這個(gè)方法的目的是最終確定某個(gè)值到底是不是數(shù)組谍咆，而不管它是在哪個(gè)全局執(zhí)行環(huán)境中創(chuàng)建的。
針對(duì)ES5新增的方法瀏覽器支持情況：
Opera 11+
Firefox 3.6+
Safari 5+
Chrome 8+
Internet Explorer 9+

數(shù)組方法

數(shù)組的方法有數(shù)組原型方法私股，也有從object對(duì)象繼承來(lái)的方法
接下來(lái)是數(shù)組的原型方法：

join()

• join( separator )：將數(shù)組元素組成一個(gè)字符串摹察，最多只有一個(gè)參數(shù)separator即分隔符，沒(méi)有參數(shù)的話默認(rèn)用逗號(hào)為分隔符倡鲸；
• 原數(shù)組不變供嚎；

var arr = [1,2,3];
console.log(arr.join());//1,2,3
console.log(arr.join("-"));//1-2-3
console.log(arr);//[1,2,3](原數(shù)組不變)

• 通過(guò)join()方法可以實(shí)現(xiàn)重復(fù)字符串，只需要傳入字符串以及重復(fù)的次數(shù)旦签，就能返回重復(fù)后的字符串查坪，函數(shù)如下：

function repeatString(str,n){
   return new Array(n+1).join(str);
}
console.log(repeatString("abc",3));//abcabcabc
console.log(repeatString("Hi",5));//HiHiHiHiHi

push()和pop()

• push()：可以傳入任意個(gè)數(shù)的參數(shù)，將參數(shù)逐個(gè)添加到數(shù)組末尾宁炫，返回值是修改后的數(shù)組的長(zhǎng)度偿曙；
• pop()：刪除數(shù)組末尾最后一項(xiàng)，減少數(shù)組的length值羔巢，返回值是被刪除的值望忆；

var arr = ["koko","lulu","hehe"];
var count = arr.push("jack","sam");
console.log(count);// 5
console.log(arr);//["koko","lulu","hehe","jack","sam"]
var item = arr.pop();
console.log(item);//sam
console.log(arr);//["koko","lulu","hehe","jack"]

shift()和unshift()

• unshift()：可以傳入任意個(gè)數(shù)的參數(shù)，將參數(shù)逐個(gè)添加到數(shù)組的開(kāi)頭竿秆，返回值是修改后的數(shù)組的長(zhǎng)度启摄；
• shift()：刪除數(shù)組第一項(xiàng)，減少數(shù)組的length值幽钢，返回值是被刪除的值歉备，如果數(shù)組為空，則返回undefined匪燕；

var arr = ["koko","lulu","hehe"];
var count = arr.unshift("jack","sam");
console.log(count);// 5
console.log(arr);//["jack","sam","koko","lulu","hehe"]
var item = arr.shift();
console.log(item);//jack
console.log(arr);//["sam","koko","lulu","hehe"]

sort()

• 默認(rèn)按升序排列數(shù)組項(xiàng)蕾羊，即從小到大排序，但是只作用于字符串帽驯，也就是按照 字符編碼的順序進(jìn)行排序龟再；對(duì)于數(shù)字也是要先默認(rèn)轉(zhuǎn)換成字符串，再排序尼变；
• 原數(shù)組改變利凑；

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());// ["a", "b", "c", "d"]
arr2 = [22,33,11,66,5];
console.log(arr2.sort());//[11,22,33,5,66];
console.log(arr2);//[11,22,33,5,66](原數(shù)組被改變)

• 參數(shù)可選，若有嫌术，則必須是 函數(shù)哀澈，用來(lái)規(guī)定排序順序；

• 如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序蛉威，就需要提供比較函數(shù)日丹，該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字蚯嫌。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b哲虾，其返回值如下：

  若 a 小于 b丙躏，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前，則返回一個(gè)小于 0 的值束凑。
  若 a 等于 b晒旅，則返回 0。
  若 a 大于 b汪诉，則返回一個(gè)大于 0 的值废恋。

• 用sort()方法實(shí)現(xiàn) 按照數(shù)值的大小對(duì)數(shù)字進(jìn)行排序；

function sortNumber(a,b){
  return a-b
}
arr2 = [22,33,11,66,5];
console.log(arr2.sort(sortNumber));//[5,11,22,33,66]

• 這里可以看出扒寄，如果按照升序排列鱼鼓，那么方法為：

function sortNumber(a,b){
  return a-b
}

如果按照降序排列：

function sortNumber(a,b){
  return b-a
}

• 如果想根據(jù) 數(shù)組對(duì)象中的某個(gè)屬性值 進(jìn)行排序呢？

sort 方法接收一個(gè)函數(shù)作為參數(shù)该编，這里嵌套一層函數(shù)用來(lái)接收對(duì)象的屬性名迄本，其他部分代碼與正常使用sort方法相同；
//下面這種方法比較局限课竣，已經(jīng)把升序還是降序?qū)懰懒耍?/p>

var arr = [
  { name:'cj',age:18 },
  { name:'wzm',age:20 },
  { name:'dudu',age:8 }
];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
  }
}
console.log(arr.sort(compare('age')));

結(jié)果如圖所示：

image.png

• 那如何用傳參的方式嘉赎，根據(jù)參數(shù)不同，來(lái)確定是升序排列于樟，還是降序排列公条？

function sortBy(property,rev){
    if(rev == undefined){
        rev = 1; //第二個(gè)參數(shù)沒(méi)有傳遞，默認(rèn)升序排列
    }else{
        rev = (rev) ? 1 : -1;
    }
    return function(a,b){
        a = a[property];
        b = b[property];
        if(a<b){
            return rev * -1
        }
        if(a>b){
            return rev * 1
        }
        return 0;
    }
}
var newArray=[
    { name:'cj',age:18 },
    { name:'wzm',age:20 },
    { name:'dudu',age:8 }
];
console.log(newArray.sort(sortBy('age',false)));

結(jié)果如圖所示：

image.png

reverse()

• reverse()：反轉(zhuǎn)數(shù)組項(xiàng)的順序迂曲；
• 原數(shù)組改變靶橱；

var arr = [22,33,11,66,5];
console.log(arr.reverse()); //[5,66,11,33,22]
console.log(arr); //[5,66,11,33,22]（原數(shù)組改變）

concat()

• concat()：將參數(shù)添加到數(shù)組的末尾；
• 原理：concat()方法會(huì)先創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本路捧，然后將接收到的參數(shù)添加到這個(gè)副本的末尾抓韩，最后返回新構(gòu)建的數(shù)組。在沒(méi)有給concat()方法傳遞參數(shù)的情況下鬓长，它只是復(fù)制當(dāng)前數(shù)組并返回副本。
• 原數(shù)組不變尝江；

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1,3,5,7,9,11,13]
console.log(arr); //[1,3,5,7]

• 從上面測(cè)試的結(jié)果可以發(fā)現(xiàn)：傳入的不是數(shù)組涉波，則直接把參數(shù)添加到數(shù)組后面，如果傳入的是一維數(shù)組炭序，則將此一維數(shù)組中的各個(gè)項(xiàng)添加到數(shù)組中啤覆。
• 如果傳入的是一個(gè)二維數(shù)組呢？

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1,3,5,7,9,Array[2]]
console.log(arrCopy2[5]); //[11,13]

上述代碼中惭聂，arrCopy2數(shù)組的第五項(xiàng)是一個(gè)包含兩項(xiàng)的數(shù)組窗声，也就是說(shuō)，concat方法只能將傳入數(shù)組中的每一項(xiàng)添加到數(shù)組中辜纲，如果傳入數(shù)組中的有些項(xiàng)是數(shù)組笨觅，那么也會(huì)把這一數(shù)組當(dāng)作一項(xiàng)拦耐，添加到arrCopy2中。

slice()

• slice()：從原數(shù)組中指定開(kāi)始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組见剩；
• slice()方法的參數(shù)有一個(gè)或者兩個(gè)杀糯，即表示返回項(xiàng)的起始和結(jié)束位置。

只有一個(gè)參數(shù)時(shí)苍苞，slice()方法返回的是從該參數(shù)指定位置開(kāi)始到當(dāng)前數(shù)組末尾的所有項(xiàng)固翰；
如果有兩個(gè)參數(shù)，該方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng)羹呵；

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1,3,5,7,9,11]（原數(shù)組不變）
console.log(arrCopy); //[3,5,7,9,11]
console.log(arrCopy2); //[3,5,7]
console.log(arrCopy3); //[3,5,7]
console.log(arrCopy4); //[5,7,9]

arrCopy 只設(shè)置一個(gè)參數(shù)1骂际，也就是起始下標(biāo)為1，所以返回的數(shù)組為下標(biāo)為1（包括1）開(kāi)始到數(shù)組最后冈欢；
arrCopy2設(shè)置了兩個(gè)參數(shù)（1,4）歉铝，返回起始下標(biāo)（包括1）開(kāi)始到終止下標(biāo)（不包括4）的子數(shù)組；
arrCopy3設(shè)置了兩個(gè)參數(shù)涛癌，終止下標(biāo)為負(fù)數(shù)犯戏，當(dāng)出現(xiàn)負(fù)數(shù)時(shí)，將負(fù)數(shù)加上數(shù)組的長(zhǎng)度的值（6）來(lái)替換該位置的數(shù)拳话，因此是從1到4（不包括）的子數(shù)組先匪；
arrCopy4中兩個(gè)參數(shù)都是負(fù)數(shù)，所以都加上數(shù)組的長(zhǎng)度6轉(zhuǎn)換成正數(shù)弃衍，因此相當(dāng)于slice(2,5)呀非；

splice()

• splice()：很強(qiáng)大的數(shù)組的方法，它有很多用法镜盯，可以實(shí)現(xiàn)刪除岸裙、插入、替換速缆；
• 刪除：需要2個(gè)參數(shù)降允，第一個(gè)參數(shù)表示要?jiǎng)h除的第一項(xiàng)的位置（索引），第二個(gè)參數(shù)表示要?jiǎng)h除的項(xiàng)數(shù)艺糜。例如：splice(0,2)表示刪除數(shù)組中的前兩項(xiàng)剧董。
• 插入：可以向指定位置插入任意數(shù)量的值，需要提供3種參數(shù)：起始位置破停、0（要?jiǎng)h除的項(xiàng)數(shù)）翅楼、要插入的值（可以多個(gè)）。例如：splice(2,0,4,6)表示從數(shù)組的第二個(gè)值后面插入4和6真慢。
• 替換：將數(shù)組中的任意一個(gè)或幾個(gè)值替換成其他值毅臊，需要提供3種參數(shù)：起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）黑界、要插入的值（可以多個(gè)）管嬉。例如：splice(2,1,4,6)表示刪除第二個(gè)值后面的一個(gè)數(shù)（也就是第三個(gè)數(shù)）皂林，將第三數(shù)替換成4和6。
• splice()方法 ：始終都會(huì)返回一個(gè)數(shù)組宠蚂，該數(shù)組的值是從原數(shù)組中刪除的值式撼，如果沒(méi)有刪除的項(xiàng)，則返回一個(gè)空數(shù)組求厕。
• 原數(shù)組改變著隆；

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5,7,9,11]
console.log(arrRemoved); //[1,3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); //[5,7,4,6,9,11]
console.log(arrRemoved2); //[]
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); //[5,2,4,4,6,9,11]
console.log(arrRemoved2); //[7]

find()

• find()方法 返回函數(shù)中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined呀癣；

• 語(yǔ)法：arr.find(callback[,thisArg])

• 參數(shù)：
  callback：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)美浦，接收3個(gè)參數(shù)：

  • element：當(dāng)前遍歷到的元素；
  • index：當(dāng)前遍歷到的索引项栏；
  • array：數(shù)組本身浦辨；

  thisArg： 可選。指定 callback 的 this 參數(shù)沼沈；

function isBigEnough(element){
    return element >= 15;
}
[12,5,8,130,44].find(isBigEnough); //130

findIndex()

• findIndex()方法 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引流酬。否則返回-1；

• 語(yǔ)法：arr.findIndex(callback[,thisArg])

• 參數(shù)：
  callback：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)列另，接收3個(gè)參數(shù)：

  • element：當(dāng)前遍歷到的元素芽腾；
  • index：當(dāng)前遍歷到的索引；
  • array：數(shù)組本身页衙；

  thisArg： 可選摊滔。指定 callback 的 this 參數(shù)；

function isBigEnough(element){
    return element >= 15;
}
[12,5,8,130,44].findIndex(isBigEnough); // 3

ES5新增的9個(gè)數(shù)組方法：

indexOf() 和 lastIndexOf()

• indexOf()：接收2個(gè)參數(shù)：第一個(gè)參數(shù)表示要查找的項(xiàng)店乐，第二個(gè)參數(shù)表示查找起點(diǎn)位置的索引艰躺。從數(shù)組開(kāi)頭（第二個(gè)參數(shù)）開(kāi)始向后查找。返回的是要查找的項(xiàng)的索引值眨八。
• lastIndexOf()：接收2個(gè)參數(shù)：第一個(gè)參數(shù)表示要查找的項(xiàng)腺兴，第二個(gè)參數(shù)表示查找起點(diǎn)位置的索引。從數(shù)組末尾（第二個(gè)參數(shù)）開(kāi)始向前查找廉侧。返回的是要查找的項(xiàng)的索引值（索引仍然是從左向右計(jì)算含长，注意不要弄混）。
• 沒(méi)有找到的情況下返回 -1伏穆；
• 在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)，會(huì)使用全等操作符纷纫；

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

forEach()

• forEach()：對(duì)數(shù)組進(jìn)行循環(huán)遍歷枕扫，并將元素傳遞給回調(diào)函數(shù)。
• 參數(shù)是函數(shù)參數(shù)（必需）：function(currentValue, index, arr)辱魁，數(shù)組中每個(gè)元素都要調(diào)用的函數(shù)烟瞧。currentValue表示當(dāng)前元素（必需）诗鸭；index表示當(dāng)前元素的索引值（可選）；arr表示當(dāng)前元素所屬的數(shù)組對(duì)象（可選）参滴；
• 這個(gè)方法沒(méi)有返回值（undefined）强岸；
• 注意：forEach()對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

var arr = [1,2,3,4,5];
arr.forEach(function(x,index,a){
    console.log(x+'|'+index+'|'+(a===arr))
})
//輸出為：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

map()

• map()：指“映射”砾赔，也就是原數(shù)組被“映射”成對(duì)應(yīng)新數(shù)組蝌箍；
• 參數(shù)為函數(shù)，和forEach()方法差不多暴心，但是需要有返回值妓盲；
• 下面代碼利用map方法實(shí)現(xiàn)數(shù)組中每個(gè)數(shù)求平方；

var arr = [1,2,3,4,5];
var arr2 = arr.map(function(item){
      return item*item;
});
console.log(arr2); //[1,4,9,16,25]

• 在實(shí)際使用的時(shí)候专普，我們可以利用map方法方便獲得對(duì)象數(shù)組中的特定屬性值們悯衬。例如：

var users = [
  {name: "張含韻", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function(user){
      return user.email;
});
console.log(emails);

結(jié)果如下：

image.png

• Array.prototype擴(kuò)展可以讓IE6-IE8瀏覽器也支持map方法：

if(typeof Array.prototype.map != "function"){
    Array.prototype.map = function(fn,context){
          var arr = [];
          if(typeof fn === "function"){
                for(var k = 0,length = this.length;k<length;k++){
                      arr.push(fn.call(context,this[k],k,this));
                }
          }
          return arr;
    };
}

filter()

• filter()：指“過(guò)濾”，也就是原數(shù)組被“過(guò)濾”成對(duì)應(yīng)新數(shù)組檀夹；
• 參數(shù)為函數(shù)筋粗，和forEach()方法差不多，但是需要有返回值炸渡，返回值是滿足過(guò)濾條件的數(shù)組娜亿；

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = arr.filter(function(x,index){
      return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1,4,7,8,9,10]

every()

• every()：判斷數(shù)組中每一項(xiàng)都是否滿足條件，只有所有項(xiàng)都滿足條件偶摔，才會(huì)返回true暇唾。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

some()

• some()：判斷數(shù)組中是否存在滿足條件的項(xiàng)，只要有一項(xiàng)滿足條件辰斋，就會(huì)返回true策州。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

reduce()

• reduce() 方法接收一個(gè)函數(shù) callback 作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始合并宫仗，最終為一個(gè)值够挂。
• 語(yǔ)法：

array.reduce(callback[, initialValue])

• reduce() 方法接收 callback 函數(shù)，而這個(gè)函數(shù)包含四個(gè)參數(shù)：

function callback(accmulator, currentValue, currentIndex, array) {}

accmulator：上一次調(diào)用回調(diào)返回的值藕夫，或者提供的初始值（initialValue）
currentValue：當(dāng)前項(xiàng)
currentIndex：當(dāng)前項(xiàng)的索引
array：調(diào)用reduce()方法的數(shù)組
而 initialValue 作為第一次調(diào)用 callback 函數(shù)的第一個(gè)參數(shù)

• reduce() 方法為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù) callback孽糖，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值）毅贮，當(dāng)前元素值办悟，當(dāng)前索引，調(diào)用 reduce() 的數(shù)組滩褥。
• 回調(diào)函數(shù)第一次執(zhí)行時(shí)病蛉，accumulator 和 currentValue 可以是一個(gè)值，如果 initialValue 在調(diào)用 reduce() 時(shí)被提供，那么第一個(gè) accumulator 等于 initialValue 铺然，并且 currentValue 等于數(shù)組中的第一個(gè)值俗孝；如果 initialValue 未被提供，那么 accumulator 等于數(shù)組中的第一個(gè)值魄健，currentValue 等于數(shù)組中的第二個(gè)值

var arr = [0,1,2,3,4];
arr.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator+ currentValue;
}); // 10

reduceRight()

• reduceRight() 方法的功能和 reduce() 功能是一樣的赋铝，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加。

ar arr = [0,1,2,3,4];
arr.reduceRight(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
}); // 10