18条你不知道的JavaScript简写语法

对于开发人员来说让代码更加简单高效的运行是每一个码农的至高追求，下面是19个JavaScript简写语法，赶快应用到生产中吧。

1.三元运算符

if..else语句不复杂时的最佳替代品

常规语法

const x = 20;
let big;

if (x > 10) {
    big = true;
} else {
    big = false;
}

const x = 20;

let big;

if (x > 10) {

big = true;

} else {

big = false;

}

简写语法

const big = x > 10 ? true : false;

1	const big = x > 10 ? true : false;

你也可以将代码写成如下样子：

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

1	const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";

2.判断变量存在与否

将一个变量A的值传递给变量B时为避免出现变量A未定义或为空通常需要对变量A进行判断。

常规语法

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

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

let variable2 = variable1;

}

简写语法

const variable2 = variable1  || 'new';

1	const variable2 = variable1 \|\| 'new';

可以自己（es6console）尝试一下

示例代码

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true

variable1 = '//www.dustit.me';
variable2 = variable1  || '';
console.log(variable2); // prints //www.dustit.me

let variable1;

let variable2 = variable1 || '';

console.log(variable2 === ''); // prints true

variable1 = '//www.dustit.me';

variable2 = variable1 || '';

console.log(variable2); // prints //www.dustit.me

3.简版变量声明

声明我个变量的时候可以写在一行，这个大家应用比较熟悉。

常规语法

let x;
let y;
let z = 3;

let x;

let y;

let z = 3;

简写语法

let x, y, z=3;

1	let x, y, z=3;

4.IF条件判断

这个看起来不太重要但也值得一提，当在作IF条件判断的时候通常我们可以省略掉条件本身。

常规语法

if (likeJavaScript === true)

1	if (likeJavaScript === true)

简写语法

if (likeJavaScript)

1	if (likeJavaScript)

下面是当条件为false时do something…

常规语法

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

let a;

if ( a !== true ) {

// do something...

}

简写语法

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

let a;

if ( !a ) {

// do something...

}

5.JavaScript循环结构简写

当JavaScript脚本不依赖任何像Jquery或lodash这样的第三方库时循环结构简写非常有用。

常规语法

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

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

简写语法

for (let img in allImgs)

1	for (let img 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

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.科学计数

你一定遇到这样的情况，代码中出现1000000000这样的情况，1后面跟随了你都不知道多个的0，其实完全可以写成1e9这样子，是不是一目了然。

常规语法

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

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

简写语法

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

// 下面的判断都是True
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

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

// 下面的判断都是True

1e0 === 1;

1e1 === 10;

1e2 === 100;

1e3 === 1000;

1e4 === 10000;

1e5 === 100000;

7.对象属性简写语法

ES6为对象定义属性提供了一种更简单的方法。如果属性键值相同，则可以利用简写符号。

常规语法

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

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

简写语法

const obj = { x, y };

1	const obj = { x, y };

8.箭头方法

传统的方法定义编写时比较方便，但当所定义的方法中包含其他方法时往往会变的冗长不便于阅读，ES6为我们推荐了更好的解决方案。

常规语法

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

function sayHello(name) {

console.log('Hello', name);

}

setTimeout(function() {

console.log('Loaded')

}, 2000);

list.forEach(function(item) {

console.log(item);

});

简写语法

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

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

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

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

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

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

9.隐性返回

常规语法

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

function calcCircumference(diameter) {

return Math.PI * diameter

}

简写语法

calcCircumference = diameter => Math.PI * diameter;

1	calcCircumference = diameter => Math.PI * diameter;

10.函数参数默认值

传统的函数参数默认值不能直接赋值给形参，通常我们只能在结构体中通过if结构进行赋值，ES6为我们推荐了更简单的解决办法。

常规语法

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

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

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

volume(2) //output: 24

11.模板变量

当你尝试将多个变量值通过‘ + ‘插入到一个字符串中时相当的麻烦，如果你使用ES6语法这将变的十分简单，只需要全用标签${}包裹变量即可。

常规语法

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

12.组件间数据引用

使用主流的Web框架开发应用时，经常需要在不同组件间传递数据，下面的语法将这件事情简单化。

常规语法

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;

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;

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

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

当然你也可以自定义变量名

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

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

13.多选字符串

遇到一长串带换行的字符串是一件很头痛的事情需要插入多个\n\t换行标记并通过‘ + ‘连接以排版，其实通过反引号可以更简单的实现。

常规语法

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

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

14.数组合并与分割

常规语法

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

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

1 2	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 }

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 }

15.强制性参数

默认情况下，JavaScript将函数参数设置为未定义，如果它们未传递值。一些其他语言将会发出警告或错误。要强制执行参数分配，可以使用if语句来引发错误，如果未定义，或者您可以利用“强制参数简写”的优势。

常规语法

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

function foo(bar) {

if(bar === undefined) {

throw new Error('Missing parameter!');

}

return bar;

}

简写语法

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

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

mandatory = () => {

throw new Error('Missing parameter!');

}

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

return bar;

}

16.简洁的Array.find

如果您需要在原生的JavaScript中编写查找功能，那么您可能会使用了for循环。在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];
    }
  }
}

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

1 2	pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy'); console.log(pet); // { type: 'Dog', name: 'Tommy' }

17.Object [key] 简写

你知道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

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({first:'Bruce'})); // false
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({first:'Bruce'})); // false

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

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

18.双位不定式

按位运算符是您在初学者JavaScript教程中学到的功能之一，您永远不会在任何地方实现它们。除非您处理二进制文件，但是谁想要处理这些0或1呢？

常规语法

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

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

简写语法

~~4.9 === 4  //true

1	~~4.9 === 4 //true

1.三元运算符

常规语法

简写语法

2.判断变量存在与否

常规语法

简写语法

3.简版变量声明

常规语法

简写语法

4.IF条件判断

常规语法

简写语法

常规语法

简写语法

5.JavaScript循环结构简写

常规语法

简写语法

常规语法

简写语法

7.对象属性简写语法

常规语法

简写语法

8.箭头方法

常规语法

简写语法

9.隐性返回

常规语法

简写语法

10.函数参数默认值

常规语法

简写语法

11.模板变量

常规语法

简写语法

12.组件间数据引用

常规语法

简写语法

13.多选字符串

常规语法

简写语法

14.数组合并与分割

常规语法

简写语法

15.强制性参数

常规语法

简写语法

16.简洁的Array.find

常规语法

简写语法

17.Object [key] 简写

18.双位不定式

常规语法

简写语法

发表评论 取消回复

发表评论取消回复