一些JavaScript编码实用技巧!（值得收藏）

对于任何JavaScript开发人员来说，这确实是必需要掌握的！

## 1.三元运算符

当您只想if..else在一行中编写一条语句时，这是一个很好的代码保护程序。

const x = 20;

let answer;

if (x > 10) {

answer = "greater than 10";

} else {

answer = "less than 10";

}

</blockquote>

我们可以这样优化：

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

</blockquote>

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

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

</blockquote>

## 2.短路运算符

在将变量值分配给另一个变量时，您可能要确保源变量不为null，未定义或为空。您可以编写if带有多个条件的长语句，也可以使用短路运算符。

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

let variable2 = variable1;

}

</blockquote>

我们可以这样优化：

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

</blockquote>

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

## 3.声明变量

在函数开始时声明变量分配是一种很好的做法。当同时声明多个变量时，这种简化方法可以节省大量时间和空间。

let x;

let y;

let z = 3;

</blockquote>

我们可以这样优化：

let x, y, z=3;

</blockquote>

## 4.if语句

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

if (likeJavaScript === true)

</blockquote>

我们可以这样优化：

if (likeJavaScript)

</blockquote>

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

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

let a;

if ( a !== true ) {

// do something...

}

let a;

if ( !a ) {

// do something...

}

</blockquote>

5. JavaScript For循环

如果您需要纯JavaScript且不想依赖外部库（例如jQuery或lodash），则此小技巧非常有用。

const fruits = ['mango', 'peach', 'banana'];

for (let i = 0; i < fruits.length; i++)

</blockquote>

我们可以这样优化：

for (let fruit of fruits)

</blockquote>

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

for (let index in fruits)

</blockquote>

如果要访问文字对象中的键，这也将起作用：

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}

for (let key in obj)

console.log(key) // output: continent, country, city

</blockquote>

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

</blockquote>

## 6.短路运算

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

let dbHost;

if (process.env.DB_HOST) {

dbHost = process.env.DB_HOST;

} else {

dbHost = 'localhost';

}

</blockquote>

我可以简化如下：

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

</blockquote>

## 7.小数基指数

您可能已经看到了这一周围。从本质上讲，这是写数字而没有尾随零的一种奇特的方式。例如，1e7本质上是指1后跟7个零。它代表一个等于10,000,000的十进制基数（JavaScript将其解释为浮点类型）。

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

</blockquote>

可以简化成如下：

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;

</blockquote>

## 8.对象属性

在JavaScript中定义对象文字可以使工作更加轻松。ES6提供了一种更为简便的将属性分配给对象的方法。如果变量名与对象键相同，则可以省略一个。

const x = 1920, y = 1080;

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

</blockquote>

简写如下：

const obj = { x, y };

</blockquote>

## 9.箭头函数

普通函数很容易以其简单的形式进行读写，但是一旦您开始将其嵌套在其他函数调用中，它们的确会变得有些冗长和混乱。

function sayHello(name) {

console.log('Hello', name);

}

setTimeout(function() {

console.log('Loaded')

}, 2000);

list.forEach(function(item) {

console.log(item);

});

</blockquote>

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

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

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

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

</blockquote>

## 10.隐式return

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

function calcCircumference(diameter) {

return Math.PI * diameter

}

</blockquote>

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

calcCircumference = diameter => (

Math.PI * diameter;

)

</blockquote>

## 11.默认参数值

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

function volume(l, w, h) {

if (w === undefined)

w = 3;

if (h === undefined)

h = 4;

return l * w * h;

}

</blockquote>

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

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

volume(2) //output: 24

</blockquote>

## 12.模板文字

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

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

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

</blockquote>

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

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

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

</blockquote>

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

</blockquote>

数据对象到达组件后，您需要解压缩它。

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

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

</blockquote>

您甚至可以分配自己的变量名：

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

</blockquote>

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

</blockquote>

但是，有一种更简单的方法。只需使用反引号即可。

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.`

</blockquote>

## 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()

</blockquote>

它可以用来替换某些数组函数。

// 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];

</blockquote>

与该concat()函数不同，可以使用解构运算符在另一个数组内的任何位置插入一个数组。

const odd = [1, 3, 5 ];

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

</blockquote>

您还可以与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 }

</blockquote>

## 16.强制参数

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

function foo(bar) {

if(bar === undefined) {

throw new Error('Missing parameter!');

}

return bar;

}

</blockquote>

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

mandatory = () => {

throw new Error('Missing parameter!');

}

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

return bar;

}

</blockquote>

## 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<pets.length; ++i) {

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

return pets[i];

}

</blockquote>

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

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

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

</blockquote>

## 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

</blockquote>

此功能可以完美地完成其工作。但是，请考虑以下情况：您有很多表单需要应用验证，但是具有不同的字段和规则。构建可以在运行时配置的通用验证功能不是很好吗？

// 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

</blockquote>

现在我们有了一个验证函数，我们可以在所有形式中重复使用，而无需为每种形式编写自定义验证函数。

## 19. Double Bitwise NOT简写

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

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

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

</blockquote>

可以这样写：

~~4.9 === 4 //true

</blockquote>

## 20.指数幂速记

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

Math.pow(2,2); // 4

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

</blockquote>

可以这样写：

2**3 // 8

2**4 // 4

4**3 // 64

</blockquote>

## 21.将字符串转换为数字

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

const num1 = parseInt("100");

const num2 = parseFloat("100.01");

</blockquote>

可以这样写：

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

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

</blockquote>

## 22.对象属性分配

考虑以下代码：

let fname = { firstName : 'Black' };

let lname = { lastName : 'Panther'}

</blockquote>

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

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

</blockquote>

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

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

</blockquote>

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

## 23.按位索引

使用数组执行查找时，该indexOf()函数用于检索要查找的项目的位置。如果找不到该项目，-1则返回该值。

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

}

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

}

</blockquote>

在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

}

</blockquote>

## 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' ]

]

**/

</blockquote>

## 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' ]

**/

</blockquote>

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

查看原文点击<a href='https://www.sitepoint.com/shorthand-javascript-techniques/'>这里</a>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

一些JavaScript编码实用技巧!（值得收藏）

推荐阅读更多精彩内容