Detailed explanation of JS ES6 coding standards

1. Block scope

1.1. let replaces var

ES6 introduces two new commands for declaring variables: let and const. Among them, let can completely replace var because the two have the same semantics and let has no side effects.

The var command has the feature of variable promotion, but let does not have this command.

The so-called variable promotion means that the variable can be used first and then declared. Obviously, this coding standard is not suitable for reading.

1.2. Global constants and thread safety

Between let and const, prefer const.

let should appear in single-threaded module code, while const is very suitable for multi-threaded code.

 //bad
    var a = 1, b = 2, c = 3;

    //good
    const a = 1;
    const b = 2;
    const c = 3;

    // best
    const[a, b, c] = [1, 2, 3];

2. Strings

Static strings should always use single quotes or back quotes. Double quotes are not recommended.

Dynamic strings (string templates) use backticks.

//bad
const a = "zhaoyi";
const b = a + ", hello.";

//little good
const c = `zhaoyi`;

//very good
const a = 'zhaoyi';
const b = `zhaoyi,${a}, I say your name twice`;

3. Destructuring assignment

1. When using array members to assign values ​​to variables, destructuring assignment is preferred.

const arr = ['I', 'love', 'you'];

//bad
const one = arr[0];
const two = arr[1];
const three = arr[2];

//good
const [first, second, third] = arr;

//test
console.log(first, second, third); // I love you

2. If the function parameter is a member of an object, deconstruction assignment is preferred.

//bad
function getUserInfo(user){
    const name = user.name;
    const age = user.age;
}

//good
function getUserInfo2(user){
    const {name, age} = user;
    console.log(name, age); // 
}

//test
getUserInfo2({name: 'zhaoyi', age: 20}); // zhaoyi 20

3. If a function returns multiple values, object structure assignment is preferred over array structure assignment. This makes it easy to add return values ​​later, and to change the order of return values.

//bad
function getInfo(input){
    return [left, right];
}

//good
function getInfo2(input){
    return {left, right};
}

// Here we use the object deconstruction assignment method to receive the return result const {left, right} = getInfo2('test');

4. Object

1. For an object defined in a single line, the last member does not end with a comma. For objects defined on multiple lines, the last member ends with a comma.

//bad
const a1 = {k1: v1, k2: v2, k3: v3,};

//good 
const a2 = {k1: v1, k2: v2, k3: v3};

//bad
const b1 = {
    k1: v1,
    k2: v2
};

//good
const b2 = {
    k1: v1,
    k2: v2,
};

2. Objects should be as static as possible. Once defined, new properties should not be added at will. If adding properties is unavoidable, use the assign method.

//bad
const a = {};
a.attr = 3;

// if reshape anavoidable
const b = {};
Object.assign(b, {atrr: 3});

//good
const c = {attr: null};
c.attr = 3;

//test
console.log(a); //{attr: 3}
console.log(b); //{attr: 3}
console.log(c); //{attr: 3}

3. If the attribute name of the object is dynamic (dynamic means that it needs to be obtained through calculation), you can use the attribute expression definition when creating the object. (This situation is rare during development.)

5. Arrays

Use the spread operator (...) to copy an array.

//bad
function copyArr1(arr){
    const itemCopy = [];
    for (let index = 0; index < arr.length; index++) {
        itemCopy[index] = arr[index];
    }
    return itemCopy;
}

//good
function copyArr2(arr){
    return [...arr];
}

//test
const arr = ['z', 'y', 'z'];
console.log(copyArr1(arr)); // ["z", "y", "z"]
console.log(copyArr2(arr)); // ["z", "y", "z"]

Use the Array.from method to convert an array-like object into an array.

const obj = { "0": "a", "1": "b", length: 2};
const arr = Array.from(obj);

//test
console.log(arr); // ["a", "b"]

6. Functions

1. Immediately executed functions can be written in the form of arrow functions.

(() => {
    console.log('this is a good night.');
})();

2. When a function expression is needed, try to use an arrow function instead. Because it can be more concise and bind this.

//bad
const sayHello = ['a', 'b', 'c'].map(function (w){
    return 'Hello, ' + w;
})

//good 
const sayHello2 = ['a', 'b', 'c'].map(w => {
    return 'Hello, ' + w;
});

//test
console.log(sayHello2); // ["Hello, a", "Hello, b", "Hello, c"]

3. Arrow functions replace Function.prototype.bind. You should no longer use self/_this/that to bind this.

//bad
const self = this;
const boundMethod = function(...params){
    return method.apply(self, params);
}

// acceptable
const boundMethod2 = method.bind(this);

// best
const boundMehod3 = (...params) => method.apply(this, params);

4. For single-line simple functions that do not need to be reused, it is recommended to use arrow functions. If the function body is more complex and has more lines, the traditional function writing method should be used.

5. All configuration items should be concentrated in one object and placed in the last parameter. Boolean values ​​cannot be used directly as parameters.

//bad
function divide(a, b, option = false){

}

//good
function divide(a, b, {option = false} = {}){

}

6. Do not use the arguments variable in the function body, use the rest operator (...) instead. Because the rest operator can explicitly declare the parameters we want to obtain, and arguments is an array-like object, and the rest element apprehension can provide a real array.

//bad
function f1(){
    const args = Array.prototype.slice.call(arguments);
    return args.join('-');
}

//good
function f2(...args){
    return args.join('-');
}

//test
console.log(f1(1, 2, 3)); // 1-2-3
console.log(f2(1, 2, 3)); // 1-2-3

The spread operator is represented by three dots, and its function is to expand an array or array-like object into a series of values ​​separated by commas; the rest operator is also three dots, but its function is exactly the opposite of the spread operator, combining a sequence of values ​​separated by commas into an array. Rest means remaining.

7. Use default value syntax to set default values ​​for function parameters.

//bad
function handleThings(opts){
    opts = opts || {};
    // ...
}

//good
function handleThings2(opts = {}){
    // ...
}

7. Map structure

Map and Object give people the feeling that they are the same data type, but in actual semantics, they need to be more accurately distinguished. The principles are as follows:

• When simulating entity objects, use Object;
• When you only need a kv key-value pair data structure, use Map;

Map has a built-in traversal mechanism (implements the Iterator structure)

// Map has many initialization methods. Here, an array with two lengths is used for initialization (the first element is K and the second element is V)
let map = new Map([['k1', 'I'], ['k2', 'love'], ['k3', 'your']]);

// Traverse K
for(const key of map.keys()){
    console.log(key);
    // k1
    // k2
    // k3
}

// Traverse V
for (const value of map.values()) {
    console.log(value);
    // I
    //love
    // you
}

// Traverse KV
for (const item of map.entries()) {
    console.log(item);
    // ['k1', 'I']
    // ['k2', 'love']
    // ['k3', 'your']
}

8. Class

1. Always use Class instead of operations that require prototype. Because Class is written more concisely and easier to understand. Friends who have been exposed to Java and C# more probably prefer this kind of class syntax.

//bad
function Queue1(contents = []){
    this._queue = [...contents];
}
Queue1.prototype.pop = function(){
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
}

//good
class Queue {
    constructor(contents = []){
        // Why not use this._queue = contents; here?
        // Friends who have read effective java must know a rule:
        // That is, when designing a constructor, if the parameters passed in have variable types (objects, arrays),
        // The constructor should use a copy of this object when receiving this parameter.
        // This prevents changes to external parameter objects from affecting the instance of the class itself.
        // Therefore, the contents here need to be copied and assigned.
        this._queue = [...contents];
    }
    pop() {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
    }
}

//test
q = new Queue([1, 2, 3]);

console.log(q.pop()); // 1
console.log(q.pop()); // 2
console.log(q.pop()); // 3
console.log(q.pop()); // undefined

2. Use extends to implement inheritance, because it is simpler and there is no danger of destroying the instanceof operation.

// Queue is the class of the previous example class PeekQueue extends Queue{
    // ...
}

9. Modules

1. Module syntax is the standard way to write js modules, and you should stick to it. Use import instead of require.

//bad
const ma = require('moduleA');
const f1 = ma.f1;
const f2 = ma.f2;

//good
import {f1, f2} from 'moduleA';

2. Use export instead of module.export

//bad
module.exports = SomeObj;

//good
export default SomeObj;

3. If the module has only one output value, use export default; if there is chrome, do not use export default. Do not use export default and ordinary export at the same time, although the rules allow this way of writing code.

4. Do not use wildcards in modules, as this will ensure that there is a default export in the module: export default.

//bad
import * as myObject './someModule';

//good
import myObject from './someModule';

5. If the module outputs a function by default, the first letter of the function should be lowercase.

 function someFunction(){
     // ...
 }
 export default someFunction;

6. If the module outputs an object by default, the first letter of the object name should be capitalized.

const someObj = {
    // ...
}
export default SomeObj;

10. ESLint

The many rules mentioned above are actually just the tip of the iceberg of rule templates. If we really want to write code with beautiful format and in line with the standards of mainstream manufacturers, it is not enough to rely solely on our own consciousness.

Is there any software that can check the code writing standards similar to software compilation tools to check the code correctness? The answer is yes.

ESLint is such a checking tool. It can be used to ensure that grammatically correct and style-consistent code is written.

The following is a tutorial for installing ESLink (make sure your environment has npm installed). Of course, if you use a project generated by some scaffolding tool (such as @vue-cli), such projects all provide an optional eslint plug-in. The current version is: v6.6.0. This version of eslint provides a simpler configuration method. You can refer to https://eslint.bootcss.com/docs/user-guide/getting-started/ for configuration. The following is a rough configuration step

1. Install required plugins

$ npm install eslint -g

2. Generate package.json file

$ npm init

This method generates a package.json file in the current directory, which is similar to an environment description file.

3. Generate eslint configuration file

$ eslint --init

The command will ask you which type of configuration to use (select using the up and down arrows)

• It is recommended to use json or JavaScript type. I use JavaScript type configuration file here.
• The style guide uses airbnb.

You can select other options according to your needs. After completing the selection, the required dependency packages will be automatically downloaded.

The contents of the generated configuration file are as follows:

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb-base',
  ],
  globals:
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules:
  },
};

We can modify the validation rules in this configuration file. For specific content, please refer to the link given above.

4. Create a js file in the current directory

// index.js
var unused = 'Grimgar of Fantasy and Ash';

function hello(){
    var message = "Hello, zhaoyi!";
    alert(message);
}
  
hello();

5. Verify the correctness of code writing through eslint

$ eslint index.js

1:12 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

2:1 error Unexpected var, use let or const instead no-var

2:5 error 'unused' is assigned a value but never used no-unused-vars

2:27 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

3:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

4:17 error Missing space before opening brace space-before-blocks

4:18 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

5:1 error Expected indentation of 2 spaces but found 4 indent

5:5 error Unexpected var, use let or const instead no-var

5:19 error Strings must use singlequote quotes

5:36 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

6:1 error Expected indentation of 2 spaces but found 4 indent

6:5 warning Unexpected alert no-alert

6:20 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

7:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

8:1 error Trailing spaces not allowed no-trailing-spaces

8:3 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

9:9 error Trailing spaces not allowed no-trailing-spaces

9:10 error Newline required at end of file but not found eol-last

Among them, one error is actually due to the problem of git file format conversion:

... linebreak-style

We can remove this check in the configuration file: add 'linebreak-style': [0, 'error', 'windows'] under rules.

rules:
    'linebreak-style': [0, 'error', 'windows']
  }

Continue running the detection command and you can see the following output:

2:1 error Unexpected var, use let or const instead no-var

2:5 error 'unused' is assigned a value but never used no-unused-vars

5:1 error Expected indentation of 2 spaces but found 4 indent

5:5 error Unexpected var, use let or const instead no-var

5:19 error Strings must use singlequote quotes

6:1 error Expected indentation of 2 spaces but found 4 indent

6:5 warning Unexpected alert no-alert

8:1 error Trailing spaces not allowed no-trailing-spaces

9:9 error Trailing spaces not allowed no-trailing-spaces

As you can see, many of our irregular operations will be warned. For example, do not use four spaces for indentation (actually it is built-in to our compiler and we are used to it), do not add extra spaces, delete unused declared variables, do not recommend using the var type, etc.

If you think it makes sense, then follow it; if you feel that the indentation does not suit your habits, you can also close/modify it through the configuration file to achieve the desired effect.

The above is a detailed explanation of the JS ES6 coding standards. For more information about the JS ES6 coding standards, please pay attention to other related articles on 123WORDPRESS.COM!