JavaScript 數組(Array)方法彙總,js數組經常使用方法

數組(Array)經常使用方法;

      數組經常使用的方法：concat(),every(), filter(), forEach(),  indexOf(), join(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(),  reverse(), shift(), slice(), some(), sort(), splice(), toLocaleString(), toString(),  unshift(),其中every(),filter(),forEach(), indexOf(), lastIndexOf(),map(), reduce(), reduceRight()和some ECMAScript 5新增的方法。

1.  concat() 方法用於鏈接兩個或多個數組;  (注: 原數組不變，建立一個新的數組)。
   

   var arr1 = [1,2,3];
   var arr2 = [4,5,6];
   var arr3 = [7,8];
   arr1.concat(arr2);  // [1, 2, 3, 4, 5, 6]
   arr1.concat(arr2,arr3); //鏈接多個數組，[1, 2, 3, 4, 5, 6, 7, 8]
   arr1  // [1,2,3]

   View Code
2.  join() 方法將數組分割成字符串並鏈接在一塊兒，返回最後生成的字符串;能夠指定一個字符串分隔數組的各個元素； (注:原數組不變，建立一個新數組)。
   

   var arr = [1,2,3];
   arr.join();  // "1,2,3"  默認爲逗號
   arr.join(''); // "123"
   arr.join('|') // "1|2|3"
   arr  // [1,2,3]

   View Code
3. slice(start,end) 方法用於截取數組指定的一部分,參數start規定選取的開始位置，end規定選取的結束位置(不包含該元素); 若是隻有一個參數，則表示選取的開始位置。若是參數中出現負數,表示相對數組中最後一個元素的位置，如-1，表示倒數第一個元素，-3表示倒數第三個元素。（注:原數組不變，建立一個新數組）
   

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

   View Code
4. splice(index,howmany,item) 方法在數組中插入或者刪除元素,返回刪除的元素。參數index,表示規定添加/刪除元素的位置(索引)，使用負數可從數組結尾處規定位置；參數howmany，表示要刪除的數量,0表示不刪除元素；參數item,表示向數組添加的元素；(注: 原數組發生改變)
   

   var arr = [1,2,3,4,5,6,7,8,9]
   arr.splice(8)  // [9]  一位參數默認截取到最後
   arr  //[1, 2, 3, 4, 5, 6, 7, 8] 
   arr.splice(1,0) // [] 第二個參數爲0，不會刪除數組元素
   arr  //  [1, 2, 3, 4, 5, 6, 7, 8]
   arr.splice(-1) // [8]  起始爲負數
   arr.splice(6,0,'javaScript') // []
   arr //  [1, 2, 3, 4, 5, 6, "javaScript", 7]
   arr.splice(6,2,'Vue') // 刪除項["javaScript", 7]  替換元素
   arr  // 原數組[1, 2, 3, 4, 5, 6, "Vue"]

   View Code
5.  push()和pop() 方法  (注: 原數組發生了改變)
   push()方法在數組的尾部添加一個或者多個元素，並返回數組新的長度。
   

   var arr = ['javaScript','HTML','Css'];
   arr.push('Vue');  // 4
   arr // ["javaScript", "HTML", "Css", "Vue"]
   arr.push('Sass','Jq') // 6
   arr  // ["javaScript", "HTML", "Css", "Vue", "Sass", "Jq"] 

   View Code

   pop()方法刪除數組的最後一個元素，減小數組長度並返回刪除的值。

   var arr = ['JavaScript','Vue','React'];
   arr.pop()  // "React"
   arr  // ["JavaScript", "Vue"]

   View Code
6. shift()與unshift()方法 （注： 原數組發生了改變）
   unshift() 方法在數組的頭部添加一個或者多個元素，返回數組新的長度；
   

   var arr = [];
   arr.unshift('Vue','JavaScript');  // 2
   arr; // ["Vue", "JavaScript"]

   View Code
   shift() 方法刪除數組的第一個元素並返回刪除的值；
   

   var arr = ['JavaScript','Vue','React'];
   arr.shift();  // "JavaScript"
   arr; //["Vue", "React"]

   View Code
7. reverse() 和sort()方法 （注: 原數組發生了改變）
   reverse() 方法將數組的顛倒順序，返回逆序的數組。
   

   var arr = ['JavaScript','Vue','React']
   arr.reverse() // ["React", "Vue", "JavaScript"]
   arr  //["React", "Vue", "JavaScript"]

   View Code

   sort() 方法將數組中的數組排序並返回排序後的數組(升序排列)，sort()方法會調用每一個數組項的toString()方法轉換成字符串，而後比較獲得後的字符串，已肯定排列順序；
   (a) 若是數組裏面的內容爲字母，則以字母表的順序排列（按照字符編碼的順序進行排序）。

   var arr = ["React", "Vue", "JavaScript"];
   arr.sort(); // ["JavaScript", "React", "Vue"]

   View Code

   (b) sort(sortFun) 參數sortFun 爲一個函數

   var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
   arr.sort(); // [12, 123, 123, 44, 45, 555, 56, 678, 78, 9, 99, 999] 未傳入函數參數
   ---------------------------------------------------
   var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
   arr.sort(function(a,b){
      return a - b;           // 返回 負數，0， 正數 
   })   // [9, 12, 44, 45, 56, 78, 99, 123, 123, 555, 678, 999]

   View Code
8. toString() 和 toLocaleString() （注: 原數組不發生改變）
   toString()方法 將數組的每一個元素轉換成字符串，返回用逗號分隔開的字符串
   

   [1,2,3].toString(); //"1,2,3"
   ['JavaScript','Vue','React'].toString(); //"JavaScript,Vue,React"
   [1,['JavaScript','Vue',{'title':'標題'}],2].toString(); //  "1,JavaScript,Vue,[object Object],2"

   View Code

   toLocaleString()方法 把數組轉換爲本地字符串；

   [1,2,3].toLocaleString()  // "1,2,3"
   [new Date()].toLocaleString(); //  "2018/6/2 上午11:50:12"

   View Code

       

      ECMAScript 5定義了9個新的數組方法來遍歷、映射、過濾、檢測、簡化和搜索數組；

1. forEach(function(item,index,list){})方法  從頭至尾遍歷數組,爲每一個元素調用指定的函數； 參數function(item,index,list) {}  item,表示數組每一項的值，index,表示元素索引，list,表示爲遍歷的數組自己；
   

   var  data = [1,2,3,4,5,6];
   var sum = 0;
   data.forEach((item) => {
     sum += item;   // 求和
   });
   sum // 21
   
   // 每一個數組元素自加1
   data.forEach((item,index,list) => {
     list[index] = item + 1;  
   });
   data /// [2, 3, 4, 5, 6, 7]
   
   ------------------------------------
   // 注意： forEach() 對於空數組是不會執行回調函數的
   var data = [];
   data.forEach((item) => {
     console.log(item)    // 不執行
   })
   // 注意，非數組調用報錯
   var data = '';
   data.forEach((item) => {
   })

   View Code
2. map()方法 返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

   map() 方法按照原始數組元素順序依次處理元素。

   注意： map() 不會對空數組進行檢測。

   注意： map() 不會改變原始數組。

   var arr = [2,3,4,5,6,7,8];
   var mapArr = arr.map((item) => {
     return Math.pow(item,3);  // 返回每一項的的3次冪
   });
   mapArr  // [8, 27, 64, 125, 216, 343, 512]
   arr  // [2, 3, 4, 5, 6, 7, 8]   原數組不發生改變

   View Code
3. filter()方法 將全部在過濾函數中返回 true 的數組元素放進一個新數組中並返回。
   

   var arr = [2,4,6,8,10,15];
   // 取數組小於 6 或者 大於 12 的數
   arr.filter((item) => {
      return item < 6 || item > 12;  // [2, 4, 15]
   })
    // 取數組能整除2的數
   arr.filter((item) => {
     return item%2 == 0;  // [2, 4, 6, 8, 10]
   })

   View Code
4. every()和some()方法 （注：不改變原數組）
   every()方法  用於檢測數組全部元素是否都符合指定條件（經過函數提供）,返回值爲true or false; 當且針對數組中的全部元素調用斷定函數都返回true時，才返回true。
   

   var arr = [1,2,3,4,5,6,7,8];
   // 全部值小於10 
   arr.every((item) => {
     return item < 10;   // true  
   });
   
   arr.every((item) => {
     return item < 4; // false
   })

   View Code

   some() 方法 當數組中至少存在一個元素調用斷定函數返回true,它就返回true。
   some() 方法會依次執行數組的每一個元素：

   var arr = [2,4,6,8,10,15];
   arr.some((item) => {
     return item < 2;  // false
   })
   
   arr.some((item) => {
     return item < 4; // true
   })

   View Code
5.  reduce()和reduceRight()方法 用指定的函數將數組進行組合，最終計算爲一個值；
   reduce()接收兩個參數，第一個參數是執行簡化操做的函數(必選)，第二參數是傳遞給函數的初始值(可選)。
   

   var arr = [1,2,3,4,5,6,7,8];
   // 求和
   arr.reduce((x,y) => {
     return x + y;
   },0);
   // 求最大值
   arr.reduce((x,y) => {
      return x>y ? x : y;  // 8
   })

   View Code

   reduceRight()原理與reduce()同樣，不一樣的是reduceRight()按照數組從高到低處理數組。

   var arr = [2,3,4];
   //2^(3^4) 乘方從右到左
   arr.reduceRight((x,y) => {
      return Math.pow(y，x);  // 2.4178516392292583e+24
      //  return Math.pow(x,y);  // 4096
   })

   View Code
6. indexOf()和lastIndexOf()方法
   indexOf () 方法 用於搜索整個數組中某個字符串在數組中首次出現的位置，並返回該值在數組中的索引。 沒有找到返回-1； indexOf(),從頭至尾搜索，lastIndexOf()方法從末尾開始搜索。

   var arr = ['javaScript','Vue','React','CSS3'];
   arr.indexOf('vue') // -1
   arr.indexOf('CSS3');  // 3
   arr.lastIndexOf('CSS3'); // 3
   arr.lastIndexOf('Vue');  // 1

   View Code