Javascript 數組方法全解析（包含es6,es7）

Javascript 數組方法全解析（包含es6）

1. 數組自帶屬性

constructor //返回建立數組對象的原型函數
 length //返回數組對象的長度
 prototype //這個是老熟人了，能夠增長數組的原型方法和屬性，這個放在後面的繼承中講

2. 數組的方法

//首先讓咱們看看數組的對象屬性。
Array.prototype

1. concat

用法：用來鏈接多個數組的方法
有了這個方法以後咱們鏈接多個數組就方便了
array1.concat(array2,array3,...,arrayX) 該參數能夠是一個具體的值也能夠是數組對象

let arr = [];
let arr1 = [1,2,3,4,5,6];
let pos = 7;
console.log(arr.concat(arr1,pos)); // =>[1,2,3,4,5,6,7]

//ok 咱們再看一個厲害的，合併一維數組和二維數組
var num1 = [[1]];
var num2 = [2, [3]];

var nums = num1.concat(num2); 

console.log(nums); // =>[[1], 2, [3]] 
console.log(nums[0][0]); // =>1

2. copyWithin()
用法：淺複製數組的一部分到同一數組中的另外一個位置，並返回它，而不修改其大小
重點是不改變大小

arr.copyWithin(target)

arr.copyWithin(target, start)

arr.copyWithin(target, start, end)

arr.copyWithin(目標索引, [源開始索引], [結束源索引])

target(必須) 0爲基底的索引，若是target爲負數的話那麼target爲length+target
start(可選) 0爲基底的索引，若是start爲負數的話那麼start爲length+start 若是省略的話就是0
end(可選) 0爲基底的索引，若是end爲負數的話那麼end爲length+end 若是省略的話就是arr.length
start=>end 在數學中是[) 好比（0,2）表示選下標0，1 （1,4）表示選下標 1,2,3，同理類推
咱們來看幾個例子

[1, 2, 3, 4, 5].copyWithin(-2); 
//=> [1,2,3,1,2] targer爲-2，也能夠等於-2+5=3 start和end省略 因此等同於copyWithin(3,0,5)

[1, 2, 3, 4, 5].copyWithin(0, 3); // => [4,5,3,4,5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); //=> [4,2,3,4,5] 

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); 
//=>[1, 2, 3, 3, 4]  -2等同於-2+5=3 -3等同2 -1等同於4 因此等同於copyWithin(3,2,4)

//ok,咱們再來看一個特殊的，copyWithin並不僅僅能對數組對象使用還能對類數組對象使用
[].copyWithin.call({length:5, 3:1},0,3); //=> {0:1,3:1, length:5}
/*爲何會出這麼個玩意？別急待我一步一步和你說
{length:5, 3:1} => {0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}
[].copyWithin => Array.prototype.copyWithin.call()這一步也就是把類數組能使用數組的copyWithin方法.
[].copyWithin.call({length:5, 3:1},0,3)=>[undefined,undefined,undefined,1,undefined].copyWithin(0,3)=>[1,undefined,undefined,1,undefined]=>{0:1,3:1, length:5}
*/

3. entries
用法：array.entries(); 返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵值對
咱們先看一段代碼：

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

var Iterator = arr.entries(); //返回一個Array Iterator對象
console.log(Iterator.next().value); //=>[0:"a"]
console.log(Iterator.next().value); //=>[1:"b"]
console.log(Iterator.next().value); //=>[2:"c"]

ok,介紹完基本用法以後咱們來看一下具體應用

//二維數組排序
var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];

function sortArr(arr){

    var pos = true;
    var Iteartor = arr.entries();

    while(pos){

        var result = Iteartor.next();
        if(result.done !== true){ //當循環到最後一個的時候result.done會變成true
             
             result.value[1].sort((a,b)=>a-b);

        }else{
             
             pos = false;
        }

    }

}

sortArr(arr);

咱們再來看一個

var arr = ['a','b','c'];
var iteartor = arr.entries();

for(let i of iteartor){
    console.log(i);
}

//[0, "a"]
//[1, "b"]
//[2, "c"]

for .. of循環能遍歷迭代器對象 //具體我放在之後的文章好好講講

4.Array.from
用法：能夠將一個相似數組或者可迭代對象建立一個新的數組（不會改變原數組）
先舉一個小例子

Array.from('abc'); //=>['a','b','c']
Array.from({0:'a',1:'b',length:2}) //=> ['a','b']

接下來咱們再來看一個神奇的例子，一行代碼將數組中的元素去重

Array.from(new Set([4,2,4,2,6,6,7,8])); //=>[4,2,6,7,8]

5.every
every(callback[,thisArg])
用法：用來測試數組中是否每一個元素都知足某種規則
測試函數參數：(value, index, arr) 分別是該數組的值，該數組的索引還有該數組
返回值：Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.every(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>false

6.some
some(callback[,thisArg])
用法：用來測試數組中是否有元素都知足某種規則
測試函數參數：(value, index, arr) 分別是該數組的值，該數組的索引還有該數組
返回值：Boolean true或者false

var arr = [1,3,5,12,50,6];
var flag = arr.some(chenckIsBig);
function chenckIsBig(ele,index,arr){
     return ele<20;
}
console.log(flag) //=>true

7.filter
filter(callback[,thisArg])
用法：用於建立一個新數組，知足經過參數函數測試的全部函數
測試函數參數：(value, index, arr) 分別是該數組的值，該數組的索引還有該數組
返回值：返回一個新數組
先看一個小例子

const checkIsBigEnough = (value) => value >= 10
let arr = [6,12,50,77,95];
console.log(arr.filter(checkIsBigEnough)); //=> [12,50,77,95]

ok,我再給你們舉一個我常常用的例子，有的時候咱們經過ajax獲取後臺穿過來的json數據，可是其實不是全部數據咱們都能用的，這個時候filter的就顯得比較重要了，仍是看例子

//我從後臺獲取了一個數組，數組中包含多個對象以下：
let json = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"}
]
//這個時候我只須要獲取FromStation值爲北京的對象，這個時候filter就派上用場了
let filterMethod = (value) => value.FromStation == "北京"
let finallyData = json.filter(filterMethod);
console.log(finallyData);
//=> [{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"}]

8.find
find(callback[,thisArg])
用法：和上面幾個是幾兄弟，用法和filter類似，不過find返回值是符合測試函數的第一個值
測試函數參數：(value, index, arr) 分別是該數組的值，該數組的索引還有該數組
返回值：符合測試函數的第一個數組的值，若是沒有符合條件的返回Undefined

let json = [
    {"CostTime": "310", "FromStation": "上海"},
    {"CostTime": "336", "FromStation": "北京"},
    {"CostTime": "340", "FromStation": "杭州"},
    ]
    
    let checkMethod = (value) => value.CostTime == "340"
    
    console.log(json.find(checkMethod)); //=>{"CostTime": "340", "FromStation": "杭州"}

9.findIndex
用法：和上面幾個是幾兄弟，用法和find類似，不過findIndex返回值是符合測試函數的第一個值的索引
測試函數參數：(value, index, arr) 分別是該數組的值，該數組的索引還有該數組
返回值：符合測試函數的第一個數組的值，若是沒有符合條件的返回-1

let json = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "北京"},
{"CostTime": "340", "FromStation": "杭州"},
]

let checkMethod = (value) => value.CostTime == "340"
let checkMethod2 = (value) => value.FromStation == "深圳"

console.log(json.findIndex(checkMethod)); //=>2

console.log(json.findIndex(checkMethod2)); //=> -1

10.fill
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

用法：用一個固定的值去填充數組中從其實索引到終止索引內的所有元素
參數：
value（必填）用來填充數組的值
start（選填）起始索引，默認值爲0 若是爲負數的話start = start+arr.length
end （選填）終止索引，默認值爲arr.length 若是爲負數的話 end = end+arr.length
start=>end 在數學中是[)，選擇大於等於start，小於end的值
返回值：修改以後的數組

[1,2,3].fill(5) //=> [5,5,5] 不傳start默認爲0，不傳end默認爲arr.length
[1,2,3].fill(5,1) //=>[1,5,5] 
[1,2,3].fill(5,1,2) //=>[1,5,3]
[1,2,3].fill(5,1,1) //=>[1,2,3] 不變由於大於等於1小於1的值沒有
[1,2,3].fill(5,-3,-2) //=>[5,2,3] start = -3 => -3+3 = 0  end = -2 =>-2 + 3 = 1 =>fill(5,0,1)
Array(3).fill(5) //=> [5,5,5] 這個方法比較有用，能夠初始化數組（將全部值初始化爲一個值）

11.indexOf
arr.indexOf(searchElement,formIndex)
參數：
searchElement要查找的元素
formIndex從哪開始查找 （formIndex爲一個整數，能夠爲負數，當formIndex爲負數的時候formIndex能夠轉化成formIndex+arr.length 若是還爲負數的話表示查找整個元素）
返回值：-1（沒有找到元素） 或者 元素的下標（找到元素）

// 找出指定元素在數組中出現的位置
var positionIndex = [];
var arr = [1,5,6,1,7,8,1,6,6,6];
var pos = arr.indexOf(1);
while(pos!=-1){
   positionIndex.push(pos);
   pos = arr.indexOf(1,pos+1);
}
console.log(positionIndex); // => [0,3,6]

12.reduce
用法：方法對累加器和數組中的每一個元素（從左到右）應用一個函數，將其減小爲單個值。（這個是mdn文檔上寫的,看起來感受特別難懂，其實他就是一個將數組元素不斷遞歸執行一個函數以後返回的值）
咱們仍是先看例子：

//數組累加
var arr = [3,6,5,1];
arr.reduce((pre,cur)=>pre+cur,10) //10+3+6+5+1 => 25

//數組累乘
var arr = [3,6,5,1];
arr.reduce((pre,cur) => pre*cur) //3*6*5*1 =>90

ok,咱們先來看看reduce函數
reduce((preValue,curValue,index,array)=>{},initialValue)
咱們先看回調函數中的值：
preValue: 上一次調用回調返回的值，或者是提供的初始值（initialValue）著做權歸做者全部。
curValue: 數組中當前被處理的數組項
index: 當前數組項在數組中的索引值
array: 調用 reduce()方法的數組
咱們寫一個demo來看看這個方法是若是實行的

let arr = [1,2,3,4,5,6,7];
arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
})
/*
1,2
3,3
6,4
10,5
15,6
21,7
28
*/

arr.reduce((pre,cur)=>{
   console.log(pre,cur);
   return pre+cur;
},10)
/*
10,1
11,2
13,3
16,4
20,5
25,6
31,7
38
*/

由此能夠看出：

1. 在initialValue沒有傳入的時候
   pre在第一次循環的時候爲數組第一個數
   cur爲數組第二個值
2. 在initialValue有值的時候
   在第一次循環pre初始爲initialValue
   cur爲數組第一個值

其實reduce以遞歸的思想能夠理解爲：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
再舉一個reduce的經常使用例子吧，二維數組的合併

var twoArr = [['a','b'],['c','d'],['e','f']];
twoArr.reduce((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> a,b,c,d,e,f

13.reduceRight
用法其實和reduce基本沒有區別，惟一的區別是他是從右到左執行回調函數

var twoArr = [['a','b'],['c','d'],['e','f']];
twoArr.reduceRight((pre,cur)=>{
   return pre.concat(cur)
},[])
//=> f,e,d,c,b,a

let arr = [1,2,3,4,5,6];
arr.slice(0,2); // =>[1,2]
arr.slice(-1) // =>[6]
arr.slice(0) // => [1,2,3,4,5,6]
arr.slice(-7) //=> [1,2,3,4,5,6]
arr.slice(2,-3) // => [3]

字符串方法和數組方法類似
let str = 'I am Bob';
str.slice(-5); //=> m Bob
str.slice(0,6); //=> I am B

數組方法之splice
splice(start,deleteCount,item...)
用法:萬精油方法，能夠對數組進行增長，刪除，插入,能夠從數組中移除一個或者多個元素，而且用後面的item來替換它，返回值爲刪除的元素的數組，而且改方法會改變原數組
let arr = [1,2,3,4,5,6];
arr.splice(0,5); [1,2,3,4,5]返回一個唄刪除的數組
console.log(arr); // =>[6]
arr.splice(0,0,7,8,9); //返回一個空數組[]
arr // =>[7,8,9,6]

數組的遍歷

let arr = [1,2,3,4];
//普通for循環
for(var i = 0,length=arr.length;i < length;i++){
    //do someThing
}

//forEach循環
arr.forEach((value, index)=>{
   //do someThing
})

//map循環
arr.map((value, index)=>{
   //do someThing
})

//其實還有兩個循環一個for in ，還有一個是for of，不過強烈介意不要用for in，一個是效率比普通for循環差好多，由於它會遍歷整個數組的原型對象，咱們來看一個例子
//咱們給數組原型添加一個haha的方法
Array.prototype.haha = function(){
    //do somthing
}
//而後咱們再用for in來輸出數組
for(let i in arr){
    console.log(arr[i]);
}
//=> 1,2,3,4 haha
最後居然輸出了haha，這是由於for in這個循環會遍歷數組的原型對象，因此會輸出haha，那麼要解決這個有方法麼？其實也有:
for(let i in arr){
    if(arr.hasOwnProperty(i))
    console.log(arr[i]);
}
//能夠看到遍歷輸出了正確的值，可是仍是不建議你們使用for in去循環數組，不僅僅是效率低，並且容易出問題，特別是當項目引用了許多第三方類庫的時候。
有大牛作過一個測速,遍歷數組的時間對比 for in > map > forEach > for

數組元素的添加和刪除

1. push 將一個或者多個數組添加到數組的末尾,而且返回數組的長度
   Array.prototype.push(ele1,ele2,ele3,ele4)
2. pop 刪除數組的最後一個值，而且返回刪除元素的值
   Array.prototype.pop()
3. shift刪除數組第一個值，而且返回刪除元素的值，用法和pop類似
   Array.prototype.shift()

4. unshift 用法和push類似，將一個或者多個元素添加到數組的開頭，而且返回數組的長度

   Array.prototype.unshift(ele1,ele2,ele3,ele4)

數組和字符串之間的相互轉化

1. 數組轉化成字符串
   join：首先join方法不會改變原數組，只會返回一個生成的新字符串

let a = ['a','b','c'];

console.log(a.join()) //=> 'a,b,c'
console.log(a.join("")) //=> 'abc'
console.log(a.join('-')) //=> 'a-b-c'

ok，這個比較簡單，咱們在來看一個複雜點的，類數組轉化成字符串

function f(a,b,c){
   let e = Array.prototype.join.call(arguments,"");
   console.log(e);
}
f('Hello',' ','World'); //=> Hello World

1. 字符串轉化成數組

用字符串的split方法，具體先很少說，等寫字符串方法全解析的時候再進行具體說明

後記

以上都是我的開發經驗總結而成，若有錯誤，歡迎各位大佬指正轉載請註明出處