前端JavaScript 开发需要知道的简写技巧

初级篇
1、三目运算符
下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。



const x = 20;let answer;if (x > 10) { answer = 'greater than 10';} else { answer = 'less than 10';}



简写为:
const answer = x > 10 ? 'greater than 10' : 'less than 10';

2、循环语句
当使用纯 JavaScript(不依赖外部库,如 jQuery 或 lodash)时,下面的简写会非常有用。
for (let i = 0; i < allImgs.length; i++)
简写为:
for (let index of allImgs)
下面是遍历数组 forEach 的简写示例:



function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element);}[2, 5, 9].forEach(logArrayElements);// logs:// a[0] = 2// a[1] = 5// a[2] = 9


3、声明变量
在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时:
let x;let y;let z = 3;
可以简写为:
let x, y, z=3;

4、if 语句
在使用 if 进行基本判断时,可以省略赋值运算符。
if (likeJavaScript === true)
简写为:
if (likeJavaScript)

5、十进制数
可以使用科学计数法来代替较大的数据,如可以将 10000000 简写为 1e7。
for (let i = 0; i < 10000; i++) { }
简写为:
for (let i = 0; i < 1e7; i++) { }

6、多行字符串
如果需要在代码中编写多行字符串,就像下面这样:


const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t' + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t' + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t' + 'veniam, quis nostrud exercitation ullamco laboris\n\t' + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t' + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

但是还有一个更简单的方法,只使用引号:

const lorem = Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

高级篇
1、变量赋值
当将一个变量的值赋给另一个变量时,首先需要确保原值不是 null、未定义的或空值。
可以通过编写一个包含多个条件的判断语句来实现:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1;}
或者简写为以下的形式:
const variable2 = variable1 || 'new';
可以将下面的代码粘贴到 es6console 中,自己测试:

let variable1;let variable2 = variable1 || '';console.log(variable2 === ''); // prints truevariable1 = 'foo';variable2 = variable1 || '';console.log(variable2); // prints foo

2、默认值赋值
如果预期参数是 null 或未定义,则不需要写六行代码来分配默认值。我们可以只使用一个简短的逻辑运算符,只用一行代码就能完成相同的操作。



let dbHost;if (process.env.DB_HOST) { dbHost = process.env.DB_HOST;} else { dbHost = 'localhost';}



简写为:
const dbHost = process.env.DB_HOST || 'localhost';

3、对象属性
ES6 提供了一个很简单的办法,来分配属性的对象。如果属性名与 key 名相同,则可以使用简写。
const obj = { x:x, y:y };
简写为:
const obj = { x, y };

4、箭头函数
经典函数很容易读写,但是如果把它们嵌套在其它函数中进行调用时,整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写:



function sayHello(name) { console.log('Hello', name);} setTimeout(function() { console.log('Loaded')}, 2000); list.forEach(function(item) { console.log(item);});



简写为:
sayHello = name => console.log('Hello', name);setTimeout(() => console.log('Loaded'), 2000);list.forEach(item => console.log(item));

5、隐式返回值
返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数,可以隐式返回结果(函数必须省略括号({ }),以便省略返回关键字)。
要返回多行语句(例如对象文本),需要使用()而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
function calcCircumference(diameter) { return Math.PI * diameter}
简写为:
calcCircumference = diameter => ( Math.PI * diameter;)

6、默认参数值
可以使用 if 语句来定义函数参数的默认值。ES6 中规定了可以在函数声明中定义默认值。



function volume(l, w, h) { if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h;}



简写为:
volume = (l, w = 3, h = 4 ) => (l * w * h);volume(2) //output: 24

7、模板字符串
过去我们习惯了使用“+”将多个变量转换为字符串,但是有没有更简单的方法呢?
ES6 提供了相应的方法,我们可以使用反引号和 $ { } 将变量合成一个字符串。
const welcome = 'You have logged in as ' + first + ' ' + last + '.'const db = 'http://' + host + ':' + port + '/' + database;
简写为:
const welcome = You have logged in as ${first} ${last};const db = http://${host}:${port}/${database};

8、解构赋值
解构赋值是一种表达式,用于从数组或对象中快速提取属性值,并赋给定义的变量。
在代码简写方面,解构赋值能达到很好的效果。



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;



简写为:
import { observable, action, runInAction } from 'mobx';const { store, form, loading, errors, entity } = this.props;
甚至可以指定自己的变量名:
const { store, form, loading, errors, entity:contact } = this.props;

9、展开运算符
展开运算符是在 ES6 中引入的,使用展开运算符能够让 JavaScript 代码更加有效和有趣。
使用展开运算符可以替换某些数组函数。



// joining arraysconst odd = [1, 3, 5];const nums = [2 ,4 , 6].concat(odd); // cloning arraysconst arr = [1, 2, 3, 4];const arr2 = arr.slice( )



简写为:

// joining arraysconst odd = [1, 3, 5 ];const nums = [2 ,4 , 6, ...odd];console.log(nums); // [ 2, 4, 6, 1, 3, 5 ] // cloning arraysconst arr = [1, 2, 3, 4];const arr2 = [...arr];

和 concat( ) 功能不同的是,用户可以使用扩展运算符在任何一个数组中插入另一个数组。
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) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }

10、强制参数
默认情况下,如果不向函数参数传值,那么 JavaScript 会将函数参数设置为未定义。其它一些语言则会发出警告或错误。要执行参数分配,可以使用if语句抛出未定义的错误,或者可以利用“强制参数”。



function foo(bar) { if(bar === undefined) { throw new Error('Missing parameter!'); } return bar;}



简写为:

mandatory = ( ) => { throw new Error('Missing parameter!');}foo = (bar = mandatory( )) => { return bar;}

11、Array.find
如果你曾经编写过普通 JavaScript 中的 find 函数,那么你可能使用了 for 循环。在 ES6 中,介绍了一种名为 find()的新数组函数,可以实现 for 循环的简写。



const pets = [ { type: 'Dog', name: 'Max'}, { type: 'Cat', name: 'Karl'}, { type: 'Dog', name: 'Tommy'},]function findDog(name) { for(let i = 0; i<pets.length; ++i) { if(pets[i].type === 'Dog' && pets[i].name === name) { return pets[i]; } }}



简写为:
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');console.log(pet); // { type: 'Dog', name: 'Tommy' }

12、Object [key]
虽然将 foo.bar 写成 foo ['bar'] 是一种常见的做法,但是这种做法构成了编写可重用代码的基础。
请考虑下面这个验证函数的简化示例:



function validate(values) { if(!values.first) return false; if(!values.last) return false; return true;}console.log(validate({first:'Bruce',last:'Wayne'})); // true



上面的函数完美的完成验证工作。但是当有很多表单,则需要应用验证,此时会有不同的字段和规则。如果可以构建一个在运行时配置的通用验证函数,会是一个好选择。

// object validation rulesconst schema = { first: { required:true }, last: { required:true }} // universal validation functionconst validate = (schema, values) => { for(field in schema) { if(schema[field].required) { if(!values[field]) { return false; } } } return true;}console.log(validate(schema, {first:'Bruce'})); // falseconsole.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

现在有了这个验证函数,我们就可以在所有窗体中重用,而无需为每个窗体编写自定义验证函数。

13、双位操作符
位操作符是 JavaScript 初级教程的基本知识点,但是我们却不常使用位操作符。因为在不处理二进制的情况下,没有人愿意使用 1 和 0。
但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快。
Math.floor(4.9) === 4 //true
简写为:
~~4.9 === 4 //true

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

推荐阅读更多精彩内容