譯者：王二狗
博客：掘金、思否、知乎、簡書、CSDN
點贊再看，養成習慣，你們的支持是我持續分享的最大動力
原文鏈接：https://www.sitepoint.com/shorthand-javascript-techniques/

三元操作符

使用三元操作符可以讓你的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";

短路操作符

當進行變量賦值的時候，你可能需要確保被用來賦值的變量不是null、undefined或者為空。

簡化前：

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

簡化后：

const variable2 = variable1 || 'new';

是不是感覺難以置信 ，試一試下面的代碼：

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

需要注意的是，如果 varibale1 的值為 false 或者是 0 ，則 'bar' 將會被賦值給 varibale2.

聲明變量

簡化前：

let x; let y; let z = 3;

簡化后：

let x, y, z=3;

if判斷是否存在

簡化前：

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

簡化后：

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

for 循環

簡化前：

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

簡化后：

for (let fruit of fruits)

如果你想得到數組元素的下標，你可以這樣子寫：

for (let index in fruits)

當你用這種方法獲取對象的key時仍然有效

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

對象屬性

簡化前：

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

簡化后：

const obj = { x, y };

return

簡化前：

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

簡化后：

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

參數是默認值

簡化前：

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

模板文本

簡化前：

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}`;

解構賦值

簡化前：

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;

... 運算符

簡化前：

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

你還可以使用 ...運算符在一個數組的任意位置去嵌入另一個數組：

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 }

Array.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' }

指數冪

簡化前：

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

簡寫后：

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

字符串轉數字

簡化前：

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

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' ] ] **/

Object.values()

Object.values() 同樣是 es8 里面出現的一個新特性，它和 Object.entries() 功能類似，但是在最終的轉換數組中沒有 key。

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' }; const arr = Object.values(credits); console.log(arr);/** Output: [ 'John', 'Jane', 'Peter' ] **/ 告誡自己，即使再累也不要忘記學習，成功沒有捷徑可走，只有一步接著一步走下去。 共勉！

總結

以上是生活随笔為你收集整理的if else 简写_15+ JS简写骚操作，让你的代码“秀”起来??的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。