一些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";

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

    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';

    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检查时，有时可以省略赋值运算符。

    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.短路运算

如果目标参数为null或未定义，则无需编写六行代码来分配默认值，我们只需使用短路逻辑运算符并仅用一行代码即可完成相同的操作。

    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个零。它代表一个等于10,000,000的十进制基数（JavaScript将其解释为浮点类型）。

    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);

    });

重要的是要注意，this箭头函数内部的值与普通函数的不同，因此这两个示例并非严格等效。有关更多详细信息，请参见本文有关箭头函数语法的内容。

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

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

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

## 10.隐式return

`return`是我们经常用来返回函数最终结果的关键字。带有单个语句的箭头函数将隐式返回其评估结果（该函数必须省略花括号（{}）才能省略return关键字）。

    function calcCircumference(diameter) {

    return Math.PI * diameter

    }

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

    calcCircumference = diameter => (

        Math.PI * diameter;

    )

## 11.默认参数值

您可以使用该if语句来定义函数参数的默认值。

    function volume(l, w, h) {

        if (w === undefined)

            w = 3;

        if (h === undefined)

            h = 4;

        return l * w * h;

    }

在ES6中，可以在函数声明本身中定义默认值。

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

    volume(2) //output: 24

## 12.模板文字

您是否不厌倦使用' + '多个变量连接到字符串中？有没有更简单的方法可以做到这一点？

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

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

如果您能够使用ES6，那么您很幸运。您需要做的就是使用反引号，并将${}其括起来。

    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.强制参数

如果未传递值，默认情况下，JavaScript会将函数参数设置为undefined。其他一些语言将引发警告或错误。

    function foo(bar) {

        if(bar === undefined) {

            throw new Error('Missing parameter!');

        }

        return bar;

    }

要强制进行参数分配，可以在时使用if语句引发错误undefined。

    mandatory = () => {

        throw new Error('Missing parameter!');

    }

    foo = (bar = mandatory()) => {

        return bar;

    }

## 17. Array.find

如果您曾被要求使用纯JavaScript编写find函数，那么您可能会使用for循环。

    const pets = [

        { type: 'Dog', name: 'Max'},

        { type: 'Cat', name: 'Karl'},

        { type: 'Dog', name: 'Tommy'},

        ]

    function findDog(name) {

        for(let i = 0; i

            if(pets[i].type === 'Dog' && pets[i].name === name) {

            return pets[i];

            }

        }

    }

在ES6中，find()引入了一个名为的新数组函数。

    pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

    console.log(pet); // { type: 'Dog', name: 'Tommy' }

## 18.对象[键]

您知道吗，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. Double Bitwise NOT简写

按位运算符是您在初学者JavaScript教程中了解的功能之一，而您永远无法在任何地方实现它们。此外，如果您不处理二进制，谁愿意使用1和0？

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

    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则返回该值。

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

    }

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

    }

在JavaScript中，数字0被认为是“虚假的”，而大于或小于数字0则被认为是“真实的”。结果，必须编写这样的正确代码。

    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. Object.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. Object.values（）

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

    const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };

    const arr = Object.values(credits);

    console.log(arr);

    /** Output:

    [ 'John', 'Jane', 'Peter' ]

    **/

如果您感觉文章对您有帮助，请帮忙点个赞吧！谢谢！

查看原文点击这里