JS超有用的简写技巧

1.三元操作符

当想写if...else语句时，使用三元操作符来代替。

const x = 20;
let answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}

　　简写：const answer = x > 10 ? 'is greater' : 'is lesser';

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句

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

　　简写：const variable2 = variable1 || 'new';

3.声明变量简写方法

let x;
let y;
let z = 3;

　　简写：let x, y, z=3;

4.if存在条件简写方法

if (likeJavaScript === true)  简写：if (likeJavaScript)

5.JavaScript循环简写方法

for (let i = 0; i < allImgs.length; i++) 简写：简写：for (let index in allImgs)也可以使用Array.forEach：

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

// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

 

6.默认参数值

为了给函数中参数传递默认值，通常使用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  

　　

7.解构赋值简写方法

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;
//最后一个变量名为contact   后面的contact才是const的变量明

　　

8.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

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

　　

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 }

　　

9.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

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

　　简写：

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

foo = (bar = mandatory()) => {
  return bar;
} 

　　

10.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，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' }

　　

11.Object[key]简写

考虑一个验证函数

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true 

　　假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true 
假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？
// 对象验证规则
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// 通用验证函数
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 

　　

12.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。

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

简写：~~4.9 === 4 //true

13.

https://mp.weixin.qq.com/s/n600NXk-LqnXUKfdQrMV3A