如何形象地解释 JavaScript 中 map、foreach、reduce 间的区别?

可以这么理解,假设我们有一个数组,每个元素是一个士兵,你是一位班长,然后现在你面前站了一排士兵。
map 就是你手里拿一个盒子(一个新的数组),一个一个叫他们把钱包扔进去,结束的时候你获得了一个装满钱包的盒子(一个新的数组),里面全是大家的钱包,但是有顺序,顺序和士兵排列的顺序一一对应。

const wallets = soliderList.map(function (item) {
  return item.wallet;
});

foreach 就是你按顺序一个一个跟他们说点什么或做点什么,具体做什么,都行,随便:

soliderList.forEach(function (item) {
  item.doSomething();
});

reduce 就是你拿着装满钱包的盒子,一个一个数过去看里面有多少钱,每检查一个,你就和前面数过的总和加起来。这样最后数完的时候你就知道盒子里总共有多少钱了。

const moneyAll = wallets.reduce(function (countedMoney, wallet) {
  return countedMoney + wallet.money;
}, 0);

注意:map会返回一个新的数组

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我一一回答你的问题: 1. Js浏览器兼容性怎么解决? 解决Js浏览器兼容性问题可以采用以下方法: - 使用polyfills填充缺失的API。 - 使用特性检测来判断浏览器是否支持某个API,然后根据情况使用不同的代码。 - 使用框架或库来处理兼容性问题,如jQuery、Modernizr等。 - 尽可能地使用标准的API和语法。 2. 递归一般怎么使用?在哪里使用过? 递归是一种在函数调用自身的技术。递归一般用于需要重复执行某个任务,但每次执行的输入参数不同的情况。递归通常在树形结构、递归算法、迭代器等场景下使用。 我曾在实现一个无限级分类的功能使用了递归,通过递归遍历每个分类的所有子分类,直到没有子分类为止。 3. 基本数据类型和引用数据类型存在什么区别? 基本数据类型包括数字、字符串、布尔值、null和undefined,它们是按值访问的,即在内存存储的是它们的值本身。 而引用数据类型包括对象、数组和函数,它们是按引用访问的,即在内存存储的是它们的引用地址。因此,当我们复制一个引用类型的值时,实际上只是复制了它的引用地址,而不是它的值本身。 4. For of for in foreach for 的区别? - for循环:适用于遍历数组和字符串,可以通过控制循环变量来访问数组或字符串的每个元素。 - for...in循环:适用于遍历对象的属性,循环变量为属性名。 - forEach方法:适用于遍历数组,可以对数组的每个元素执行指定的操作,但无法途跳出循环。 - for...of循环:适用于遍历可迭代对象,如数组、字符串、Map、Set等,循环变量为元素的值。 5. 数组的常用方法有哪些? 数组的常用方法包括: - push:向数组末尾添加一个或多个元素。 - pop:从数组末尾删除一个元素。 - shift:从数组头部删除一个元素。 - unshift:向数组头部添加一个或多个元素。 - slice:返回一个新数组,包含原数组的指定部分。 - splice:在指定位置删除或添加元素。 - sort:按指定规则对数组进行排序。 - forEach:对数组的每个元素执行指定操作。 - map:返回一个新数组,其包含对原数组的每个元素执行指定操作后的结果。 - reduce:对数组的所有元素执行指定操作,返回一个计算结果。 6. 如何实现mapreducer方法? map方法可以通过遍历数组并对每个元素执行指定操作来实现,最终返回一个新数组。例如: ``` function myMap(arr, fn) { var result = []; for (var i = 0; i < arr.length; i++) { result.push(fn(arr[i])); } return result; } ``` reduce方法可以通过遍历数组并将元素与累加器进行指定操作来实现,最终返回一个计算结果。例如: ``` function myReduce(arr, fn, initialValue) { var accumulator = initialValue || arr[0]; for (var i = initialValue ? 0 : 1; i < arr.length; i++) { accumulator = fn(accumulator, arr[i]); } return accumulator; } ``` 7. New的过程? 使用new关键字创建一个对象时,会经历以下过程: - 创建一个新对象。 - 将新对象的原型指向构造函数的原型。 - 将构造函数内部的this指向新对象。 - 执行构造函数内部的代码。 - 如果构造函数返回一个对象,则返回该对象;否则返回新对象。 8. 讲解webscoket 通过?项目如何使用的? WebSocket是一种基于TCP协议的全双工通信协议,它可以在客户端和服务器之创建持久性的连接,实现实时双向通信。WebSocket协议的优点是可以减少网络传输的数据量和延迟。 在项目,我曾使用WebSocket实现了一个在线聊天室的功能。客户端使用JavaScript代码创建WebSocket对象,与服务器建立连接;服务器使用Node.js的WebSocket库进行处理。通过WebSocket,客户端和服务器可以实时地交换消息,实现实时聊天的效果。 9. Elementui如何进行二次封装? Element UI是一款基于Vue.js的UI组件库,可以通过二次封装来实现自定义组件的效果。二次封装的过程是: - 继承Element UI的组件,使用Vue.extend()方法创建一个子类。 - 在子类添加新的属性和方法。 - 在模板使用自定义的组件。 例如,可以创建一个新的表单组件,继承Element UI的Form组件,在其添加一个自定义的验证规则: ``` <template> <el-form :model="form" :rules="rules"> <slot></slot> </el-form> </template> <script> import { Form } from 'element-ui'; export default { name: 'MyForm', extends: Form, data() { return { rules: { myRule: [ { required: true, message: '请输入内容', trigger: 'blur' } ] } }; } }; </script> ``` 10. 讲解什么是原型?原型怎么使用?原型的场景? 原型是JavaScript的一个重要概念,每个对象都有一个原型对象,用于实现继承和共享属性。原型对象可以通过对象的__proto__属性进行访问。 在使用原型时,可以通过原型链实现继承和共享属性。例如: ``` function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log('Hello, ' + this.name + '!'); }; function Student(name, grade) { Person.call(this, name); this.grade = grade; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.sayGrade = function() { console.log('I am in grade ' + this.grade + '.'); }; var s = new Student('Tom', 3); s.sayHello(); // "Hello, Tom!" s.sayGrade(); // "I am in grade 3." ``` 在这个例子,Person是一个构造函数,Student是Person的子类。使用Object.create()方法可以将Student的原型对象指向Person的原型对象,从而实现继承和共享属性。通过原型,可以实现代码复用和继承。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值