So sánh hiệu suất javascript

Sử dụng

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
59 cho tất cả các tài liệu tham khảo của bạn; . dây dẫn.
const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
61,
const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
62

Tại sao?

// bad
var a = 1;
var b = 2;

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

  • Nếu bạn phải chỉ định lại tài liệu tham khảo, hãy sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 thay vì
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    60. dây dẫn.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    65

    Tại sao?

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }

  • Lưu ý rằng cả

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 đều ở phạm vi khối, trong khi
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    60 là phạm vi chức năng

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1

    Trong đoạn mã trên, bạn có thể thấy rằng tham chiếu

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    71 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    72 sẽ tạo ra ReferenceError, trong khi
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    73 chứa số. Điều này là do
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    71 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    72 nằm trong phạm vi khối, trong khi
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    73 nằm trong phạm vi hàm chứa

Các đối tượng

  • Sử dụng cú pháp theo nghĩa đen để tạo đối tượng. dây dẫn.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    77

    // bad
    const item = new Object();
    
    // good
    const item = {};

  • Sử dụng tên thuộc tính được tính toán khi tạo đối tượng có tên thuộc tính động

    Tại sao?

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };

  • Sử dụng tốc ký phương thức đối tượng. dây dẫn.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    78

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };

  • Sử dụng tốc ký giá trị thuộc tính. dây dẫn.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    78

    Tại sao?

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };

  • Nhóm các thuộc tính tốc ký của bạn khi bắt đầu khai báo đối tượng của bạn

    Tại sao?

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };

  • Chỉ trích dẫn thuộc tính là số nhận dạng không hợp lệ. dây dẫn.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    80

    Tại sao? . Nó cải thiện khả năng làm nổi bật cú pháp và cũng được nhiều công cụ JS tối ưu hóa dễ dàng hơn

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    0

  • Không gọi trực tiếp các phương thức

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    81, chẳng hạn như
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    82,
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    83 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    84. dây dẫn.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    85

    Tại sao?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    1

  • Ưu tiên cú pháp trải rộng đối tượng hơn

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    88 hơn đối tượng sao chép nông. Sử dụng cú pháp tham số phần còn lại của đối tượng để lấy một đối tượng mới với các thuộc tính nhất định bị bỏ qua. dây dẫn.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    89

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    2

Mảng

  • Sử dụng cú pháp chữ để tạo mảng. dây dẫn.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    90

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    3

  • Use Array#push instead of direct assignment to add items to an array

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    4

  • Use array spreads

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 to copy arrays

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    5

  • To convert an iterable object to an array, use spreads

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 instead of
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    93

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    6

  • Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    93 for converting an array-like object to an array

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    7

  • Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    93 instead of spread
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 for mapping over iterables, because it avoids creating an intermediate array

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    8

  • Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement returning an expression without side effects, following . eslint.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    97

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    9

  • Use line breaks after open and before close array brackets if an array has multiple lines

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    0

Destructuring

  • Use object destructuring when accessing and using multiple properties of an object. eslint.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    98

    Why? Destructuring saves you from creating temporary references for those properties, and from repetitive access of the object. Repeating object access creates more repetitive code, requires more reading, and creates more opportunities for mistakes. Destructuring objects also provides a single site of definition of the object structure that is used in the block, rather than requiring reading the entire block to determine what is used

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    1

  • Use array destructuring. eslint.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    98

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    2

  • Use object destructuring for multiple return values, not array destructuring

    Why? You can add new properties over time or change the order of things without breaking call sites

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    3

Strings

  • Use single quotes

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    00 for strings. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    01

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    4

  • Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation

    Why? Broken strings are painful to work with and make code less searchable

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    5

  • When programmatically building up strings, use template strings instead of concatenation. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    02
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    03

    Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    6

  • Never use
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    04 on a string, it opens too many vulnerabilities. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    05

  • Do not unnecessarily escape characters in strings. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    06

    Why? Backslashes harm readability, thus they should only be present when necessary

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    7

Functions

  • Use named function expressions instead of function declarations. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    07

    Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module. Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. (Discussion)

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    8

  • Wrap immediately invoked function expressions in parentheses. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    08

    Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    9

  • Never declare a function in a non-function block (
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    10, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    11

  • Note. ECMA-262 defines a

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    12 as a list of statements. A function declaration is not a statement

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    0

  • Never name a parameter

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13. This will take precedence over the
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13 object that is given to every function scope

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    1

  • Never use

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13, opt to use rest syntax
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 instead. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    17

    Why?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 is explicit about which arguments you want pulled. Plus, rest arguments are a real Array, and not merely Array-like like
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    2

  • Sử dụng cú pháp tham số mặc định thay vì thay đổi đối số hàm

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    3

  • Tránh tác dụng phụ với các tham số mặc định

    Tại sao?

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    4

  • Luôn đặt thông số mặc định cuối cùng. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    20

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    5

  • Không bao giờ sử dụng hàm tạo Hàm để tạo một hàm mới. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    21

    Tại sao?

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    6

  • Khoảng cách trong chữ ký hàm. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    23
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    24

    Tại sao?

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    7

  • Không bao giờ thay đổi tham số. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    25

    Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    8

  • Never reassign parameters. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    25

    Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13 object. It can also cause optimization issues, especially in V8

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    9

  • Prefer the use of the spread syntax

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    91 to call variadic functions. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    29

    Why? It’s cleaner, you don’t need to supply a context, and you can not easily compose

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    30 with
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    31

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    0

  • Functions with multiline signatures, or invocations, should be indented just like every other multiline list in this guide. with each item on a line by itself, with a trailing comma on the last item. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    32

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    1

Arrow Functions

  • When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    33,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    34

    Why? It creates a version of the function that executes in the context of

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35, which is usually what you want, and is a more concise syntax

    Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    2

  • If the function body consists of a single statement returning an without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36 statement. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    37,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    38

    Why? Syntactic sugar. It reads well when multiple functions are chained together

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    3

  • In case the expression spans over multiple lines, wrap it in parentheses for better readability

    Why? It shows clearly where the function starts and ends

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    4

  • Always include parentheses around arguments for clarity and consistency. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    37

    Why? Minimizes diff churn when adding or removing arguments

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    5

  • Avoid confusing arrow function syntax (

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    40) with comparison operators (
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    41,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    42). eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    43

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    6

  • Enforce the location of arrow function bodies with implicit returns. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    44

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    7

Classes & Constructors

  • Always use

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    45. Avoid manipulating
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    46 directly

    Why?

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    45 syntax is more concise and easier to reason about

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    8

  • Use

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    48 for inheritance

    Why? It is a built-in way to inherit prototype functionality without breaking

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    49

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    9

  • Methods can return

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35 to help with method chaining

    // bad
    const item = new Object();
    
    // good
    const item = {};
    0

  • It’s okay to write a custom

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    51 method, just make sure it works successfully and causes no side effects

    // bad
    const item = new Object();
    
    // good
    const item = {};
    1

  • Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    52

    // bad
    const item = new Object();
    
    // good
    const item = {};
    2

  • Avoid duplicate class members. eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    53

    Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug

    // bad
    const item = new Object();
    
    // good
    const item = {};
    3

  • Class methods should use

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35 or be made into a static method unless an external library or framework requires using specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver. eslint.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    55

    // bad
    const item = new Object();
    
    // good
    const item = {};
    4

Modules

  • Always use modules (

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    56/
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    57) over a non-standard module system. You can always transpile to your preferred module system

    Tại sao?

    // bad
    const item = new Object();
    
    // good
    const item = {};
    5

  • Không sử dụng nhập ký tự đại diện

    Tại sao?

    // bad
    const item = new Object();
    
    // good
    const item = {};
    6

  • Và không xuất trực tiếp từ nhập

    Tại sao?

    // bad
    const item = new Object();
    
    // good
    const item = {};
    7

  • Chỉ nhập từ một đường dẫn ở một nơi. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    58

    Tại sao?

    // bad
    const item = new Object();
    
    // good
    const item = {};
    8

  • Không xuất các ràng buộc có thể thay đổi. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    59

    Tại sao? . Mặc dù kỹ thuật này có thể cần thiết cho một số trường hợp đặc biệt, nhưng nói chung, chỉ nên xuất các tham chiếu cố định

    // bad
    const item = new Object();
    
    // good
    const item = {};
    9

  • Trong các mô-đun có một lần xuất, ưu tiên xuất mặc định hơn xuất có tên. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    60

    Tại sao?

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    0

  • Đặt tất cả các

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    56 ở trên câu lệnh không nhập khẩu. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    62

    Tại sao?

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    1

  • Nhập nhiều dòng phải được thụt vào giống như mảng nhiều dòng và đối tượng bằng chữ. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    64

    Tại sao?

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    2

  • Không cho phép cú pháp trình tải Webpack trong câu lệnh nhập mô-đun. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    65

    Tại sao? . Thích sử dụng cú pháp trình tải trong

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    66

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    3

  • Không bao gồm phần mở rộng tên tệp JavaScript eslint.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    67

    Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    4

Trình vòng lặp và Trình tạo

  • Don’t use iterators. Thích các hàm bậc cao hơn của JavaScript thay vì các vòng lặp như

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    68 hoặc
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    69. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    70
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    71

    Tại sao? . Xử lý các hàm thuần túy trả về giá trị dễ lý luận hơn các tác dụng phụ

    Sử dụng

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    72 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    73 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    74 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    75 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    76 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    77 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    78 /. để lặp lại các mảng và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    79 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    80 /
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    81 để tạo các mảng để bạn có thể lặp lại các đối tượng

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    5

  • Hiện tại không sử dụng máy phát điện

    Tại sao?

  • Nếu bạn phải sử dụng trình tạo hoặc nếu bạn bỏ qua , hãy đảm bảo chữ ký chức năng của chúng được đặt đúng khoảng cách. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    82

    Why?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    58 and
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    84 are part of the same conceptual keyword -
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    84 is not a modifier for
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    58,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    87 is a unique construct, different from
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    58

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    6

Properties

  • Sử dụng ký hiệu dấu chấm khi truy cập thuộc tính. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    89

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    7

  • Sử dụng ký hiệu ngoặc

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    90 khi truy cập các thuộc tính có biến

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    8

  • Sử dụng toán tử lũy thừa

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    91 khi tính toán lũy thừa. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    92

    function getKey(k) {
      return `a key named ${k}`;
    }
    
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
    9

Biến

  • Luôn sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 hoặc
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 để khai báo biến. Không làm như vậy sẽ dẫn đến các biến toàn cầu. Chúng tôi muốn tránh làm ô nhiễm không gian tên toàn cầu. Captain Planet đã cảnh báo chúng tôi về điều đó. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    95
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    61

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    0

  • Sử dụng một khai báo

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 hoặc
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 cho mỗi biến hoặc phép gán. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    99

    Tại sao? . Bạn cũng có thể duyệt qua từng khai báo bằng trình gỡ lỗi, thay vì xem qua tất cả chúng cùng một lúc

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    1

  • Nhóm tất cả các

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 của bạn và sau đó nhóm tất cả các
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 của bạn

    Tại sao?

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    2

  • Assign variables where you need them, but place them in a reasonable place

    Tại sao?

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    3

  • Không gán chuỗi biến. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    06

    Tại sao?

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    4

  • Tránh sử dụng số tăng và giảm đơn vị (

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    07,
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    08). dây buộc
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    09

    Tại sao? . Việc thay đổi các giá trị của bạn bằng các câu như

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    10 thay vì
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    11 hoặc
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    12 cũng sẽ mang tính biểu cảm hơn. Việc không cho phép các câu lệnh tăng và giảm đơn nguyên cũng ngăn bạn vô tình tăng trước/giảm trước các giá trị, điều này cũng có thể gây ra hành vi không mong muốn trong chương trình của bạn

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    5

  • Avoid linebreaks before or after

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    13 in an assignment. Nếu bài tập của bạn vi phạm
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    14, hãy bao quanh giá trị trong dấu ngoặc. eslint
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    15

    Why? Linebreaks surrounding

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    13 can obfuscate the value of an assignment

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    6

  • Không cho phép các biến không sử dụng. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    17

    Why? Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Các biến như vậy chiếm không gian trong mã và có thể khiến người đọc nhầm lẫn

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    7

cẩu

  • const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    60 declarations get hoisted to the top of their closest enclosing function scope, their assignment does not. Các khai báo của
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63 được ban phước với một khái niệm mới gọi là. Điều quan trọng là phải biết tại sao typeof không còn an toàn

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    8

  • Các biểu thức hàm ẩn danh nâng tên biến của chúng, nhưng không gán chức năng

    // bad
    const atom = {
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
    9

  • Các biểu thức hàm được đặt tên kéo theo tên biến, không phải tên hàm hoặc thân hàm

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    0

  • Khai báo hàm nâng tên của chúng và thân hàm

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    1

  • Để biết thêm thông tin, hãy tham khảo JavaScript Scoping & Hoisting của Ben Cherry

Toán tử so sánh & Bình đẳng

  • Sử dụng
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    21 và
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    22 thay vì
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    23 và
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    24. dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    25

  • Các câu điều kiện như câu lệnh

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 đánh giá biểu thức của chúng bằng cách sử dụng sự ép buộc với phương pháp trừu tượng
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    27 và luôn tuân theo các quy tắc đơn giản này

    • Các đối tượng đánh giá là đúng
    • Undefined evaluates to false
    • Null đánh giá là sai
    • Booleans đánh giá giá trị của boolean
    • Các số đánh giá là sai nếu +0, -0 hoặc NaN, nếu không thì đúng
    • Các chuỗi đánh giá là sai nếu một chuỗi rỗng
      // bad
      var a = 1;
      var b = 2;
      
      // good
      const a = 1;
      const b = 2;
      00, nếu không thì đúng

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    2

  • Sử dụng phím tắt cho booleans, nhưng so sánh rõ ràng cho chuỗi và số

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    3

  • Để biết thêm thông tin, xem bởi Angus Croll

  • Sử dụng dấu ngoặc nhọn để tạo các khối trong mệnh đề

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    29 và
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    30 có chứa khai báo từ vựng (e. g.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    63,
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59,
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    58, và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    45). dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    35

    Tại sao? . This causes problems when multiple

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    29 clauses attempt to define the same thing

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    4

  • Ternaries should not be nested and generally be single line expressions. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    39

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    5

  • Tránh báo cáo ternary không cần thiết. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    40

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    6

  • Khi trộn các toán tử, hãy đặt chúng trong ngoặc đơn. Ngoại lệ duy nhất là các toán tử số học tiêu chuẩn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    41,
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    42 và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    91 vì quyền ưu tiên của chúng được hiểu rộng rãi. Chúng tôi khuyên bạn nên đặt
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    44 và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    84 trong ngoặc đơn vì thứ tự ưu tiên của chúng có thể không rõ ràng khi chúng được trộn lẫn. dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    46

    Tại sao?

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    7

Blocks

  • Sử dụng dấu ngoặc nhọn với tất cả các khối nhiều dòng. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    47

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    8

  • If you’re using multiline blocks with

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 and
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    49, put
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    49 on the same line as your
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 block’s closing brace. eslint.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    52

    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
    };
    9

  • Nếu khối

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 luôn thực thi câu lệnh
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36, thì khối
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    49 tiếp theo là không cần thiết. Một
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36 trong một khối
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    57 theo sau một khối
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 có chứa một
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36 có thể được tách thành nhiều khối
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09. dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    61

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    0

Tuyên bố kiểm soát

  • Trong trường hợp tuyên bố kiểm soát của bạn (

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    10, v.v. ) quá dài hoặc vượt quá độ dài dòng tối đa, mỗi điều kiện (được nhóm) có thể được đưa vào một dòng mới. Toán tử logic nên bắt đầu dòng

    Tại sao? . Điều này cũng cải thiện khả năng đọc bằng cách giúp dễ dàng theo dõi logic phức tạp một cách trực quan.

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    1

  • Không sử dụng toán tử lựa chọn thay cho câu lệnh điều khiển

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    2

Bình luận

  • Sử dụng

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    64 cho nhận xét nhiều dòng

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    3

  • Sử dụng

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    65 cho nhận xét một dòng. Đặt nhận xét một dòng trên một dòng mới phía trên chủ đề của nhận xét. Đặt một dòng trống trước nhận xét trừ khi nó nằm trên dòng đầu tiên của khối

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    4

  • Bắt đầu tất cả các bình luận với một khoảng trắng để dễ đọc hơn. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    66

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    5

  • Tiền tố nhận xét của bạn bằng
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    67 hoặc
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    68 giúp các nhà phát triển khác nhanh chóng hiểu liệu bạn đang chỉ ra một vấn đề cần được xem xét lại hay nếu bạn đang đề xuất một giải pháp cho vấn đề cần được triển khai. Những nhận xét này khác với các nhận xét thông thường vì chúng có thể thực hiện được. Các hành động là
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    69 hoặc
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    70

  • Sử dụng

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    71 để chú thích các vấn đề

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    6

  • Sử dụng

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    72 để chú thích các giải pháp cho vấn đề

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    7

Khoảng trắng

  • Sử dụng các tab mềm (ký tự khoảng trắng) được đặt thành 2 dấu cách. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    73

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    8

  • Đặt 1 dấu cách trước dấu ngoặc nhọn. dây dẫn.

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    24

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };
    9

  • Đặt 1 dấu cách trước dấu ngoặc đơn mở trong câu lệnh điều khiển (

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    10, v.v. ). Không đặt khoảng trắng giữa danh sách đối số và tên hàm trong lời gọi hàm và khai báo. dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    77

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    00

  • Tắt các toán tử có dấu cách. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    78

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    01

  • Kết thúc tệp bằng một ký tự dòng mới. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    79

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    02

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    03

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    04

  • Sử dụng thụt đầu dòng khi tạo chuỗi phương thức dài (hơn 2 chuỗi phương thức). Sử dụng dấu chấm ở đầu, nhấn mạnh rằng dòng này là lời gọi phương thức, không phải câu lệnh mới. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    80
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    81

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    05

  • Để lại một dòng trống sau các khối và trước câu lệnh tiếp theo

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    06

  • Do not pad your blocks with blank lines. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    82

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    07

  • Không sử dụng nhiều dòng trống để đệm mã của bạn. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    83

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    08

  • Không thêm khoảng trắng bên trong dấu ngoặc đơn. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    84

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    09

  • Không thêm dấu cách vào trong ngoặc. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    85

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    10

  • Thêm khoảng trắng bên trong dấu ngoặc nhọn. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    86

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    11

  • Tránh các dòng mã dài hơn 100 ký tự (bao gồm cả khoảng trắng). Ghi chú. per , các chuỗi dài được miễn quy tắc này và không được chia nhỏ. eslint.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    14

    Tại sao?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    12

  • Yêu cầu khoảng cách nhất quán bên trong mã thông báo khối mở và mã thông báo tiếp theo trên cùng một dòng. Quy tắc này cũng thực thi khoảng cách nhất quán bên trong mã thông báo khối gần và mã thông báo trước đó trên cùng một dòng. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    88

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    13

  • Tránh khoảng trắng trước dấu phẩy và yêu cầu khoảng trắng sau dấu phẩy. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    89

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    14

  • Thực thi giãn cách bên trong dấu ngoặc thuộc tính được tính. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    90

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    15

  • Tránh khoảng cách giữa các chức năng và lời gọi của chúng. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    91

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    16

  • Thực thi khoảng cách giữa các khóa và giá trị trong các thuộc tính bằng chữ của đối tượng. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    92

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    17

  • Tránh dấu cách ở cuối dòng. dây dẫn.
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    93

  • Tránh nhiều dòng trống, chỉ cho phép một dòng mới ở cuối tệp và tránh một dòng mới ở đầu tệp. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    83

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    18

dấu phẩy

  • dấu phẩy hàng đầu. Không. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    95

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    19

  • Thêm dấu phẩy sau. Chuẩn rồi. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    96

    Tại sao? . Ngoài ra, các trình chuyển mã như Babel sẽ xóa dấu phẩy ở cuối bổ sung trong mã được chuyển mã, điều đó có nghĩa là bạn không phải lo lắng về dấu phẩy trong các trình duyệt cũ

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    20

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    21

dấu chấm phẩy

  • Chuẩn rồi. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    97

    Tại sao? . Tuy nhiên, ASI chứa một vài hành vi lập dị và mã của bạn sẽ bị hỏng nếu JavaScript hiểu sai ngắt dòng của bạn. Các quy tắc này sẽ trở nên phức tạp hơn khi các tính năng mới trở thành một phần của JavaScript. Việc chấm dứt rõ ràng các câu lệnh của bạn và định cấu hình trình nói dối của bạn để bắt các dấu chấm phẩy bị thiếu sẽ giúp bạn không gặp phải sự cố

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    22

    .

Loại đúc và ép buộc

  • Thực hiện ép kiểu ở đầu câu lệnh

  • Dây. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    98

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    23

  • số. Sử dụng

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    99 để truyền kiểu và
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    00 luôn có cơ số để phân tích chuỗi. dây dẫn.
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    01
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    98

    Tại sao? . Khoảng trắng hàng đầu trong chuỗi bị bỏ qua. Nếu cơ số là

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    53 hoặc
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    05, thì nó được giả định là
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    06 trừ khi số bắt đầu bằng cặp ký tự
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    07 hoặc
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    08, trong trường hợp đó cơ số là 16 được giả định. Điều này khác với ECMAScript 3, chỉ đơn thuần là không khuyến khích (nhưng được phép) giải thích bát phân. Nhiều triển khai đã không áp dụng hành vi này kể từ năm 2013. Và, bởi vì các trình duyệt cũ hơn phải được hỗ trợ, hãy luôn chỉ định một cơ số

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    24

  • Nếu vì bất kỳ lý do gì mà bạn đang làm điều gì đó hoang dã và

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    00 là nút cổ chai của bạn và cần sử dụng Bitshift vì lý do hiệu suất, hãy để lại nhận xét giải thích lý do và việc bạn đang làm

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    25

  • Ghi chú. Hãy cẩn thận khi sử dụng các hoạt động bitshift. Numbers are represented as , but bitshift operations always return a 32-bit integer (). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. Thảo luận. Int 32 bit có chữ ký lớn nhất là 2.147.483.647

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    26

  • Booleans. dây dẫn.

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }
    98

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    27

quy ước đặt tên

  • Tránh những tên có một chữ cái. Hãy mô tả với tên của bạn. dây dẫn.

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    11

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    28

  • Sử dụng camelCase khi đặt tên đối tượng, chức năng và phiên bản. dây dẫn.

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    12

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    29

  • Chỉ sử dụng PascalCase khi đặt tên cho hàm tạo hoặc lớp. dây dẫn.

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    13

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    30

  • Không sử dụng dấu gạch dưới hoặc dấu gạch dưới ở đầu. dây dẫn.

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    14

    Tại sao? . Mặc dù dấu gạch dưới ở đầu là một quy ước phổ biến có nghĩa là “riêng tư”, trên thực tế, các thuộc tính này hoàn toàn công khai và do đó, là một phần trong hợp đồng API công khai của bạn. Quy ước này có thể khiến các nhà phát triển nghĩ sai rằng một thay đổi sẽ không được tính là vi phạm hoặc không cần kiểm tra. tl;dr. nếu bạn muốn một cái gì đó là "riêng tư", nó không được hiện diện rõ ràng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    31

  • Không lưu tham chiếu đến

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35. Sử dụng các chức năng mũi tên hoặc Hàm # liên kết

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    32

  • Tên tệp cơ sở phải khớp chính xác với tên xuất mặc định của nó

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    33

  • Sử dụng camelCase khi bạn xuất hàm mặc định. Tên tệp của bạn phải giống với tên hàm của bạn

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    34

  • Sử dụng PascalCase khi bạn xuất hàm tạo/lớp/thư viện hàm đơn/hàm/đối tượng trần

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    35

  • Các từ viết tắt và viết tắt phải luôn luôn là chữ hoa hoặc tất cả chữ thường

    Tại sao?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    36

  • Bạn có thể tùy ý viết hoa một hằng số chỉ khi nó (1) được xuất, (2) là

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    59 (không thể gán lại nó) và (3) lập trình viên có thể tin tưởng nó (và các thuộc tính lồng nhau của nó) sẽ không bao giờ thay đổi

    Tại sao? . UPPERCASE_VARIABLES đang cho lập trình viên biết rằng họ có thể tin tưởng biến (và các thuộc tính của nó) sẽ không thay đổi

    • Thế còn tất cả các biến
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log(foo[0], bar[0]); // => 9, 9
      59 thì sao? . Tuy nhiên, nó nên được sử dụng cho các hằng số đã xuất
    • Đối với các đối tượng đã xuất thì sao? . g.
      // const and let only exist in the blocks they are defined in.
      {
        let a = 1;
        const b = 1;
        var c = 1;
      }
      console.log(a); // ReferenceError
      console.log(b); // ReferenceError
      console.log(c); // Prints 1
      18) và duy trì rằng tất cả các thuộc tính lồng nhau không thay đổi

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    37

phụ kiện

  • Hàm truy cập cho các thuộc tính không bắt buộc

  • Không sử dụng JavaScript getters/setters vì chúng gây ra tác dụng phụ không mong muốn và khó kiểm tra, bảo trì và lý do hơn. Thay vào đó, nếu bạn tạo các hàm truy cập, hãy sử dụng

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    19 và
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    20

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    38

  • Nếu thuộc tính/phương pháp là một

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    51, hãy sử dụng
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    22 hoặc
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    23

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    39

  • Bạn có thể tạo các hàm

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    24 và
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    25, nhưng phải nhất quán

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    40

Sự kiện

  • Khi đính kèm tải trọng dữ liệu vào sự kiện (dù là sự kiện DOM hay thứ gì đó độc quyền hơn như sự kiện Xương sống), hãy chuyển một đối tượng theo nghĩa đen (còn được gọi là "hàm băm") thay vì giá trị thô. Điều này cho phép người đóng góp tiếp theo thêm nhiều dữ liệu hơn vào tải trọng sự kiện mà không cần tìm và cập nhật mọi trình xử lý cho sự kiện. Ví dụ, thay vì

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    41

    thích hơn

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    42

jQuery

  • Biến đối tượng jQuery có tiền tố với một

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    26

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    43

  • Tra cứu bộ nhớ cache jQuery

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    44

  • Đối với các truy vấn DOM, hãy sử dụng Cascading
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    27 hoặc parent > child
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    28. jsPerf

  • Sử dụng

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    29 với các truy vấn đối tượng jQuery có phạm vi

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    45

Khả năng tương thích ECMAScript 5

  • Tham khảo bảng tương thích ES5 của Kangax

Kiểu ECMAScript 6+ (ES 2015+)

  • Đây là tập hợp các liên kết đến các tính năng khác nhau của ES6+

  • Không sử dụng các đề xuất TC39 chưa đạt đến giai đoạn 3

    Tại sao? . Chúng tôi muốn sử dụng JavaScript và các đề xuất chưa phải là JavaScript

Thư viện tiêu chuẩn

Thư viện tiêu chuẩn chứa các tiện ích bị hỏng chức năng nhưng vẫn tồn tại vì lý do cũ

  • Sử dụng

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    30 thay vì toàn cầu
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    31. dây dẫn.
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    32

    Tại sao? . Nếu hành vi này là mong muốn, làm cho nó rõ ràng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    46

  • Sử dụng

    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    34 thay vì toàn cầu
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    35. dây dẫn.
    // const and let only exist in the blocks they are defined in.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    32

    Tại sao? . Nếu hành vi này là mong muốn, làm cho nó rõ ràng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    47

thử nghiệm

  • Chuẩn rồi

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9
    48

  • Không, nhưng nghiêm túc
    • Cho dù bạn sử dụng khung kiểm tra nào, bạn nên viết bài kiểm tra
    • Cố gắng viết nhiều hàm thuần túy nhỏ và giảm thiểu nơi xảy ra đột biến
    • Hãy thận trọng với sơ khai và giả - chúng có thể làm cho bài kiểm tra của bạn trở nên dễ vỡ hơn
    • Chúng tôi chủ yếu sử dụng
      // const and let only exist in the blocks they are defined in.
      {
        let a = 1;
        const b = 1;
        var c = 1;
      }
      console.log(a); // ReferenceError
      console.log(b); // ReferenceError
      console.log(c); // Prints 1
      38 và
      // const and let only exist in the blocks they are defined in.
      {
        let a = 1;
        const b = 1;
        var c = 1;
      }
      console.log(a); // ReferenceError
      console.log(b); // ReferenceError
      console.log(c); // Prints 1
      39 tại Airbnb.
      // const and let only exist in the blocks they are defined in.
      {
        let a = 1;
        const b = 1;
        var c = 1;
      }
      console.log(a); // ReferenceError
      console.log(b); // ReferenceError
      console.log(c); // Prints 1
      40 đôi khi cũng được sử dụng cho các mô-đun nhỏ, riêng biệt
    • Phạm vi kiểm tra 100% là một mục tiêu tốt để phấn đấu, ngay cả khi không phải lúc nào cũng thực tế để đạt được nó
    • Whenever you fix a bug, write a regression test. Một lỗi được sửa mà không kiểm tra hồi quy gần như chắc chắn sẽ lại bị hỏng trong tương lai

Hiệu suất

  • Về Bố cục và Hiệu suất Web
  • Chuỗi so với mảng Concat
  • Thử/Nắm bắt chi phí trong một vòng lặp
  • chức năng bang
  • jQuery Tìm so với Ngữ cảnh, Bộ chọn
  • InternalHTML so với textContent cho văn bản tập lệnh
  • Nối chuỗi dài
  • Các hàm JavaScript như
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    72,
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    77 và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    74 có được tối ưu hóa để duyệt qua các mảng không?
  • Đang tải

Tài nguyên

Học ES6+

  • Thông số kỹ thuật ECMA mới nhất
  • Khám pháJS
  • Bảng tương thích ES6
  • Tổng quan toàn diện về các tính năng của ES6

Đọc này

  • Tiêu chuẩn ECMA-262

Công cụ

  • Mã phong cách Linters
    • ESlint - Phong cách Airbnb. eslintrc
    • JSHint - Phong cách Airbnb. jshintrc
  • Đặt trước Neutrino - @neutrinojs/airbnb

Hướng dẫn phong cách khác

  • Hướng dẫn kiểu Google JavaScript
  • Hướng dẫn kiểu Google JavaScript (Cũ)
  • Nguyên tắc phong cách cốt lõi của jQuery
  • Nguyên tắc viết JavaScript nhất quán, thành ngữ
  • tiêu chuẩnJS

phong cách khác

  • Đặt tên này trong các hàm lồng nhau - Christian Johansen
  • Gọi lại có điều kiện - Ross Allen
  • - Byun Jeonghoon
  • Nhiều câu lệnh var trong JavaScript, không thừa - Ben Alman

Đọc thêm

  • Hiểu về JavaScript Closures - Angus Croll
  • JavaScript cơ bản cho lập trình viên thiếu kiên nhẫn - Dr. Axel Rauschmayer
  • Bạn có thể không cần jQuery - Zack Bloom & Adam Schwartz
  • Tính năng ES6 - Luke Hoban
  • Nguyên tắc giao diện người dùng - Benjamin De Cock

Sách

  • JavaScript. Những Phần Tốt - Douglas Crockford
  • Mẫu JavaScript - Stoyan Stefanov
  • Mẫu thiết kế JavaScript chuyên nghiệp - Ross Harmes và Dustin Diaz
  • Trang web hiệu suất cao. Kiến Thức Cần Thiết Cho Kỹ Sư Front-End - Steve Souders
  • JavaScript có thể duy trì - Nicholas C. Zakas
  • Ứng dụng web JavaScript - Alex MacCaw
  • Kỹ thuật JavaScript chuyên nghiệp - John Resig
  • Smashing Node. js. JavaScript ở mọi nơi - Guillermo Rauch
  • Bí mật của Ninja JavaScript - John Resig và Bear Bibeault
  • JavaScript của con người - Henrik Joreteg
  • Siêu anh hùng. js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
  • JSBooks - Julien Bouquillon
  • JavaScript của bên thứ ba - Ben Vinegar và Anton Kovalyov
  • JavaScript hiệu quả. 68 cách cụ thể để khai thác sức mạnh của JavaScript - David Herman
  • JavaScript hùng hồn - Marijn Haverbeke
  • Bạn không biết JS. ES6 & Hơn thế nữa - Kyle Simpson

Blog

  • JavaScript hàng tuần
  • JavaScript, JavaScript
  • Blog Bocoup
  • Đủ tốt
  • NCZTrực tuyến
  • Sự hoàn hảo giết chết
  • Ben Alman
  • Dmitry Baranovsky
  • quả óc chó

Podcast

  • Không khí JavaScript
  • Jabber JavaScript

Trong thế giới hoang dã

Đây là danh sách các tổ chức đang sử dụng hướng dẫn phong cách này. Gửi cho chúng tôi yêu cầu kéo và chúng tôi sẽ thêm bạn vào danh sách

  • 123erfast. 123erfasst/javascript
  • 4bộ xúc tác. 4Catalyzer/javascript
  • Aan Zee. AanZee/javascript
  • Airbnb. airbnb/javascript
  • AloPeyk. AloPeyk
  • trường thay thế. AltSchool/javascript
  • căn hộ. căn hộ/javascript
  • Thường gán. gán/javascript
  • tiên phong. tín dụng tiên phong/javascript
  • axept. axept/javascript
  • Billabong. hóa đơn/javascript
  • Canh tôm cua. canh tôm cua
  • Bonhomme. bonhommeparis/javascript
  • cá mập. brainshark/javascript
  • CaseNine. CaseNine/javascript
  • Cerner. Cerner
  • tăng biểu đồ. ChartBoost/javascript-style-guide
  • Bộ tộc Coeur d'Alene. www. cdatribe-nsn. chính phủ
  • So sánh trực tuyến. so sánh trực tuyến/javascript
  • học la bàn. hướng dẫn sử dụng la bàn/javascript-style-guide
  • chuyển động hàng ngày. dailymotion/javascript
  • Làm việc gì đó. DoS Something/eslint-config
  • Digitpaint Digitpaint/javascript
  • drupal. www. drupal. tổ chức
  • hệ sinh thái. sinh thái/javascript
  • Evernote. evernote/javascript-style-guide
  • Trò chơi tiến hóa. tiến hóa-chơi game/javascript
  • EvozonJs. evozonjs/javascript
  • Mục tiêu chính xác. Mục tiêu chính xác/javascript
  • dâu dẻo. Flexberry/javascript-style-guide
  • truyền thông gawker. gawkermedia
  • điện tổng hợp. Điện tổng hợp/javascript
  • Tux thế hệ. Thế hệTux/javascript
  • dữ liệu tốt. gooddata/gdc-js-style
  • đầu bếp xanh. đầu bếp xanh/javascript
  • rãnh. rãnh/javascript
  • Grupo-Abraxas. Grupo-Abraxas/javascript
  • Happeo. happeo/javascript
  • Mật ong. khoa học mật ong/javascript
  • Chúng tôi thì sao. howaboutwe/javascript
  • HubSpot. HubSpot/javascript
  • siêu. hyperoslo/javascript-playbook
  • Nhóm liên thành phố. intercitygroup/javascript-style-guide
  • mứt3. Jam3/Javascript-Code-Conventions
  • JSSolutions. JSSolutions/javascript
  • Máy tính Kaplan. kaplankomputing/javascript
  • KickorStick. gậy đánh bóng
  • giải pháp động học. động học/javascript
  • LEINWAND. LEINWAND/javascript
  • Hành tinh cô đơn. hành tinh cô đơn/javascript
  • M2GEN. M2GEN/javascript
  • Mùa xuân hùng vĩ. hùng mạnh/javascript
  • TrinPost. TrinPost/javascript
  • MitocNhóm. Nhóm Mitoc/javascript
  • Muber. người chăn bò
  • Hội Địa lý Quốc gia. xã hội tự nhiên
  • NullDev. NullDevCo/JavaScript-Styleguide
  • Nuology. nulogy/javascript
  • Phát triển Đồi Cam. màu cam/javascript
  • Sức khỏe Orion. orionhealth/javascript
  • ngang hàng. Ngang hàng/javascript
  • Cầu tàu 1. Cầu tàu1/javascript
  • Qotto. Qotto/javascript-style-guide
  • Phản ứng.
  • REI. reidev/js-style-hướng dẫn
  • Gợn sóng. hướng dẫn kiểu gợn sóng/javascript
  • Siêu thị của Sainsbury. jsainsburyplc
  • con chuồn chuồn. màn trập/javascript
  • nguồn. mã nguồn/javascript
  • Mức tải trọng. mức tải trọng
  • StratoDem Analytics. tầng lớp/javascript
  • ThépPhát triểnKiwi. thépkiwi/javascript
  • Sinh viênSphere. sinh viên/javascript
  • SwoopApp. swoopapp/javascript
  • SysGarage. sysgarage/javascript-style-guide
  • Syzygy Warszawa. syzygypl/javascript
  • Mục tiêu. mục tiêu/javascript
  • thổ địa. địa ngục
  • TheLadders. TheLadder/javascript
  • Mọt sách. thenerdery/javascript-tiêu chuẩn
  • Tomify. tomprats
  • traiti. traitify/eslint-config-traitify
  • Công nghệ T4R. Công nghệ T4R/javascript
  • đô thịSim. thành thị
  • VoxFeed. VoxFeed/javascript-style-guide
  • Phòng thu WeBox. weboxstudio/javascript
  • Weggo. Weggo/javascript
  • zillow. zillow/javascript
  • ZocDoc. ZocDoc/javascript

Dịch

Hướng dẫn phong cách này cũng có sẵn bằng các ngôn ngữ khác

  • So sánh hiệu suất javascript
    tiếng Bồ Đào Nha của người brazi. armoucar/javascript-style-guide
  • So sánh hiệu suất javascript
    tiếng Bungari. borislavvv/javascript
  • So sánh hiệu suất javascript
    tiếng Catalunya. fpmweb/javascript-style-guide
  • So sánh hiệu suất javascript
    Tiếng Trung (Giản thể). lin-123/javascript
  • So sánh hiệu suất javascript
    Truyền thống Trung Hoa). ghép hình/javascript
  • So sánh hiệu suất javascript
    người Pháp. nmussy/javascript-style-guide
  • So sánh hiệu suất javascript
    tiếng Đức. timofurrer/javascript-style-guide
  • So sánh hiệu suất javascript
    người Ý. sinkswim/javascript-style-guide
  • So sánh hiệu suất javascript
    tiếng Nhật. mitsuruog/javascript-style-guide
  • So sánh hiệu suất javascript
    Hàn Quốc. ParkSB/javascript-style-guide
  • So sánh hiệu suất javascript
    tiếng Nga. leonid lebedev/javascript-airbnb
  • So sánh hiệu suất javascript
    người Tây Ban Nha. paolocarrasco/javascript-style-guide
  • So sánh hiệu suất javascript
    tiếng Thái. lvarayut/javascript-style-guide
  • So sánh hiệu suất javascript
    Thổ Nhĩ Kỳ. eraycetinay/javascript
  • So sánh hiệu suất javascript
    tiếng Ukraina. Ivanzusko/javascript
  • So sánh hiệu suất javascript
    Việt Nam. dangkyokhoang/javascript-style-guide

Hướng dẫn Hướng dẫn Phong cách JavaScript

  • Thẩm quyền giải quyết

Trò chuyện với chúng tôi về JavaScript

  • Tìm chúng tôi trên gitter

người đóng góp

  • Xem cộng tác viên

Giấy phép

(Giấy phép MIT)

Bản quyền (c) 2012 Airbnb

Theo đây, quyền được cấp miễn phí cho bất kỳ người nào có được bản sao của phần mềm này và các tệp tài liệu liên quan ('Phần mềm'), để xử lý Phần mềm mà không bị hạn chế, bao gồm nhưng không giới hạn các quyền sử dụng, sao chép, sửa đổi, hợp nhất

Thông báo bản quyền ở trên và thông báo cấp phép này sẽ được bao gồm trong tất cả các bản sao hoặc phần quan trọng của Phần mềm

PHẦN MỀM ĐƯỢC CUNG CẤP 'NGUYÊN TRẠNG', KHÔNG CÓ BẢO ĐẢM DƯỚI BẤT KỲ HÌNH THỨC NÀO, RÕ RÀNG HAY NGỤ Ý, BAO GỒM NHƯNG KHÔNG GIỚI HẠN CÁC BẢO ĐẢM VỀ KHẢ NĂNG BÁN ĐƯỢC, SỰ PHÙ HỢP CHO MỘT MỤC ĐÍCH CỤ THỂ VÀ KHÔNG VI PHẠM. TRONG BẤT KỲ TRƯỜNG HỢP NÀO TÁC GIẢ HOẶC NGƯỜI GIỮ BẢN QUYỀN SẼ KHÔNG CHỊU TRÁCH NHIỆM PHÁP LÝ VỀ BẤT KỲ KHIẾU NẠI, THIỆT HẠI HOẶC TRÁCH NHIỆM PHÁP LÝ KHÁC NÀO, DÙ TRONG MỘT HÀNH ĐỘNG HỢP ĐỒNG, NGOẠI TỆ HOẶC CÁCH NÀO KHÁC, PHÁT SINH TỪ, NGOÀI HOẶC LIÊN QUAN ĐẾN PHẦN MỀM HOẶC VIỆC SỬ DỤNG HOẶC CÁC GIAO DỊCH KHÁC TRONG

sửa đổi

Chúng tôi khuyến khích bạn rẽ nhánh hướng dẫn này và thay đổi các quy tắc để phù hợp với hướng dẫn phong cách của nhóm bạn. Dưới đây, bạn có thể liệt kê một số sửa đổi đối với hướng dẫn phong cách. Điều này cho phép bạn cập nhật định kỳ hướng dẫn phong cách của mình mà không phải xử lý xung đột hợp nhất