数组迭代方法对每个数组项进行操作。
forEach()
forEach()
方法为每个数组元素调用一次函数(回调函数)。
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
上面的示例仅使用 value 参数。该示例可以重写 到:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
map()
map()
方法通过对每个数组元素执行函数来创建一个新数组。
map()
方法不执行数组的函数 没有值的元素。
map()
方法不会更改原始数组。
此示例将每个数组值乘以 2:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
当回调函数仅使用 value 参数时,索引和数组 参数可以省略:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
flatMap()
ES2019 在 JavaScript 中添加了 Array flatMap()
方法。
flatMap()
方法首先映射数组的所有元素 然后通过展平数组来创建一个新数组。
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
自 2020 年 1 月起,所有现代浏览器都支持 JavaScript 数组 flatMap()
:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
filter()
filter()
方法创建一个新数组,其中包含通过测试的数组元素。
此示例根据值大于 18 的元素创建一个新数组:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
上面的例子中,回调函数没有使用索引和数组 参数,因此可以省略:
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
reduce()
reduce()
方法对每个数组元素运行一个函数以生成(将其减少为)单个值。
reduce()
方法在数组中从左到右工作。另请参阅reduceRight()
。
reduce()
方法不会减少原始数组。
此示例查找数组中所有数字的总和:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
请注意,该函数有 4 个参数:
总计(初始值/之前返回的值)
物品价值
项目索引
数组本身
上面的示例没有使用索引和数组参数。有可能 重写为:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduce()
方法可以接受初始值:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduceRight()
reduceRight()
方法在每个数组元素上运行一个函数以生成(将其减少为)单个值。
reduceRight()
在数组中从右到左工作。另请参阅reduce()
。
reduceRight()
方法不会减少原始数组。
此示例查找数组中所有数字的总和:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
请注意,该函数有 4 个参数:
总计(初始值/之前返回的值)
物品价值
项目索引
数组本身
上面的示例没有使用索引和数组参数。有可能 重写为:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
every()
every()
方法检查所有数组值是否通过测试。
此示例检查所有数组值是否大于 18:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
当回调函数仅使用第一个参数(值)时,其他参数 参数可以省略:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
some()
some()
方法检查某些数组值是否通过测试。
此示例检查某些数组值是否大于 18:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>
<p>The some() method checks if some array values pass a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
indexOf()
indexOf()
方法在数组中搜索元素值并返回其位置。
注意:第一个项目的位置为 0,第二个项目的位置为 1,依此类推。
在数组中搜索“Apple”项:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.indexOf(item, start)
必需的。要搜索的项目。
选修的。从哪里开始搜索。负值将从给定位置开始从末尾开始计算,并搜索到末尾。
如果未找到该项目,Array.indexOf()
将返回 -1。
如果该项目出现多次,则返回第一个的位置 发生。
lastIndexOf()
Array.lastIndexOf()
与 Array.indexOf()
相同,但是 返回指定元素最后一次出现的位置。
在数组中搜索“Apple”项:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.lastIndexOf(item, start)
必需的。要搜索的项目
选修的。从哪里开始搜索。负值将从给定位置从末尾开始计算,并搜索到开头
find()
find()
方法返回传递 a 的第一个数组元素的值 测试功能。
此示例查找(返回其值)第一个较大的元素 超过 18:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
find()
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 find()
。
findIndex()
findIndex()
方法返回第一个数组元素的索引 通过测试功能。
此示例查找第一个大于 18 的元素的索引:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
请注意,该函数有 3 个参数:
物品价值
项目索引
数组本身
findIndex()
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 findIndex()
。
Array.from()
Array.from()
方法从任何具有一定长度的对象返回一个 Array 对象 属性或任何可迭代对象。
从字符串创建数组:
Array.from("ABCDEFG");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Return an array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
from()
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 from()
。
Keys()
Array.keys()
方法返回带有数组键的 Array Iterator 对象。
创建一个数组迭代器对象,包含数组的键:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Return an Array Iterator object with the keys of the array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
keys()
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 keys()
。
entries()
创建一个数组迭代器,然后迭代键/值对:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() returns an Array Iterator object with key/value pairs:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
entries()
方法返回带有键/值对的 Array Iterator 对象:
[0,“香蕉”]
[1,“橙子”]
[2,“苹果”]
[3,“芒果”]
entries()
方法不会更改原始数组。
entries()
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 entries()
。
includes()
ECMAScript 2016 向数组引入了 Array.includes()
。 这允许我们检查数组中是否存在元素(包括 NaN,与 indexOf 不同)。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>
</body>
</html>
array.includes(search-item)
Array.includes() 允许检查 NaN 值。与 Array.indexOf() 不同。
includes()
是 ECMAScript 2016 的一项功能。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 includes()
。
... 运算符将可迭代对象(如数组)扩展为更多元素:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "spread" operator spreads elements of iterable objects:</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
...
是 ES6 功能 (JavaScript 2015)。
所有现代浏览器都支持它:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Internet Explorer 不支持 ...
。
有关完整的数组参考,请访问我们的:
完整的 JavaScript 数组参考。
该参考包含所有数组的描述和示例 属性和方法。