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. 将字符串转换为数字:内置的方法如parseInt和parseFloat可用于将字符串转换为数字。也可以通过在字符串值前面简单地提供一元运算运算符(+) 来完成。
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)) {
...
}