首页 > 其他分享 >es6代码规范

es6代码规范

时间:2022-10-27 12:00:55浏览次数:45  
标签:es6 obj name ... 代码 规范 item 数组 const

1、关于取值

取值在程序中非常常见,比如从对象obj中取值。

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

吐槽写法:

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

const f = obj.a + obj.d;
const g = obj.c + obj.e;

改进:ES6的解构赋值来取值

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

使用ES6的解构赋值,如果想创建的变量名和对象的属性名不一致,可以这么写:

const {a:a1} = obj;
console.log(a1);// 1

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错,故要给被解构的对象一个默认值

const {a,b,c,d,e} = obj || {};

 

2、关于合并数据

比如合并两个数组,合并两个对象。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

改进

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

 

3、关于三目运算符的使用

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

改进后

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

4、关于if中判断条件的吐槽

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}
 

改进:采用ES6中数组实例方法includes(其实还可以用如findIndex、indexOf...方法很多)
const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

 

5、关于列表搜索的吐槽

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

改进(性能优化,find方法中找到符合条件的项,就不会继续遍历数组)

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

6、关于扁平化数组的吐槽

一个部门JSON数据中,属性名是部门id,属性值是个部门成员id数组集合,现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

改进:采用Object.values,还有涉及到数组的扁平化处理,采用ES6提供的flat方法,因为可以处理多维数组的扁平化

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数,使得无需知道被扁平化的数组的维度

7、关于获取对象属性值的吐槽

const name = obj && obj.name;

改进:采用可选链操作符

const name = obj?.name;

 

标签:es6,obj,name,...,代码,规范,item,数组,const
From: https://www.cnblogs.com/youwei716/p/16831743.html

相关文章

  • 汇编代码小结
    目录为什么要学习汇编语言前置知识指令集架构(InstructionSetArchitecture,ISA)处理器状态汇编和C的联系代码示例基本的汇编语句流程控制语句的实现ifwhiledo-whilewh......
  • preg_replace /e 模式下的代码执行问题
    preg_replace/e模式下的代码执行问题preg_replace在/e模式下存在代码执行问题这里借用例题分析functioncomplex($re,$str){returnpreg_replace(......
  • 计算几何基础-代码部分
    先来一个namespacegeo,存下计算几何的基本类型和基本运算//#pragmaGCCoptimize(2)#include<cstdio>#include<cmath>#include<vector>#include<algorithm>usingn......
  • 代码随想录 KMP算法,实现 strStr()(LeetCode 028)和重复的子字符串(LeetCode 459)
    KMP算法前缀表:记录下标i之前(包括i)的字符串中,有多大长度的相同前缀后缀。前缀是指不包含最后一个字符的所有以第一个字符开头的连续子串。后缀是指不包含第一个字符的所......
  • 代码随想录训练营第十五天 | 层序遍历 10,226.翻转二叉树 ,101.对称二叉树 2
    今天是训练营的第十五天,继续二叉树方面的学习 迭代法遍历:前序:classSolution{publicList<Integer>preorderTraversal(TreeNoderoot){Stack<TreeNo......
  • 求助各位大佬,有没有低代码平台自己开发一个进销存的系统?[要求:计算重量单价金额、打印
    给你推荐xPlus(3UCS)的,就是3UCS与武科大联合打造的软件应用快速定制平台,用来定制进销存、CRM之类的系统比较轻松,一方面,系统可以自动读取数据库结构表自动生成代码,另一方面,......
  • php代码审计
    反斜杠被过滤,利用cd回到根目录<?phperror_reporting(0);if(isset($_GET["cmd"])){if(preg_match('/et|echo|cat|tac|base|sh|more|less|tail|vi|head|nl|env|fl|\|......
  • Git 在 vs code 正确提交推送代码
    1.写完相应的代码后,如图↓↓↓↓↓↓↓2.第一步,选中你要暂存的文件【暂存更改】如图↓↓↓↓↓↓提交后变成这样样子,如图↓↓↓↓↓↓↓3.第二步,填写本次提交文案(标......
  • 代码随想录Day11
    LeetCode20有效的括号给定一个只包括'(',')','{','}','[',']' 的字符串,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺......
  • MyBatis详细代码来啦!
    家人们,改代码改到现在真的绝了,终于是改出来了,但是对于某些判断性的小问题还没写,细节性满满的增删改查终于实现啦!目录结构各个文件的代码://User.javapackageorg.examp......