一样的代码、不一样的写法,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、循环语句

当使用纯 Java(不依赖外部库,如 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 (likeJava === true)

简写为:

if (likeJava)

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, consecteturnt'
+ 'adipisicing elit, sed do eiusmod tempor incididuntnt'
+ 'ut labore et dolore magna aliqua. Ut enim ad minimnt'
+ 'veniam, quis nostrud exercitation ullamco laborisnt'
+ 'nisi ut aliquip ex ea commodo consequat. Duis autent'
+ 'irure dolor in reprehenderit in voluptate velit esse.nt'

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

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 true
variable1 = '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 中引入的,使用展开运算符能够让 Java 代码更加有效和有趣。

使用展开运算符可以替换某些数组函数。

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

简写为:

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const 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) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

10、强制参数

默认情况下,如果不向函数参数传值,那么 Java 会将函数参数设置为未定义。其它一些语言则会发出警告或错误。要执行参数分配,可以使用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

如果你曾经编写过普通 Java 中的 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 rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

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

13、双位操作符

位操作符是 Java 初级教程的基本知识点,但是我们却不常使用位操作符。因为在不处理二进制的情况下,没有人愿意使用 1 和 0。

但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快。

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

简写为:

~~4.9 === 4 //true

Java 开发工具推荐

SpreadJS 纯前端表格控件是基于 HTML5 的 Java 电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能,适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

本文分享自微信公众号 - BestSDK(bestsdk)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

vue.js的条件渲染,其实就是模板里面写if else

模板里面写逻辑判断在早期只有二种方法,一是用什么插件来搞;二是自己写一个模板然后正则匹配判断结果去替换字符串。其实这二种方法都是一样的,因为什么模板的插件十有八...

34370
来自专栏web前端教室

学东西要不断问为什么,要求“甚解”--本周日晚先行者课程简记

今天是周日,又到了每周日晚的先行者课程了。今天晚上的内容是“上传组件”,这个上传组件,其实更应该说是一个功能,上传功能。它几乎没有什么ui交互界面,顶多也就是一...

22270
来自专栏web前端教室

return的值都去哪了?去哪了,“谁伸手了,return的结果就给谁”

事情是这样,今天的前端零基础课在讲购物车模块,其中的全部商品中的被选中商品的总数和价格,是先要获得所有被选中的单项商品数量和单价,然后发送给接口进行计算的。这其...

24250
来自专栏web前端教室

【从零开始】用vuejs做一个简陋但好使的播放器(一)

今天突然想用vueJs做一个播放器。网上有许多现成的,但我又懒得去看别人的代码。怎么办呢?先【从零开始】做一个最简单的吧。 <!-- 一、需求 --> 用vue...

27780
来自专栏web前端教室

面试时对方问你,“xxx需求你是怎么做的”?你可以这样回答

如何去分析一个需求?这两天在给零基础课的同学们讲课的时候,正好讲到了,产品详情页的图片展示这里,ui是这样的, ? 跟京东那个的ui交互操作是一样的,我跟他们讲...

22050
来自专栏web前端教室

vue.js的computed计算属性,表达式的“js另存为”

简单的讲,vue的模板是基于html的,就是html里加模板语法,所以模板里的js注定不能太复杂。如果业务逻辑很复杂,就不能放在模板里了,否则这模板就成了一个业...

23160
来自专栏web前端教室

前端开发就是这样,“看似简单的东西,反而会很复杂。”

今天的零基础前端课讲到了一个tab地址切换的菜单,就下面这个东西, ? 第一眼看起来超级简单,无非是点击上面的title显示下面的菜单,然后点省市区把内容选上去...

23560
来自专栏web前端教室

越学习,越焦虑;越焦虑,越学不进去...,你看这说的是你吗?

今天下午有一个同学在微信上问我,“老尚,我现在上班了,但我现在遇到一个接口的问题,就是给我一个接口,我不知道该怎么用。你能不能在周末的课程中,系统的讲一下接口....

29280
来自专栏web前端教室

【Js结构】用vuejs做一个简陋但好使的播放器(二)

上一节写了做一个简陋的播放器,需要的大致的步骤,《【从零开始】用vuejs做一个简陋但好使的播放器(一)》。 其实就是简单的记了一下流水账,这一节咱们来“设计一...

24060
来自专栏web前端教室

前后端的“互不信任” -- 购物车之类涉及到钱财方面的数字计算

今天喝酒去了,刚回来,文章较短哈。 标题的意思就是说, 在购物之类涉及到真实钱财的计算之中, 前端不参与数字的计算。 因为前端的js不安全,js它是不保密的。...

22860

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励