JavaScript 数组迭代

admin2年前 (2023-07-02)it知识465

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

Array.foreach()方法为每个数组元素调用一次函数(回调函数)

var txt = "";
var number = [5, 2, 10, 16, 65];
number.foreach(myFunction);
function myFunction(value, index, array) {
      txt = txt + value + "<br>";
}

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组

map() 方法不会对没有值的数组元素执行函数

map() 方法不会改变原始数组

var numbers1 = [45, 3, 7, 8, 9 20];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
   return value * 2;
}

Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。这里返回数组中大于20 的值

var numbers = [45, 6, 12, 21, 30];
var over = number.filter(myFunction);
function myFunction(value, index, array){
  return value > 20;
}

Array.reduce()

reduce() 方法在每个数组元素上运行函数,以生成减少它单个值

reduce() 方法在数组中从左到右工作

reduce() 方法不会减少原始数组

var numbers1 = [20, 30, 10, 5, 16];
var sum = number1.reduce(muFunction, 100); //这里的100是一个初始值
function myFunction(total, value, index, array) {
   return total + value;
}

Array.every()

every() 方法检查所有数组值是否通过测试。 返回布尔值

var numbers = [20,3,6,77,88];
var allOver = number.every(myFunction);
function myFunction(value, index, array) {
    return value > 20;
}

Array.some()  

some() 方法检查某些数组是否通过了测试。返回布尔值

var number = [20, 5, 776, 31, 6];
var someOver = number.some(myFunction);
function myFunction(value, index,  array) {
  return value > 20;
}

Array.indexOf()

indexOf() 方法在数组中搜索元素并返回其位置,没有找到返回 -1

var brands = ["anta", "tom", "apple", "mi"];
var a = brands.indexOf("apple");

Array.find()

find() 方法返回通过测试函数的第一数组元素的值, 这里是30

var number = [18, 30 ,12, 21, 30];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 20;
}

Array.findIndex()

findIndex() 方法返回通过测试函数的第一数组元素的索引, 这里是返回1

var numbers = [18, 21, 27, 30, 25];
var first = number.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 20;
}


标签: JavaScript

相关文章

JavaScript 字符串模板

模板字面量使用反引号(``)而不是引号("")来定义字符串:比如:let text = `Hello World`;使用模板字面量,可以在字...

JavaScript 数组排序

sort() 方法以字母顺序进行排序var  fruits = ["banana", "orange",&qu...

JavaScript 最新特征

JavaScript 的最新特征包括以下几个方面:类的私有变量:通过使用 # 符号,可以在类中定义私有变量,只能在类的内部访问,外部无法访问。空位合并操作符:使用 ?? 符号,可以在两项中任一项为 n...

如何提高前端技术

以下是一些可以提高前端技术的建议:不断学习:前端技术不断发展,需要不断学习新的技术和框架,以保持自己的竞争力。可以通过阅读相关书籍、博客、视频教程等途径进行学习。实践项目:通过实践项目,可以更深入地理...

vue-router导航守卫

vue-router的导航守卫可以用来在路由跳转过程中添加自定义逻辑,例如验证、权限控制、重定向等。导航守卫可以分为三种:全局导航守卫、路由独享守卫和组件内的守卫1。全局导航守卫可以使用router....

vue 与 react 的区别 详细例子

以下是一个具体例子,展示了 Vue.js 和 React 在实现一个同样的功能时的一些区别:需求:实现一个用户列表,包括用户名和删除按钮,点击删除按钮可以删除相应的用户。Vue.js 实现:<t...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。