JavaScript 数组迭代


目录

    显示目录


数组迭代方法对每个数组项进行操作。


JavaScript 数组 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>

JavaScript 数组 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>

JavaScript 数组 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


JavaScript 数组 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>

JavaScript 数组 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>

JavaScript 数组 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>

JavaScript 数组 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>

JavaScript 数组 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 个参数:

  • 物品价值

  • 项目索引

  • 数组本身


JavaScript 数组 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)
item

必需的。要搜索的项目。

start

选修的。从哪里开始搜索。负值将从给定位置开始从末尾开始计算,并搜索到末尾。

如果未找到该项目,Array.indexOf() 将返回 -1。

如果该项目出现多次,则返回第一个的位置 发生。


JavaScript 数组 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)
item

必需的。要搜索的项目

start

选修的。从哪里开始搜索。负值将从给定位置从末尾开始计算,并搜索到开头


JavaScript 数组 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()


JavaScript 数组 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()


JavaScript 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()


JavaScript 数组 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()


JavaScript 数组 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()


JavaScript 数组 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()


JavaScript 数组扩展 (...)

... 运算符将可迭代对象(如数组)扩展为更多元素:

例子

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 数组参考。

该参考包含所有数组的描述和示例 属性和方法。