if else 简写-凯发k8官方网

译者：王二狗
博客：掘金、思否、知乎、简书、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简化后：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' ] **/ 告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！

总结

以上是凯发k8官方网为你收集整理的if else 简写_15 js简写骚操作，让你的代码“秀”起来??的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。