首页 》职业素养课 > JAVA面试技巧 >

Javascript的编码小技巧

发表日期:2019年09月25日 文章编辑:IT实战

如果使用if...else语句,那么这是一个很好节省代码的方式。

Longhand:

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

Shorthand:

const answer = x > 10 ? 'is greater' : 'is lesser';

你还可以像下面这样嵌套if语句:

const big = x > 10 ? " greater 10" : x

Short-circuit Evaluation

分配一个变量值到另一个变量的时候,你可能想要确保变量不是nullundefined或空。你可以写一个有多个if的条件语句或者Short-circuit Evaluation。

Longhand:

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

Shorthand:

const variable2 = variable1  || 'new';

不要相信我,请先相信自己的测试(可以把下面的代码粘贴在es6console

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

声明变量

在函数中声明变量时,像下面这样同时声明多个变量可以节省你大量的时间和空间:

Longhand:

let x;let y;let x = 3;

Shorthand:

let x, y, z=3;

如果存在

这可能是微不足道的,但值得提及。做“如果检查”时,赋值操作符有时可以省略。

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

注:这两种方法并不完全相同,简写检查只要likeJavaScripttrue都将通过。

这有另一个示例。如果a不是true,然后做什么。

Longhand:

let a;if ( a !== true ) {// do something...}

Shorthand:

let a;if ( !a ) {// do something...}

JavaScript的for循环

如果你只想要原生的JavaScript,而不想依赖于jQuery或Lodash这样的外部库,那这个小技巧是非常有用的。

Longhand:

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

Shorthand:

for (let index in allImgs)

Array.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

Short-circuit Evaluation

如果参数是null或者是undefined,我们可以简单的使用一个Short-circuit逻辑运算,实现一行代码替代六行代码的写法。

Longhand:

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

Shorthand:

const dbHost = process.env.DB_HOST || 'localhost';

十进制指数

你可能看过这个。它本质上是一个写数字的奇特写法,就是一个数字后面有很多个0。例如1e7本质相当于100000001的后面有70)。它代表了十进制计数等于10000000

Longhand:

for (let i = 0; i < 10000; i++) {}

Shorthand:

for (let i = 0; i < 1e7; i++) {}

// All the below will evaluate to true1e0 === 1;1e1 === 10;1e2 === 100;1e3 === 1000;1e4 === 10000;1e5 === 100000;

对象属性

定义对象文字(Object literals)让JavaScript变得更有趣。ES6提供了一个更简单的办法来分配对象的属性。如果属性名和值一样,你可以使用下面简写的方式。

Longhand:

const obj = { x:x, y:y };

Shorthand:

const obj = { x, y };

箭头函数

经典函数很容易读和写,但它们确实会变得有点冗长,特别是嵌套函数中调用其他函数时还会让你感到困惑。

Longhand:

function sayHello(name) {  console.log('Hello', name);
}

setTimeout(function() {  console.log('Loaded')
}, 2000);

list.forEach(function(item) {  console.log(item);
});

Shorthand:

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

隐式返回

return在函数中经常使用到的一个关键词,将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果(函数必须省略{},为了省略return关键词)。

如果返回一个多行语句(比如对象),有必要在函数体内使用()替代{}。这样可以确保代码是否作为一个单独的语句返回。

Longhand:

function calcCircumference(diameter) {  return Math.PI * diameter
}

Shorthand:

calcCircumference = diameter => (
  Math.PI * diameter;
)

默认参数值

你可以使用if语句来定义函数参数的默认值。在ES6中,可以在函数声明中定义默认值。

Longhand:

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

Shorthand:

volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

Template Literals

是不是厌倦了使用+来连接多个变量变成一个字符串?难道就没有一个更容易的方法吗?如果你能使用ES6,那么你是幸运的。在ES6中,你要做的


    相关新闻

    济南华育学员:没有华育就没有我们的今天!

    济南华育快讯:近日,刚刚就业不久的17-0910Java班学员代表李鑫铭与同学孔杰、孙磊、杨林一起来到济南华育

    2018年01月05日

    济南华育705网络营销班毕业啦

    济南学网络营销课程 就到济南华育IT

    2018年01月08日

    IT行业,哪些岗位可以拿高薪

    IT行业,哪些岗位可以拿高薪在职场毫无方向的时候,你可能会有这样的疑问:干哪行好呢?如果学计算机在你考虑的范围内,将来想进入软件和互

    2019年09月25日

    零基础如何学好大数据?

    零基础如何学好大数据? 大数据是对海量数据进行存储、计算、统计、分析处理的一系列处理手段,处理的数据量通常是TB级,甚至是PB或EB级的

    2019年09月24日

    非计算机专业能学JAVA软件开发吗?

    非计算机专业能学JAVA软件开发吗? 非计算机本专业是完全可以学的,java语言本身是很简单,不需要数学基础,甚至不需要什么计算机基础。 

    2019年09月23日

    2019,跳槽转行适合学习什么技术?

    2019,跳槽转行适合学习什么技术?  近年来,随着信息技术的发展,阿里巴巴、百度、腾讯等IT企业如雨后春笋,拔地而起,马云、李彦宏、马

    2019年09月21日

    热点推荐