js數組操作方法以及es6新增方法

數組在javaScript中是一個引用值，下面列舉在學習中遇到的一些數據常用方法

1. 改變原數組
    push(), pop(), shift(), unshift(), sort(), reverse(), splice()
 
2. 不改變原數組
    concat(), join(), split(), toSting(), slice()

下面就一一介紹這些方法的使用

1. push

push就是從數組的最后面加入新的元素

 var arr = [1,2,3,4];
 
  arr.push(5);
 
  console.log(arr);//[1,2,3,4,5]

2. pop

pop與push相反是刪除數組中的最后一個元素,可以聯想到內存中壓棧(push),出棧(pop)

var arr = [1,2,3,4];
 
arr.pop();
 
console.log(arr);//[1,2,3]

3.shift

shift 從數組的第一位開始刪除元素

var arr = [1,2,3,4];
 
arr.shift();
 
console.log(arr);[2,3,4]

4. unshift

在數組的第一位之前加入元素

var arr = [1,2,3,4];
 
arr.unshift(0);
 
console.log(arr);//[0,1,2,3,4]

5. sort

sort可以將無序數組進行排序,sort()的默認排序是按照 ** ASCII升序** 進行排序的,但是系統內部提供了一個接口可以讓** 用戶自定義排序 **

  //默認排序 升序
  var num = [10,0,2,9,"a","A","z","T","你"];
 
  var hadSort  = num.sort();
 
  console.log(hadSort);//[0, 10, 2, 9, "A", "T", "a", "z", "你"];
 
  //設置倒序輸出
  var hadSort = num.sort().reverse();
 
  console.log(hadSort);//["你", "z", "a", "T", "A", 9, 2, 10, 0]
 

用戶自定義排序:

1. 必須有兩個參數
2. 看返回值
   1. 當返回值為負數的時候,那么前面的數放在前面
   2. 返回值為正數的時候,后面的數移動到前面去
   3. 返回值為0不動

var arr = [5,8,1,5,2,7,4,1,3];
 
  var newArr = arr.sort(function(a, b){
 
    if(a - b > 0){
 
      return 1;
 
    }else if(a - b < 0){
 
      return -1;
 
    }else{
 
      return 0;
 
    }
 
  })
  console.log(newArr) //[1, 1, 2, 3, 4, 5, 5, 7, 8]
 
  //觀察上面式子其實可以簡單書寫
  //因為無論a-b如何比較,都是返回a-b的值那么函數可以改寫
 
  var newArr = arr.sort(function(a, b){
    return a - b;
  })
 
  // 當然如果是要降序的話可以使用 reverse()方法,或者return b -a

給一個數組隨機亂序排列

var arr = [1,4,7,8,5,2]
 
arr.sort(function(a, b){
 
  return Math.random()-0.5;//返回的是-0.5 ---- 0.5之間的數
 
})

6. reverse

就是倒置數組，將數組內容倒置輸出

var arr = [1,2,3,4,5]
 
console.log(arr.reverse()); //[5, 4, 3, 2, 1]

7.splice

splice("第幾位開始(-1是倒着數的第一位(不是倒着數的第0位))","截取多少長度(可以為0)","在切口處添加新的數據")

var arr = [2,5,4,2,5];
 
var newArr1 = arr.splice(2,3,5,0,0,0,0,0);
 
console.log(arr); //[2, 5, 5, 0, 0, 0, 0, 0]
 
console.log(newArr1);//[4, 2, 5]; //這類似於剪切,返回了剪切的值
 
var arr = [2,5,4,2,5];
 
var newArr2 = arr.splice(-1,0,"你好");
 
console.log(arr); //[2, 5, 4, 2, "你好", 5]
 
console.log(newArr2);//[]

concat

連接兩個數組

var arr1 = [1,2,3];
 
var arr2 = [4,5,6];
 
var newArr = arr1.concat(arr2);
 
console.log(newArr)//[1, 2, 3, 4, 5, 6]
 
console.log(arr1)//[1,2,3] 原數組沒有改變
 
其實連接兩個數組有很多方法:
  1. call/apply 改變this指向
  var arr1 = [1,2,3];
 
  var arr2 = [4,5,6];
 
  var newArr = Array.apply(arr1,[arr2,arr1]).join(",").split("-");
 
  console.log(newArr)//[4,5,6,1,2,3]
 
  var newArr2 = Array.call(arr1,arr1,arr2).join(",").split("-");
 
  console.log(newArr2)//[1,2,3,4,5,6]
 
  2. 使用es6語法 ...擴展運算符
  let arr1 = [1,2,3]
 
  let arr2 = [4,5,6]
 
  let arr = [...arr1,...arr2]

8.join

返回一個字符串

  var arr = ["加","油","不","放","棄"];
 
  console.log(arr.join("-")); "加-油-不-放-棄"

9. split

split() 方法用於把一個字符串分割成字符串數組

var arr = ["加","油","不","放","棄"];
 
console.log(arr.join("-")); "加-油-不-放-棄"
 
var newArr = arr.join("-");
 
console.log(newArr.split());//["加-油-不-放-棄"]
 
console.log(newArr.split(""));//["加", "-", "油", "-", "不", "-", "放", "-", "棄"]
 
console.log(newArr.split("-"))//["加", "油", "不", "放", "棄"]

10.toString

toString() 方法可把一個邏輯值轉換為字符串，並返回結果

  var arr = [1,2,3,4,5];
 
  var str = arr.toString();
 
  console.log(str)//1,2,3,4,5
 
  typeof(str); //String

11.slice

截取字符串 slice("從該位開始截取(包含)","截取到該位(改位不截取,不包含)"),一個參數,從第n位開始一直到列表的最后的一位,規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推。不能整個截取

var arr = [1,2,3,4,5,6];
 
var newArr = arr.slice(2,4);
 
console.log(arr);//[1, 2, 3, 4, 5, 6];
 
console.log(newArr);//[3, 4];
 
var newArr1 = arr.slice(-1);

ES6新增方法

map() 映射, reduce()匯總, filter()過濾, forEach()迭代

1. map

1.
  var arr = [4,5,8,6];
  
  var newArr= arr.map((item)=>{
  
    return item
    
  })
  console.log(newArr)//[4, 5, 8, 6]
2.
  var arr = [88,70,14,55,78,99];
  
  var newArr = arr.map((item)=>{
  
    if(item>60){
    
      return "及格";
      
    }else{
    
      return "不及格";
      
    }
  })
  console.log(newArr);//["及格", "及格", "不及格", "不及格", "及格", "及格"]
3.
  var arr = [1,2,3,4,5,6]
  
  var newArr = arr.map((item)=>{
  
  return item*2;
})
  相當於=>
  var arr = [1,2,3,4,5,6]
  
  function fx(x){
  
    return x*x
}
 var newArr = arr.map(fx);
 
 console.log(newArr) //[1, 4, 9, 16, 25, 36]

2. filter

添加過濾條件得到想要的

var num = [1,88,2,9,2,7,7];
 
        var result = num.filter((item)=>{
      
            if(item%2==0){
        
                return item;
        
            }
        })
  console.log(result)//[88,2,2]

3.forEach

forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。注意: forEach() 對於空數組是不會執行回調函數的

var books = ["亂世佳人","飄","傲慢與偏見","老人與海"];
 
var index1 = [];
 
var items = [];
 
var bookList = books.forEach((item,index)=>{
  
      items.push(item);
      
      index1.push(index);
 
  })
  console.log(items);["亂世佳人", "飄", "傲慢與偏見", "老人與海"]
  
  console.log(index1);[0, 1, 2, 3]

4.reduce

• reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
• reduce() 可以作為一個高階函數，用於函數的 compose。

• 注意: reduce() 對於空數組是不會執行回調函數的。

• arr.reduce(callback,[initialValue])
• • callback （執行數組中每個值的函數，包含四個參數）
    • previousValue （第一項的值或者上一次疊加的結果值，或者是提供的初始值（initialValue））
    • currentValue （數組中當前被處理的元素）
    • index （當前元素在數組中的索引）
    • array （數組本身）
  • initialValue （作為第一次調用 callback 的第一個參數，可以控制返回值的格式）

•  var arr = [1,2,3,4];
   
   var result = arr.reduce((pre,item,index,array)=>{
     
     console.log(pre,item,index);
     
     return pre + item;
   })
   console.log(result);
   //1 2 1
   //3 3 2
   //6 4 3
   //10
   
   
   如果有個初始值,第一次調用callback的參數存在
   var arr = [1,2,3,4];
   
   var result = arr.reduce((pre,item,index,array)=>{
     
     return pre + item;
     
   },100)
   console.log(result); //110