web小白填坑记(一) —— 简化js编写小技巧

其实我不算刚入坑的web前端工程师,已经在web这行干了一年了,但还是觉得自己很垃圾啊~~~摔!!!

所以痛定思痛,还是觉得在学习前端同时,把一些看到的小知识点或者小技巧保存下来,方便自己以后查看,当然如果有大神看到可以稍微指点下就更好啦!

第一次写博客性质的文章,格式也不清楚,写的不好请多多包涵,下面开始正文!

缩短求值简写

将变量值分配给另一个变量时,你可能需要确保源变量不为 null、undefined 或者不为空。你可以使用多个条件写一个很长的 if 语句。

if (variable1 !== null || variable1 !== undefined || variable1 !== '')
{
     let variable2 = variable1
}

也可以使用缩短求值的简写办法

let variable2 = variable1 || 'new'

上面的'new'为缺省值
原理也很简单,利用或运算符,如果variable1存在且有值则将值赋给variable2,反之将预设好的值赋给variable2

JavaScript for 循环简写

涉及到js中数组或者对象的操作我们往往会用for循环比如:

for (let i = 0; i < allImgs.length; i++)

而es6里提供了一个更方便的写法

for (let value of allImgs)

说道 for ...of 就不免想到他还有个兄弟 for ...in,它也可以遍历数组,但是会存在以下问题

  • index索引为字符串型数字,不能直接进行几何运算

  • 遍历顺序有可能不是按照实际数组的内部顺序

  • 使用for in会遍历数组所有的可枚举属性,包括原型

所以for in更适合遍历对象,不要使用for in遍历数组。

当然es5还提供了forEach用来遍历数组,不过无法用break和return结束循环,剩下的还有map,filter,some,every,reduce,reduceRight等,它们的返回值各不相同,就不一一细说了

对于遍历对象而又不想遍历原型来说,es5也提供了Object.keys(),它可以把对象的实例属性组成数组

var myObject={
  a:1,
  b:2,
  c:3
}
Object.keys(myObject).forEach(function(val,index){
  //console.log(val)
})

对象属性简写

在 JavaScript 中定义对象字面量非常容易
const obj = { x:x, y:y }

而es6提供了一种更加简便直观的写法
const obj = {x, y}

当然用上面这种方法,name和key的名字必须要相同

解构赋值简写

如果你正在使用任何流行的 web 框架,那么你很有可能会使用数组或者对象字面量形式的数据在组件和 API 之间传递信息。一旦组件接收到数据对象,你就需要将其展开。

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
 
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

这样写非常麻烦且难以维护,所以es6的解构就因运而生了:

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

为了防止从数组中取出一个值为undefined的对象,可以为这个对象设置默认值。

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity, newVal = 'xxx' } = this.props;

还可以交换变量

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

可以说解构是一个非常实用的方法,而且和下面的展开运算符配合更是如虎添翼

展开运算符简写

平时我们需要拼接或者克隆数组需要

// 拼接数组
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// 克隆数组
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

在ES6中引入的 展开运算符 有几个用例,使 JavaScript 代码更高效、更有趣。它可以用来替换某些数组函数。展开运算符写起来很简单,就是三个点。

// 拼接数组
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
 
// 克隆数组
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

而且重点是它可以在任意一个地方插入数组!!

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

你也可以将展开运算符和 ES6 解构赋值结合起来使用:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

可以说解构和展开运算符是最让我这个小白高兴的点,因为实在是为本码农减少了非常多的代码量,而且读起来非常的简洁!!

如果想要了解更多解构的写法可以戳这里

双位非运算符简写

双位运算符有一个非常实用的使用场景:可以用来代替 Math.floor。双位非运算符的优势在于它执行相同操作的速度更快
普通写法:

Math.floor(4.9) === 4  //true

简写

~~4.9 === 4  //true

按位运算符方法执行很快,当你执行数百万这样的操作非常适用,速度明显优于其他方法。但是代码的可读性比较差。还有一个特别要注意的地方,所有的按位运算都以带符号的32位整数进行。处理比较大的数字时(当数字范围超出 ±2^31−1 即:2147483647),会有一些异常情况。使用的时候明确的检查输入数值的范围。 具体可以查看 你可能不知道的 JavaScript 中数字取整:向上取整,向下取整,四舍五入,舍去小数

结语

第一篇博客终于写完啦(其实大部分都是复制粘贴。。。,当然我还是写了一些自己的感想),以后会不定时的更新,算是给自己的一个激励吧(但是时间跨度多大emmmmm我也不清楚啊哈哈哈哈哈哈哈,毕竟工作很忙,而且我有女票嘿嘿嘿)

参考文献

19+ JavaScript 编码简写技巧
你可能不知道的 JavaScript 中数字取整:向上取整,向下取整,四舍五入,舍去小数
解构赋值

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