It mainly includes the following 22 aspects:

1.Types 2.References 3.Objects 4.Arrays 5.Destructuring 6.Strings 7.Functions 8. Arrow functions 9. Classes and constructors 10. Modules 11. Iterators and generators 12. Access properties 13. Variables 14. Variable promotion 15. Compare operators and equality 16.Blocks 17. Control statements 18. Comments 19. Semicolons 20. Naming convention 22.ES6Copy the code

1.Types

String, number, Boolean, null, undefined, symbol, bigint const foo = 1; let bar = foo; bar = 9; console.log(foo,bar); / / = > 1, 9Copy the code
Object, array, function const foo = [1,2]; const bar = foo; bar[0] = 9; console.log(foo[0],bar[0]); / / = > 9, 9Copy the code

2.References

Var. // bad var a = 1; var b = 2; //good const a = 1; const b = 2;Copy the code
Var. // bad var count = 1; if (true) { count += 1; } // good let count = 1; if (true) { count += 1; }Copy the code
2.3 Do not access const and let outside the block-level scope where they are defined. const b = 2; } console.log(a); //ReferenceError console.log(b); //ReferenceErrorCopy the code

3.Objects

// Bad const item = new Object(); // good const item = {};Copy the code
// Bad const atom = {value: 5, addValue: function(value) {return atom.value + value; }}; // good const atom = { value: 5, addValue(value) { return atom.value + value; }};Copy the code
Const age = 18; // bad const obj = { age: age, }; // good const obj = { age, };Copy the code
3.4 Putting an attribute at the beginning of an object const age = 18; const name = 'Tom'; // bad const obj = {num:5, name, sex:' male ', age,}; // good const obj = {name, age, num:5, sex:' male ',};Copy the code
3.5 Do not access Object prototype methods such as hasOwnProperty, propertyIsEnumerable, isPrototypeOf, etc. Because these methods may be affected by the properties of the object in question, consider {hasOwnProperty: false} or (Object.create(null)). // bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // best const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. console.log(has.call(object, key));Copy the code
// very bad const original = {a: 1, b: 2}; // Very bad const original = {a: 1, b: 2}; // Very bad const original = {a: 1, b: 2}; const copy = Object.assign(original, { c: 3 }); // This mutates' original 'ಠ_ಠ delete copy. // so does this // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ... original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ... noA } = copy; // noA => { b: 2, c: 3 }Copy the code

4.Arrays

// Bad const item = new Array(); // good const item = [];Copy the code
Const someStack = []; const someStack = []; // bad someStack[someStack.lenght] = 'abracada'; // good someStack.push('abracada');Copy the code
4.3 Using Spreads... // bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items];Copy the code

5.Destructuring

5.1 When accessing and using multiple attributes of an object, use object destruct assignment. Deconstructing assignments saves you from having to create temporary references to these properties and accessing the object repeatedly, reducing code duplication and making it more readable. // Bad function getFullName(user) {const firstName = user.firstname; const lastName = user.lastName; return `${firstName} ${lastName}`; } // good function getFullName(user) { const { firstName, lastName } = user; return `${firstName} ${lastName}`; } // best function getFullName({ firstName, lastName }) { return `${firstName} ${lastName}`; }Copy the code
Const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr;Copy the code

6.Strings

6.1 String values use single quotation marks ". // Bad const Name = "capt.janeway "; // Bad - The template string should contain the variable const name = 'capt.janeway'; // good const name = 'Capt. Janeway';Copy the code
// Bad function sayHi(name) {return 'How are you, '+ name + '? '; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // bad function sayHi(name) { return `How are you, ${ name }? `; } // good function sayHi(name) { return `How are you, ${name}? `; }Copy the code

7.Functions

7.1 Do not use Arguments and choose to use REST syntax... Instead,... Specify what parameters are required, and the rest parameter is a real array, Not just similar to the parameters of the Array. / / bad function concatenateAll () {const args = Array. The prototype. Slice. The call (the arguments); return args.join(''); } // good function concatenateAll(... args) { return args.join(''); }Copy the code
7.2 using the default parameters of grammar, rather than change the function arguments. / / really bad function handleThings (opts) {opts = opts | | {}; / /... } // still bad function handleThings(opts) { if (opts === void 0) { opts = {}; } / /... } // good function handleThings(opts = {}) { // ... }Copy the code
Only for the use of individual learning, the original address: https://github.com/airbnb/javascript#table-of-contentsCopy the code