木子卜—木子卜资源网

10个常用的JavaScript简写技巧

任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看 JavaScript 的简写技巧吧。

1. 声明变量

//Longhand
let x;
let y = 20;

//Shorthand
let x, y = 20;

2. 给多个变量赋值

我们可以使用数组解构来在一行中给多个变量赋值。

//Longhand
let a, b, c;
a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

3. 三元运算符

我们可以使用三元(条件)运算符在这里节省 5 行代码。

//Longhand
let marks = 26;
let result;
if(marks >= 30){
 result = 'Pass';
}else{
 result = 'Fail';
}

//Shorthand
let result = marks >= 30 ? 'Pass' : 'Fail';

4. 赋默认值

我们可以使用 OR(||) 短路运算来给一个变量赋默认值,如果预期值不正确的情况下。

//Longhand
let imagePath;
let path = getImagePath();
if(path !== null && path !== undefined && path !== '') {
  imagePath = path;
} else {
  imagePath = 'default.jpg';
}

//Shorthand
let imagePath = getImagePath() || 'default.jpg';

5. 与 (&&) 短路运算

如果你只有当某个变量为 true 时调用一个函数,那么你可以使用与 (&&)短路形式书写。

//Longhand
if (isLoggedin) {
 goToHomepage();
}

//Shorthand
isLoggedin && goToHomepage();

当你在 React 中想要有条件地渲染某个组件时,这个与 (&&)短路写法比较有用。例如:

<div> { this.state.isLoading && <Loading /> } </div>

6. 交换两个变量

为了交换两个变量,我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。

let x = 'Hello', y = 55;
//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];

7. 箭头函数

//Longhand
function add(num1, num2) {
   return num1 + num2;
}

//Shorthand
const add = (num1, num2) => num1 + num2;

8. 模板字符串

我们一般使用 + 运算符来连接字符串变量。使用 ES6 的模板字符串,我们可以用一种更简单的方法实现这一点。

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

9. 多行字符串

对于多行字符串,我们一般使用 + 运算符以及一个新行转义字符(n)。我们可以使用 (`) 以一种更简单的方式实现。

//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' +
'ECMAScript specification. JavaScript is high-level,\n' +
'often just-in-time compiled, and multi-paradigm.' );

//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

10. 多条件检查

对于多个值匹配,我们可以将所有的值放到数组中,然后使用indexOf()或includes()方法。

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
     // Execute some code
}

// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
    // Execute some code
}

// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {
    // Execute some code
}

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »