1. 程式人生 > >ES5與ES6中的陣列操作方法簡單介紹

ES5與ES6中的陣列操作方法簡單介紹

許多同學在寫javascript程式碼的時候都習慣於使用順手和常用的方法,比如說在運算元組時習慣使用for,whlie迴圈,在列舉物件時,習慣使用for in,其實在ES5和ES6出來以後,有很多新的運算元組和物件的方法,這裡我們來重點看一下一些功能強大,但又往往被我們忽視的操作方法。

先來定義一個簡單的陣列。

var arr = [1,2,3,4,5,6];

 

1.forEach()方法

forEach主要用來檢視資料內部結構,相當於for迴圈,方法的第一個引數接受一個回到函式,該回調函式又接受三個引數(正在遍歷的當前元素,該元素的下標,陣列),在forEach裡面return不會打斷迴圈,該方法會完全遍歷整個陣列的所有元素,該回調函式不會產生返回值,即使return也不會有返回值。方法的第二個引數可以修改當前回撥函式的this指向,如果不傳遞第二個引數,預設回撥函式中的this是指向window的,返回值為undefined
var
forEachArr = arr.forEach((value,index,arr) => { console.log(value); },this); console.log(forEachArr);//undefined

 

2.some()方法

some主要用來遍歷陣列,只要陣列中有一個元素滿足條件就返回true,返回值為布林值。
var someArr = arr.some((value,index) => {
    return value > 3;
});
console.log(someArr);//true

 

3.every()方法

every主要用來遍歷陣列,必須所有元素都滿足條件才返回true,否則返回false,返回值為布林值。
var everyArr = arr.every((value,index) => {
    return value > 3;
});
console.log(everyArr);//false

 

4.map()方法

map可以理解主要用來修改遍歷資料,引數形式和forEach一樣,返回值為新陣列,有可能會改變原陣列。
var mapArr = arr.map((value,index,arr) => {
    
return value + '666666'; },this); console.log(mapArr);//["1666666", "2666666", "3666666", "4666666", "5666666", "6666666"]

 

5.filter()方法

filter可以理解主要用來過濾刪除資料,根據設定的條件來過濾掉不要的元素,引數形式和forEach一樣,返回值為新陣列,有可能會改變原陣列。
var filterArr = arr.filter((value,index,arr) => {
    if(value > 2){
        return true;
    }
},this);
console.log(filterArr);//[3, 4, 5, 6]

 

6.reduce()方法

reduce主要用來統計計算資料,第一個引數是一個回撥函式,這個回撥函式的第一個引數prev就等於是reduce方法的第二個引數,這裡是0,它的第二個引數可以是任意型別,如果不傳這個第二個引數,預設該回調函式會使用陣列的第一項元素作為回撥函式的第一個引數prev。返回值為計算出來的一個數據,可能是新數值也可能是新物件或者新陣列。
var reduceArr = arr.reduce((prev,value,index,arr) => {
    let sum = 0;
    sum = prev + value;
    return sum;
},0);
console.log(reduceArr);//21