ES6的數組方法

longmon 發布于2019-08-20 18:54 / 1136人閱讀

摘要：方法接收一個函數作為累加器數組中的每個值從左到右開始合并最終為一個值執行數組中每個值的函數也可以叫做包含個參數上一次調用回調返回的值或者是提供的初始值數組中當前被處理的元素當前元素在數組中的索引調用的數組作為第一次調用的第一個參數這個參數不

reduce()

1.reduce()方法接收一個函數作為累加器(accumulator),數組中的每個值(從左到右)開始合并,最終為一個值.
array.reduce(callback, initialValue)
2.callback:執行數組中每個值的函數(也可以叫做reducer),包含4個參數.

1.previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2.currentValue:數組中當前被處理的元素
3.index:當前元素在數組中的索引
4.array:調用reduce的數組

initialValue:作為第一次調用callback的第一個參數,這個參數不是必需的.

var s = a.reduce((prev, current) => {
    return prev + current;  // 1 + 2, 3+ 3
}, 10);
console.log(s);

var todos = [{
    id: 1,
    completed: true
}, {
    id: 2,
    completed: false
}, {
    id: 3,
    completed: true
}, {
    id: 4,
    completed: true
}, {
    id: 5,
    compelted: false
}];

const completedCount = todos.reduce((count, current) => {
    return current.completed ? count + 1 : count
}, 0);
console.log(completedCount);    // 3

const unCompleted = todos.reduce((count, current) => {
    return !current.completed ? count + 1 : count;
}, 0);
console.log(unCompleted);   // 2

var count = 0;
todos.map((item) => {
    if (item.completed) {
        count++;
    }
});
console.log(count); // 3

filter()

1.filter()方法使用指定的函數測試所有元素,并創建一個包含所有通過測試的元素的新數組.
array.filter(callback, thisArg)
2.callback:用來測試數組的每個元素的函數,包含三個參數.
返回true表示保留該元素(通過測試),返回false則不保留.
currentValue:數組中當前被傳遞的元素.

var a = [1, 2, 3, 4, 5];

var b = a.filter((item) => {
    return item > 3;
});

console.log(b);

var todos = [{
    id: 1,
    completed: true
}, {
    id: 2,
    completed: false
}, {
    id: 3,
    completed: true
}, {
    id: 4,
    completed: true
}, {
    id: 5,
    compelted: false
}];

var completedTodos = todos.filter((item) => {
    return item.completed;
});

console.log(completedTodos);

map()

1.map()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組.
array.map(callback, thisArg)
callback:原數組中的元素調用該方法后返回一個新的元素.
currentValue:數組中當前被傳遞的元素.

var a = [1, 2, 3, 4, 5];

var b = a.filter((item) => {
    return item > 3;
});
console.log(b); // [4 ,5]

var bb = [];
a.map((item) => {
    if (item > 3) {
        bb.push(item);
    }
});
console.log(bb);    // [4, 5]

var bbb = a.map((item) => {
    return item + 1;
});
console.log(bbb);   // [2, 3, 4, 5, 6]

every()

1.every()方法用于測試數組中所有元素是否都通過了指定函數的測試.
array.every(callback, thisArg);

var a = [1, 2, 3, 4, 5];
var b = a.every((item) => {
    return item > 0;
});
var c = a.every((item) => {
    return item > 1;
});
console.log(b); // true
console.log(c); // false

some()

1.some()方法用于測試數組中是否至少有一項元素通過了指定函數的測試.
array.some(callback, thisArg);

var bb = a.some((item) => {
    return item > 4;
});

var cc = a.some((item) => {
    return item > 5;
});
console.log(bb);    // true
console.log(cc);    // false

forEach()

1.forEach()為每個元素執行對應的方法.

var a = [1, 2, 3, 4, 5];

var b = [];
a.forEach((item) => {
    b.push(item + 1);
});
console.log(b); // [2,3,4,5,6]

indexOf()

1.indexOf()方法返回在該數組中第一個找到的元素位置,如果它不存在則返回-1.

 var a = [1, 2, 3, 4, 5];

var b = a.indexOf(2);
var c = a.indexOf(6);
console.log(b); // 1
console.log(c); // -1

展開運算符

1.展開運算符允許一個表達式在某處展開.常用的場景包括:函數參數,數組元素,解構賦值.
另外,jsx的組件props也可以使用展開運算符來賦值.
2.解構賦值(destructuring assignment)語法是一個js表達式,
它使得從數組或對象中提取數據賦值給不同的變量變為可能.

var a = [1, 2, 3, 4, 5];

var [b, c] = a;
console.log(b); // 1
console.log(c); // 2

function fun(...a) {
    console.log(a); // [1, 2, 3]
}
fun(1, 2, 3);   // 傳入1,2,3參數,...a為數組[1,2,3]

function gun({a, b}) {
    return a + b;
}
console.log(gun({ a: 1, b: 2 }));   // 3

GPU云服務器云服務器判斷數組的方法定義數組的方法 php操縱數組的方法 php數組排序的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84864.html

ES6核心特性

摘要：報錯不報此外還有個好處就是簡化回調函數正常函數寫法箭頭函數寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據二八法則，我們應該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關注！本文首發地址GitHub博客（...

loostudy 2019-08-23 13:41 評論0 收藏0
ES6核心特性

摘要：報錯不報此外還有個好處就是簡化回調函數正常函數寫法箭頭函數寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據二八法則，我們應該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關注！本文首發地址GitHub博客（...

_DangJin 2019-08-02 12:07 評論0 收藏0
你該知道的ES6那些事兒

摘要：最近重構了一個項目，引入了部分用法，最大的感受是讓這門語言變得更加嚴謹，更加方便。通過該方法獲得位置后還得比較一次才能判斷是否存在。再來看看的寫法使用數組來初始化一個，構造器能確保不重復地使用這些值。下面提供鏈接，供有興趣的朋友參考。最近重構了一個SPA項目，引入了部分ES6用法，最大的感受是ES6讓javascript這門語言變得更加嚴謹，更加方便。本篇將結合實戰經驗，對最常用的部...

CoffeX 2019-08-22 18:42 評論0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》本篇文章是對之前文章...

hidogs 2019-08-23 14:07 評論0 收藏0
ES6：數組

摘要：中的方法遍歷一下數組中的每個選項返回一個新的數組。還可以接受第二個參數，作用類似與數組的方法，用于對每個元素進行處理。這個方式是用于將一組值，轉換為數組。可選到該位置前停止讀取數據，默認等于數組長度。如果是負數，表示倒數。 ES6中數組增加了很多新的方法，但是先回顧下之前ES5中的數組的方法。 ES5中的方法 Array.prototype.forEach 遍歷一下數組中的每個選...

lavor 2019-08-21 11:33 評論0 收藏0
ES6 舊瓶新酒

摘要：本文是系列的第二篇，前一篇走馬觀花概要介紹了，這一篇標題之所以叫舊瓶新酒，是想介紹那些原來就被廣泛使用的對象，例如，對這些對象擴展了一些很有用的新方法。用于監聽取消監聽數組的變化，指定回調函數。在中已被建議撤銷。本文是 ES6 系列的第二篇，前一篇《ES6 走馬觀花》概要介紹了ES6，這一篇標題之所以叫舊瓶新酒，是想介紹那些原來就被廣泛使用的JS對象，例如String、Array，E...

未東興 2019-08-21 10:48 評論0 收藏0