20个你需要知道的JavaScript简写代码片段

发表于 3年以前 | 总阅读数：355 次

1、可选链

你尝试访问对象上的嵌套属性时，你可能会执行一些逻辑，检查它是否存在，以及出现了多少次，而可选链运算符，可以帮助你节省宝贵的时间，并尝试访问更深层次的对象树的属性值或属性值之前检查属性的空值（ null 或 undefined ）。让我们看一下这个例子：

// OPTIONAL CHAINING EXAMPLE
let character = {
  name: 'Dean Winchester',
  age: 34,
  car: 'Chevy Imala (Baby)',
  enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],
  enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],
  family: {
    mother: 'Mary',
    father: 'John',
    brother: 'Sam',
  }
}

const friend = character.friend?.name;

console.log(friend) // undefined

这是更简略的，而不是必须做这样的事情来检查真值：

const friend = character.friend && character.friend.name;

2、箭头函数

我们都习惯了使用 function 关键字来编写函数声明。但是很糟糕。它们也有范围限制。

使用箭头函数，你可以受益于它们的作用域性质——箭头函数绑定到它们的父作用域，因此，你可以在许多情况下取消 .bind 方法。此外，它们看起来很漂亮。

// REGULAR FUNCTION DECLARATION
function my_cats(a,b,c) {
  return `My cats names are: ${a}, ${b} & ${c}`;
}

my_cats('Tom', 'Marty', 'Jimmy');

// ARROW FUNCTION
let my_cats = (a,b,c) => {
  return `My cats names are: ${a}, ${b} & ${c}`;
};

my_cats('Tom', 'Marty', 'Jimmy');

单行箭头函数的示例 - 它允许你省略 return 关键字和 {} ：

// SINGLE LINE ARROW FUNCTIONS WITHOUT RETURN KEYWORD OR {}
let oldest_cat = c => `${c} is the oldest one`;

oldest_cat('Jimmy'); // Jimmy is the oldest one

3、展开运算符

这个允许你将元素从一个数组复制到另一个数组，连接/合并数组、对象等等。但由于这不完全是速成课程，让我们看一个简单的例子：

//------------------------------------------------
// COPY ELEMENTS FROM ONE ARRAY INTO ANOTHER ARRAY
//------------------------------------------------
const fruits = ['apple', 'mangoe', 'papaya'];
const updated_fruits = ['banana', ...fruits];
console.log(updated_fruits); // [ 'banana', 'apple', 'mangoe', 'papaya' ]

//-------------------
// MERGING TWO ARRAYS
//-------------------
const my_cats = ['Jimmy', 'Marty', 'Max'];
const your_cats = ['George', 'Botsoe', 'Benny'];
const our_cats = [...my_cats, ...your_cats];
console.log(our_cats); // [ 'Jimmy', 'Marty', 'Max', 'George', 'Botsoe', 'Benny' ]

//----------------
// MERGING OBJECTS
//----------------
const profile = {
  name: 'Dean Winchester',
  age: 34,
  car: 'Chevy Imala (Baby)'
}

const list_of_enemies = {
  enemy_demons: ['Abadon', 'Yellow Eyes', 'Crowley'],
  enemy_angels: ['Zacharia', 'Michael', 'Lucifer']
}

const character = {
  ...profile,
  ...list_of_enemies
}

console.log(character);
/*
  {
    name: 'Dean Winchester',
    age: 34,
    car: 'Chevy Imala (Baby)',
    enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],
    enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ]
  }
*/

4、真/假检查器

关于真/假检查器，但考虑一下这样的事情：

let Dean = {
  name: 'Dean Winchester',
  age: 34,
  car: 'Chevy Imala (Baby)',
  enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],
  enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],
  family: {
    mother: 'Mary',
    father: 'John',
  }
}

let supernatural = (cr1, cr2) => {
  let main_char = cr1;
  let second_char = cr2;

  console.log(main_char, second_char); // {...} undefined

  // IF FALSY (undefined, null)
  if (!second_char) {
    second_char = {
      ...main_char, 
      name: 'Sam Winchester', 
      age: 31,      
    };
    console.log(main_char, second_char);
  }
}
supernatural(Dean);

// LINE 26's OUTPUT:
/*
  {
    name: 'Dean Winchester',
    age: 34,
    car: 'Chevy Imala (Baby)',
    enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],
    enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],
    family: { mother: 'Mary', father: 'John' }
  } 
  {
    name: 'Sam Winchester',
    age: 31,
    car: 'Chevy Imala (Baby)',
    enemy_demons: [ 'Abadon', 'Yellow Eyes', 'Crowley' ],
    enemy_angels: [ 'Zacharia', 'Michael', 'Lucifer' ],
    family: { mother: 'Mary', father: 'John' }
  }
*/

在第 20 行，我们检查 second_char 的值是否为假，用 ! 表示。人家就是这么简单！编写这样的代码将为你节省大量时间并缩短你的代码，从而使其更清晰，更高级的开发人员。

非常好，我们开始介绍下一位参赛者！

5、三元运算符

在检查你的猫是否爱你时，将不可避免地使用 if/else 或 switch 编写大量额外代码。考虑这个简单的例子：

// REGULAR IF/ELSE
const cat_love_checker = (status) => {
  if (status === false) {
    return 'Sigh... my cat does not love me :(';
  } else {
    return 'Aha! My cat does love me!';
  }
}

cat_love_checker(false); // Sigh... my cat does not love me :(

// TERNARY OPERATOR
const cat_love_checker = status => (
  status === false ? 'Sigh... my cat does not love me :(' : 'Aha! My cat does love me!'
);

cat_love_checker(false); // Sigh... my cat does not love me :(

在第 14 行，我们首先检查 status 是否等于 false，如果是，我们返回一个字符串 Sigh... my cat does not love me :( 。否则，我们返回另一个字符串——很高兴我们的猫确实爱我们 . 基本上，如果 ? 之前的语句评估为 true ，则返回 ? 右侧的任何内容。

6、声明变量

声明变量实际上是所有编码中最简单的事情之一。然而，某些声明变量的方法比其他方法更冗长，需要更多的努力，编写更多的代码。让我们看一些例子：

// REGULAR WAY
let fav_num;
let fav_fruit = 'Apple';

console.log(fav_num); // undefined
console.log(fav_fruit); // 'Apple'

// SHORTER WAY
let fav_num, fav_fruit = 'Banana';

console.log(fav_num); // undefined
console.log(fav_fruit); // 'Banana'

// ASSIGNING MULTIPLE VALUES (LONGER WAY)
let older_bro, younger_bro;

older_bro = 'Dean';
younger_bro = 'Sammie';

console.log(older_bro, younger_bro); // Dean Sammie

// SHORTER WAY
let [older_bro, younger_bro] = ['Dean', 'Sammie'];
console.log(older_bro, younger_bro); // Dean Sammie

7、十进制基数

你告诉你的猫（或狗或任何其他宠物）多少次你爱它们？如果你和我一样，那肯定至少有一百万次……（一个小时）。但是，如果我要写一个简短的脚本来告诉我的猫这个，我用更短的方式来写它，它会花费更少的代码（废话）。让我们比较一下两者：

// LONGER WAY-------- ⬇️
for (let i = 0; i < 1000000; i++) {
  console.log('I love my cat!'); // OUTPUTS A MILLION TIMES
}

// SHORTER WAY ----- ⬇️
for (let i = 0; i < 1e7; i++) {
  console.log('I love my cat!'); // OUTPUTS A MILLION TIMES
}

基本上，e 后面的数字代表 1 后面 0 的个数。例如 100 = 1e2（因为数字 1 后面有 2 个零）等等。（你可能不应该运行上面的代码片段，因为它可能会导致你的浏览器崩溃！）

8、 For 循环简写

当对整个数组进行直接循环时，没有任何时髦的东西，我们习惯于编写传统的 for 循环，现在甚至是 forEach 。但如果我为你引入 for of 循环呢？检查出 p：

// LONGER WAY
let song = ['eenine', 'meenie', 'miney', 'mo'];

for (let i = 0; i < song.length; i++) {
  console.log(song[i]); // eenie meenie miney mo
}

// SHORTER WAY
for (const word of song) {
  console.log(word); // eenie meenie miney mo
}

9、Implicit Return

现在我们已经在之前的一些示例中看到了这一点，我们可以在箭头函数中省略花括号和 return 关键字：

let name_printer = name => (`My name is ${name}... James ${name}`);

name_printer('Bond'); // My name is Bond... James Bond

请注意我们在这里省略的 3 件事：

大括号
返回关键字
分号（在函数体内）

10、模板文字

现在你可能想知道，“这 ${something} 生意是什么？”。我的朋友，这是一个节省时间的……一个模板文字是……文字。将我们的字符串包裹在反引号 `` 中，我们可以在将变量注入到我们的字符串中的同时输出一个常规字符串！

一个可靠的例子：

let poem_name = 'Baba Black Sheep';

console.log(`My favorite poem is ${poem_name}.`); // My favorite poem is Baba Black Sheep.

11、默认参数

现在，在对参数执行任何操作之前，你有多少次必须检查参数是否为空值？大概是 1e7 次吧？引入默认参数，你可以在其中为参数赋值：

// REGULAR PASSED PARAMETERS
const sum_genetator = (a, b) => {
  console.log(a + b);
}

sum_genetator(2, 5); // 7

// DEFAULT PARAMETERS
const sum_genetator = (a, b=10) => {
  console.log(a + b);
}

sum_genetator(2); // 12
sum_genetator(2, undefined); // 12

即使我们明确地将第二个值设置为 undefined ，我们的默认参数优先并保留我们在第 9 行传入的参数值。

12、多行字符串

这个没有描述，很简单：

// REGULAR WAY USING /n TO DENOTE NEW LINE
const message_to_cat = 'You are the best cat in the whole world\n' +
'You are the best cat in the whole world\n' +
'You are the best cat in the whole world\n' +
'You are the best cat in the whole world\n';

// USING BACK-TICKS
const message_to_dog = `You are the goodest boy ever. You are the goodest boy ever.
You are the goodest boy ever. You are the goodest boy ever. You are the goodest boy ever.
You are the goodest boy ever. You are the goodest boy ever. You are the goodest boy ever.`

13、强制性参数

在处理多个参数时，有时你可能偶尔会得到一些未定义或 null 的信息……无论哪种方式，为了以防万一，最好进行 null 检查。

与其编写一个 if 语句每次都检查 undefined 或 null ，为什么不只用一个函数来执行此操作并与我们的参数并行调用该函数呢？大家来看看：

const error_handler = (property) => {
  throw new Error(`Error: ${property} is required!`);
}

const monitor_roads = (car=error_handler('Car'), speed=error_handler('Speed')) => {
  console.log(`Your ${car} was going at a speed of ${speed}mph.`);
}

monitor_roads('Ferrari', 240); // Your Ferrari was going at a speed of 240mph.
monitor_roads('Ferrari'); // Error: Speed is required!

14、对象属性值

如果你希望对象键的值与变量名称相同，ES6 允许你将变量名称传递到对象中。

区别在于第 8 行和第 30 行：

//------------
// LONGER WAY
//------------
let older_bro = 'Dean';
let younger_bro = 'Sammie';
let badass_angel = 'Castiel';

let team_supreme = {
  older_bro: older_bro,
  younger_bro: younger_bro,
  badass_angel: badass_angel
}

console.log(team_supreme);
/* 
  { 
    older_bro: 'Dean', 
    younger_bro: 'Sammie', 
    badass_angel: 'Castiel' 
  }
*/

//------------
// SHORTER WAY
//------------
let older_bro = 'Dean';
let younger_bro = 'Sammie';
let badass_angel = 'Castiel';

let team_supreme = { older_bro, younger_bro, badass_angel };

console.log(team_supreme);
/* 
  { 
    older_bro: 'Dean', 
    younger_bro: 'Sammie', 
    badass_angel: 'Castiel' 
  }
*/

15、将字符串转换为数字

使用 Javascript，有一些众所周知的方法可以将字符串转换为数字，其中一些流行的方法是 parseInt() 和 Number() 。

但是使用 + 运算符有一个鲜为人知的技巧，它只是简单地在字符串/变量之前添加：

let age = '85';
console.log(parseInt(age)); // 85
console.log(Number(age)); // 85
console.log(+age); // 85

16、对象键

还记得那些痛苦的日子，你不得不手动迭代一个对象来获取它的键，然后执行一些乏味的逻辑......我只是想想就觉得累了。

但是，幸运的是，我们有一个简洁的小方法，可以通过单行代码为我们解决问题：

let cat = {
  name: 'Jimmy boy',
  age: 5,
  breed: 'British Shorthair',
  favorite_word: 'Meow',
  favorite_food: 'Chimkens'
}

console.log(Object.keys(cat)); // [ 'name', 'age', 'breed', 'favorite_word', 'favorite_food' ]

Object.keys 返回一个数组，我们可以迭代它并使用这些键做任何我们需要做的事情。

17、对象值

同样，我们可以使用 Object.values 方法对对象的值执行相同的操作！一探究竟：

let cat = {
  name: 'Jimmy boy',
  age: 5,
  breed: 'British Shorthair',
  favorite_word: 'Meow',
  favorite_food: 'Chimkens'
}

console.log(Object.values(cat)); // [ 'Jimmy boy', 5, 'British Shorthair', 'Meow', 'Chimkens' ]

18、合并数组

我们可以使用扩展运算符轻松合并数组（我们在前面的示例中看到了这一点）：

let my_fav_snacks = ['PBJ', 'Toast', 'Cannoli'];
let your_fav_snacks = ['Chex Mix', 'Bhajiyaas', 'Samosas'];
let our_fav_snacks = [...my_fav_snacks, ...your_fav_snacks, 'Pancakes'];

console.log(our_fav_snacks);
/*
  [
    'PBJ',
    'Toast',
    'Cannoli',
    'Chex Mix',
    'Bhajiyaas',
    'Samosas',
    'Pancakes'
  ]
*/

我们使用 spread 语法从本质上复制每个数组中的所有元素并将它们注入另一个数组，同样，我们还添加了一个额外的元素 Pancakes。

19、简短评估

基本上，如果 and && 运算符左侧的变量计算结果为 true ，我们执行 && 之后的任何内容。一探究竟：

// LONG VERSION
connected_to_db ? send_data() : retry();

// SHORT VERSION
connected_to_db && send_data();

20、字符串比较（我最喜欢的）

假设你正在编写一个算法来从数组中删除重复项。传统上，你必须编写一个复杂的解决方案，这会占用你大量宝贵的时间。介绍 localeCompare ：

let names = ['Aron', 'Elon', 'Tom', 'Tom'];
let result = [];

const remove_dupes = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].localeCompare(arr[i + 1]) != 0) {
      result.push(arr[i]);
    }
  }
  return result;
};

remove_dupes(names); // [ 'Aron', 'Elon', 'Tom' ]

总结

以上就是20个关于JavaScript的简写代码片段。我真的希望这些对你有所帮助，这些简写的示例，可以帮助你工作时节省时间和精力的好方法，它们使你的代码更加流畅和可扩展。

最后，谢谢你的时间！并感谢你的阅读。