初识JavaScript第八节

❤️当你穿过了暴风雨，你就不再是原来那个人。❤️

JavaScript 数组迭代

Array.forEach()

  使用forEach() 可以为每个数组元素调用一次函数。

实例：

var txt = "";
var numbers = [78, 351, 6, 52, 24, 95];
numbers.forEach(myFunction);
document.getElementById("jg").innerHTML = txt;

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

输出结果：

78
351
6
52
24
95
// forEach()将会把所有元素输出

注释：此函数接受 3 个参数。

• 项目值
• 项目索引
• 数组本身

tips：几乎所有的浏览器都支持 Array.forEach()，除了 IE8或更早的浏览器。

Array.map()

  使用map() 通过对每个数组元素执行函数来创建新数组，它不会对没有值的数组元素执行函数，而且不会更改原始数组。

实例：

var numbers1 = [78, 351, 6, 52, 24, 95];
var numbers2 = numbers1.map(myFunction);

document.getElementById("jg").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}

输出结果 ：

156,702,12,104,48,190
// 输出结果为每个数值乘2

Array.filter()

  使用filter() 创建一个包含通过测试的数组元素的新数组。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var over30 = numbers.filter(myFunction);

document.getElementById("jg").innerHTML = over30;

function myFunction(value, index, array) {
  return value > 30;
}

输出结果：

78,351,52,95
// 输出结果为大于30的数创建的新数组

Array.reduce()

  使用reduce()在每个数组元素上运行函数，以生成单个值。它在数组中从左到右工作。而且不会减少原始数组。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var sum = numbers.reduce(myFunction);

document.getElementById("jg").innerHTML = "他们的和是：" + sum;

function myFunction(total, value, index, array) {
  return total + value;
}

输出结果：

他们的和是：606
// 输出结果为数组中所有数值的总和

Array.reduceRight()

  使用reduceRight() 在每个数组元素上运行函数，以生成单个值，它将在数组中从右到左工作，还不会减少原始数组。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var sum = numbers.reduceRight(myFunction);

document.getElementById("jg").innerHTML = "他们的和是：" + sum;

function myFunction(total, value, index, array) {
  return total + value;
}

输出结果：

他们的和是：606
// 输出结果为所有数值的和
// 注：此函数和上一个函数的实例都是将所有数值相加，并不是内容重复

Array.every()

  使用every()可以检查所有数组值是否通过测试。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var allOver30 = numbers.every(myFunction);
​
document.getElementById("demo").innerHTML = "所有大于 30 的是：" + allOver30;
​
function myFunction(value, index, array) {
  return value > 30;
}

输出结果：

所有大于 30 的是：false
// 输出结果为是否所有的数值都大于30为否

Array.some()

  使用some()检查某些数组值是否通过了测试。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var someOver22 = numbers.some(myFunction);

document.getElementById("jg").innerHTML = "某些值是否大于22：" + someOver22;

function myFunction(value, index, array) {
  return value > 22;
}

输出结果：

某些值是否大于22：true
// 输出结果为是，某些值大于22

Array.indexOf()

  使用indexOf() 在数组中搜索元素值并返回其位置。

注释：第一个元素的位置是 0，第二个元素的位置是 1，以此类推。

实例：

var fruits = ["xfx", "ds", "jg", "lg"];
var a = fruits.indexOf("jg");
document.getElementById("jg").innerHTML = "jg 被找到的位置是：" + (a + 1);
</script>

输出结果：

jg 被找到的位置是：3
// 输出结果为jg的位置

语法：

array.indexOf(item, start)

注释：

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

tips：如果没有找到元素，Array.indexOf() 返回 -1。如果元素多次出现，则返回第一次出现的位置。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是它是从从数组结尾开始搜索的。

实例：

var fruits = ["xfx", "ds", "jg", "lg"];
var a = fruits.lastIndexOf("jg");
document.getElementById("jg").innerHTML = "jg 被找到的位置是" + (a + 1);

输出结果：

jg 被找到的位置是3
// 输出的结果为jg被检索到的位置

Array.find()

  使用find() 返回通过测试函数的第一个数组元素的值。

实例：

var numbers = [78, 351, 6, 52, 24, 95];
var first = numbers.find(myFunction);

document.getElementById("jg").innerHTML = "大于 50 的第一个值是：" + first;

function myFunction(value, index, array) {
  return value > 50;
}

输出结果：

大于 50 的第一个值是：78
// 输出结果为大于50的第一个数是78

Array.findIndex()

使用findIndex() 返回通过测试函数的第一个数组元素的索引。

实例：

var numbers = [5, 23, 35, 56, 71];
var first = numbers.findIndex(myFunction);
​
document.getElementById("jg").innerHTML = "大于 55 的第一个值的索引是：" + first;
​
function myFunction(value, index, array) {
  return value > 55;
}

输出结果：

大于 55 的第一个值的索引是：3
// 输出结果为大于55的第一个值的索引，索引为该位置-1所以为3

第八节到这里就结束了

我们将会在下一节接触到数组 Const

While our heads are hot, we have to be desperate. 趁我们头脑发热，我们要不顾一切