javascript高級編程-Array引用類型用法總結

引用類型-Array類型

引用類型是一種數據結構，用於將數據和功能聯繫起來。

建立對象的方式：

1.new操做符

var array=new Array();

2.字面量表示法建立

var array=[];

Array

1. 檢測數組:檢測數組是基本類型仍是引用類型

2. 轉換方法:將數組轉換成字符串或數組對象

3. 棧方法:後進先出的操做數組的方法

4. 隊列方法:先進先出的操做數組的方法

5. 操做方法:數組的拼接、截取、插入、刪除、替換

6. 位置方法:查找數組項、返回索引值

7. 迭代方法:對每一個數組項進行操做的方法

8. 縮小方法:操做數組的每一項，構建最終的返回值

1 檢測數組

檢測數組的方法；instanceof操做符的問題是當開發環境引入多個框架存在多個全局環境的時候，會出現不一樣的Array構造函數，進而出現不一樣的結果。

Array.isArray()這個方法很好的解決了這個問題。

• arrName instanceof Array

  `var array=[1,2,3];`
  `console.log(array instanceof Array) //true`

• Array.isArray(arrName)

  `console.log(Array.isArray(array)) //true`

2 轉換方法

• toString()：返回以逗號分隔拼接而成的字符串

• valueOf()：返回對象

• toLocaleString()：區別很小，若是是數組調用這個方法，那麼數組的每一項都會調用這個方法

• alert(value)==alert(value.toString())

  `var array=[1,2,3];`
  `var arrayToString=array.toString();`
  `var arrayValueOf=array.valueOf();`
  `var arrayToLocalString=array.toLocaleString();`
  `console.log(arrayToString);//    1,2,3`
  `console.log(arrayValueOf);//[1, 2, 3]`
  `console.log(arrayToLocalString);//1,2,3`

3 棧方法 (LIFO:last in first out)

ES數組相似於數據結構的方法
棧是一種限制插入和刪除項的數據結構

• push()：接收任意數量的參數添加至數組尾部，返回數組長度值

• pop():從數組末尾移除最後一項，減小數組的length值，返回該數組被刪除的最後一項

4 隊列方法 (FIFO:first in first out)

結合push()和shift()方法能夠實現像隊列同樣使用數組
使用unshift()和pop()能夠從相反的方向模擬隊列

• shift()移除並返回該數組的第一項；

• unshift()從數組前端添加任意個參數，並返回新數組的長度

5 操做方法

• concat()複製原數組鏈接新數組造成新副本；

  `var arr1=['q','w','e'];`
  `var arr2=['h','u','o'];`
  `document.write(arr1.concat(arr2)); //q,w,e,h,u,o`

• slice() 有一個參數時，複製參數爲起始位置到末尾的副本；有兩個參數時，複製兩個數字中間部分的數組項；若是參數是負數，複製用數組的長度加上負數值獲得的兩個參數之間的數組項;

  `var arr3=['h','e','l','l','o'];`
  `console.log(arr3.slice(1));//e,l,l,o`
  `console.log(arr3.slice(-4));//e,l,l,o`
  `arr3.slice(-4)===arr3.slice(1);//true`

• splice() 三個參數:分別對應起始位置，刪除項的個數，替換項;經過對這三個參數的合理運用能夠實現刪除、插入、替換等操做。

//從第一項開始刪除兩項
var splice_arr1=['h','e','l','l','o'];
console.log(splice_arr1.splice(1,2))//返回的是被刪除的項組成的數組["e", "l"]

//從第二項後插入三項old
var splice_arr2=['h','e','l','l','o'];
var removed=splice_arr2.splice(2,0,"K","K");
console.log(splice_arr2);//["h", "e", "K", "K", "l", "l", "o"]              
console.log(removed)//返回的是一個空數組

//替換
   var removed=splice_arr3.splice(2,2,"P","P");
console.log(splice_arr3);//["h", "e", "P", "P", "o"]
console.log(removed)//返回的是被替換的值["l", "l"] `

6 位置方法

返回索引值

• indexOf() 從前日後找

• lastIndexOf() 從後往前找

var index_arr=['h','e','l','l','o'];
        var indexOf_arr=index_arr.indexOf('l');
        console.log('原數組:',index_arr)//原數組不變
        console.log('返回值:',indexOf_arr)//返回值是第一個查到位置的索引值2

        var index_arr2=['h','e','l','l','o'];
        var indexOf_arr2=index_arr2.lastIndexOf('l');
        console.log('原數組:',index_arr2)//原數組不變
        console.log('返回值:',indexOf_arr2)//返回值是第一個查到位置的索引值3

7 迭代方法

接收兩個參數，一個是函數，另外一個是運行該函數的做用域對象。
第一個參數函數接收三個參數 數組項的值 item，值的位置 idnex ，數組自己 array

• every() //都是返回true則返回true

  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
          var everyArr=numbers.every(function(it, index ,arr){
              if(it>9){
                  return true;
              }
          })
          console.log(everyArr);///false

• some()//有一個返回true，則返回true

  var someArr=numbers.some(function(it, index ,arr){
                  return (it > 9) ;
          })
          console.log(someArr);///true

• forEach()//沒有返回值

  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
          var forEachArr=numbers.forEach(function(it, index ,arr){
              var it=it*100;
              console.log(it)
          })
          //無返回值

• filter()//返回該函數會返回true的項組成的數組，用於過濾

  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
  var filterArr=numbers.filter(function(it, index ,arr){
   if(it>10){
          return it;
   }

  })

  console.log(filterArr);//[65, 33, 21, 23]
  //返回返回值組成的新數組

• map()//返回每一個函數的返回值

  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];

  var mapArray=numbers.map(function(it, index ,arr){
      var it=it*100;
      return it;
  })
  console.log(mapArray)
  //[100, 200, 300, 400, 500, 600, 700, 800, 900, 0, 900, 800, 700, 6500, 500, 400, 3300, 2100, 100, 100, 2300, 300, 400]
  //返回返回值組成的新數組

8 縮小方法

• reduce()

  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
      var allArray=numbers.reduce(function(prev,cur,index,arr){
          return (prev+cur);
      })
      console.log(allArray);//229

• reduceRight()
  var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];

  var allArrayRight=numbers.reduceRight(function(prev,cur,index,arr){
      return (prev+cur);
  })
  console.log(allArrayRight);//229

總結：通過此次總結和練習，以爲本身在之後再次遇到操做數組應該不會再感到懼怕了；本身的工做中用的最多的是split()這個字符串截取的操做方法，這個方法雖然是字符串的方法可是很好用。這種總結方式，效果挺好，就是效率稍微低一點，這點咋解決啊，是個問題。。。