让 JS 代码更简洁

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,709评论 2 17
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,039评论 0 3
  • 01javascript语法规范 <!DOCTYPE html> javascript语法...
    ouyangqinbin阅读 1,297评论 0 0
  • 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript ...
    金桔柠檬加冰阅读 398评论 0 0
  • 引导购买的两个原则 第一、避免极端。就是在有3个或者更多选择的时候,很多人不会选择最低或者最高的版本,而更倾向于选...
    罗南南阅读 403评论 0 0