前端对数据、数组、对象的处理

判断是不是一个数字

isNAN方法对一个数字、字母、字符串做判断，如果返回false，则不是一个数组，返回ture，则是一个数字。

<span>{isNaN(JRWGDL) ? '-' : JRWGDL}</span>

保留2位小数，如果小数后面是0则自动省略

使用parseFloat的方法自动省略小数后面为0的数。

parseFloat(Number(allData).toFixed(2))

多个数组相同下标之和

有个echarts结果展示要求为：需要的渲染的数据是之前已经存在的某几个数组里面的值求和，所以就有了这个多个数组相同下标之和的方法。

 const test = () => {
    // 计算arr1、arr2、arr3相同下标的数据之和，保存为新数组。
    var arr1 = [1, 2, 3];
    var arr2 = [3, 2, 1, 2];
    var arr3 = [1, 1, 1, 0];
    var sumArr = { arr1, arr2, arr3 };
    // 声明一个空数组保存需要的数剧
    var res = [];
    for (var key in sumArr) {
      //遍历数组的每一项
      $.each(sumArr [key], function (index, val) {
        if (res[index] == null || res[index] == "") {
          res[index] = 0;
        }
        res[index] += val;
      })
    }
    //打印结果
    console.log(res);  //[5, 5, 5, 2]
  }

两个数组相同下标之差

注意：返回的结果为差的绝对值（不考虑减数大于被减数的情况），被减数是arr1，减数是arr2

const arr1 = [1,2,3,4,5,6];
const arr2 = [9,8,7,5,8,3];
const absDifference = (arr1, arr2) => {
   const res = [];
   for(let i = 0; i < arr1.length; i++){
      const el = Math.abs((arr1[i] || 0) - (arr2[i] || 0));
      res[i] = el;
   };
   return res;
};
console.log(absDifference(arr1, arr2));

扁平化数据转Tree树形结构数据

1、需要两个字段确定父级和子级的关系
2、比如：父级的displayId 等于 子级的parentDisplayId。

直接上代码实例

const transTree = () => { // 返回的设备数据处理为tree结构数据
    const targetData = []
    // 以每一项的displayId作为key,自身作为value形成对象结构
    const map = {}
    data.forEach(item => {
      map[item.displayId] = item
      item.children = []
    })
    // 遍历数组通过parentDisplayId去匹配displayId,匹配到就添加到chilren属性中,
    // 匹配不到代表自身就是最外层的父节点,添加到最终的数组中
    data.forEach(item => {
      if (map[item.parentDisplayId]) {
        map[item.parentDisplayId].children.push(item)
      } else {
        targetData.push(item)
      }
    })
    return targetData
  }
  console.log('数据结构', transTree());

1、数组的fill(）方法

地址： 前端操作数组的方法
fill()方法，为数组填充数据。fill接收三个参数，第一个参数，是替换填充的值，第二个是替换填充的位置，第三个则是结束位置。注：不包含结束位置的填充

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

2、数组的includes（）用法实例分析

判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。参数是必带的valueToFind，和可选的fromIndex。includes() 方法和indexOf方法有点像，不同之处是indexOf方法是返回索引。

//1、includes()基本使用
let arr=[23,43,5,43,2,1,32];
let bool_val=arr.includes(43);
console.log(bool_val); // 返回true

3、数组的 indexOf（）方法

返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到返回-1。indexOf()只返回字符串在规定的查找顺序中，首次出现的位置
工作中应用： 如果要检索的字符串值没有出现，则该方法返回 -1

// 对String 类型的使用
let str = 'orange';

str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1

// 对Array 类型的使用
let arr = ['orange', '2016', '2016'];

arr.indexOf('orange'); //0
arr.indexOf('o'); //-1

var arr = [1,2,3];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(4));//-1

4、数组的concat（）用法实例分析

合并两个或多个数组

// 两个数据合并
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

// 合并多个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

5、数组的every（）用法实例分析

测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

// 检查数组中的每一项是否都大于等于10
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

// 检查一个数组是否是另一个数组的子集
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

6、数组的join（）方法

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"