ES6的數(shù)組方法

longmon 發(fā)布于2019-08-20 18:54 / 1197人閱讀

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

reduce()

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

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

initialValue:作為第一次調(diào)用callback的第一個(gè)參數(shù),這個(gè)參數(shù)不是必需的.

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()方法使用指定的函數(shù)測(cè)試所有元素,并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組.
array.filter(callback, thisArg)
2.callback:用來(lái)測(cè)試數(shù)組的每個(gè)元素的函數(shù),包含三個(gè)參數(shù).
返回true表示保留該元素(通過(guò)測(cè)試),返回false則不保留.
currentValue:數(shù)組中當(dāng)前被傳遞的元素.

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()方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組.
array.map(callback, thisArg)
callback:原數(shù)組中的元素調(diào)用該方法后返回一個(gè)新的元素.
currentValue:數(shù)組中當(dāng)前被傳遞的元素.

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()方法用于測(cè)試數(shù)組中所有元素是否都通過(guò)了指定函數(shù)的測(cè)試.
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()方法用于測(cè)試數(shù)組中是否至少有一項(xiàng)元素通過(guò)了指定函數(shù)的測(cè)試.
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()為每個(gè)元素執(zhí)行對(duì)應(yīng)的方法.

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()方法返回在該數(shù)組中第一個(gè)找到的元素位置,如果它不存在則返回-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

展開(kāi)運(yùn)算符

1.展開(kāi)運(yùn)算符允許一個(gè)表達(dá)式在某處展開(kāi).常用的場(chǎng)景包括:函數(shù)參數(shù),數(shù)組元素,解構(gòu)賦值.
另外,jsx的組件props也可以使用展開(kāi)運(yùn)算符來(lái)賦值.
2.解構(gòu)賦值(destructuring assignment)語(yǔ)法是一個(gè)js表達(dá)式,
它使得從數(shù)組或?qū)ο笾刑崛?shù)據(jù)賦值給不同的變量變?yōu)榭赡?

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參數(shù),...a為數(shù)組[1,2,3]

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