我喜欢数据。我也喜欢JavaScript。然而，数据和客户端JavaScript通常被认为是相互排斥的。业界通常将数据处理和聚合视为后端函数，而JavaScript仅用于显示预聚合数据。带宽和处理时间被视为客户端处理数据的巨大瓶颈。而且，在大多数情况下，我同意。但是在某些情况下，在浏览器中处理数据是完全合理的。在这些用例中，我们如何才能成功？

想想这些数据

使用JavaScript处理数据既需要完整的数据，也需要了解可用的工具，而不必进行不必要的服务器调用。它有助于区分三边数据和汇总数据。

三边数据由原始的事务性数据组成。这是低层次的细节，它本身几乎是不可能分析的。在光谱的另一边，你有你的汇总数据。这是可以有意义和深思熟虑的方式提出的数据。我们称之为我们的组合数据。对于开发人员来说，最重要的是位于事务细节和完全组合数据之间的数据结构。这是我们的“甜蜜之地”这些数据集是聚合的，但包含的内容超过了最终表示所需的内容。它们是多维的，因为它们有两个或更多不同的维度，为如何显示数据提供了灵活性。这些数据集允许最终用户对数据进行格式化，并提取信息以供进一步分析。它们很小，很有表现力，但是提供了足够的细节。

将您的数据以完美的形式处理，这样您就可以避免前端的任何和所有的操作，这并不需要成为目标。相反，将数据简化为多维数据集。定义客户感兴趣的几个关键维度(例如，人员、产品、地点和时间)和度量(例如，总和、计数、平均值、最小值和最大值)。最后，用表单元素表示页面上的数据，这些元素可以允许更深入分析的方式对数据进行切片。

创建数据集是一种微妙的平衡。您将希望有足够的数据使您的分析有意义，而不会给客户端机器带来太多的压力。这意味着提出明确、简洁的要求。根据数据集的宽度，您可能需要包含许多不同的维度和度量。有几件事要记住：

内容的多样性是边缘情况还是将被频繁使用的东西？遵循80/20规则：80%的用户通常需要20%的可用资源。每个维度都是有限的吗？尺寸应该始终有一组预定的值。例如，不断增加的产品库存可能过于庞大，而产品类别则可能运转良好。在可能的情况下，特别是汇总数据日期。如果你能通过几年的积累而逃脱，那就去做吧。如果你需要下降到季度或几个月，你可以，但避免任何更深的。少就是多。值较少的维度对性能更好。例如，以200行数据集为例。如果添加另一个具有四个可能值的维度，其增长最多的是200*4=800行。如果添加一个具有50个值的维度，它将增长200*50=10，000行。这将与您添加的每个维度复合。在多维数据集中，避免总结每次数据集更改时都需要重新计算的度量值。例如，如果计划显示平均值，则应包括总计和计数。动态计算平均值。这样，如果您正在汇总数据，则可以使用汇总值重新计算平均值。

在尝试上述任何操作之前，请确保您了解正在处理的数据。你可能会做出一些错误的假设，导致错误的决策。数据质量始终是第一要务。这适用于您正在查询和制造的数据。

永远不要使用数据集，并对维度或度量进行假设。不要害怕要求数据字典或其他有关数据的文档，以帮助您了解所查看的内容。数据分析不是你猜的。可以应用业务规则，也可以预先过滤掉数据。如果您面前没有这些信息，那么您很容易就会生成毫无意义的数据集和可视化，甚至更糟糕的是，这些数据集和可视化都是完全误导的。

如何使数据结构就位

AJAX和FETCH API

JavaScript有多种方法从外部源检索数据。历史上，您会使用XHR请求。XHR受到广泛支持，但也相当复杂，需要几种不同的方法。还有一些jQuery的AjaxAPI。这有助于降低复杂性和提供跨浏览器支持。如果您已经在使用这些库，这可能是一个选项，但我们希望尽可能选择本机解决方案。

对于我们的用例，我们将使用FETCH API将数据拉到我们的应用程序中：

window.fetchData = window.fetchData || {}; fetch('./data/aggregate.json') .then(response => { // when the fetch executes we will convert the response // to json format and pass it to .then() return response.json(); }).then(jsonData => { // take the resulting dataset and assign to a global object window.fetchData.jsonData = jsonData; }).catch(err => { console.log("Fetch process failed", err); });

这段代码来自GitHubrepo中的main.js

fetch()方法发送数据请求，并将结果转换为JSON。为了确保在检索完整数据集之前不执行下一条语句，我们使用then()方法，并在该块中执行所有数据处理。最后，我们console.log()任何错误。

多维数据

用户不需要每次回答不同的问题时都将查询发送回服务器，而是进行总结，这样应用程序就不会使用每一个新的数据片段遍历整个数据集。你需要预先考虑问题，并提供数据来制定答案。客户希望能够进行一些分析，而不感到受限或完全不知所措。

与大多数API一样，我们将处理JSON数据。JSON是大多数API用来将数据作为由名称和值对组成的对象发送给应用程序的标准。在我们回到用例之前，让我们先看看一个多维数据集的样本：

const ds = [{ "year": 2005, "state": "Alabama", "total": 1386, "priorYear": 1201}, { "year": 2005, "state": "Alaska", "total": 811, "priorYear": 1541}, { "year": 2006, "state": "Alabama", "total": 989, "priorYear": 1386}];

通过正确地聚合数据集，我们可以使用JavaScript来进一步分析它。让我们来看看JavaScript中用于合成数据的一些原生数组方法。

如何通过JavaScript有效地处理数据

ARRAY.FILTER()

filter()方法Array原型(Array.prototype.filter())接受一个函数，该函数测试数组中的每个项，返回另一个只包含通过测试的值的数组。它允许您根据SELECT下拉列表或文本过滤器创建有意义的数据子集。

ds.filter(d => d.state === "Alabama");// Result[{ state: "Alabama", total: 1386, year: 2005, priorYear: 1201},{ state: "Alabama", total: 989, year: 2006, priorYear: 1386}]

ARRAY.MAP()

map()方法Array原型(Array.prototype.map())获取一个函数并运行它中的每个数组项，返回一个具有相同数量的元素的新数组。映射数据使您能够创建相关数据集。其中一个用例是将模棱两可的数据映射到更有意义、描述性更强的数据。另一种方法是获取度量标准并对其进行计算，以便进行更深入的分析。

用例1-将数据映射到更有意义的数据：

ds.map(d => (d.state.indexOf("Alaska")) ? "Contiguous US" : "Continental US");// Result[ "Contiguous US",  "Continental US",  "Contiguous US"]

用例2-将数据映射到计算结果：

ds.map(d => Math.round(((d.priorYear - d.total) / d.total) * 100));// Result[-13, 56, 40]

ARRAY.REDUCE()

reduce()方法Array原型(Array.prototype.reduce())获取一个函数，并通过它运行每个数组项，返回一个聚合结果。它通常用于做数学，比如添加或乘数组中的每个数字，尽管它也可以用来连接字符串或做许多其他事情。我一直觉得这件事很棘手，最好是以身作则。

在表示数据时，您希望确保这些数据以一种能够给用户提供洞察力的方式进行总结。尽管您已经对数据服务器端做了一些一般级别的总结，但这是允许根据使用者的特定需求进行进一步聚合的地方。对于我们的应用程序，我们希望将每个条目的总数加起来，并显示聚合结果。我们会用reduce()迭代每条记录并将当前值添加到累加器。最后的结果将是数组的所有值(总计)的总和。

ds.reduce((accumulator, currentValue) => accumulator + currentValue.total, 0);// Result3364

将这些功能应用于我们的用例

一旦我们有了数据，我们将为“获取数据”按钮分配一个事件，该按钮将显示数据的适当子集。请记住，JSON数据中有数百项。通过我们的按钮绑定数据的代码在main.js中：

 document.getElementById("submitBtn").onclick = function(e){ e.preventDefault(); let state = document.getElementById("stateInput").value || "All" let year = document.getElementById("yearInput").value || "All" let subset = window.fetchData.filterData(year, state); if (subset.length == 0 ) subset.push({'state': 'N/A', 'year': 'N/A', 'total': 'N/A'}) document.getElementById("output").innerHTML = `<table class="table"> <thead> <tr> <th scope="col">State</th> <th scope="col">Year</th> <th scope="col">Arrivals</th> </tr> </thead> <tbody> <tr> <td>${subset[0].state}</td> <td>${subset[0].year}</td> <td>${subset[0].total}</td> </tr> </tbody> </table>` }

如果将状态或年份保留为空白，则该字段将默认为“All”。下面的代码可在/js/main.js。你会想看看filterData()函数，这是我们将大部分功能用于聚合和过滤的地方。

// with our data returned from our fetch call, we are going to // filter the data on the values entered in the text boxesfetchData.filterData = function(yr, state) { // if "All" is entered for the year, we will filter on state  // and reduce the years to get a total of all years if (yr === "All") { let total = this.jsonData.filter( // return all the data where state // is equal to the input box dState => (dState.state === state) .reduce((accumulator, currentValue) => { // aggregate the totals for every row that has  // the matched value return accumulator + currentValue.total; }, 0); return [{'year': 'All', 'state': state, 'total': total}]; } ... // if a specific year and state are supplied, simply // return the filtered subset for year and state based  // on the supplied values by chaining the two function // calls together  let subset = this.jsonData.filter(dYr => dYr.year === yr) .filter(dSt => dSt.state === state); return subset; };// code that displays the data in the HTML table follows this. See main.js.

当状态或年为空白时，它将默认为“ALL”，我们将数据集过滤到该特定维度，并汇总该维度中所有行的度量。当输入年和状态时，我们只需对值进行筛选。

我们现在有了一个工作例子：

从原始的事务性数据集开始；创建一个半聚集的多维数据集；并动态地构建一个完全组合的结果。

请注意，一旦数据被客户端解压缩，我们就可以多种不同的方式操作数据，而不必对服务器进行后续调用。这特别有用，因为如果用户失去了连接，他们就不会失去操纵数据的能力。如果您正在创建一个需要脱机可用的渐进Web应用程序(PWA)，这是非常有用的。

一旦您掌握了这三种方法，就可以在DataSet上创建您想要的任何分析。将DataSet中的维度映射到更宽的类别，并使用“约简”进行汇总。

结语

理解了在处理数据时JavaScript中可能出现的内容。正如我所提到的，客户端JavaScript绝不是在服务器上转换和转换数据的替代品，在服务器上应该完成繁重的工作。但出于同样的原因，当数据集得到适当处理时，也不应该完全排除它。