search
HomeWeb Front-endJS Tutorial19 Tips for JavaScript Coding
19 Tips for JavaScript CodingAug 08, 2017 pm 01:43 PM
javascriptjscoding

This article is suitable for any developer based on JavaScript. I wrote this article mainly about some abbreviated codes in JavaScript to help everyone better understand some of the basics of JavaScript. I hope these codes can help you better understand JavaScript from different perspectives.

Ternary operator

If you use the if...else statement, then this is a good way to save code.

Longhand:

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

Shorthand:

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

You can also nest like belowifStatement:

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

Short-circuit Evaluation

When assigning the value of one variable to another variable, you may want to ensure that the variable is not null, undefined or empty. You can write a conditional statement or Short-circuit Evaluation with multiple if.

Longhand:

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

Shorthand:

const variable2 = variable1  || 'new';

Don’t believe me, please believe in your own test first (you can put the following The code is pasted in es6console)

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

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

Declaring variables

When declaring variables in a function, declaring multiple variables at the same time like the following can save you a lot of time and space:

Longhand:

let x;
let y;
let x = 3;

Shorthand:

let x, y, z=3;

If present

This is probably trivial, but worth mentioning. When doing "if checks", the assignment operator can sometimes be omitted.

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

Note: These two methods are not the same Exactly the same, the abbreviation check will pass as long as likeJavaScript is true.

Here's another example. If a is not true, then what to do.

Longhand:

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

Shorthand:

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

JavaScript for loop

If you just want This little trick is very useful if you want native JavaScript without relying on external libraries like jQuery or Lodash.

Longhand:

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

Shorthand:

for (let index in allImgs)

Array.forEachAbbreviation:

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

Short-circuit Evaluation

If the parameter is null or undefined, we can simply use a Short-circuit logical operation to achieve one line of code replacement How to write six lines of code.

Longhand:

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = &#39;localhost&#39;;
}

Shorthand:

const dbHost = process.env.DB_HOST || &#39;localhost&#39;;

Decimal exponent

You may have seen this. It is essentially a strange way of writing numbers, that is, there are many 0 after a number. For example, 1e7 is essentially equivalent to 10000000 (1 is followed by 7 0). It represents the decimal notation equal to 10000000.

Longhand:

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

Shorthand:

for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

Object properties

Definition of object literals ) makes JavaScript more interesting. ES6 provides a simpler way to assign object properties. If the property name and value are the same, you can use the following abbreviation.

Longhand:

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

Shorthand:

const obj = { x, y };

Arrow Function

Classic functions are easy to read and can be written, but they do get a bit verbose and can confuse you especially when nested functions call other functions.

Longhand:

function sayHello(name) {
  console.log(&#39;Hello&#39;, name);
}

setTimeout(function() {
  console.log(&#39;Loaded&#39;)
}, 2000);

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

Shorthand:

sayHello = name => console.log(&#39;Hello&#39;, name);

setTimeout(() => console.log(&#39;Loaded&#39;), 2000);

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

Implicit return

returnA keyword often used in functions will return the final result of the function. Arrow functions use a statement to implicitly return the result (the function must omit the {}, in order to omit the return keyword).

If a multi-line statement (such as an object) is returned, it is necessary to use () instead of {} in the function body. This ensures that the code is returned as a separate statement.

Longhand:

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

Shorthand:

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

Default parameter value

You can useif statement to define the default values ​​of function parameters. In ES6, default values ​​can be defined in function declarations.

Longhand:

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

Shorthand:

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

Template Literals

Are you tired of using it+To concatenate multiple variables into a string? Isn't there an easier way? If you can use ES6, you're lucky. In ES6, what you have to do is use apostrophes and ${}, and put your variables inside curly braces.

Longhand:

const welcome = &#39;You have logged in as &#39; + first + &#39; &#39; + last + &#39;.&#39;

const db = &#39;http://&#39; + host + &#39;:&#39; + port + &#39;/&#39; + database;

Shorthand:

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

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

Destructuring Assignment

If you are using either With popular web frameworks, there are many opportunities to use arrays or data objects to pass information between APIs. Once the data object reaches a component, you need to expand it.

Longhand:

const observable = require(&#39;mobx/observable&#39;);
const action = require(&#39;mobx/action&#39;);
const runInAction = require(&#39;mobx/runInAction&#39;);

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;

Shorthand:

import { observable, action, runInAction } from &#39;mobx&#39;;

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

You can even specify the variable name yourself:

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

Multi-line string

You will find that the code you used to write multi-line strings will look like the following:

Longhand:

const lorem = &#39;Lorem ipsum dolor sit amet, consectetur\n\t&#39;
    + &#39;adipisicing elit, sed do eiusmod tempor incididunt\n\t&#39;
    + &#39;ut labore et dolore magna aliqua. Ut enim ad minim\n\t&#39;
    + &#39;veniam, quis nostrud exercitation ullamco laboris\n\t&#39;
    + &#39;nisi ut aliquip ex ea commodo consequat. Duis aute\n\t&#39;
    + &#39;irure dolor in reprehenderit in voluptate velit esse.\n\t&#39;

但还有一个更简单的方法。使用撇号。

Shorthand:

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

Spread Operator

Spread Operator是ES6中引入的,使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。

Longhand:

// 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()

Shorthand:

// 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()函数,使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

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 }

强制参数

默认情况下,JavaScript如果不给函数参数传一个值的话,将会是一个undefined。有些语言也将抛出一个警告或错误。在执行参数赋值时,你可以使用if语句,如果未定义将会抛出一个错误,或者你可以使用强制参数(Mandatory parameter)。

Longhand:

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

Shorthand:

mandatory = () => {
  throw new Error(&#39;Missing parameter!&#39;);
}

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

Array.find

如果你以前写过一个查找函数,你可能会使用一个for循环。在ES6中,你可以使用数组的一个新功能find()

Longhand:

const pets = [
  { type: &#39;Dog&#39;, name: &#39;Max&#39;},
  { type: &#39;Cat&#39;, name: &#39;Karl&#39;},
  { type: &#39;Dog&#39;, name: &#39;Tommy&#39;},
]

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

Shorthand:

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

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:&#39;Bruce&#39;,last:&#39;Wayne&#39;})); // true

这个函数可以正常工作。然而,需要考虑一个这样的场景:有很多种形式需要应用验证,而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

Shorthand:

// 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(schema, {first:&#39;Bruce&#39;})); // false
console.log(validate(schema, {first:&#39;Bruce&#39;,last:&#39;Wayne&#39;})); // true

现在我们有一个验证函数,可以各种形式的重用,而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话,对于逐位运算符(Bitwise Operator)你应该永远不会在任何地方使用。此外,如果你不处理二进制01,那就更不会想使用。

然而,一个非常实用的用例,那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势,它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

Longhand:

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

Shorthand:

~~4.9 === 4  //true

The above is the detailed content of 19 Tips for JavaScript Coding. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools