扩展运算符在项目中的一次应用

最新推荐文章于 2022-04-30 10:32:12 发布

kk的笨脑壳

最新推荐文章于 2022-04-30 10:32:12 发布

阅读量226

点赞数

分类专栏：项目总结 react 文章标签： es6 react

本文链接：https://blog.csdn.net/kkstrive/article/details/78415957

版权

项目总结同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

react

6 篇文章 0 订阅

订阅专栏

扩展运算符（…）

将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]


// 函数调用
function add(x, y) {
    return x + y
}
const numbers = [4, 6]
add(...numbers)  //10

// 可以放表达式
const arr = [...(x > 0 ? [1,2,3]: [4,5,6]), 7, 8]

空数组，不产生效果
[...[], 1]  // [1]

项目中的扩展符的应用

实现：后台返回不确定列，用于画表格。但是需要将：_ts, _seq, wtif, wfid放在前列显示，注意以上四个变量也是不确定的（即某个或几个变量可能没有）。

// items 结构：
"items": [{
            "WTUR_PwrAt_Ra_F32": 99.0,
            "WTPS_Temp_Ra_F32_Pbox3": 25.6,
            "_seq": 1,
            "wfid": 140604.0,
            "WGEN_Temp_Ra_F32_max": 38.89,
            "WTUR_Temp_Ra_F32": 19.89,
            "_ts": 1.471363211515E12,
            "wtid": 1.40604106E8
        }, {
            "WTUR_PwrAt_Ra_F32": 48.0,
            "WTPS_Temp_Ra_F32_Pbox3": 25.6,
            "_seq": 2,
            "wfid": 140604.0,
            "WGEN_Temp_Ra_F32_max": 38.42,
            "WTUR_Temp_Ra_F32": 19.89,
            "_ts": 1.471364423841E12,
            "wtid": 1.40604106E8
        }, {
            "WTUR_PwrAt_Ra_F32": 51.0,
            "WTPS_Temp_Ra_F32_Pbox3": 25.5,
            "_seq": 3,
            "wfid": 140604.0,
            "WGEN_Temp_Ra_F32_max": 38.38,
            "WTUR_Temp_Ra_F32": 19.79,
            "_ts": 1.471364521638E12,
            "wtid": 1.40604106E8
        },
        ...]

// Object.keys() 把对象展平为数组
const baseColumnDefs = Object.keys(items[0]).map(ele => ({
    headerName: ele,
    width: 50,
    field: ele,
    valueFormatter: ele === '_ts' ? dateRender : '',
    cellClass: 'call-record-cell',
    suppressSorting: true,
    suppressMenu: true,
    suppressColumnMoveAnimation: true,
    cellStyle: ele !== '_ts' ? {
      'text-align': 'right'
      // 'text-indent': '20px'
    } : {}
    }))
// manual sort
const _seq = baseColumnDefs.find(ele => ele.headerName === '_seq')
const _ts = baseColumnDefs.find(ele => ele.headerName === '_ts')
const wtid = baseColumnDefs.find(ele => ele.headerName === 'wtid')
const wfid = baseColumnDefs.find(ele => ele.headerName === 'wfid')
const sortArr = [
...(_seq ? [_seq] : []),
...(_ts ? [_ts] : []),
...(wtid ? [wtid] : []),
...(wfid ? [wfid] : [])
]
const others = R.without(sortArr)(baseColumnDefs)
columnDefs = [...sortArr, ...others]