JavaScript接口数据处理题目入门

橘子味萌新
176 阅读5分钟

前言：

大家好！这里是橘子味汽水！

这道JavaScript数据处理题，在公司进行接口数据处理时会经常遇到，此题目涵盖了常用的数组方法，对象方法，对于初学者会有些挑战，但做完这道题目，我相信你一定会收有很多获！让我们一起来看一下这道题目~

需求描述

这是你从后端收到的数据，一个oData的对象 （温馨提示：代码块可以折叠）

var oData = {
      'Dan': {
        age: 1,
        sex: 1,
        weight: '79kg',
        height: '190cm'
      },
      'meney': {
        age: 4,
        sex: 1,
        weight: '69kg',
        height: '160cm'
      },
      'jojo': {
        age: 14,
        sex: 0,
        weight: '99kg',
        height: '124cm'
      },
      'wanghua': {
        age: 12,
        sex: 0,
        weight: '59kg',
        height: '120cm'
      },
      'juzi': {
        age: 6,
        sex: 0,
        weight: '74kg',
        height: '130cm'
      }
    }

你需要将这个对象转换为如下数组，并实现一个排序算法，和筛选算法。

最终实现结果：
[
    {
      name:'Dan',
      age:1,
      sex:1,
      weight:'79kg',
      height:'190cm'
    },
    {
      name:'meney',
      age:4,
      sex:1,
      weight:'69kg',
      height:'160cm'
    },
    {
      name:'jojo',
      age:14,
      sex:0,
      weight:'99kg',
      height:'120cm'
    },
    {
      name:'wanghua',
      age:12,
      sex:0,
      weight:'99kg',
      height:'120cm'
    },
    {
      name:'juzi',
      age:4,
      sex:0,
      weight:'79kg',
      height:'130cm'
    }
  ]

  • 排序需求：设计并调用函数 formattingSort('height'); 调用formattingSort 传入参数 'height'就以height属性值为排序属性 升序排序

  • 筛选需求：设计并调用函数 formattingFilter('age',function(){} 传入参数'age'和回调函数 以age属性为过滤条件 条件为function回调函数的return公式

实现思路

值得注意的是：源数据是对象套对象，最终需求是数组套对象， 所以，让我们分为三步来处理

  1. 将对象转换为数组
  2. 实现排序需求的函数
  3. 实现筛选需求的函数

将对象转换为数组

函数主体部分需要返回一个新数组

function formatting (data) {
      var resultArr = new Array(5);  //此写法不推荐，这是其他语言实例化声明写法
      var resultArr = [];   //推荐！js里推荐的字面量存储的声明变量写法，节省内存开销
    }

使用对象.keys的方法，传入一个对象，会返回各个键值对

function formatting(data) {
      var resultArr = Object.keys(data);  //调用keys方法
      return resultArr;
    }
    console.log(formatting(oData));  //这里调用函数，并把结果打印输出

输出结果如图： 输出结果： 对象转数组成功，五个键值对，和结果的五个对象对应 但在最终需求中，数组的每一项都是一个对象，所以，我们需要对现有数组的每一个元素都进行操作，因此需要用到Array.map()方法。

function formatting(data) {
      var resultArr = Object.keys(data);//["Dan", "meney", "jojo", "wanghua", "juzi"]
      return resultArr.map(function (item) {
        return { name: item } + data[item]; //此处的+表示两个对象拼接起来的意思，实际开发不能这么写
      })
    }

现在需要把{ name: item }和data[item]这两个对象拼接起来，因此用到了Object.assign()方法

function formatting(data) {
      var resultArr = Object.keys(data);  //["Dan", "meney", "jojo", "wanghua", "juzi"]
      return resultArr.map(function (item) {
        return Object.assign({ name: item }, data[item]);
      })
    }
    console.log(formatting(oData));

20230526164130.png 第一阶段完成

实现排序需求的函数

使用sort方法构建函数主体

function DataSort(data, key) {
      data.sort(function (a,b) {
        
      })
    }

其中，data表示传入已经处理的对象数组，key表示参与排序的属性值，例如69kg，120cm这些

使用parseFloat方法可以将字符串96kg，变成整数96，120cm变成120.

20230526170140.png

function DataSort(data, key) {
      data.sort(function (a, b) {
        var aX = parseFloat(a[key]), bX = parseFloat(b[key]); //去除非数字的部分
        aX = aX || 0;
        bX = bX || 0;
        return aX - bX;  //升序排列
      })
    }
console.log(DataSort(formatting(oData), 'weight'));

我们需要考虑key是非法参数的情况，如果后端发来的数据丢失了部分，120cm只剩下cm，或者传入的参数是unefined（形参key接收的参数在对象数组中找不到对应键值对）经过parseFloat的运算会转换成NaN

因此，利用 NaN 隐式转换为 0 的特性，利用短路或运算‘ || ’，将NaN的异常数据处理成0， aX = aX || 0; 业务还要继续，转换为0的数据会继续参与运算 运行结果如下：

20230526174003.png 注意观察：weight是以升序排列，如果存在数据丢失的情况，升序排列+处理成0的方式，会让异常数据抛到顶部

return bX- aX; console.log(DataSort(formatting(oData), 'age'));

这次换成 age 来排序，再修改成降序排列，结果如图：

20230526175029.png

最后需要考虑到，DataSort(formatting(oData), 'age'));中'age'写错或者没传入这个实参，需要对代码做处理

在函数开头加上，这段代码，避免key参数没写，或者写错参数的情况

if (typeof data[0][key] === 'undefined') {
        return data;  //直接打回数据，本函数不伺候
      }

实现筛选需求的函数

实现筛选，使用filiter()方法构建函数

function dataFiliter(data, key, callback) {   //callback是回调函数约定俗成的形参
      return data.filiter(function (item, idx, arr) {  
        return callback(item[key]);  //item表示数组里的每一个对象
      })
    }

return callback(item[key]);

关于这行代码，返回的是一个布尔值 true || false ,也就是说，回调函数返回的值只要是一个布尔值就可以，返回结果是true的留下，是false的过滤掉

function dataFiliter(data, key, callback) {
      return data.filter(function (item, idx, arr) {
        return callback(item[key]);
      })
    }
    console.log(dataFiliter((formatting(oData)), 'age', function (o) {
      return o > 10; //判断条件，返回布尔值
    }))

筛选出 age>10 的数据，执行结果如下：

20230526182823.png

所有的代码汇总：

      'Dan': {
        age: 1,
        sex: 1,
        weight: '79kg',
        height: '190cm'
      },
      'meney': {
        age: 4,
        sex: 1,
        weight: '69kg',
        height: '160cm'
      },
      'jojo': {
        age: 14,
        sex: 0,
        weight: '99kg',
        height: '124cm'
      },
      'wanghua': {
        age: 12,
        sex: 0,
        weight: 'kg',
        height: '120cm'
      },
      'juzi': {
        age: 6,
        sex: 0,
        weight: '74kg',
        height: '130cm'
      }
    }

    function formatting(data) {
      var resultArr = Object.keys(data);  //["Dan", "meney", "jojo", "wanghua", "juzi"]
      return resultArr.map(function (item) {
        return Object.assign({ name: item }, data[item]);
      })
    }


    function DataSort(data, key) {
      if (typeof data[0][key] === 'undefined') {
        return data;
      }
      data.sort(function (a, b) {
        var aX = parseFloat(a[key]), bX = parseFloat(b[key]);
        aX = aX || 0;
        bX = bX || 0;
        return bX - aX;
      });
      return data;
    }
    console.log(DataSort(formatting(oData), 'age'));

    function dataFiliter(data, key, callback) {
      return data.filter(function (item, idx, arr) {
        return callback(item[key]);
      })
    }
    console.log(dataFiliter((formatting(oData)), 'age', function (o) {
      return o > 10; //判断条件，返回布尔值
    }))

最后，感谢你看到这里，如果阅读本文章仍有疑惑，请移步 点此跳转 b站详细视频教程

如果对你有帮助，可以给我点个赞，321我们一起进步~

image.png

avatar
文章
阅读
粉丝