1. find()與findIndex()
find()方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。
-
[
1,
2,
5,
-1,
9].find(
(n) => n <
0)
-
//找出數組中第一個小於 0 的成員
-
// -1
find()方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。
findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。
-
[
1,
2,
5,
-1,
9].findIndex(
(n) => n <
0)
-
//返回符合條件的值的位置（索引）
-
// 3
2. filter()
filter()方法使用指定的函數測試所有元素，並創建一個包含所有通過測試的元素的新數組。
filter 為數組中的每個元素調用一次 callback 函數，並利用所有使得 callback 返回 true 或 等價於 true 的值 的元素創建一個新數組。那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數組中。filter 不會改變原數組。
-
var arr = [
10,
20,
30,
40,
50]
-
var newArr = arr.filter(
item => item >
30);
-
console.log(newArr);
//[40, 50]
-
//數組去重
-
var arr = [
1,
2,
2,
3,
4,
5,
5,
6,
7,
7,
8,
8,
0,
8,
6,
3,
4,
56,
2];
-
var arr2 = arr.
filter((x, index,
self)=>
self.indexOf(x) === index)
-
console.log(arr2);
// [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
3. forEach()
遍歷數組全部元素，利用回調函數對數組進行操作，自動遍歷整個數組，且無法break中途跳出循環，不可控，不支持return操作輸出，return只用於控制循環是否跳出當前循環。
回調有三個參數：第一個參數是遍歷的數組內容，第二個參數是對應的數組索引，第三個參數是數組本身。
-
var arr = [
1,
2,
3,
4,
5,] ;
-
arr.forEach(
function(item,index){
-
console.log(item);
-
});
這個方法是沒有返回值的，僅僅是遍歷數組中的每一項，不對原來數組進行修改；
但是可以自己通過數組的索引來修改原來的數組；
-
var ary = [
12,
23,
24,
42,
1];
-
var res = ary.forEach(
function (item,index,input) {
-
input[index] = item*
10;
-
})
-
console.log(res);
//--> undefined;
-
console.log(ary);
//--> 通過數組索引改變了原數組；
4. some() 和 every()
every()與some()方法都是JS中數組的迭代方法， 只返回布爾值。
every()
判斷數組中是否每個元素都滿足條件
只有都滿足條件才返回true；
只要有一個不滿足就返回false；
some()
判斷數組中是否至少有一個元素滿足條件
只要有一個滿足就返回true
只有都不滿足時才返回false
-
// 判斷數組arr1是否全是偶數
-
// 判斷數組arr2是否至少有一個偶數
-
-
var arr1=[
1,
2,
3,
4,
5];
-
var arr2=[
1,
4,
6,
8,
10];
-
console.log(
-
arr1.every(
function(value, index, array){
-
return value %
2 ==
0;
-
})
-
);
// false
-
console.log(
-
arr2.some(
function(value, index, array){
-
return value %
2 ==
0;
-
})
-
);
// true
5. map()
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。
array.map(function(currentValue,index,arr), thisValue)
-
var data = [
1,
2,
3,
4];
-
-
var arrayOfSquares = data.map(
function (item) {
//接收新數組
-
return item * item;
-
});
-
-
alert(arrayOfSquares);
// [1, 4, 9, 16]
6. reduce()
1.reduce()方法接收一個函數作為累加器(accumulator),數組中的每個值(從左到右)開始合並,最終為一個值.
array.reduce(callback, initialValue)
2.callback:執行數組中每個值的函數(也可以叫做reducer),包含4個參數.
-
1
.previousValue:上一次調用回調返回的值,或者是提供的初始值(
initialValue)
-
2
.currentValue:數組中當前被處理的元素
-
3
.index:當前元素在數組中的索引
-
4
.array:調用
reduce的數組
-
// 獲取購物車中商品列表的價格總和
-
let goodList = [{
id:
1,
price:
10,
qty:
5}, {
id:
2,
price:
15,
qty:
2}, {
id:
3,
price:
20,
qty:
1}]
-
-
let totalPrice = goodList.reduce(
(prev, cur) => {
-
return prev + cur.price * cur.qty
-
},
0)
-
-
console.log(totalPrice)
// 100
-
var arrString =
'abcdaabc'
-
// 獲取字符中中每個字母出現的次數
-
let count = arrString.split(
'').reduce(
function(res, cur) {
-
res[cur] ? res[cur]++ : res[cur] =
1
-
return res
-
}, {})
-
-
console.log(count)
// {a: 3, b: 2, c: 2, d: 1}