數組的使用總結— (js基礎複習第2期)

1. 前言

數組真的是天天用了，可是有不少方法都是記不住，老是要百度查，很煩，因此才寫了個數組使用總結，有什麼不對的但願你們指出來。

2. 思路

先看看這些問題都記得很清楚麼？

1. 建立數組，怎麼建立數組的
2. 數組的構造方法Array有哪些方法？ES5 , ES6
3. ES6把相似數組對象轉化成數組方法，ES5怎麼把相似數組的對象轉化成數組，原理
4. 字符串和數組互相轉換
5. 數組的增刪查改
   增：從頭部增，從尾部增， 從中間位置增長
   刪：從頭部刪，從尾部刪，從中間位置刪
   查： indexOf()， indexOf 的不足，ES6 怎麼查找指定的元素
   改：哪些操做是對本數組的修改，哪些是建立新數組？
6. 數組排序，配合sort方法
7. 數組的迭代器方法
   不產生新數組的迭代器方法
   產生新數組的迭代器方法
8. $.each() 和 forEach 參數區別，如何跳出循環？

3. 整理

3.1 建立數組

var a = new Array(1,2,3);  //[1,2,3]
var b = new Array(4); //[,,,] 四個空值,不是undefined
var c = [5,6,7]; //[5,6,7]

3.2 Array 的構造函數有哪些方法？

ES5：isArray, 判斷變量是不是數組

var a = [1,2,3];
Array.isArray(a); //true

ES6: Array.from ，Array.of

Array.from 將相似數組的對象（array-like object）和可遍歷（iterable）的對象, 轉爲真正的數組
什麼是相似數組的對象?類數組對象

總結：

• 表象：這種對象很像數組，對對象的讀寫和遍歷操做和數組相似，但卻不是數組
• 條件：只包含使用從零開始，且天然遞增的整數作鍵名，而且定義了length表示元素個數的對象，咱們就認爲他是類數組對象。
• 常見的類數組對象：DOM 經過 document.querySelectorAll 獲取的對象、函數的參數arguments

//定義數組和類數組對象
var arr = [1,2,3];
var obj = {0: 1, 1: 2, 2: 3, length: 3};
//元素讀寫操做
console.log(arr[0], obj[0])//1, 1
console.log(arr['length'], obj['length'])//1, 1
arr[0] = 9;
obj[0] = 9;
 
//遍歷
for(var i = 0, len = arr.length; i < len; i++) {
    arr[i]....
}
for(var i = 0, len = obj.length; i < len; i++) {
    obj[i]....
}

• 什麼是可遍歷對象？

  JavaScript 原有的表示「集合」的數據結構，主要是數組（Array）和對象（Object），ES6 又添加了Map和Set。
  任何數據結構只要部署 Iterator 接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）

Array.from 使用：

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']

let namesSet = new Set(['a', 'b']);
Array.from(namesSet) //將可遍歷對象轉成數組

Array.of ：方法用於將一組值，轉換爲數組

Array.of(3, 11, 8) // [3,11,8]  
Array.of(3) // [3]  
Array.of(3).length // 1

3.3 ES六、ES5怎麼把相似數組的對象轉化成數組，原理

[].slice.call(arrayLike); //爲何能轉化爲數組
slice原理

3.4 字符串數組互相轉化

var s = "a,b,c,d";
    var arr1 = s.split(",");
    arr1; // ["a", "b", "c", "d"]
    var s2 = arr1.join(" ");
    s2;  //"a b c d"
    var s3 = arr1.toString(); 
    s3;  // "a,b,c,d"

3.5 數組的增刪查改

1. 從頭部增，從尾部增， 從中間位置增長

   頭：
   var arr = [4,5,6];
   arr.unshift(3);  //5 注意，返回的是數組長度
   arr;  // [3,4,5,6]
   arr.unshit(1,2);   // unshit 不只能夠增長一個，還能夠增長多個
   arr; //[1,2,3,4,5,6]
   
   尾：
   arr.push(7); //7, 返回數組長度
   arr; // [1,2,3,4,5,6,7] 
   arr.push(8,9);  //9， push也能夠添加多個
   arr; // [1,2,3,4,5,6,7,8,9]  
   
   中間
   splice(起始索引，須要刪除的元素個數，想要添加進數組的元素)
   
   var arr2 =  [1,2,3,7,8,9];
   arr2.splice(3,0,4,5,6);
   arr2; //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2. 從頭部刪，從尾部刪，從中間位置刪

   var arr = ["a","b","c","d","e"]
   arr.shift();  // "a", 被刪除的元素
   arr; //["b", "c","d","e"]
   arr.pop(); //"e", 返回被刪除的元素
   arr; // ["b","c","d"]
   arr.splice(1,1);  // ["c"]  返回，被刪除元素組成的數組！！！
   arr; // ["b","d"]

3. indexOf()， indexOf 的不足，ES6 怎麼查找指定的元素

   indexOf : 若是目標數組包含該參數，就返回第一個與參數相同元素的的索引，若是不包含，返回 -1

   var arr = ["a", "b", "c"];
   arr.indexOf("b"); //1

   indexOf 不足：
   一是，不夠語義化，它的含義是找到參數值的第一個出現位置，因此要去比較是否不等於-1，表達起來不夠直觀。

   二是，它內部使用嚴格相等運算符（===）進行判斷，這會致使對NaN的誤判

   ES6：  
      includes: 返回一個布爾值，表示某個數組是否包含給定的值
      ```
      [1, 2, 3].includes(2)     // true
      [1, 2, 3].includes(4)     // false
      [1, 2, NaN].includes(NaN) // true
      ```
     
      find: 用於找出第一個符合條件的數組成員，參數是一個回調函數
      和filter 不一樣，返回全部符合添加的數組成員
      ```
      [1, 4, -5, -2].find((n) => n < 0)  // -5
      [1, 4, -5, -2].filter((n) => n < 0) //[-5, -2]
      ```
      
      findIndex: 返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。
      ```
      [1, 5, 10, 15].findIndex(function(value, index, arr) {
        return value > 9;
      }) // 2
      ```

4. 哪些操做是對本數組的修改，哪些是建立新數組？

   splice: 修改會影響原數組
   concat: 不會影響原數組

   var a = [1,2,3,4];
       var b = [5,6];
       a.concat(b); 
       a; //[1,2,3,4];

3.6 數組排序，配合sort方法

//順序修改
var arr = [1,11,2,22,3,33];
arr.reverse(); //[33, 3, 22, 2, 11, 1]

//大小排序：
arr.sort(); //[1, 11, 2, 22, 3, 33]  
//sort 方法默認按照字典順序對元素進行排序

arr.sort(function(a, b) {
    return  a - b;
});
arr;  //[1, 2, 3, 11, 22, 33]

3.7 數組的迭代器方法

不產生新數組的迭代器方法  
1. forEach
2. every 
3. some
4. reduce

forEach,接受一個函數做爲參數，對數組的每個元素使用該函數

var arr = [1, 2, 3];
    arr.forEach(function(value, index){
        console.log(value * value);
    })

every, 接受一個返回值爲布爾類型的函數，對數組中每個元素使用該函數，若是全部元素，該函數均返回true，則函數返回true

var arr = [1, 2, 3];
    var arrIsEven = arr.every(function(value){
        return value % 2 == 0;
    });
    arrIsEven;  //false

some, 接受一個返回值爲布爾類型的函數，對數組中每個元素使用該函數，只要有一個元素使得該函數返回true，則函數返回true

var arr = [1, 2, 3];
    var arrIsEven = arr.some(function(value){
        return value % 2 == 0;
    });
    arrIsEven; //true

reduce, 接受一個函數，返回一個值。迭代數組的全部項，而後構建一個最終返回的值。reduce() 方法從數組的第一項開始，逐個遍歷到最後，而reduceRight() 則從數組的最後一項開始，從前遍歷到第一項。

//前一個值，當前值，索引，數組對象
reduce(prev, cur, index, arr)

var  nums = [1, 2, 3, 4, 5];
var sum = nums.reduce(function(prev, cur, index, arr) {
    console.log("prev", prev); //1 3 6 10
    console.log("cur", cur); // 2 3 4 5 
    return prev + cur;
})
sum; //15

產生新數組的迭代器方法
1. map
2. filter

map: 相似forEach，對數組的每一個元素使用某個函數，並返回新數組

var arr = [1, 2, 3];
 var arr2 = arr.map(function(value, index){
    return (value * value);
 })
 arr2; //[1, 4, 9]
 arr;  //[1, 2, 3]

filter: 和every類似，傳入一個返回值爲布爾類型的函數。和every不一樣的是，對數組中的全部元素應用改函數，將返回返回爲true的元素，添加新數組，返回新數組

var arr = [1, 2, 3];
 var arr2 = arr.filter(function(value){
    return value % 2 == 0;
 })
 arr2; //[2]
 arr;  //[1, 2, 3]

3.8 $.each() 和 forEach 參數區別，如何跳出循環？

$.each 是 jQuery的方法,forEach 是js 數組原生方法 ,
value 和 index 順序是反的，很氣！每次都要百度！

$.each 用return false
forEach 沒法在全部元素都傳遞給調用的函數以前終止遍歷，沒有辦法停止 forEach 循環。若是要停止，可以使用 Array.every 或Array.some，或 try catch

$.each([1,2,3,4], function(index, value ){
      if( value == 3) {
          return false;  
      }
      console.log( value ); //1 2 3
  })
 
  
    var flag = true;
    [1,2,3,4].forEach(function(value, index) {
        if( value != 3 && flag) {
            console.log(value);
        }
        else {
            flag = false;
        }
    })
    
    try {
        [1,2,3].forEach(function(i) {
            if(i === 2) throw new Error();
            console.log(i);
        });
    } catch(e) {
    }
    
    
    [1,2,3].some(function(i) {
        if(i == 2) return true;
        console.log(i);
    });

4. 參考

類數組對象
slice原理
forEach如何跳出循環