Javascript:forEach、map、filter、reduce、reduceRight

简介: Javascript:forEach、map、filter、reduce、reduceRight

正文

filter的使用

====================================================================

会过滤原数组,返回一个新的数组,过滤条件由filter中表达式决定

基础使用语法:

let array5 = array4.filter(value => 条件)

举例:

let array4 = [1, 2, 3, 4, 5, 6];
let array5 = array4.filter(value => value % 2 === 0)
console.log(array4)
console.log(array5)

运行结果:

reduce和reduceRight的使用

================================================================================

按照条件对原数组进行操作。

比如对原数组进行求和(求积),或在某数基础上对某一数组进行求和(求积)

基础使用语法:

let result = array6.reduce(函数,初始值,初始值下标,初始值下标数组)

举例:

let array6 = [1, 2, 3, 4];
function getSum(total, num) {
return total + num;
}
let result1 = array6.reduce(getSum);
let result2 = array6.reduce(getSum, 3);
let result3 = array6.reduce(getSum, 1, [1, 2, 3]);
console.log(result1, result2, result3);

运行结果:

reduceRight()方法的功能和reduce()功能是一样的,不同的是reduceRight()从数组的末尾向前将数组中的数组项做操作。

运算条件:求todo中finished为true的数据个数

finishedCount() {
return this.todos.reduce((total, todo) => total + (todo.finished ? 1 : 0), 0)
}

find和findIndex的使用

============================================================================

find:查询数组中第一个满足某条件的值

findIndex:查询数组中第一个满足某条件的值的下标

基础使用语法:

array7.find((value => 条件))

array7.findIndex((value => 条件))

举例:

let array7 = [
{name:‘1’,sex:‘女’,age:1},
{name:‘2’,sex:‘女’,age:2},
{name:‘3’,sex:‘女’,age:3},
{name:‘4’,sex:‘女’,age:4},
];
console.log(array7.find((value => value.name===‘4’)))
console.log(array7.findIndex((value => value.name===‘4’)))

运行结果:

keys,values,entries的使用

=================================================================================

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

基础使用语法:

for(let index of 数组.keys()){
console.log(index) // 输出下标
}
for(let elem of 数组.values()){
console.log(elem) // 输出值
}
for(let [index,elem] of 数组.entries()){
console.log(index,elem) // 输出值和下标
}
举例:
let array8 = [1, 2, 3];
for(let index of array8.keys()){
console.log(index)
}
for(let elem of array8.values()){
console.log(elem)
}
for(let [index,elem] of array8.entries()){
console.log(index,elem)
}
总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总


相关文章
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
311 32
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
270 3
|
存储 JavaScript 前端开发
js中map属性
js中map属性
458 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
482 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
366 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
246 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
613 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
469 4