美文网首页H5
让 JS 代码更简洁

让 JS 代码更简洁

作者: Zszen | 来源:发表于2019-03-10 07:45 被阅读4次

文章结尾我会附上视频地址,有自己想法的可以留言交流,谢谢🙏

1. 输出对象快速查看

低效输出 console.log(obj),你需要点开控制台的log才能看到结果
高效输出console.table(obj),直接以表格方式把对象的键值显示出来,还支持多数据对比显示console.table({a,b})

2.检查代码执行性能

console.time('标签')
//执行代码块
console.timeEnd('标签')

3.log输出时获得函数执行的调用队列

console.trace('log信息')很方便的获得了调用函数的位置

4.快速格式化字符串

当有一个对象需要对其进行输出显示时,

const animal={name:"奶牛",age:3,weight:100,height:140,color:"白色"}

低效方式:

function getInfo(obj){
    return `我家的${obj.name}是${obj.color}的。`
}

高效方式

function getInfo({name,color}){
    return `我家的${name}是${color}的。`
}
//或者
function getInfo(obj){
    const {name,color} = obj
    return `我家的${name}是${color}的。`
}

5.输入格式化字符串中的参数给函数

第一个参数数组的个数是被输入变量分割后的字符串
之后的参数为输入变量值

function format(strs, age){
    return `${strs[0]},${age},${strs[1]}`
}
const result = format`我家的牛${animal.age} 岁了`
//结果:我家的牛,3,岁了

6.合并对象键值

将老鼠赋予动物的属性,并赋予年龄属性

const animal = {class:"动物"}
const rat = {name:"老鼠"}

低效方法:

rat['class'] = animal.class
rat['age'] = 1

或者

for(var key in animal){
  rat[key] = animal[key]
}
rat['age'] = 1

高效方法1:

Object.assign(rat ,animal, rat)
Object.assign(rat,{age:1})

视频教程这里是错的,直接使用了const ratResult = Object.assign(rat,animal),这样会把rat的值覆盖掉,如果animal上有相同的值, 而且输入顺序就是被覆盖的顺序
高效方法2:

const ratFinal = {...animal,...rat}

7.数组添加元素

低效写法:

arr.push(4)
arr.push("code")
arr.push("0")

高效写法:
你可以直接把内容批量添加进去

arr = [...arr, 4,"code","0"]
arr = [4,"code","0", ...arr]
arr = [4,"code" , ...arr ,"0"]

8.快速对一组数据进行求和,均值,阀值,整体修正值

const nums = [27,104,150,54,193,113,6,144,8]

低效写法:

const total = 0;
const taxs = [];
const highVals = [];
for(const i =0;i<nums.length;i++){
    total+=nums[i];
    taxs.push(nums[i]*1.1)
    if(nums[i]>100){
        highVals.push(nums[i])
    }
}

高效写法:

const total = nums.reduce((added,currentUnit)=> added + currentUnit)
const taxs = nums.map(unit=>unit*1.1)
const highVals = nums.filter(unit => unit>100)

9.Promise 同步与异步

定一个函数,这只是一个范例,并不抛错

const random = ()=>{
    return Promise.resolve(Math.random())
}

低效写法:

var total = 0;
(()=>{
    let first;
    let second;
    let third;
    return random().then(v=>{
        first=v
        returnrandom()
    }).then(v=>{
        second=v
        return random()
    }).then(v=>{
        third=v
        return first+second+third
    }).then(v=>{
        total = v;
        console.log(`Result ${total}`) 
    })
})()

高效写法1:

var total=0;
(async()=>{
    const first = await random();
    const second = await random();
    const third = await random();
    total =first+second+third
    console.log(`Result ${total}`) 
})()

高效写法2:

var total=0;
Promise.all([random(),random(),random()]).then((vals)=>{
    total = vals.reduce((a,b)=>a+b)
    console.log(`Result ${total}`) 
})

高效写法3:

var total = 0;
(async() =>{
    const [a,b,c] = await Promise.all([random(),random(),random()]);
    total = a+b+c;
    console.log(`Result inside ${total}`)
})();
console.log(`Result outside ${total}`)

async 并不会保证异步执行后外部能等待得到结果,它只保证内部代码的调理运行

视频地址:
https://www.youtube.com/watch?v=Mus_vwhTCq0
百度网盘地址:
链接: https://pan.baidu.com/s/1RCL3ErdOYsvsS1QmeB4NMg 提取码: ti1a

相关文章

  • 让 JS 代码更简洁

    文章结尾我会附上视频地址,有自己想法的可以留言交流,谢谢? 1. 输出对象快速查看 低效输出 console.lo...

  • Lombok让代码更简洁

    Lombok 简介 Lombok项目通过添加“处理程序”,使java成为一种更为简单的语言。 简单来说,比如我们新...

  • 使用PipeLine让代码更简洁

  • 最简洁实现 jQuery

    用最简单的代码还原jQuery最核心的思路html js js 再简洁点

  • js实现分页

    大家在展示数据的时候难免会用到表格,而分页的存在会使表格看起来更简洁。 下面是js分页的代码 下面对代码进行解读 ...

  • JQEURY

    1.jquery是什么 jquery是JavaScript的一个库,对原生的JS做了各种优化,比如代码看上去更简洁...

  • JS简洁代码技巧汇总

    1. ? 替换 if...else 语句 2. && 短路替换 if 语句 3. includes压缩多个 if ...

  • 当RecycleView遇上DataBinding

    想让RecycleView的代码更简洁吗? 那就使用DataBinding吧~~ DataBinding可以直接将...

  • [swift 进阶]读书笔记-第八章:错误处理 C8P6 de

    错误处理 Error Handling 8.6 defer语法可以让代码更简洁 Clearing Up Using...

  • lambda函数的作用

    目录 lambda函数让代码看起来更简洁直观 lambda函数是一个函数对象 总结 1.lambda函数让代码看起...

网友评论

    本文标题:让 JS 代码更简洁

    本文链接:https://www.haomeiwen.com/subject/fsiypqtx.html