📜  7 种 JavaScript 速记技术可以节省你的时间

📅  最后修改于: 2022-05-13 01:56:52.070000             🧑  作者: Mango

7 种 JavaScript 速记技术可以节省你的时间

在本文中,我们将讨论 JavaScript 中的 7 个很酷的速记技巧,它们将节省开发人员的时间。

1. 箭头函数: JavaScript 箭头函数是在 ES6 中引入的。这个函数的主要优点是,它的语法更短。

Javascript
// Longhand 
function add(a, b) { 
   return a + b; 
} 
  
  
// Shorthand 
const add = (a, b) => a + b;


Javascript
// Longhand 
console.log('JavaScript is a lightweight, interpreted, '
    + 'object-oriented language\nwith first-class '
    + 'functions, and is best known as the scripting '
    + 'language for Web \npages, but it is used in many'
    + 'non-browser environments as well.\n'); 
  
  
// Shorthand 
console.log(`JavaScript is a lightweight, interpreted, 
object-oriented language with first-class functions, 
and is best known as the scripting language for Web 
pages, but it is used in many non-browser environments 
as well.`);


Javascript
let myArr = [50, 60, 70, 80]; 
  
// Longhand 
for (let i = 0; i < myArr.length; i++) { 
  console.log(myArr[i]); 
} 
  
  
// Shorthand 
// 1. for of loop 
for (const val of myArr) { 
  console.log(val); 
} 
  
// 2. for in loop 
for (const index in myArr) { 
  console.log(`index: ${index} and value: ${myArr[index]}`); 
}


Javascript
// Longhand 
let a = parseInt('764'); 
let b = parseFloat('29.3'); 
  
  
// Shorthand 
let a = +'764'; 
let b = +'29.3';


Javascript
//Longhand
let x = 'Hello', y = 'World';  
const temp = x; 
x = y; 
y = temp; 
  
  
//Shorthand 
[x, y] = [y, x];


Javascript
// Longhand 
let a1 = [2, 3]; 
let a2 = a1.concat([6, 8]); 
  
// Output: [2, 3, 6, 8] 
  
  
// Shorthand 
let a2 = [...a1, 6, 8]; 
  
// Output: [2, 3, 6, 8]


Javascript
// Longhand 
if (value === 1 || value === 'hello' || value === 2 || value === 'world') { 
    ...
} 
  
// Shorthand 1
if ([1, 'hello', 2, 'world'].indexOf(value) >= 0) { 
    ... 
}
  
// Shorthand 2
if ([1, 'hello', 2, 'world'].includes(value)) { 
    ... 
}


2. 多行字符串:对于多行字符串,我们通常使用 +运算符和换行符(\n)。我们可以通过使用反引号 (`) 以更简单的方式做到这一点。

Javascript

// Longhand 
console.log('JavaScript is a lightweight, interpreted, '
    + 'object-oriented language\nwith first-class '
    + 'functions, and is best known as the scripting '
    + 'language for Web \npages, but it is used in many'
    + 'non-browser environments as well.\n'); 
  
  
// Shorthand 
console.log(`JavaScript is a lightweight, interpreted, 
object-oriented language with first-class functions, 
and is best known as the scripting language for Web 
pages, but it is used in many non-browser environments 
as well.`);

3、for循环:要遍历一个数组,我们通常使用传统的for循环。我们可以利用for...of 循环来遍历数组。要访问每个值的索引,我们可以使用for...in 循环。

Javascript

let myArr = [50, 60, 70, 80]; 
  
// Longhand 
for (let i = 0; i < myArr.length; i++) { 
  console.log(myArr[i]); 
} 
  
  
// Shorthand 
// 1. for of loop 
for (const val of myArr) { 
  console.log(val); 
} 
  
// 2. for in loop 
for (const index in myArr) { 
  console.log(`index: ${index} and value: ${myArr[index]}`); 
}

4. 将字符串转换为数字:内置的方法如parseIntparseFloat可用于将字符串转换为数字。也可以通过在字符串值前面简单地提供一元运算运算符(+) 来完成。

Javascript

// Longhand 
let a = parseInt('764'); 
let b = parseFloat('29.3'); 
  
  
// Shorthand 
let a = +'764'; 
let b = +'29.3';

5.交换两个变量

为了交换两个变量,我们经常使用第三个变量。但是可以通过数组解构赋值轻松完成。

Javascript

//Longhand
let x = 'Hello', y = 'World';  
const temp = x; 
x = y; 
y = temp; 
  
  
//Shorthand 
[x, y] = [y, x];

6. 数组合并:合并两个数组,可以使用以下方法:

Javascript

// Longhand 
let a1 = [2, 3]; 
let a2 = a1.concat([6, 8]); 
  
// Output: [2, 3, 6, 8] 
  
  
// Shorthand 
let a2 = [...a1, 6, 8]; 
  
// Output: [2, 3, 6, 8]

7.多条件检查:对于多值匹配,我们可以将所有值放入数组中,并使用indexOf() 或includes() 方法。

Javascript

// Longhand 
if (value === 1 || value === 'hello' || value === 2 || value === 'world') { 
    ...
} 
  
// Shorthand 1
if ([1, 'hello', 2, 'world'].indexOf(value) >= 0) { 
    ... 
}
  
// Shorthand 2
if ([1, 'hello', 2, 'world'].includes(value)) { 
    ... 
}