Introduction to the abbreviation of js

A very popular article from abroad recently. The abbreviation of js can improve your js writing level to a certain extent and your understanding of js will be closer.

Original link, very popular recently An article

This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand what is going on I have included the longhand versions to give some coding perspective.

This article is a must-read for any JavaScript-based developer, I write this This article is about learning JavaScript abbreviations that I have been familiar with for many years. To help everyone learn and understand, I have compiled some non-abbreviated writing methods.

June 14th, 2017: This article was updated to add new shorthand tips based on ES6. If you want to learn more about the changes in ES6, sign up for SitePoint Premium and check out our screencast A Look into ES6

1. Ternary operator

When you want to write an if...else statement, use the ternary operator instead.

Common writing:

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

Abbreviation:

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

You can also nest if statements:

const big = x > 10 ? " greater 10" : x

2. Short-circuit evaluation abbreviation

When assigning another value to a variable, you want to determine the source value Not null, undefined or an empty value. You can write a multi-condition if statement.

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

Or you can use the short-circuit evaluation method:

const variable2 = variable1 || 'new';

3. Declaring variable abbreviation method

let x;
let y;
let z = 3;

Abbreviation method:

let x, y, z=3;

4.if exists condition abbreviation method

if (likeJavaScript === true)

Abbreviation:

if (likeJavaScript)

The two statements are equal only when likeJavaScript is a true value

If the judgment value is not a true value, you can do this:

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

Abbreviation:

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

5. JavaScript loop abbreviation method

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

Abbreviation:

for (let index in allImgs)

You can also use 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. Short-circuit evaluation

The value assigned to a variable is determined by judging whether its value If it is null or undefined, then:

let dbHost;
if (process.env.DB_HOST) {
 dbHost = process.env.DB_HOST;
} else {
 dbHost = 'localhost';
}

Abbreviation:

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

7. Decimal exponent

When you need to write a number with many zeros (such as 10000000), you can use the exponent (1e7) to replace this number:

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

Abbreviation:

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

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. Object attribute abbreviation

If the attribute name is the same as If the key names are the same, you can use the ES6 method:

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

Abbreviation:

const obj = { x, y };

9. Arrow function abbreviation

The traditional function writing method is easy to understand and write, but when it is nested in another function, these advantages are lost.

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

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

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

Abbreviation:

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

10. Implicit return value abbreviation

Often use the return statement to return the final result of a function. An arrow function with a single statement can implicitly return its value (the function must be omitted {}In order to omit returnKeyword)

To return a multi-line statement (such as object literal expression), you need to use () to surround the function body.

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

var func = function func() {
 return { foo: 1 };
};

Abbreviation:

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

var func = () => ({ foo: 1 });

11.Default parameter value

In order to pass default values ​​to parameters in functions, it is usually written using if statements, but using ES6 to define default values ​​will be very concise:

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

Abbreviation:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

12. Template string

In traditional JavaScript language, the output template is usually written like this.

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

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

ES6 can use backticks and ${} abbreviation:

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

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

13. Destructuring assignment shorthand method

In web frameworks, it is often necessary to pass data in the form of arrays or object literals back and forth between components and APIs, and then need to deconstruct it

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;

Abbreviation:

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

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

You can also assign variable name :

const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact

14. Multi-line string abbreviation

If you need to output a multi-line string, you need to use + to splice it:

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'

Using backticks can achieve the abbreviation function:

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

15.扩展运算符简写

扩展运算符有几种用例让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()

简写：

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

也可以使用扩展运算符解构：

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 }

16.强制参数简写

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

17.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 === &#39;Dog&#39; && pets[i].name === name) {
   return pets[i];
  }
 }
}

简写：

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

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

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

// 对象验证规则
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

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

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

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

简写

~~4.9 === 4 //true

到此就完成了相关的介绍，推荐大家继续看下面的相关文章

The above is the detailed content of Introduction to the abbreviation of js. For more information, please follow other related articles on the PHP Chinese website!