黑马程序员技术交流社区

标题: [广州前端]10个 JavaScript 有用的简写技术(二) [打印本页]

作者: 黑黑黑黑黑黑    时间: 2018-1-4 12:12
标题: [广州前端]10个 JavaScript 有用的简写技术(二)
6.短路评价
给一个变量分配的值是通过判断其值是否为null或undefined,则可以:
[JavaScript] 纯文本查看 复制代码
let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}
简写:
const dbHost = process.env.DB_HOST || 'localhost';
7.十进制指数
当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:
[JavaScript] 纯文本查看 复制代码
for (let i = 0; i < 10000; i++) {}

简写:
[JavaScript] 纯文本查看 复制代码
for (let i = 0; i < 1e7; i++) {}

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
8.对象属性简写
如果属性名与key名相同,则可以采用ES6的方法:
[JavaScript] 纯文本查看 复制代码
const obj = { x:x, y:y };
简写:
[JavaScript] 纯文本查看 复制代码
const obj = { x, y };
9.箭头函数简写
传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。
[JavaScript] 纯文本查看 复制代码
function sayHello(name) {
  console.log('Hello', name);
}

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

list.forEach(function(item) {
  console.log(item);
});
简写:
[JavaScript] 纯文本查看 复制代码
sayHello = name => console.log('Hello', name);

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

list.forEach(item => console.log(item));
10.隐式返回值简写
经常使用return语句来返回函数最终结果,一个单独语句的箭头函数能隐式返回其值(函数必须省略{}为了省略return关键字)
为返回多行语句(例如对象字面表达式),则需要使用()包围函数体。
[JavaScript] 纯文本查看 复制代码
function calcCircumference(diameter) {
  return Math.PI * diameter
}

var func = function func() {
  return { foo: 1 };
};
简写:
[JavaScript] 纯文本查看 复制代码
calcCircumference = diameter => (
  Math.PI * diameter;
)

var func = () => ({ foo: 1 });

更多精彩前端资源请看:





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2