ES6真的用好了吗

• ES6用好代码到底有多爽多优雅？
  • 1.前言
  • JavaScript和ES关系
  • 2.关于ES6
  • 3.实际场景应用ES6，后知后觉
    • a.关于合并数组(合并字典对象同理可得)
      • bad
      • good
    • b.关于非空判断
      • bad
      • good
    • c.关于动态属性名
      • bad
      • good
    • d.关于获取对象属性值
      • bad
      • good
  • 4.后续

1.前言

所谓思考和沉淀是进步的奠基石，关于前段时间测试平台前端开发及运用js编写工具，撸了3k行代码，也基于实际开发过程中遇到的场景进行了一些思考和总结

JavaScript和ES关系

关于JavaScript和ES的关系，可以用下来树状图展示

• JavaScript
  • ECMAScript(核心部分，也简称ES)
  • DOM(文档对象模型)
  • BOM(游览器对象模型)

可以理解JavaScript与ECMAScript关系，前者是后者的一种实现，后者是前者的格局

2.关于ES6

ES6 的第一个版本，在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准

总的来说，ES5后的JS语法统称ES6语法

3.实际场景应用ES6，后知后觉

a.关于合并数组(合并字典对象同理可得)

bad

实际场景：由于自动化用例参数中存在CCIF、ccif大写和小写命名(其中有部分字段值为空，部分未空值)，需要对这类数据进行合->去重->去假值，前端展示需要筛选出可用值放入Table

// 定义去重去假值方法
function unique(arr) {
    //...
}
const nodeList = [[...], [...]]
// 合并数组
const ccifArrs = nodeList[0].concat(nodeList[1])
// 去重去假值
var ccif = unique(ccifArrs)

good

ES6扩展运算符，且数组合并一般都考虑去重，但缺少去假值处理

const nodeList = [[...], [...]]
const c = [...new Set([...a, ...b])]

当然也可以使用优秀的lodash，去重去假值，一步到位

何为假值，例如false,null,0,"",undefined和NaN都是被认为是"假值"

const a = [1, 2, 3]
const b = [1, 3, 4]
const c = _.compact(_.sortedUniq([...a, ...b])) 

b.关于非空判断

bad

// 输入值非空判断
if (ccif[0] !== null && ccif[0] !== undefined && ccif[0] !== '') {
    //...
}

good

ES6空值合并运算符，多条件非空判断不存在的!

if ((ccif ?? '') !== '') {
    //...
}

c.关于动态属性名

bad

具体例子：风险变量加工工具中使用js针对复杂N层嵌套JSON搜索关键字处理时，搜索结果中所生成的表头与表格内容都是动态生成的，其中属性名为动态变化的

for (var i in nodeList) {
    //...
    let index = i
    let keyName = `fieldName${index}`
    Object.assign({}, {
        keyName: nodeList[i]
    })
}

good

ES6中对象属性名使用表达式，无需多创建多余变量

for (var i in nodeList) {
    //...
    Object.assign({}, {
        [`fieldName${index}`]: nodeList[i]
    })
}

d.关于获取对象属性值

常用的this.$route进行路径取值

bad

const id = this.$route && this.$route.params && this.$route.params.id

good

ES6可选操作符，简直了...

const id = this.$route?.params?.id

4.后续

以上作者有误理解的地方，欢迎在评论中指正，万分感谢~

读完觉得有遇到相关场景的，不妨关注一下，顺手点个赞支持一波~