JavaScript Array對象之ES五、ES6新增方法

上一篇我寫了Array數組對象的一些基本方法，此次總結些關於ES五、ES6新增的數組對象的方法。

1、ES5新增數組方法（IE9+支持）

1.1索引方法

indexOf():返回要查找數值在數組中的索引值，從前日後查找，找不到返回-1
lastIndexOf():從後面往前找，但索引值不變。
語法格式: indexOf / lastIndexOf(要查找的項,查找起點索引)。

            var a = [2, 9, 5,44,88,9,32];
            console.log(a.indexOf(2)); // 0
            console.log(a.indexOf(7)); // -1
            console.log(a.lastIndexOf(2));//0
            console.log(a.lastIndexOf(7));//-1
            console.log(a.lastIndexOf(9,3));//1
            console.log(a.lastIndexOf(9,5));//5

1.2數組迭代方法

ECMAScript 5 爲數組定義了 5 個迭代方法。每一個方法都接收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的做用域對象——影響 this 的值。
　　傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置、數組對象自己。

1.2.1 forEach(fn)：用於替代for循環，比for循環簡便，但不能隨意退出，不能使用break。此方法沒有返回值。

            const items = ['item1', 'item2', 'item3'];
            const copy = [];    
            items.forEach(function(item){
              copy.push(item)
            });
            console.log(copy);//["item1", "item2", "item3"]        

1.2.3 map(fn):返回的是一個數量相等的新數組，返回的內容是什麼取決於在fn中返回的值。

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
console.log(doubles);// [2, 10, 20, 30]

1.2.3 filter(fn): 獲得執行fn後返回時true對應的數組元素組成的數組，利用這個方法對數組元素進行篩選。

        var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

        var longWords = words.filter(function(word){
          return word.length > 6;
        });
        
        console.log(longWords);//["exuberant", "destruction", "present"]

1.2.4 some(fn):若是該函數對任何一項返回ture,則返回ture。-->用於判斷數組是否存在某個屬性值/對象等（indexOf有侷限性）

        var aa=[2,5,8,4];
        var  bb=[11,3,6,8];
        var cc=aa.some(function(item){
            return item >10;
        });
        var dd=bb.some(function(item){
            return item >10;
        })
        console.log(cc);//false
        console.log(dd);//true

1.2.5 every(fn):執行函數時，全部元素都返回ture,則返回ture。

        var aa=[2,5,8,4];
        var  bb=[11,3,6,8];
        var cc=aa.every(function(item){
            return item <10;
        });
        var dd=bb.every(function(item){
            return item <10;
        })
        console.log(cc);//true
        console.log(dd);//false

2、ES6新增新操做數組的方法

2.1  find();傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，而且終止搜索。

      findIndex();傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它的下標，終止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

const arr1 = [1, "2", 3, 3, "2"]
console.log(arr1.findIndex(n => typeof n === "number")) // 0

2.2 fill();

用新元素替換掉數組內的元素，能夠指定替換下標範圍。

格式：arr.fill(value, start, end)

 

const arr2=[1,2,3,4];
console.log(arr2.fill(5));//[5, 5, 5, 5]，默認全部元素替換
const arr3=[1,2,3,4];
console.log(arr3.fill(6,1,5));//[1, 6, 6, 6],新元素6替換在索引值爲1到5之間的全部元素

2.3 copyWithin()

選擇數組的某個下標，從該位置開始複製數組元素，默認從0開始複製。也能夠指定要複製的元素範圍。

格式：arr.copyWithin(被替換的起始位置,選取替換值的起始位置,選取替換值的結束位置)

let arr4 = [1, 'c', 'd', 'a', 'b'];  
console.log(arr4.copyWithin(0, 3, 5))   // ["a", "b", "d", "a", "b"]

2.4 Array.from()

將相似數組的對象（array-like object）和可遍歷（iterable）的對象轉爲真正的數組

const bar = ["a", "b", "c"];
console.log(Array.from(bar));// ["a", "b", "c"]

2. 5 Array.of();用於將一組值，轉換爲數組

Array(3, 11, 8) // [3, 11, 8]
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

2.6 entries() 返回迭代器：返回鍵值對

//數組
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'

2.7values() 返回迭代器：返回鍵值對的value；

keys() 返回迭代器：返回鍵值對的key

const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
  console.log(v)
}
//'a' 'b' 'c'

const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
console.log(v)
}
// 0 1 2

 

2.8 includes（）

判斷數組中是否存在該元素，參數：查找的值、起始位置，能夠替換 ES5 時代的 indexOf 判斷方式。indexOf 判斷元素是否爲 NaN，會判斷錯誤。

var a = [1, 2, 3];
console.log(a.includes(2)); // true
console.log(a.includes(4)); // false