JavaScript經常使用數組方法

時間 2019-11-09

標籤 javascript 經常使用數組方法欄目 JavaScript 简体版

原文原文鏈接

JavaScript數組方法有如下這些：web

forEach() 方法對數組的每個元素執行一次提供的函數。json

map() 方法建立一個新數組，其結果是該數組都執行一次函數，原函數保持不變。數組

filter() 方法使指定函數測試數組的每個元素，並放回一個經過元素的新數組。函數

some() 方法測試該數組有元素經過了指定函數的測試，若是有返回true，不然，返回false。測試

every() 方法測試該數組是否所有經過指定函數測試，所有經過返回true，不然，返回false。this

Array.of() 方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。spa

Array.isArray() 方法適用於肯定傳遞的值是否爲Arrayprototype

slice() 方法將數組的一部分淺拷貝，返回到從開始到結束（不包括結束）選擇的新數組對象。原始數組不會被修改。code

splice() 方法經過刪除現有元素或添加新元素來更改數組的內容，第一個參數索引位置，第二個參數刪除的個數，第三個參數添加新內容orm

find() 方法返回數組中知足提供的測試函數的第一個元素的值。

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

findIndex()方法返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1。

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

indexOf()方法返回在數組中能夠找到給定元素的第一個索引，若是不存在，則返回-1。

語法： arr.indexOf(searchElement)

arr.indexOf(searchElement[, fromIndex = 0])

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最後一個的索引，若是不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。

語法： arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

includes() 方法用來判斷當前數組是否包含某指定的值，若是是，則返回 true，不然返回 false。

語法： arr.includes(searchElement)

arr.includes(searchElement, fromIndex)

forEach 遍歷數組

1

2

3

4

5

 
      var  
      arr = [ 
      "a" 
      ,  
      "b" 
      ,  
      "c" 
      ]; 
     
      arr.forEach( 
      function 
      (element,index) { 
     
      console.log(element,index);       
     
      });

map 返回新數組，爲當前元素加字符串m

 
      var  
      arr = [ 
      "a" 
      ,  
      "b" 
      ,  
      "c" 
      ]; 
     
      arr.map( 
      function 
      (element,index) { 
     
      return  
      element +=  
      "m" 
      ; 
     
      }); 
     
      // 將給定數組的元素轉成整數 
     
      [ 
      "1" 
      ,  
      "2" 
      ,  
      "3" 
      ].map(parseInt);          
      // [1, NaN, NaN] 
     
      // 等價於 
     
      [ 
      "1" 
      ,  
      "2" 
      ,  
      "3" 
      ].map( 
      function 
      (value,index,array){ 
     
      return  
      parseInt(value,index); 
     
      }); 
     
      parseInt(3,1);                          
      // NaN   parseInt(string, radix) 函數將給定的字符串以指定基數解析成爲整數。

 1 var arr = ["郭靖","黃蓉","洪七公","黃藥師","歐陽鋒","楊康","穆念慈"];
 2 
 3 function arrayToJson(arr){
 4     var narr = null,
 5         json=null;
 6 
 7     narr = arr.map(function(currentValue,index){
 8              
 9         return "\""+index+"\":\""+currentValue+"\"";10 
11     });
12 
13     json = "{"+narr.join(",")+"}";
14     return JSON.parse(json);
15 }  //{0: "郭靖", 1: "黃蓉", 2: "洪七公", 3: "黃藥師", 4: "歐陽鋒", 5: "楊康", 6: "穆念慈"}

filter 返回大於10的元素

1

2

3

4

5

6

7

 
      // 12, 130, 44 
     
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.filter( 
      function 
      (value){ 
     
      return  
      value>10 
     
      }); 
     
      // 等價於 
     
      arr.filter((value)=>value>10);

some 判斷當前數組有元素大於10的元素

1

2

3

4

 
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.some( 
      function 
      (value){                   
      // true 
     
      return  
      value>10 
     
      });

every 判斷當前數組全部元素是否都大於10

1

2

3

4

 
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.every( 
      function 
      (value){                  
      // false 
     
      return  
      value>10 
     
      });

建立數組

Array.of() 方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。

 
      Array.of(3);                     
      // [7] 
     
      Array(3);                        
      // Array(3) 建立一個包含 3 個 undefined 元素的數組 
     
      if 
      (!Array.of){ 
     
      Array.of =  
      function 
      (){ 
     
      return  
      Array.prototype.slice.call(arguments); 
     
      } 
     
      }

判斷是否數組

Array.isArray() 方法適用於肯定傳遞的值是否爲Array

 
      Array.isArray([]);                       
      // true 
     
      Array.isArray( 
      new  
      Array());              
      // true 
     
      Array.isArray(Array.prototype);          
      // true 
     
      Array.isArray(Array.of(undefined));      
      // true 
     
      Array.isArray( 
      null 
      );                     
      // false 
     
      Array.isArray(undefined);                
      // false 
     
      if 
      (!Array.isArray){ 
     
      Array.isArray =  
      function 
      (){    
     
      return  
      Object.prototype.toString.call(arguments) ===  
      "[object Array]" 
      ; 
     
      } 
     
      }

slice() 方法將數組的一部分淺拷貝，返回到從開始到結束（不包括結束）選擇的新數組對象。原始數組不會被修改。

1

2

3

4

5

 
      var  
      arr = [ 
      "zero" 
      ,  
      "one" 
      ,  
      "two" 
      ,  
      "three" 
      ]; 
     
 
      var  
      sliced = arr.slice(1,3); 
     

         
     
 
      console.log(arr);                 
      //  ["zero", "one", "two", "three"] 
     
 
      console.log(sliced);              
      //  ["one", "two"] 
     

splice() 方法經過刪除現有元素或添加新元素來更改數組的內容，第一個參數索引位置，第二個參數刪除的個數，第三個參數添加新內容

 
      var  
      arr = [ 
      "aaa" 
      , 
      "bbb" 
      , 
      "ccc" 
      ]; 
     
      // 在索引1的位置添加一個新元素ddd 
     
      arr.splice(1,0, 
      "ddd" 
      );         
      // ["aaa", "ddd", "bbb", "ccc"] 
     
      // 在索引2的位置刪除一個元素 
     
      arr.splice(2,1);               
      // ["aaa", "ddd", "ccc"] 
     
      // 在索引1的位置刪除一個元素並添加兩個元素 
     
      arr.splice(1,1, 
      "eee" 
      , 
      "fff" 
      );   
      // ["aaa", "eee", "fff", "ccc"]

例1、find()方法查找數組中第一個大於等於15的元素

1

2

3

4

 
      var  
      num = [10,3,5,15,100,1].find( 
      function 
      (elem, index){     
     
      return  
      elem>=15; 
     
      }); 
     
      console.log(num)      
      // 15

例2、findIndex() 查找數組中第一個大於等於15的元素的位置（索引）

1

2

3

4

 
      var  
      num = [10,3,5,15,100,1].findIndex( 
      function 
      (elem, index){     
      // 15 
     
      return  
      elem>=15; 
     
      }); 
     
      console.log(num)      
      // 3

例3、indexOf () 查找5所在的位置，默認索引位置從零開始

1

2

3

 
      [0,1,2,3,4,5,6].indexOf(5);     
      // 5    從索引0的位置日後查找 
     
      [0,1,2,3,4,5,6].indexOf(5,5);   
      // 5 
     
      [0,1,2,3,4,5,6].indexOf(5,10);  
      // -1   從索引10的位置日後查找

例4、lastIndexOf() 查找5所在的位置，默認索引位置當前數組長度減一

1

2

3

4

 
      [0,1,2,3,4,5,6].lastIndexOf(5);        
      // 5   從索引位置數組長度減一貫前查找 
     
      [0,1,2,3,4,5,6].lastIndexOf(5, 6);     
      // 5 
     
      [0,1,2,3,4,5,6].lastIndexOf(5, 10);    
      // 5 
     
      [0,1,2,3,4,5,6].lastIndexOf(5, 1);     
      // -1   從索引1的位置向前查找

例5、includes

1

2

3

 
      [0,1,2,3,4,5,6].includes(5);                  
      // true     從索引0位置日後查找是否存在5元素，是 
     
      [0,1,2,3,4,5,6].includes(10);                 
      // false 
     
      [0,1,2,3,4,5,6].includes(5,10);               
      // false    從索引10位置日後查找是否存在10元素，否

forEach() 方法對數組的每個元素執行一次提供的函數。

map() 方法建立一個新數組，其結果是該數組都執行一次函數，原函數保持不變。

filter() 方法使指定函數測試數組的每個元素，並放回一個經過元素的新數組。

some() 方法測試該數組有元素經過了指定函數的測試，若是有返回true，不然，返回false。

every() 方法測試該數組是否所有經過指定函數測試，所有經過返回true，不然，返回false。

forEach 遍歷數組

1

2

3

4

5

 
      var  
      arr = [ 
      "a" 
      ,  
      "b" 
      ,  
      "c" 
      ]; 
     
      arr.forEach( 
      function 
      (element,index) { 
     
      console.log(element,index);       
     
      });

map 返回新數組，爲當前元素加字符串m

 
      var  
      arr = [ 
      "a" 
      ,  
      "b" 
      ,  
      "c" 
      ]; 
     
      arr.map( 
      function 
      (element,index) { 
     
      return  
      element +=  
      "m" 
      ; 
     
      }); 
     
      // 將給定數組的元素轉成整數 
     
      [ 
      "1" 
      ,  
      "2" 
      ,  
      "3" 
      ].map(parseInt);          
      // [1, NaN, NaN] 
     
      // 等價於 
     
      [ 
      "1" 
      ,  
      "2" 
      ,  
      "3" 
      ].map( 
      function 
      (value,index,array){ 
     
      return  
      parseInt(value,index); 
     
      }); 
     
      parseInt(3,1);                          
      // NaN   parseInt(string, radix) 函數將給定的字符串以指定基數解析成爲整數。

filter 返回大於10的元素

1

2

3

4

5

6

7

 
      // 12, 130, 44 
     
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.filter( 
      function 
      (value){ 
     
      return  
      value>10 
     
      }); 
     
      // 等價於 
     
      arr.filter((value)=>value>10);

some 判斷當前數組有元素大於10的元素

1

2

3

4

 
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.some( 
      function 
      (value){                   
      // true 
     
      return  
      value>10 
     
      });

every 判斷當前數組全部元素是否都大於10

1

2

3

4

 
      var  
      arr = [12, 5, 8, 130, 44]; 
     
      arr.every( 
      function 
      (value){                  
      // false 
     
      return  
      value>10 
     
      });