Chuỗi javascript không có dấu ngoặc kép

2. 1 Use

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

bar[0] = 9;

console.log[foo[0], bar[0]]; // => 9, 9
59 for all of your references; avoid using
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
61,
const foo = [1, 2];
const bar = foo;

bar[0] = 9;

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

Why? This ensures that you can’t reassign your references, which can lead to bugs and difficult to comprehend code

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

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

  • 2. 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. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    65

    Why?

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    63 is block-scoped rather than function-scoped like
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    60

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

  • 2. 3 Note that both

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    63 and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    59 are block-scoped, whereas
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    60 is function-scoped

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

    In the above code, you can see that referencing

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    71 and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    72 will produce a ReferenceError, while
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    73 contains the number. This is because
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    71 and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    72 are block scoped, while
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    73 is scoped to the containing function

⬆back to top

Objects

  • 3. 1 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

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

  • 3. 2 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

    Why? They allow you to define all the properties of an object in one place

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

  • 3. 3 Use object method shorthand. dây dẫn.

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

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

  • 3. 4 Use property value shorthand. eslint.

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

    Tại sao?

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

  • 3. 5 Group your shorthand properties at the beginning of your object declaration

    Why? It’s easier to tell which properties are using the shorthand

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

  • 3. 6 Only quote properties that are invalid identifiers. eslint.

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

    Why? In general we consider it subjectively easier to read. 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

  • 3. 7 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. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    85

    Why? These methods may be shadowed by properties on the object in question - consider

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    86 - or, the object may be a null object [
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    87]

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

  • 3. 8 Prefer the object spread syntax over

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    88 to shallow-copy objects. Use the object rest parameter syntax to get a new object with certain properties omitted. 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

⬆back to top

Arrays

  • 4. 1 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

  • 4. 2 Sử dụng Array#push thay vì gán trực tiếp để thêm các mục vào một mảng

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

  • 4. 3 Sử dụng dàn trải mảng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    91 để sao chép mảng

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

  • 4. 4 Để chuyển đổi một đối tượng có thể lặp lại thành một mảng, hãy sử dụng chênh lệch

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    91 thay vì
    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

  • 4. 5 Sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    93 để chuyển đổi một đối tượng dạng mảng thành một mảng

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

  • 4. 6 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

  • 4. 7 Use return statements in array method callbacks. Có thể bỏ qua phần trả về nếu thân hàm bao gồm một câu lệnh trả về một biểu thức mà không có tác dụng phụ, sau 8. 2. dây dẫn.

    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

  • 4. 8 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

⬆back to top

hủy diệt

  • 5. 1 Use object destructuring when accessing and using multiple properties of an object. dây dẫn.

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

    Tại sao? . 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

  • 5. 2 Sử dụng phá hủy mảng. dây dẫn.

    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

  • 5. 3 Sử dụng phá hủy đối tượng cho nhiều giá trị trả về, không phá hủy mảng

    Tại sao?

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

⬆back to top

Dây

  • 6. 1 Sử dụng dấu nháy đơn

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    00 cho chuỗi. dây dẫn.
    // 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

  • 6. 2 Các chuỗi khiến dòng vượt quá 100 ký tự không nên được viết trên nhiều dòng bằng cách nối chuỗi

    Tại sao?

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

  • 6. 3 Khi xây dựng chuỗi theo chương trình, hãy sử dụng chuỗi mẫu thay vì nối. dây dẫn.

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

    Tại sao?

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

  • 6. 4 Không bao giờ sử dụng
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    04 trên một chuỗi, nó mở ra quá nhiều lỗ hổng. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    05

  • 6. 5 Không thoát các ký tự trong chuỗi một cách không cần thiết. dây dẫn.

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

    Tại sao?

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

⬆back to top

Chức năng

  • 7. 1 Sử dụng biểu thức hàm được đặt tên thay vì khai báo hàm. dây dẫn.

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

    Tại sao? . Điều này gây hại cho khả năng đọc và bảo trì. Nếu bạn thấy rằng định nghĩa của một hàm quá lớn hoặc phức tạp đến mức cản trở việc hiểu phần còn lại của tệp, thì có lẽ đã đến lúc giải nén nó vào mô-đun của chính nó. Đừng quên đặt tên rõ ràng cho biểu thức, bất kể tên đó có được suy ra từ biến chứa hay không [điều này thường xảy ra trong các trình duyệt hiện đại hoặc khi sử dụng các trình biên dịch như Babel]. Điều này giúp loại bỏ bất kỳ giả định nào về ngăn xếp cuộc gọi của Lỗi. [Thảo luận]

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

  • 7. 2 Gói các biểu thức hàm được gọi ngay lập tức trong ngoặc đơn. dây dẫn.

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

    Tại sao? . Lưu ý rằng trong một thế giới có các mô-đun ở khắp mọi nơi, bạn hầu như không bao giờ cần IIFE

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

  • 7. 3 Không bao giờ khai báo một chức năng trong một khối không có chức năng [
    // 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.]. Thay vào đó, hãy gán chức năng cho một biến. Các trình duyệt sẽ cho phép bạn làm điều đó, nhưng tất cả chúng đều diễn giải nó theo cách khác nhau, đó là tin xấu. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    11

  • 7. 4 Lưu ý. ECMA-262 định nghĩa một

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    12 là một danh sách các câu lệnh. Một khai báo hàm không phải là một câu lệnh

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

  • 7. 5 Không bao giờ đặt tên cho tham số

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13. Điều này sẽ được ưu tiên hơn đối tượng
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13 được cung cấp cho mọi phạm vi chức năng

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

  • 7. 6 Không bao giờ sử dụng

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    13, thay vào đó hãy chọn sử dụng cú pháp nghỉ ngơi
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    91. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    17

    Tại sao? . Ngoài ra, các đối số còn lại là một Mảng thực và không chỉ giống Mảng như

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

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

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

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

  • 7. 8 Tránh tác dụng phụ với thông số mặc định

    Tại sao?

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

  • 7. 9 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

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

  • 7. 10 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?

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

  • 7. 11 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?

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

  • 7. 12 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

    Tại sao?

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

  • 7. 13 Không bao giờ chỉ định lại các tham số. dây dẫn.

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

    Tại sao? . Nó cũng có thể gây ra các vấn đề tối ưu hóa, đặc biệt là trong V8

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

  • 7. 14 Ưu tiên sử dụng cú pháp trải rộng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    91 để gọi các hàm biến thiên. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    29

    Tại sao?

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

  • 7. 15 Các hàm có chữ ký nhiều dòng hoặc lời gọi phải được thụt lề giống như mọi danh sách nhiều dòng khác trong hướng dẫn này. với mỗi mục trên một dòng, với dấu phẩy ở cuối mục cuối cùng. dây dẫn.

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

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

⬆back to top

Hàm mũi tên

  • 8. 1 Khi bạn phải sử dụng một chức năng ẩn danh [như khi chuyển một lệnh gọi lại nội tuyến], hãy sử dụng ký hiệu chức năng mũi tên. dây dẫn.

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

    Tại sao?

    Tại sao không?

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

  • 8. 2 Nếu thân hàm bao gồm một câu lệnh đơn lẻ trả về một biểu thức không có tác dụng phụ, hãy bỏ qua dấu ngoặc nhọn và sử dụng hàm trả về ngầm định. Nếu không, hãy giữ dấu ngoặc nhọn và sử dụng câu lệnh

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36. dây dẫn.
    // 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

    Tại sao? . Nó đọc tốt khi nhiều chức năng được xâu chuỗi lại với nhau

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

  • 8. 3 Trong trường hợp biểu thức kéo dài trên nhiều dòng, hãy đặt nó trong dấu ngoặc đơn để dễ đọc hơn

    Tại sao?

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

  • 8. 4 Luôn bao gồm các dấu ngoặc đơn xung quanh các đối số để rõ ràng và nhất quán. dây dẫn.

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

    Tại sao?

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

  • 8. 5 Tránh nhầm lẫn cú pháp hàm mũi tên [

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    40] với các toán tử so sánh [
    // 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]. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    43

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

  • 8. 6 Thực thi vị trí của các thân hàm mũi tên với trả về ngầm định. dây dẫn.

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

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

⬆back to top

Lớp & Constructor

  • 9. 1 Luôn sử dụng

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    45. Tránh thao tác trực tiếp với
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    46

    Tại sao?

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

  • 9. 2 Sử dụng

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    48 để thừa kế

    Tại sao?

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

  • 9. 3 Phương thức có thể trả về

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35 để giúp xâu chuỗi phương thức

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

  • 9. 4 Bạn có thể viết một phương thức

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    51 tùy chỉnh, chỉ cần đảm bảo rằng nó hoạt động thành công và không gây tác dụng phụ

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

  • 9. 5 Các lớp có hàm tạo mặc định nếu không được chỉ định. Hàm tạo trống hoặc hàm chỉ ủy quyền cho lớp cha là không cần thiết. dây dẫn.

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

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

  • 9. 6 Tránh các thành viên lớp trùng lặp. dây dẫn.

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

    Tại sao?

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

  • 9. 7 Các phương thức lớp nên sử dụng

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35 hoặc được tạo thành một phương thức tĩnh trừ khi thư viện hoặc khung bên ngoài yêu cầu sử dụng các phương thức không tĩnh cụ thể. Là một phương thức thể hiện nên chỉ ra rằng nó hoạt động khác nhau dựa trên các thuộc tính của người nhận. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    55

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

⬆back to top

mô-đun

  • 10. 1 Luôn sử dụng mô-đun [

    // 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] trên hệ thống mô-đun không chuẩn. Bạn luôn có thể dịch mã sang hệ thống mô-đun ưa thích của mình

    Tại sao?

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

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

    Tại sao?

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

  • 10. 3 Và không xuất trực tiếp từ một lần nhập

    Tại sao?

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

  • 10. 4 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?

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

  • 10. 5 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

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

  • 10. 6 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?

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

  • 10. 7 Đặ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?

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

  • 10. 8 Nhập nhiều dòng phải được thụt lề 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?

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

  • 10. 9 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

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

  • 10. 10 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

    Tại sao?

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

⬆back to top

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

  • 11. 1 Không sử dụng vòng lặp. 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

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

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

    Tại sao?

  • 11. 3 Nếu bạn phải sử dụng trình tạo hoặc nếu bạn bỏ qua lời khuyên của chúng tôi, 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

    Tại sao?

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

⬆back to top

Đặc tính

  • 12. 1 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

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

  • 12. 2 Sử dụng ký hiệu ngoặc _______490 khi truy cập các thuộc tính có biến

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

  • 12. 3 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 lũy thừa. dây dẫn.
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    92

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

⬆back to top

Biến

  • 13. 1 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

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

  • 13. 2 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

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

  • 13. 3 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?

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

  • 13. 4 Gán các biến ở nơi bạn cần, nhưng đặt chúng ở nơi hợp lý

    Tại sao?

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

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

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

    Tại sao?

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

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

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    007,
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    008]. eslint
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    009

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

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    010 thay vì
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    011 hoặc
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    012 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

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

  • 13. 7 Tránh ngắt dòng trước hoặc sau

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    013 trong bài tập. Nếu bài tập của bạn vi phạm
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    014, hãy bao quanh giá trị trong dấu ngoặc. eslint
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    015

    Tại sao?

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

  • 13. 8 Không cho phép các biến không sử dụng. dây dẫn.

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

    Tại sao? . 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

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

⬆back to top

cẩu

  • 14. 1 khai báo

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    60 được nâng lên đầu phạm vi chức năng kèm theo gần nhất của chúng, nhiệm vụ của chúng không. Khai báo
    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à Vùng chết tạm thời [TDZ]. Điều quan trọng là phải biết tại sao typeof không còn an toàn

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

  • 14. 2 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

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

  • 14. 3 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 foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    70

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

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

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

⬆back to top

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

  • 15. 1 Sử dụng
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    021 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    022 thay vì
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    023 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    024. dây dẫn.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    025

  • 15. 2 Các câu lệnh có đ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 ép buộc với phương pháp trừu tượng
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    027 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
    • Không xác định đánh giá sai
    • 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 foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    72

  • 15. 3 Sử dụng phím tắt cho phép toán luận, nhưng so sánh rõ ràng cho chuỗi và số

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

  • 15. 4 Để biết thêm thông tin, hãy xem Chân lý bình đẳng và JavaScript của Angus Croll

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

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    029 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    030 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.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    035

    Tại sao? . Điều này gây ra vấn đề khi nhiều mệnh đề

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    029 cố định nghĩa cùng một thứ

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

  • 15. 6 Các bộ ba không được lồng vào nhau và thường là các biểu thức một dòng. dây dẫn.

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

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

  • 15. 7 Tránh những câu nói ngắn gọn không cần thiết. dây dẫn.

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

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

  • 15. 8 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.

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    041,
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    042 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
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    044 và
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    84 trong ngoặc đơn vì mức độ ư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.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    046

    Tại sao?

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

⬆back to top

khối

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

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

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

  • 16. 2 Nếu bạn đang sử dụng các khối nhiều dòng với

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 và
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    049, hãy đặt
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    049 trên cùng một dòng với dấu ngoặc nhọn đóng của khối
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 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
    052

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

  • 16. 3 Nếu một khối

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    09 luôn thực thi một câu lệnh
    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    36, thì khối
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    049 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
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    057 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.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    061

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

⬆back to top

Tuyên bố kiểm soát

  • 17. 1 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 foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    81

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

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

⬆back to top

Bình luận

  • 18. 1 Sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    064 cho nhận xét nhiều dòng

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

  • 18. 2 Sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    065 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 foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    84

  • 18. 3 Bắt đầu tất cả các nhận xét bằng khoảng trắng để dễ đọc hơn. dây dẫn.

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

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

  • 18. 4 Đặt trước nhận xét của bạn bằng
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    067 hoặc
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    068 giúp các nhà phát triển khác nhanh chóng hiểu được 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. These are different than regular comments because they are actionable. The actions are
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    069 or
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    070

  • 18. 5 Sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    071 để chú thích các vấn đề

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

  • 18. 6 Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    072 to annotate solutions to problems

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

⬆back to top

Whitespace

  • 19. 1 Sử dụng tab mềm [ký tự dấu cách] được đặt thành 2 dấu cách. eslint.

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

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

  • 19. 2 Place 1 space before the leading brace. eslint.

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

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

  • 19. 3 Place 1 space before the opening parenthesis in control statements [

    // 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. ]. Place no space between the argument list and the function name in function calls and declarations. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    077

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

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

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

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

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

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

    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

  • 19. 6 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]. Use a leading dot, which emphasizes that the line is a method call, not a new statement. dây dẫn.

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

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

  • 19. 7 Để trống một dò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

  • 19. 8 Đừng đệm các khối của bạn bằng các dòng trống. eslint.

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

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

  • 19. 9 Do not use multiple blank lines to pad your code. eslint.

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

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

  • 19. 10 Do not add spaces inside parentheses. eslint.

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

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

  • 19. 11 Do not add spaces inside brackets. eslint.

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

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

  • 19. 12 Add spaces inside curly braces. dây dẫn.

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

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

  • 19. 13 Avoid having lines of code that are longer than 100 characters [including whitespace]. Note. per above, long strings are exempt from this rule, and should not be broken up. eslint.

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

    Why? This ensures readability and maintainability

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

  • 19. 14 Require consistent spacing inside an open block token and the next token on the same line. This rule also enforces consistent spacing inside a close block token and previous token on the same line. eslint.

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

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

  • 19. 15 Avoid spaces before commas and require a space after commas. eslint.

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

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

  • 19. 16 Enforce spacing inside of computed property brackets. eslint.

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

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

  • 19. 17 Avoid spaces between functions and their invocations. eslint.

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

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

  • 19. 18 Enforce spacing between keys and values in object literal properties. eslint.

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

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

  • 19. 19 Avoid trailing spaces at the end of lines. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    093

  • 19. 20 Avoid multiple empty lines, only allow one newline at the end of files, and avoid a newline at the beginning of files. eslint.

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

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

⬆back to top

dấu phẩy

  • 20. 1 Leading commas. Nope. eslint.

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

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

  • 20. 2 Additional trailing comma. Yup. eslint.

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

    Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers

    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

⬆back to top

Semicolons

  • 21. 1 Yup. eslint.

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

    Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether it should regard that line break as the end of a statement, and [as the name implies] place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues

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

    Read more

⬆back to top

Type Casting & Coercion

  • 22. 1 Perform type coercion at the beginning of the statement

  • 22. 2 Strings. eslint.

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

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

  • 22. 3 Numbers. Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    099 for type casting and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    400 always with a radix for parsing strings. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    401
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    098

    Why? The

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    400 function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading whitespace in string is ignored. If radix is
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    53 or
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    405, it is assumed to be
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    406 except when the number begins with the character pairs
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    407 or
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    408, in which case a radix of 16 is assumed. This differs from ECMAScript 3, which merely discouraged [but allowed] octal interpretation. Many implementations have not adopted this behavior as of 2013. And, because older browsers must be supported, always specify a radix

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

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

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    400 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

  • 22. 5 Note. Be careful when using bitshift operations. Numbers are represented as 64-bit values, but bitshift operations always return a 32-bit integer [source]. Bitshift can lead to unexpected behavior for integer values larger than 32 bits. Discussion. Largest signed 32-bit Int is 2,147,483,647

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

  • 22. 6 Boolean. dây dẫn.

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

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

⬆back to top

Naming Conventions

  • 23. 1 Avoid single letter names. Hãy mô tả với tên 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
    411

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

  • 23. 2 Use camelCase when naming objects, functions, and instances. eslint.

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

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

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

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

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

  • 23. 4 Do not use trailing or leading underscores. eslint.

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

    Why? JavaScript does not have the concept of privacy in terms of properties or methods. 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. This convention might lead developers to wrongly think that a change won’t count as breaking, or that tests aren’t needed. 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

  • 23. 5 Don’t save references to

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;
    35. Use arrow functions or Function#bind

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

  • 23. 6 A base filename should exactly match the name of its default export

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

  • 23. 7 Use camelCase when you export-default a function. Your filename should be identical to your function’s name

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

  • 23. 8 Use PascalCase when you export a constructor / class / singleton / function library / bare object

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

  • 23. 9 Acronyms and initialisms should always be all uppercased, or all lowercased

    Why? Names are for readability, not to appease a computer algorithm

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

  • 23. 10 You may optionally uppercase a constant only if it [1] is exported, [2] is a

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    59 [it can not be reassigned], and [3] the programmer can trust it [and its nested properties] to never change

    Why? This is an additional tool to assist in situations where the programmer would be unsure if a variable might ever change. UPPERCASE_VARIABLES are letting the programmer know that they can trust the variable [and its properties] not to change

    • What about all
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log[foo[0], bar[0]]; // => 9, 9
      59 variables? - This is unnecessary, so uppercasing should not be used for constants within a file. It should be used for exported constants however
    • What about exported objects? - Uppercase at the top level of export [e. g.
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log[foo[0], bar[0]]; // => 9, 9
      418] and maintain that all nested properties do not change

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

⬆back to top

Accessors

  • 24. 1 Accessor functions for properties are not required

  • 24. 2 Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    419 and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    420

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

  • 24. 3 If the property/method is a

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    51, use
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    422 or
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    423

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

  • 24. 4 It’s okay to create

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    424 and
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    425 functions, but be consistent

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

⬆back to top

Events

  • 25. 1 When attaching data payloads to events [whether DOM events or something more proprietary like Backbone events], pass an object literal [also known as a "hash"] instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of

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

    prefer

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

⬆back to top

jQuery

  • 26. 1 Prefix jQuery object variables with a

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

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

  • 26. 2 Cache jQuery lookups

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

  • 26. 3 For DOM queries use Cascading
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    427 or parent > child
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    428. jsPerf

  • 26. 4 Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    429 with scoped jQuery object queries

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

⬆back to top

ECMAScript 5 Compatibility

  • 27. 1 Refer to Kangax’s ES5 compatibility table

⬆back to top

ECMAScript 6+ [ES 2015+] Styles

  • 28. 1 This is a collection of links to the various ES6+ features
  1. Hàm mũi tên
  2. Classes
  3. Object Shorthand
  4. Object Concise
  5. Object Computed Properties
  6. Template Strings
  7. hủy diệt
  8. Default Parameters
  9. Rest
  10. Array Spreads
  11. Let and Const
  12. Exponentiation Operator
  13. Trình vòng lặp và Trình tạo
  14. mô-đun

  • 28. 2 Do not use TC39 proposals that have not reached stage 3

    Why? They are not finalized, and they are subject to change or to be withdrawn entirely. We want to use JavaScript, and proposals are not JavaScript yet

⬆back to top

Standard Library

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ũ

  • 29. 1 Use

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    430 instead of global
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    431. eslint.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    432

    Tại sao? . If this behavior is desired, make it explicit

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

  • 29. 2 Sử dụng

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    434 thay vì toàn cầu
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    435. dây dẫn.
    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    432

    Why? The global

    const foo = [1, 2];
    const bar = foo;
    
    bar[0] = 9;
    
    console.log[foo[0], bar[0]]; // => 9, 9
    435 coerces non-numbers to numbers, returning true for anything that coerces to a finite number. If this behavior is desired, make it explicit

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

⬆back to top

Testing

  • 30. 1 Yup

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

  • 30. 2 No, but seriously
    • Whichever testing framework you use, you should be writing tests
    • 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
    • Be cautious about stubs and mocks - they can make your tests more brittle
    • We primarily use
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log[foo[0], bar[0]]; // => 9, 9
      438 and
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log[foo[0], bar[0]]; // => 9, 9
      439 at Airbnb.
      const foo = [1, 2];
      const bar = foo;
      
      bar[0] = 9;
      
      console.log[foo[0], bar[0]]; // => 9, 9
      440 is also used occasionally for small, separate modules
    • 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. A bug fixed without a regression test is almost certainly going to break again in the future

⬆back to top

Performance

  • 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
  • Bang Function
  • jQuery Find vs Context, Selector
  • InternalHTML so với textContent cho văn bản tập lệnh
  • Long String Concatenation
  • 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

⬆back to top

Tài nguyên

Học ES6+

  • Latest ECMA spec
  • Khám pháJS
  • ES6 Compatibility Table
  • Tổng quan toàn diện về các tính năng của ES6

Read This

  • Standard ECMA-262

Công cụ

  • Code Style Linters
    • ESlint - Airbnb Style . eslintrc
    • JSHint - Airbnb Style . jshintrc
  • Neutrino Preset - @neutrinojs/airbnb

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

  • Hướng dẫn kiểu Google JavaScript
  • Google JavaScript Style Guide [Old]
  • jQuery Core Style Guidelines
  • Principles of Writing Consistent, Idiomatic JavaScript
  • StandardJS

Other Styles

  • Naming this in nested functions - Christian Johansen
  • Conditional Callbacks - Ross Allen
  • Popular JavaScript Coding Conventions on GitHub - JeongHoon Byun
  • Multiple var statements in JavaScript, not superfluous - Ben Alman

Further Reading

  • Understanding JavaScript Closures - Angus Croll
  • Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
  • You Might Not Need jQuery - Zack Bloom & Adam Schwartz
  • ES6 Features - Luke Hoban
  • Frontend Guidelines - Benjamin De Cock

Books

  • JavaScript. The Good Parts - Douglas Crockford
  • JavaScript Patterns - Stoyan Stefanov
  • Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
  • High Performance Web Sites. Essential Knowledge for Front-End Engineers - Steve Souders
  • Maintainable JavaScript - Nicholas C. Zakas
  • JavaScript Web Applications - Alex MacCaw
  • Pro JavaScript Techniques - John Resig
  • Smashing Node. js. JavaScript Everywhere - Guillermo Rauch
  • Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
  • Human JavaScript - Henrik Joreteg
  • Superhero. js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
  • JSBooks - Julien Bouquillon
  • Third Party JavaScript - Ben Vinegar and Anton Kovalyov
  • Effective JavaScript. 68 Specific Ways to Harness the Power of JavaScript - David Herman
  • Eloquent JavaScript - Marijn Haverbeke
  • You Don’t Know JS. ES6 & Beyond - Kyle Simpson

Blogs

  • JavaScript Weekly
  • JavaScript, JavaScript
  • Bocoup Weblog
  • Adequately Good
  • NCZOnline
  • Sự hoàn hảo giết chết
  • Ben Alman
  • Dmitry Baranovskiy
  • nettuts

Podcasts

  • JavaScript Air
  • JavaScript Jabber

⬆back to top

In the Wild

This is a list of organizations that are using this style guide. Send us a pull request and we'll add you to the list

  • 123erfasst. 123erfasst/javascript
  • 4Catalyzer. 4Catalyzer/javascript
  • Aan Zee. AanZee/javascript
  • Airbnb. airbnb/javascript
  • AloPeyk. AloPeyk
  • AltSchool. AltSchool/javascript
  • Apartmint. apartmint/javascript
  • Ascribe. ascribe/javascript
  • Avant. avantcredit/javascript
  • Axept. axept/javascript
  • Billabong. billabong/javascript
  • Bisk. bisk
  • Bonhomme. bonhommeparis/javascript
  • Brainshark. brainshark/javascript
  • CaseNine. CaseNine/javascript
  • Cerner. Cerner
  • Chartboost. ChartBoost/javascript-style-guide
  • Coeur d'Alene Tribe. www. cdatribe-nsn. gov
  • ComparaOnline. comparaonline/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
  • DoSomething. DoSomething/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. phản ứng. org/docs/cách đóng góp. html#style-guide
  • 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
  • Shutterfly. shutterfly/javascript
  • Sourcetoad. sourcetoad/javascript
  • Springload. springload
  • StratoDem Analytics. stratodem/javascript
  • SteelKiwi Development. steelkiwi/javascript
  • StudentSphere. sinh viên/javascript
  • SwoopApp. swoopapp/javascript
  • SysGarage. sysgarage/javascript-style-guide
  • Syzygy Warszawa. syzygypl/javascript
  • Mục tiêu. target/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

⬆back to top

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

  • tiếng Bồ Đào Nha của người brazi. armoucar/javascript-style-guide
  • tiếng Bungari. borislavvv/javascript
  • tiếng Catalunya. fpmweb/javascript-style-guide
  • Tiếng Trung [Giản thể]. lin-123/javascript
  • Truyền thống Trung Hoa]. ghép hình/javascript
  • người Pháp. nmussy/javascript-style-guide
  • tiếng Đức. timofurrer/javascript-style-guide
  • người Ý. sinkswim/javascript-style-guide
  • Japanese. mitsuruog/javascript-style-guide
  • Korean. ParkSB/javascript-style-guide
  • Russian. leonidlebedev/javascript-airbnb
  • Spanish. paolocarrasco/javascript-style-guide
  • Thai. lvarayut/javascript-style-guide
  • Thổ Nhĩ Kỳ. eraycetinay/javascript
  • tiếng Ukraina. Ivanzusko/javascript
  • Việt Nam. dangkyokhoang/javascript-style-guide

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

  • Tài liệu tham khảo

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

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

Contributors

  • View Contributors

License

[The MIT License]

Copyright [c] 2012 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files [the 'Software'], to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE

⬆back to top

Amendments

We encourage you to fork this guide and change the rules to fit your team’s style guide. 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. This allows you to periodically update your style guide without having to deal with merge conflicts

Chủ Đề