js中关于数组处理的一些小技巧

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) // 2
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