forEach方法
forEach 用於迭代數組。這是一個簡單的例子：
const numbers = [1, 2, 3, 4, 5, 6, 7];
numbers.forEach(function (el) {
if (el % 2 === 0) {
console.log(el);
}
});
登入後複製
現在讓我們將 forEach 與物件陣列一起使用：
const movies = [
{
title: 'Indiana Jones',
score: 77,
},
{
title: 'Star Trek',
score: 94,
},
{
title: 'Deadpool',
score: 79,
},
];
movies.forEach(function (movie) {
console.log(`${movie.title} - ${movie.score}/100`);
});
登入後複製
地圖
Map 使用對數組中每個元素呼叫回調的結果建立一個新數組。
首先，讓我們迭代一個基本陣列：
const lCase = ['jim', 'bob', 'abby'];
const uCase = lCase.map(function (t) {
return t.toUpperCase();
});
console.log(lCase, uCase);
登入後複製
現在，讓我們迭代物件陣列：
const movies = [
{
title: 'Indiana Jones',
score: 77,
},
{
title: 'Star Trek',
score: 94,
},
{
title: 'Deadpool',
score: 79,
},
];
const titles = movies.map(function (movie) {
return movie.title;
});
console.log(titles);
登入後複製
箭頭功能
我們可以寫如下箭頭函數來簡化語法：
const square = (x) => {
return x * x;
};
const sum = (x, y) => {
return x + y;
};
const rollDie = () => {
return Math.floor(Math.random() * 6) + 1;
};
console.log(square(2), sum(2, 3));
console.log(rollDie());
登入後複製
我們也可以重新訪問電影範例並使用箭頭函數：
const movies = [
{
title: 'Indiana Jones',
score: 77,
},
{
title: 'Star Trek',
score: 94,
},
{
title: 'Deadpool',
score: 79,
},
];
const newMovies = movies.map((movie) => {
return `${movie.title} = ${movie.score} / 10`;
});
登入後複製
隱式回報
隱式回傳是編寫函數的另一種簡寫方式，一些範例包括：
const rollDie = () => Math.floor(Math.random() * 6) + 1;
const isEven = (num) => num % 2 === 0;
登入後複製
設定超時
x 毫秒後運行回呼
console.log('Apears 1st');
// takes callback, then milliseconds
setTimeout(() => {
console.log('Apears 3rd');
}, 3000);
console.log('Apears 2nd');
登入後複製
設定間隔
每 x 毫秒重複回呼
setInterval(() => {
console.log(Math.random());
}, 2000);
登入後複製
如果我們想讓回呼最終停止，我們可以這樣做：
const id = setInterval(() => {
console.log(Math.random());
}, 2000);
clearInterval(id); // stops the loop
登入後複製
過濾方式
Filter 使用在回呼函數中傳遞 return true 的元素建立一個新陣列
const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const odds = nums.filter((n) => {
return n % 2 === 1; // our callback returns true or false
// if it returns true, n is added to the filtered array
});
// [9, 7, 5, 3, 1]
const smallNums = nums.filter((n) => n < 5); // [4, 3, 2, 1]
登入後複製
我們也可以過濾數組中的物件：
const movies = [
{
title: 'Indiana Jones',
score: 77,
},
{
title: 'Star Trek',
score: 94,
},
{
title: 'Deadpool',
score: 79,
},
];
const badMovies = movies.filter((movie) => {
return movie.score < 80;
});
console.log(badMovies);
登入後複製
一些和每一個
-
Some - 測試數組中的任何元素是否在回調函數中傳回 true。它傳回一個布林值
const firstWords = ['dog', 'jello', 'log', 'bag', 'wag', 'cupcake'];
words.some((word) => {
return word.length > 4;
}); // true
words.some((word) => word[0] === 'Z'); // false
words.some((word) => word.includes('cake')); // true
登入後複製
-
Every - 測試數組中的所有元素是否在回調函數中傳回 true。它傳回一個布林值
const words = ['dog', 'dig', 'log', 'bag', 'wag'];
words.every((word) => {
return word.length === 3;
}); // true
words.every((word) => word[0] === 'd'); // false
words.every((w) => {
return w[w.length - 1] === 'g';
}); // true
登入後複製
減少
- reduce 回呼函數中的第一個（也是可能的唯一）參數。
- 函數的第一個參數是一個值，當我們迭代每個項目時，該值可能會改變。
- 此函數中的第二個參數是陣列索引中的值。
- reduce 的可選第二個參數是我們希望回呼函數的第一個值開始的值。
const prices = [9.99, 1.5, 19.99, 49.99, 30.5];
const total = prices.reduce((total, price) => {
return total + price;
});
const min = prices.reduce((min, price) => {
return Math.min(min, price);
});
console.log(min);
登入後複製
我們也可以使用物件陣列來做到這一點：
const movies = [
{
title: 'Indiana Jones',
score: 77,
},
{
title: 'Star Trek',
score: 94,
},
{
title: 'Deadpool',
score: 79,
},
];
let bestMovie = movies.reduce((best, movie) => {
if (movie.score > best.score) {
return movie;
}
return best;
});
console.log(bestMovie);
登入後複製
我們也可以設定reducer的初始值：
let nums = [1, 2, 3, 4, 5];
let maxPlus100 = nums.reduce((max, num) => {
return (max += num);
}, 100);
console.log(maxPlus100); // 115
登入後複製
以上是JavaScript：forEach、map、箭頭函數、setTimeout、setInterval、filter、some、every 和 reduce的詳細內容。更多資訊請關注PHP中文網其他相關文章！
