學習筆記——數組方法整理

前言：

定義：數組是值的有序集合。 JS的數組是無類型的，數組元素能夠是任意類型，而且同一個數組的不一樣元素也可能有不一樣的類型，每個值叫作元素（數組元素），每一個元素在數組中有一個位置。數組在日常的coding中是比較經常使用的數據格式，尤爲式在解析後臺數據時。每一個方法我都配有示例，但願能經過示例的解析，讓你們對方法能有更清晰對理解。除此以外，字符串和對象的方法也會在過兩天分享，但願能對您有些許幫助，這將是我莫大的榮幸！

1、建立數組 x=[ ]

let a=["333","999"];        // 直接寫在[ ]中

let aa=new Array(4,8,9);    // 經過實例傳入Array中

let aaa=new Array(5);       // 傳入的5爲array的個數

    aaa[0]=6;               // 給aaa的第0個賦值爲6

console.log(aaa);           //  [6,,,,,]

console.log(aa);            //  [4,8,9]
複製代碼

2、 訪問數組元素 x.[index]

let a=["333","999"];

let b=a[0];              // 訪問數組的第一個元素

let c=a[a.length-1];     // 訪問數組的最後一個元素

let f=a["1"]===a[1];     // a["1"]會自動轉爲數字1 

console.log(f);          //  true

複製代碼

固然，若是咱們經過如下方式去訪問時，會被解析成連續運算返回最後一個值

console.log([2,3,4,5][1,2])   // 4 
複製代碼

數組也是一種特殊的對象，所以咱們也能夠經過鍵值對的形式去訪問

let arr9 = [];

    arr9.say = 'Hello';

console.log(arr9.say)    // Hello
複製代碼

3、遍歷數組 x.forEach(function(item,index,array){})

es6寫法 forEach((item,index)=>{dosomething.....})

let a=["333","999"];

   a.forEach(function (item,index,array) {

           console.log(item,index)

 });
       //333 0  999 1
複製代碼

4、添加元素到數組的末尾 x.push(...)

let a=["333","999"];

    a.push("我是新元素","666");  

console.log(a);    //["333","999","我是新元素","666"]

console.log(a.push("我","690"),a.length,a);  //6,["333","666","我是新元素","666","我","690"]

//返回新數組長度6，會執行一次a.push

複製代碼

5、在末尾刪除數組(只能刪除1個) x.pop()

let a=["333","999"];

    a.pop();

console.log(a);            // ["333"];  返回新數組

console.log( a.pop(),a);   //333 [] 

//會執行一次a.pop()，返回本次被刪除元素
複製代碼

6、刪除數組最前面元素 x.shift()

let a=["333","999"];

    a.shift();

console.log(a);            //  ["999"]

console.log( a.shift());   //  "999"

  //返回被刪除元素，不會執行a.shift()
複製代碼

7、添加到數組的前面（頭部）x.unshift("...")

let a=["333","999"];

    a.unshift("000","888","777");

console.log(a);            

// ["000","888","777","333","999"]

console.log(a.unshift("111"),a.length,a); 

//["111","000","888","777","333","999"]
  
   //會執行一次a.unshift，返回數組長度,
複製代碼

8、找到某個元素在數組中的索引 indexOf

let a=["333","999"];

let d=a.indexOf("333");   // 經過元素查找在當前數組的索引值

console.log(d);           // 0

let e=a.indexOf("654");   // 若是查不到返回-1

console.log(e);           // -1
複製代碼

9、數組淺拷貝 slice() , Array.from()，[...]

let a=[1,2,8]; 

let newArray=a.slice();

console.log(newArray);   //第一種方法  [1,2,8]  

-----------------------------------

let newArray2=Array.from(a);

console.log(newArray2);  //第二種方法 [1,2,8]

------------------------------------

let newArray3=[...a];

console.log(newArray3);  //第三種方法 [1,2,8]

複製代碼

10、清空數組

// 兩種方法均可以實現，但第二種比較優雅

let arr=[1,2,3,3,4,5];

    arr=[];

console.log(arr)     //  []

------------------------------------

let arr=[888,99];

    arr.length=0;

console.log(arr)     //  []
複製代碼

11、合併數組

let arr=[1];

let arr2=[2];

let arr3=[3];

let arr4=arr.concat(arr2,arr3) 

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

---------------------------------------
// 下面這個方法也能夠實現，但只能合併兩個數組

let arr1=[1,2,3];

let arr2=[4,5,6];

    arr1.push.apply(arr1,arr2);
   
console.log(arr1);   // [1, 2, 3, 4, 5, 6]

-------------------------------------
// ES6的數組合並：

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

[...arr1, ...arr2, ...arr3];    // [ 'a', 'b', 'c', 'd', 'e' ]

複製代碼

12、在數組中找到最大值和最小值

//方法1
let array1 = [1,2,3,4];

let array2 = Math.max.apply(null,array1);  // 最大值

let array3 = Math.min.apply(null,array1);  // 最小值

console.log(array2,array3);                // 4 ,1

--------------------------------------------------

//方法2
let array4 =Math.max(...array1);         // 最大值

let array5 =Math.min(...array1);         // 最小值

console.log(array4,array5);              // 4 ,1
複製代碼

十3、判斷是否是數組

// 在javascript中，如何判斷一個變量是不是數組

(1)Array.isArray()方法

    var a = [0, 1, 2];

    console.log(Array.isArray(a));   // true

(2)typeof  toString 方法
複製代碼

因爲低版本的IE不支持ES5，如須要兼容，用typeof，咱們都知道，數組是特殊的對象，因此數組的typeof結果也是object，而由於null的結果也是object，因此須要加判斷是 object同時排除null、排除純對象,先判斷a是否是object,而且a!==null, 而且toString.call判斷a等於 [object Array]

let a = [0, 1, 2];  

console.log( typeof a ==='object' &&  a !==null  &&  Object.prototype.toString.call(a) ==='[object Array]');   //  true
複製代碼

十4、數組與其餘值的運算(使用"+"會自動轉爲string,"-"會自動轉爲number)

// 數組和任何值相加都會將數組轉換成字符串再進行拼接

console.log([1,2,3] + 6) ;       // "1,2,36"

console.log([1,2,3] + {}) ;      // "1,2,3[object Object]"

console.log([1,2,3] + [1,2,3])； // "1,2,31,2,3"
  
若是數組只有一個值，那麼當這個數組和其餘值相減相乘等時會被轉換爲數字，若是爲空會被轉換爲0
    
console.log([5] - 2)          // 3
複製代碼

十5、數組去重

// ES6新增的Set數據結構，相似於數組，可是裏面的元素都是惟一的，其構造函數能夠接受一個數組做爲參數

let arr1=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]

let set = new Set(arr1);  

console.log(set)       //  [ 1,2,6,3,5,69,66,7,4,8,9663,8]

複製代碼

十6、將數組順序打亂

let arr = [1,2,3,4,5,6];

function upsetArr(arr){
    return arr.sort(function(){ return Math.random() - 0.5});
}
upsetArr(arr) ; // [4, 1, 3, 2, 5, 6]
複製代碼

解析：沿用原sort的a-b的方法，先生成一個隨機數，而後將其與隨機數進行 比較，若是Math.random() - 0.5是true，則返回前者，不然比較下一個

十七 實現將數組中數字求和，字母忽略。

let arr= ["a",3,4,5,9,"d"];
function sum (arr){
    let a=0;
    for(let i=0;i<arr.length;i++){
        if(typeof arr[i]==="number"){
            a+=arr[i]
        }
    }
    return a; 
}

sum(arr)  //21
複製代碼

經過循環遍歷判斷數組中的每一個值是不是數字，若是是的賦值到變量上進行加法計算

十8、delete，splice刪除數組內指定的某個值。

使用delete刪除數組內的制定索引的值後，直接改的是原數組，並且刪除值的位置仍然保留，爲undefined。

let arr=[1,2,3,45,5,2];

    delete arr[0]

console.log(arr,arr[0]).   // [empty,2,3,45,5],undefined
複製代碼

若是要完全刪除，可使用splice()方法 splice(開始位置，刪除個數，添加的值)，若是沒有第三個值，能夠只傳前兩個值

兩個值的示例：

let arr=[1,2,3,45,5,2];

    arr.splice(0,1)

console.log(arr)    //  [2, 3, 45, 5, 2]
複製代碼

三個值的示例：

let arr=[1,2,3,45,5,2];

    arr.splice(0,1,100)

console.log(arr)     //  [100 ,2, 3, 45, 5, 2]
複製代碼

十9、slice()截取數組，可選擇開始位置和結束位置

Array.slice(begin,end) 接收兩個參數，第一個是開始位置，第二個是結束位置

拷貝開始位置到結束位置，前包後不包

若是 end 被省略，則slice 會一直提取到原數組末尾。

若是 end 大於數組的長度， slice 也會一直提取到原數組末尾

let arr=[1,2,3,45,5,2];

    arr.slice(0,4)

console.log(arr). //  [1, 2, 3, 45]
複製代碼

若是slice()括號中不傳參數，將會所有截取,即實現淺拷貝

let arr=[1,2,3,45,5,2];

    arr.slice()

console.log(arr).  //  [1, 2, 3, 45, 5, 2]
複製代碼

二10、顛倒數組的順序，也稱數組的反轉

let arr=[1,2,3,45,5,2];

    arr.reverse()

console.log(arr)   // [2, 5, 45, 3, 2, 1]
複製代碼

二11、join()將數組以括號中的值分割成字符串(不會改變原數組)

let arr=[1,2,3,45,5,2];

console.log(arr.join("_」)); // "1_2_3_45_5_2" console.log(arr); // [1, 2, 3, 45, 5, 2] 複製代碼

二12、sort()排序，將數組中的值進行排序，從大到小或從小到大(會改變本來的數組)

sort本來的排序功能只能識別到個位數作比較，因此擴展使用如下方法：（排序方法有不少，這是最傳統，也是使用頻率較多的，其餘的方法再也不贅述）

let arr=[1,2,3,45,5,2];
    array=arr.slice();
    
    arr.sort(function(a,b){
        return a-b
    })   
   //  [1, 2, 2, 3, 5, 45]

查看此時的arr數組：
    console.log(arr)  //   [1, 2, 2, 3, 5, 45]

    arr.sort(function(a,b){
        return b-a
    })
  //  [45, 5, 3, 2, 2, 1]

查看此時的arr數組：
    console.log(arr)  //   [45, 5, 3, 2, 2, 1]
複製代碼

固然咱們有時是不能夠改變原數組的，那麼能夠試試下面的方法將須要的內容拷貝出來便可：

let arr=[1,3,6,8,45,34,90,122,9,0];

let array=arr.slice();

    array.push(34)

console.log(arr，array)

// [1,3,6,8,45,34,90,122,9,0],[1,3,6,8,45,34,90,122,9,0,34] 
複製代碼

二十3、 Array.protype.slice.call(arr,n,m) 截取數組，返回新數組(不會改變原數組)

參數（前包，後不含）：

arr:截取的數組 n:截取開始位置 m:截取結束位置

今天有學到一個新的方法，推薦給你們，數組中的slice.call() 方法，返回一個截取的新數組，（前不包，後包含）接下來咱們帶入一個🌰來現身說法：

1.向後截取，第二個參數2是指給定截取的位置，刪除當前位置前的元素，返回包含第二個參數以後的數組副本。

let arr = [1,2,5,3,6];
console.log(Array.prototype.slice.call(arr,2)) // [5,3,6]

2.向前截取，首先找到截取位置爲2，而後找到截取截止位置4，返回從首位數第二個參數開始，截止到第四個位置的數組副本:
let arr = [1,2,5,3,6];
console.log(Array.prototype.slice.call(arr,2,4)) // [5,3]
複製代碼

---

數組中的迭代方法filter(), every(),forEach(),map(),some(),reduce

filter()：對數組中的每一項運行給定函數，返回該函數會返回true 的項組成的數組。

every()：對數組中的每一項運行給定函數，若是該函數對每一項都返回true，則返回true。

forEach()：對數組中的每一項運行給定函數。這個方法沒有返回值。

map()：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

some()：對數組中的每一項運行給定函數，若是該函數對任一項返回true，則返回true.

1、數組迭代方法之filter()

filter返回的是一個符合某種條件的數組，並返回一個新數組，不會更改原數組,還能夠過濾假值。

array.filter(function(item,index,array){
    
})
複製代碼

filter 的回調函數接收三個參數，分別是當前索引元素，索引，原數組

1. item :當前索引元素
2. index:索引
3. array:原數組

let arr=[1,3,6,8,45,34,90,122,9,0];

let array = arr.filter(function(element){

        return element>10
    })
console.log(array)

//篩選數組中大於10的值， [45, 34, 90, 122]

//查看原數組，並無改變

console.log(arr)    //  [1,3,6,8,45,34,90,122,9,0]
複製代碼

遍歷數組的時候將返回值爲true的元素放入新數組,咱們能夠利用這個函數刪除一些不須要的元素,過濾假值。

const compact = arr=> arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])    // [1, 2, 3, "a", "s", 34] 
複製代碼

關於這個過濾假植，在不少工具庫都有本身的方法進行處理，下面咱們就某庫中的方法和filter作一個比較，看具體執行效率(認真臉)。

// 方法自己
function lodashCompact(array) {
  var index = -1,
    length = array == null ? 0 : array.length,
    resIndex = 0,
    result = [];

  console.time("lodashCompact");
  while (++index < length) {
    var value = array[index];
    if (value) {
      result[resIndex++] = value
    }
  }
  console.timeEnd("lodashCompact");
  return result;
}
// lodash 方法實現
function test() {
    lodashCompact(arr);
}
// filter 方法實現
function test2() {
    console.time("filter用時共計")
    const compacts = arr => arr.filter(Boolean)
    console.timeEnd("filter用時共計")
}

複製代碼

上面計算的是純執行時間，filter 遠遠超越約7.6倍，推薦使用filter！

2、數組迭代方法之every()

（主要是用於判斷一個數組中的值是否符合某個標準。必須是每一個值都符合纔會返回true。不然返回false）

let arr = [1,2,3,4,5,4,3,2,1]; 

let everyResult = arr.every(function(item, index, array){ 
    return (item > 2); 
}); 

//判斷數組中全部的值是否都大於2，若是都大於2，返回true，反之返回false.

console.log(everyResult)     //false 
複製代碼

3、數組迭代方法之forEach()

（數組的循環遍歷,對數組中的每一項運行給定函數。這個方法沒有返回值。)

let arr=[1,3,6,8,45,34,90,122,9,0];

    arr.forEach(function(item,index,array){
        console.log(item,index,array)
    })
/*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
*/
複製代碼

4、數組迭代方法之map()

數組的循環遍歷,對數組中的每一項運行給定函數，返回每次函數調用的結果組成新的數組。

遍歷數組，返回新的數組

array.map(function(item,index,array){
    })
複製代碼

map 的回調函數接收三個參數，分別是當前索引元素，索引，原數組

1. item :當前索引元素
2. index:索引
3. array:原數組

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]
複製代碼

let arr=[1,3,6,8,45,34,90,122,9,0];

    arr.map(function(item,index,array){
        console.log(index,item,array)
    })
 /*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 */
複製代碼

5、數組迭代方法之some()

(對數組中的每一項運行給定函數，若是該函數對任一項返回true，則返回true)

let numbers = [1,2,3,4,5,4,3,2,1]; 

let someResult = numbers.some(function(item, index, array){ 
    return (item > 2); 
}); 

//只要有一個返回true，則返回true

console.log(someResult); // true
複製代碼

6、reduce 歸併：迭代數組中的全部值，返回一個按條件計算的最終值。

reduce:

方法對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。用於執行減小、彙總、求和、求平均數

reducer 函數接收4個參數:

Accumulator (acc) (累計器)
Current Value (cur) (當前值)
Current Index (idx) (當前索引) 索引默認從1開始 可選
Source Array (src) (源數組)                 可選

 Array.reduce((Accumulator,Value,Index,Array)=>{
     //dosomething
 }
複製代碼

let values = [1,2,3,4,5]; 

let sum = reduce(function(prev, cur, index, array){ 
    return prev + cur; 
}); // 15

//第一次執行回調函數，prev 是1，cur 是2。第二次，prev 是3（1 加2 的結果），cur 是3（數組的第三項）。這個過程會持續到把數組中的每一項都訪問一遍，最後返回結果。 
//經過循環遍歷，返回數組中全部值的總和  15
複製代碼

求和

let arr = [1,2,4,6,34,66];
let res = arr.reduce((tap,item,index)=>{
    console.log(`第${index}次:${tap}+${item}`);
    return tap+item
})
// 第1次:1+2 
// 第2次:3+4 
// 第3次:7+6 
// 第4次:13+34
// 第5次:47+66

console.log(res)  // 113

複製代碼

求平均數

let arr = [1,2,4,6,34,66];
let res = arr.reduce((tap,item,index)=>{
    if(index!==arr.length-1){
        return tap+item
    }else{
        return tap/(arr.length)
    }
});
console.log(res) // 7.833333333333333

複製代碼

reduceRight:

let values = [1,2,3,4,5]; 

let sum = reduceRight(function(prev, cur, index, array){ 
    return prev + cur; 
}); 

//第一次執行回調函數，prev 是5，cur 是4。第二次，prev 是9（5加4 的結果），cur 是3（數組的第三項）。這個過程會持續到把數組中的每一項都訪問一遍，最後返回結果。 
//經過循環遍歷，返回數組中全部值的總和  15


複製代碼

ES6 中的 find ：找到數組中第一個符合條件到值。

1.當在數組中匹配到符合條件的元素，則返回符合條件的元素，以後的值不會再調用執行函數;

2.若是沒有符合條件的元素返回 undefined;

注意: find() 對於空數組，函數是不會執行的。

注意: find() 並無改變數組的原始值。

var arr = [1,2,3,4,5,6,7];
 var ar = arr.find((elem)=>{
    return elem>5
 })  // 6
 
 --------------------------------------
 
 var arr = [1,2,3,4,5,6,7];
 var ar = arr.find((elem)=>{
    return elem>10
 })  // undefined
複製代碼

ES6 中的 Array.from： 方法用於將兩類對象轉爲真正的數組

Array.from 方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

複製代碼

若是參數是一個真正的數組，Array.from會返回一個如出一轍的新數組。

Array.from([1, 2, 3]);  // [1, 2, 3]
複製代碼

Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

// 
Array.from([1, 2, 3], (x) => x * x);   // [1, 4, 9]

複製代碼

下面的例子將數組中布爾值爲false的成員轉爲0。

Array.from([1, , 2, , 3], (n) => n || 0)   // [1, 0, 2, 0, 3]

複製代碼

另外一個例子是返回各類數據的類型。

function typesOf () {
  return Array.from(arguments, value => typeof value);
}
typesOf(null, [], NaN);    // ['object', 'object', 'number']

複製代碼

ES6中的 Array.prototype.flat() 用於將嵌套的數組「拉平」，變成一維的數組。

該方法返回一個新數組，對原數據沒有影響。

[1, 2, [3, 4]].flat();   // [1, 2, 3, 4]

// 上面代碼中，原數組的成員裏面有一個數組，flat()方法將子數組的成員取出來，添加在原來的位置。
複製代碼

flat()默認只會「拉平」一層，若是想要「拉平」多層的嵌套數組，能夠將flat()方法的參數寫成一個整數，表示想要拉平的層數，默認爲1。

[1, 2, [3, [4, 5]]].flat();    // [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2);   // [1, 2, 3, 4, 5]

複製代碼

上面代碼中，flat()的參數爲2，表示要「拉平」兩層的嵌套數組。若是不知道有多少層嵌套，都須要轉成一維數組，能夠用Infinity關鍵字做爲參數。

[1, [2, [3]]].flat(Infinity);   // [1, 2, 3]

複製代碼

若是原數組有空位，flat()方法會跳過空位。

[1, 2, , 4, 5].flat();  // [1, 2, 4, 5]

複製代碼

ES6中的空值

ES5 對空位的處理，已經很不一致了，大多數狀況下會忽略空位。

forEach(), filter(), reduce(), every() 和some()都會跳過空位。

map()會跳過空位，但會保留這個值

join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

複製代碼

ES6 則是明確將空位轉爲undefined。

---

參考：阮一峯老師的ES6

做者：晴天de雨滴    
    出處：https://juejin.im/post/5a125827518825293b4fea8a
    版權全部，歡迎保留原文連接進行轉載：) 
複製代碼

若是你對我對文章感興趣或者有些建議想說給我聽👂，也能夠添加一下微信哦！

若是親感受個人文章還不錯的話，能夠一下添加關注哦！

最後：
        祝各位工做順利！
                        -小菜鳥Christine
複製代碼