前端开发干货分享：了解 25 种 JavaScript 简写编码技巧

对于任何 JavaScript 开发人员来说，这都是必读之书。我们编写了这份指南，介绍多年来积累的 JavaScript 简写编码技术。为了帮助您了解正在发生的事情，我们提供了全写版本，以提供一些编码视角。

1. 三元运算符

当您想if..else仅用一行编写语句时，这是一个很好的代码节省器。

普通手写：

const x = 20;
let answer;

if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

速记：

const answer = x > 10 ? "greater than 10" : "less than 10";

您还可以if像这样嵌套语句：

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

2. 短路求值简写

将变量值赋给另一个变量时，您可能希望确保源变量不为 null、未定义或空。您可以编写if包含多个条件的长语句，也可以使用短路求值。

普通手写：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;}

速记：

const variable2 = variable1  || 'new';

不相信吗？自己测试一下（将以下代码粘贴到es6console中）：

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

请注意，如果您设置variable1为false或，则会分配0值。bar

3. 声明变量简写

在函数开头声明变量赋值是一种很好的做法。这种简便方法可以在同时声明多个变量时节省大量时间和空间。

普通手写：

let x;
let y;
let z = 3;

速记：

let x, y, z=3;

4. 如果存在速记

这可能微不足道，但值得一提。在进行“if检查”时，有时可以省略赋值运算符。

普通手写：

if (likeJavaScript === true)

速记：

if (likeJavaScript)

注意：这两个例子并不完全相等，因为只要likeJavaScript是真值，简写检查就会通过。

这是另一个示例。如果a不等于 true，则执行某些操作。

普通手写：

let a;
if ( a !== true ) {
// do something...
}

速记：

let a;
if ( !a ) {
// do something...
}

5. JavaScript For 循环简写

如果您想要纯 JavaScript 并且不想依赖 jQuery 或 lodash 等外部库，这个小技巧非常有用。

普通手写：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

速记：

for (let fruit of fruits)

如果您只是想访问索引，请执行以下操作：

for (let index in fruits)

如果你想访问文字对象中的键，这也有效：

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

Array.forEach 的简写：

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
  }
  [2, 5, 9].forEach(logArrayElements);
  // a[0] = 2
  // a[1] = 5
  // a[2] = 9

6. 短路评估

如果预期参数为空或未定义，我们无需编写六行代码来分配默认值，而是可以简单地使用短路逻辑运算符，仅用一行代码即可完成相同的操作。

普通手写：

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

速记：

const dbHost = process.env.DB_HOST || 'localhost';

7. 十进制底数指数

您可能已经见过这个。它本质上是一种不带尾随零的奇特数字书写方式。例如，1e7 本质上表示 1 后面跟着 7 个零。它表示十进制基数（JavaScript 将其解释为浮点类型），等于 10,000,000。

普通手写：

for (let i = 0; i < 10000; i++) {}

速记：

for (let i = 0; i < 1e7; i++) {}

// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. 对象属性简写

在 JavaScript 中定义对象字面量让生活变得更加轻松。ES6 提供了一种更简单的方法来为对象分配属性。如果变量名与对象键相同，则可以利用简写符号。

普通手写：

const x = 1920, y = 1080;
const obj = { x:x, y:y };

速记：

const obj = { x, y };

9. 箭头函数简写

经典函数以其简单的形式易于阅读和编写，但一旦开始将它们嵌套在其他函数调用中，它们就会变得有点冗长和令人困惑。

普通手写：

function sayHello(name) {
    console.log('Hello', name);
  }
 
  setTimeout(function() {
    console.log('Loaded')
  }, 2000);
 
  list.forEach(function(item) {
    console.log(item);
  });

速记：

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

需要注意的是，this箭头函数内部的值的确定方式与普通函数不同，因此这两个示例并不完全等同。有关更多详细信息，请参阅有关箭头函数语法的文章。

10. 隐式返回简写

Return 是我们经常用来返回函数最终结果的关键字。具有单个语句的箭头函数将隐式返回其求值的结果（函数必须省略括号 ( {}) 才能省略 return 关键字）。

要返回多行语句（例如对象文字），必须使用()而不是{}来包装函数体。这可确保将代码评估为单个语句。

普通手写：

function calcCircumference(diameter) {
    return Math.PI * diameter
}

速记：

calcCircumference = diameter => (
    Math.PI * diameter;
  )

11. 默认参数值

您可以使用if语句来定义函数参数的默认值。在 ES6 中，您可以在函数声明本身中定义默认值。

普通手写：

function volume(l, w, h) {
    if (w === undefined)
      w = 3;
    if (h === undefined)
      h = 4;
    return l * w * h;
  }

速记：

volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

12. 模板字符串

您是否厌倦了将' + '多个变量连接到一个字符串中？难道没有更简单的方法吗？如果您能够使用 ES6，那么您很幸运。您需要做的就是使用反引号并将${}变量括起来。

普通手写：

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

速记：

const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

13. 解构赋值简写

如果您正在使用任何流行的 Web 框架，则很有可能会使用数组或对象文字形式的数据在组件和 API 之间传递信息。一旦数据对象到达组件，您就需要对其进行解包。

普通手写：

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

速记：

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

您甚至可以指定自己的变量名称：

const { store, form, loading, errors, entity:contact } = this.props;

14. 多行字符串简写

如果你发现自己需要在代码中编写多行字符串，你可以这样编写：

普通手写：

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

但还有更简单的方法。只需使用反引号即可。

速记：

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

15. 扩展运算符简写

ES6 中引入的展开运算符有多种使用场景，可使 JavaScript 代码更高效、更有趣。它可用于替换某些数组函数。展开运算符只是一系列三个点。

普通手写

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

速记：

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

与函数不同concat()，您可以使用扩展运算符将一个数组插入另一个数组内的任何位置。

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

您还可以将扩展运算符与 ES6 解构符号结合起来：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

16. 强制参数简写

默认情况下，undefined如果函数参数未传递值，JavaScript 会将其设置为。其他一些语言会抛出警告或错误。要强制参数分配，您可以使用语句if在 if 时抛出错误undefined，或者您可以利用“强制参数简写”。

普通手写：

function foo(bar) {
    if(bar === undefined) {
      throw new Error('Missing parameter!');
    }
    return bar;
  }

速记：

mandatory = () => {
    throw new Error('Missing parameter!');
  }
 
  foo = (bar = mandatory()) => {
    return bar;
  }

17. Array.find 简写

如果您曾经被要求用纯 JavaScript 编写 find 函数，那么您可能会使用循环。在 ES6 中，引入了for一个名为的新数组函数。find()

普通手写：

const pets = [
    { type: 'Dog', name: 'Max'},
    { type: 'Cat', name: 'Karl'},
    { type: 'Dog', name: 'Tommy'},
  ]
 
  function findDog(name) {
    for(let i = 0; i<pets.length; ++i) {
      if(pets[i].type === 'Dog' && pets[i].name === name) {
        return pets[i];
      }
    }
  }

速记：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18. 对象 [key] 简写

你知道吗？Foo.bar也可以写成Foo['bar']？乍一看，似乎没有理由这样写。但是，这种表示法为你编写可重用代码提供了基础。

考虑这个验证函数的简化示例：

function validate(values) {
    if(!values.first)
      return false;
    if(!values.last)
      return false;
    return true;
  }
 
  console.log(validate({first:'Bruce',last:'Wayne'})); // true

此函数完美地完成了其工作。但是，请考虑这样一种情况：您需要应用验证的表单非常多，但字段和规则却不同。构建一个可以在运行时配置的通用验证函数不是很好吗？

速记：

// object validation rules
const schema = {
    first: {
      required:true
    },
    last: {
      required:true
    }
  }
 
  // universal validation function
  const validate = (schema, values) => {
    for(field in schema) {
      if(schema[field].required) {
        if(!values[field]) {
          return false;
        }
      }
    }
    return true;
  }
 
 
  console.log(validate(schema, {first:'Bruce'})); // false
  console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

现在我们有一个验证函数，可以在所有表单中重复使用，而不需要为每个表单编写自定义验证函数。

19. 双重按位非简写

位运算符是您在初级 JavaScript 教程中学习的功能之一，但您从未在任何地方实现过它们。此外，如果您不处理二进制，谁会想使用 1 和 0？

但是，双位非运算符有一个非常实用的用例。您可以用它代替Math.floor()。双位非运算符的优点是它执行相同操作的速度要快得多。您可以在此处阅读有关位运算符的更多信息。

普通手写：

Math.floor(4.9) === 4  //true

速记：

~~4.9 === 4  //true

20. 指数幂速记

数学指数幂函数的简写：

普通手写：

Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

速记：

2**3 // 8
2**4 // 4
4**3 // 64

21. 将字符串转换为数字

有时您的代码会收到字符串格式的数据，但需要以数字格式进行处理。这没什么大不了的，我们可以进行快速转换。

普通手写：

const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

速记：

const num1 = +"100"; // converts to int data type
const num2 =  +"100.01"; // converts to float data type

22. 对象属性赋值

考虑以下一段代码：

let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'}

如何将它们合并为一个对象？一种方法是编写一个函数，将数据从第二个对象复制到第一个对象。不幸的是，这可能不是你想要的——你可能需要创建一个全新的对象而不改变任何现有对象。最简单的方法是使用Object.assignES6 中引入的函数：

let full_names = Object.assign(fname, lname);

您还可以使用 ES8 中引入的对象销毁符号：

let full_names = {...fname, ...lname};

可以合并的对象属性数量没有限制。如果您确实有具有相同属性名称的对象，则将按照合并顺序覆盖值。

23. 按位索引简写

使用数组执行查找时，该indexOf()函数用于检索要查找的项目的位置。如果未找到该项目，则-1返回值。在 JavaScript 中，0被视为“假”，而大于或小于的数字0被视为“真”。因此，必须像这样编写正确的代码。

普通手写：

if(arr.indexOf(item) > -1) { // Confirm item IS found

}

if(arr.indexOf(item) === -1) { // Confirm item IS NOT found

}

速记：

if(~arr.indexOf(item)) { // Confirm item IS found

}

if(!~arr.indexOf(item)) { // Confirm item IS NOT found

}

运算bitwise(~)符将返回除 之外的任何内容的真值-1。否定它就像执行 一样简单!~。或者，我们也可以使用以下includes()函数：

if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't

}

24. 对象.entries()

这是 ES8 中引入的功能，允许你将文字对象转换为键/值对数组。请参阅以下示例：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);

/** Output:
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
**/

25. 对象.值()

这也是 ES8 中引入的新功能，其功能与 类似Object.entries()，但没有关键部分：

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);

/** Output:
[ 'John', 'Jane', 'Peter' ]
**/

关于 JavaScript 简写编码技术的常见问题解答