js数组提取数据的方法速度测试--map,for循环,forEach

我正在参加「掘金·启航计划」

js数组提取数据的方法速度测试--map,for循环,forEach

在我平时的前端页面渲染的时候，经常用到就是后端返回一个整体的数组，需要我们在页面进行各种数据的拆分来达到我们需要的数据结构，方便我们进行页面的渲染。

处理数据的方法有很多，而且面临不同的场景所使用的方法也不同，今天我这里主要是针对，前端渲染Echaerts图表的数据进行处理，变成合适数据结构来进行渲染。

现在我就用渲染折线图的数据来做一个简单的测试。我们都知道选择折线图使用最多的就是x轴和y轴的数据分开展示，但是后端返回的都是一个整体返回的数据，所以就需要进行处理，数组如下

//我们测试的话，大概就是放30条数据的对象数组
array: [
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          {pm10: 0, pm25: 1, db: 2, tsp: 3, time: '04:10'},
          .......
        ]

把上面的数据拆分成我们需要的，如下

1、map的方法来进行提取

let d1 = new Date()
console.log(d1);
var data = this.array
var date = data.map(item => {return item.time});
var PM10 = data.map(item => {return item.pm10});
var PM25 = data.map(item => {return item.pm25});
var TSP = data.map(item => {return item.tsp});
console.log(date);
let d2 = new Date()
let x = d2 - d1
console.log(x);

用时如下

2、for循环的方法提取

let d1 = new Date()
console.log(d1);
var data = this.array
var date = [];
var PM10 = [];
var PM25 = [];
var TSP = [];
for (var i = 0; i < data.length; i++) {
date.push(data[i].time);
TSP.push(data[i].tsp);
PM10.push(data[i].pm10);
PM25.push(data[i].pm25);
}
console.log(date);
let d2 = new Date()
let x = d2 - d1
console.log(x);

用时如下

3、forEach的方法进行提取

let d1 = new Date().getTime()
console.log(d1);
var data = this.array
var date = [];
var PM10 = [];
var PM25 = [];
var TSP = [];
data.forEach(item => {
date.push(item.time);
TSP.push(item.tsp);
PM10.push(item.pm10);
PM25.push(item.pm25);
});
console.log(date);
console.log(PM10);
console.log(PM25);
console.log(TSP);
let d2 = new Date().getTime()
console.log(d2);
let x = d2 - d1
console.log('用时' + x);

用时如下

通过上面的方法来测试显示，这几种方法对数据量少的数组来说，都是差不多的时候得到最后的结果的，所以看个人最后想要哪一种的方法来进行处理