关于javascript:10-个超棒的-JavaScript-简写技巧

明天我要分享的是 10 个超棒的 JavaScript 简写办法，能够放慢开发速度，让你的开发工作事倍功半哦。

开始吧！

1. 合并数组

一般写法：

咱们通常应用 Array 中的 concat() 办法合并两个数组。用 concat() 办法来合并两个或多个数组，不会更改现有的数组，而是返回一个新的数组。请看一个简略的例子：

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇'].concat(apples);
 
console.log(fruits);
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

简写办法：

咱们能够通过应用 ES6 扩大运算符 (...) 来缩小代码，如下所示：

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...apples];  // <-- here
 
console.log(fruits);
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

失去的输入与一般写法雷同。

2. 合并数组（在结尾地位）

一般写法：

假如咱们想将 apples 数组中的所有项增加到 Fruits 数组的结尾，而不是像上一个示例中那样放在开端。咱们能够应用 Array.prototype.unshift() 来做到这一点：

let apples = ['🍎', '🍏'];
let fruits = ['🥭', '🍌', '🍒'];
 
// Add all items from apples onto fruits at start
Array.prototype.unshift.apply(fruits, apples)
 
console.log(fruits);
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

当初红苹果和绿苹果会在结尾地位合并而不是开端。

简写办法：

咱们仍然能够应用 ES6 扩大运算符 (...) 缩短这段长代码，如下所示：

let apples = ['🍎', '🍏'];
let fruits = [...apples, '🥭', '🍌', '🍒'];  // <-- here
 
console.log(fruits);
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. 克隆数组

一般写法：

咱们能够应用 Array 中的 slice() 办法轻松克隆数组，如下所示：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = fruits.slice();
 
console.log(cloneFruits);
//=> ["🍉", "🍊", "🍇", "🍎"]

简写办法：

咱们能够应用 ES6 扩大运算符 (...) 像这样克隆一个数组：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...fruits];  // <-- here
 
console.log(cloneFruits);
//=> ["🍉", "🍊", "🍇", "🍎"]

4. 解构赋值

一般写法：

在解决数组时，咱们有时须要将数组“解包”成一堆变量，如下所示：

let apples = ['🍎', '🍏'];
let redApple = apples[0];
let greenApple = apples[1];
 
console.log(redApple);    //=> 🍎
console.log(greenApple);  //=> 🍏

简写办法：

咱们能够通过解构赋值用一行代码实现雷同的后果：

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  // <-- here
 
console.log(redApple);    //=> 🍎
console.log(greenApple);  //=> 🍏

5. 模板字面量

一般写法：

通常，当咱们必须向字符串增加表达式时，咱们会这样做：

// Display name in between two strings
let name = 'Palash';
console.log('Hello,' + name + '!');
//=> Hello, Palash!
 
// Add & Subtract two numbers
let num1 = 20;
let num2 = 10;
console.log('Sum =' + (num1 + num2) + 'and Subtract =' + (num1 - num2));
//=> Sum = 30 and Subtract = 10

简写办法：

通过模板字面量，咱们能够应用反引号()，这样咱们就能够将表达式包装在${…}\` 中，而后嵌入到字符串，如下所示：

// Display name in between two strings
let name = 'Palash';
console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore
//=> Hello, Palash!
 
// Add two numbers
let num1 = 20;
let num2 = 10;
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);
//=> Sum = 30 and Subtract = 10

6. For 循环

一般写法：

咱们能够应用 for 循环像这样循环遍历一个数组：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
 
// Loop through each fruit
for (let index = 0; index < fruits.length; index++) {console.log( fruits[index] );  // <-- get the fruit at current index
}
 
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

简写办法：

咱们能够应用 for...of 语句实现雷同的后果，而代码要少得多，如下所示：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
 
// Using for...of statement 
for (let fruit of fruits) {console.log( fruit);
}
 
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

7. 箭头函数

一般写法：

要遍历数组，咱们还能够应用 Array 中的 forEach() 办法。然而须要写很多代码，尽管比最常见的 for 循环要少，但依然比 for...of 语句多一点：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
 
// Using forEach method
fruits.forEach(function(fruit){console.log( fruit);
});
 
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

简写办法：

然而应用箭头函数表达式，容许咱们用一行编写残缺的循环代码，如下所示：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(fruit => console.log( fruit));  // <-- Magic ✨
 
//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

大多数时候我应用的是带箭头函数的 forEach 循环，这里我把 for...of 语句和 forEach 循环都展现进去，不便大家依据本人的爱好应用代码。

8. 在数组中查找对象

一般写法：

要通过其中一个属性从对象数组中查找对象的话，咱们通常应用 for 循环：

let inventory = [{name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];
 
// Get the object with the name `Apples` inside the array
function getApples(arr, value) {for (let index = 0; index < arr.length; index++) {
 
    // Check the value of this object property `name` is same as 'Apples'
    if (arr[index].name === 'Apples') {  //=> 🍎
 
      // A match was found, return this object
      return arr[index];
    }
  }
}
 
let result = getApples(inventory);
console.log(result)
//=> {name: "Apples", quantity: 10}

简写办法：

哇！下面咱们写了这么多代码来实现这个逻辑。然而应用 Array 中的 find() 办法和箭头函数=>，容许咱们像这样一行搞定：

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {return arr.find(obj => obj.name === 'Apples');  // <-- here
}
 
let result = getApples(inventory);
console.log(result)
//=> {name: "Apples", quantity: 10}

9. 将字符串转换为整数

一般写法：

parseInt()函数用于解析字符串并返回整数：

let num = parseInt("10")
 
console.log(num)         //=> 10
console.log(typeof num)  //=> "number"

简写办法：

咱们能够通过在字符串前增加 + 前缀来实现雷同的后果，如下所示：

let num = +"10";
 
console.log(num)           //=> 10
console.log(typeof num)    //=> "number"
console.log(+"10" === 10)  //=> true

10. 短路求值

一般写法：

如果咱们必须依据另一个值来设置一个值不是 falsy 值，个别会应用 if-else 语句，就像这样：

function getUserRole(role) {
  let userRole;
 
  // If role is not falsy value
  // set `userRole` as passed `role` value
  if (role) {userRole = role;} else {
 
    // else set the `userRole` as USER
    userRole = 'USER';
  }
 
  return userRole;
}
 
console.log(getUserRole() )         //=> "USER"
console.log(getUserRole('ADMIN') )  //=> "ADMIN"

简写办法：

然而应用短路求值(||)，咱们能够用一行代码执行此操作，如下所示：

function getUserRole(role) {return role || 'USER';  // <-- here}
 
console.log(getUserRole() )         //=> "USER"
console.log(getUserRole('ADMIN') )  //=> "ADMIN"

基本上，expression1 || expression2被评估为 真表达式。因而，这就意味着如果第一部分为真，则不用费神求值表达式的其余部分。

补充几点

箭头函数

如果你不须要 this 上下文，则在应用箭头函数时代码还能够更短：

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(console.log);

在数组中查找对象

你能够应用对象解构和箭头函数使代码更精简：

// Get the object with the name `Apples` inside the array
const getApples = array => array.find(({name}) => name === "Apples");
 
let result = getApples(inventory);
console.log(result);
//=> {name: "Apples", quantity: 10}

短路求值代替计划

const getUserRole1 = (role = "USER") => role;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";

编码习惯

最初我想说下编码习惯。代码标准亘古未有，然而很少有人严格遵守。究其原因，多是在代码标准制订之前，曾经有本人的一套代码习惯，很难短时间扭转本人的习惯。良好的编码习惯能够为后续的成长打好根底。上面，列举一下开发标准的几点益处，让大家明确代码标准的重要性：

• 标准的代码能够促成团队单干。
• 标准的代码能够缩小 Bug 解决。
• 标准的代码能够升高保护老本。
• 标准的代码有助于代码审查。
• 养成代码标准的习惯，有助于程序员本身的成长。

我本人在看的是《阿里前端开发标准》，外面的代码标准很全，并且根本通用，看完很受用。篇幅起因，上面以截图展现目录及局部内容，残缺 PDF 点击这里即可收费下载获取。

目录

一、编码标准

二、Vue 我的项目标准

以上即是《阿里前端开发标准》，须要的小伙伴点击这里即可收费下载获取。

最初，我想借用一段话来作结尾：

代码之所以是咱们的敌人，是因为咱们中的许多程序员写了很多很多的狗屎代码。如果咱们没有方法解脱，那么最好尽全力放弃代码简洁。
如果你喜爱写代码——真的，真的很喜爱写代码——你代码写得越少，阐明你的爱意越深。