在日常工作中, 我们需要根据后端返回的数据结构组装组件需要的数据, 如下所示: 给出如下一个对象, 要求返回对象中的数组的相对应的新的二位数组
- <script>
- // 2019-3-4 面试题: 数组和对象直接的转化
- // 合并对象中的一维数组为二维数组, 并且返回新数组
- // 返回前的对象
- let obj = {
- 0: [44, 67, 96],
- 1: [90, 43, 56],
- 2: [56, 67, 33],
- 3: [80, 96, 45]
- };
- // 返回后的数组
- let arr = [[44, 90, 56, 80], [67, 43, 67, 96], [96, 56, 33, 45]];
- </script>
第一种写法:
1. 先取出对象中的每一个属性, 然后再根据每一项的数组去循环,
2. 新建空数组, 保存值, 注意新的属性需要判断是否有数组存在
3. 优化意见: 如果数组长度不是很长, 比如不超过 200 条, 可以采用一下方法, 如果太多, 那么我们需要先分组, 再去返回数组的数据, 再去渲染我们的页面,
理由:
1)减少数据量的传输, 减少服务器丢包的情况,
2)减少数据处理, 可以快速渲染页面, 减少用户登录的事件, 白屏的出现等
- <script>
- // 参考答案:
- /* 第一种写法
- * 先遍历对象, 再遍历对象中的数组取值
- *
- *
- */
- let data = {
- 0: [44, 67, 96],
- 1: [90, 43, 56],
- 2: [56, 67, 33],
- 3: [80, 96, 45]
- };
- var arr = [];
- // 遍历对象的每一个对象
- for (var item in data) {
- // map 取对象每一个 total 对应的值取赋值
- data[item].map((i, index) => {
- if (!arr[index]) {
- arr[index] = [];
- }
- arr[index].push(data[item][index]);
- });
- }
- console.log(arr);
- </script>
第二种: es6 语法实现
1. 生成一个变量 const getResult(); 注意这里的变量是函数新的返回值, 即 Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例.
2. 注意 map 这里不要写花括弧 {}, 不然会打印错误, 因为写{} 就是一个函数体, 需要 return 一下返回值
- <script>
- /*
- * 第二种写法 arry.from 使用
- *
- */
- const getResult = obj =>
- obj[0].map((_, index) =>
- Array.from(Object.values(obj), x => x[index])
- );
- getResult(obj);
- console.log(getResult(obj));
- </script>
第二种方法的缺点:
1.es6 支持性的考虑, 兼容未判断, ie9 以下不支持, ios8 需要考虑
2.obj[0]不支持, 不能下标不是 0 的对象, 需要转化处理
优化后的代码:
- function getArr(obj) {
- if (typeof obj != "object") {
- console.warn("参数不正确");
- return;
- }
- if (Array.from) {
- obj = Object.values(obj);
- const arr = obj[0].map((_, index) => Array.from(obj, a => a[index]));
- return arr;
- }
- var arr = [];
- // 遍历对象的每一个对象
- for (var item in obj) {
- // map 取对象每一个 total 对应的值取赋值
- obj[item].map((i, index) => {
- if (!arr[index]) {
- arr[index] = [];
- }
- arr[index].push(obj[item][index]);
- });
- }
- return arr;
- }
- getArr(obj);
总结:
实现代码需求的代码千万种, 只有不断优化, 提高性能稳定和代码复用性才好啊.
今日面试题:
- <script>
- // 2019-3-5 今日面试题, 数组去重
- let m = [1, 2, 2],
- n = [2, 3, 3];
- // 返回 m 和 n 的不重复的元素, 并且按照从小到大排序
- // 返回后的结果
- const l =[1,2,3]
- </script>
数组知识参考地址:
数组参考
来源: https://www.cnblogs.com/starryqian/p/10475679.html