1 reduce方法同时实现map和filter

假设现在有一个数组,然后遍历它的每一项(map的功能)然后筛选出其中的一部分(filter的功能)。如果使用map和filter的话,我们需要遍历这个数组两次。

在下面的代码中,我们将数列中的值翻倍,然后挑选出那些大于50的数:

const numbers = [10, 20, 30, 40];
const numOver50 = numbers.reduce((finalArr, num) => {
num = num * 2;
if (num > 50) {
finalArr.push(num);
}
return finalArr; //finalArr为最后符合筛选条件的数组
}, []);
numOver50; // [60, 80]

2 统计数组中相同项的个数

很多时候,我希望统计数组中重复出现项的个数然后用一个对象表示。那么我们可以使用reduce方法处理这个数组。

下面的代码将统计每一种car的数目然后把总数用一个对象表示。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) {
obj[name] = obj[name] ? ++obj[name] : 1;
return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

3 使用解构来交换参数数值

有时候我们会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

let param1 = 1;
let param2 = 2;
[param1, param2] = [param2, param1];
console.log(param1) //
console.log(param2) // 1
//当然还有其他的方法进行交换之,例如

  b = [a, a = b][0];

  a = a + b; b = a - b; a = a - b  ;

 var temp = a; a = b; b = temp ;

4 接收函数返回的多个结果

 

在下面的代码中,我们从/post中获取一个帖子,然后在/comments中获取相关评论。由于我们使用的是async/await,函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){

  return await Promise.all([

     fetch('/post'),

     fetch('/comments')

  ]);

}

const [post, comments] = getFullPost();

5 将数组平铺到指定深度

 

使用递归,为每个深度级别 depth 递减 1 。 使用 Array.reduce() 和 Array.concat() 来合并元素或数组。 基本情况下,depth 等于 1 停止递归。 省略第二个参数,depth 只能平铺到 1 (单层平铺) 的深度。

const flatten = (arr, depth = 1) =>

  depth != 1

    ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), [])

    : arr.reduce((a, v) => a.concat(v), []);

flatten([1, [2], 3, 4]);                             // [1, 2, 3, 4]

flatten([1, [2, [3, [4, 5], 6], 7], 8], 2);           // [1, 2, 3, [4, 5], 6, 7, 8]

6 数组的对象解构

 

数组也可以对象解构,可以方便的获取数组的第n个值

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';

const { 2: country, 4: state } = csvFileLine.split(',');

country            // US

state            // New Yourk

大概就是这么多,有一部分我也不是很明白,希望能帮到大家。

参考链接:https://mp.weixin.qq.com/s/wZHVHKRtjRzZHCb3BrHOhw

js中关于数组处理的一些小技巧的更多相关文章

  1. js中的数组

    上网查了一下,js中的数组包含的内容还真不少.先给出两个学习的链接: w3school链接:http://www.w3school.com.cn/js/js_obj_array.asp 博客园链接:h ...

  2. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  3. JS中对数组元素进行增删改移

    在js中对数组元素进行增删改移,简单总结了一下方法: 方法 说明 实例 push( ); 在原来数组中的元素最后面添加元素 arr.push("再见58"); unshift( ) ...

  4. js中的数组遍历

    js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比. ! for循环:使用评率最高,也是最基本的一种遍历方式. let arr = ['a','b','c','d','e']; for (l ...

  5. 遍历js中的数组

    可以使用js中的for循环,或者forEach方法:也可以使用Ext中的方法遍历js中的数组 代码如下: /** * 遍历数组 */ var arr = ['越南', '新加坡', '美国', '俄罗 ...

  6. java:JavaScript3(innerHTML,post和get,单选框,多选框,下拉列表值得获取,JS中的数组,JS中的正则)

    1.innerHTML用户登录验证: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> ...

  7. JS中的数组复制问题

    JS中的数组复制问题 前言 首先提到复制,也就是拷贝问题,就必须要明确浅拷贝和深拷贝. 浅拷贝:B由A复制而来,改变B的内容,A也改变 深拷贝:B由A复制而来,改变B的内容,A的内容不会改变 总的来说 ...

  8. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

  9. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

随机推荐

  1. MATLAB符号对象与符号运算

    序言 符号对象(Symbolic Objects 不同于普通的数值计算)是Matlab中的一种特殊数据类型,它可以用来表示符号变量.表达式以及矩阵,利用符号对象能够在不考虑符号所对应的具体数值的情况下 ...

  2. 深入理解Java虚拟机8-chap12-13-斗者5星

    一.操作系统与内存 通过在处理器与内存之间添加一层访问及更新速度更快的高速缓存,可以一定程度解决处理器与内存速度的矛盾 引入新问题:缓存一致性,即每个处理器只与自己的缓存交互,如果操作的是内存中的同一 ...

  3. Your password does not satisfy the current policy requirements问题解决方法

    运行 mysql>set validate_password_policy=0; 目的是,可以设置弱密码.

  4. Hadoop多租户架构配置

    cloudera manager 进到cluster里面,点击Dynamic Resource Pools,没做任何配置默认情况下,资源池里有个default资源组 hadoop jar /usr/l ...

  5. TTL集成门电路

    一.TTL集成门电路的结构1.总体结构 所谓TTL就是transistor transistor logic,就是说是由晶体管和晶体管之间构成电路. 2.    TTL集成门电路典型输入级形式 1)二 ...

  6. mysql授权grant

    本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删 ...

  7. 安装mysql5.6

    1.创建一个不能登录的的用户: 2.下载一个数据库包: wget 下载网址 3.安装相关依赖包: yum -y install make gcc-c++ cmake bison-devel ncurs ...

  8. 【记录】Linux环境安装mysql8.0

    话说mysql8.0版本比5.7版本要快2倍以上,这么看宣传怎么能不装8.0呢,但是新版本和旧版本有不少不同导致若使用以前的一些安装方法会导致安到一半就由于各种找不到文件卡住. 尝试了不少次,只有使用 ...

  9. 常用VIM插件配置

    airline 状态栏美化 除了airline本体还要下airline主题 和打过powerline补丁的字体 常用设置: set laststatus=2 " 总是显示状态栏 set no ...

  10. C# readonly与const区别

    静态常量:是指编译器在编译时候会对常量进行解析,并将常量的值替换成初始化的那个值. 动态常量的值则是在运行的那一刻才获得的,编译器编译期间将其标示为只读常量,而不用常量的值代替,这样动态常量不必在声明 ...