Thao tác với đối tượng trong javascript

Sử dụng const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 959 cho tất cả các tài liệu tham khảo của bạn; . eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 961, const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 962

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;

• If you must reassign references, use const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 instead of const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 960. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 965

  Why? const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 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, 960

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

• Note that both const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 and const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 959 are block-scoped, whereas const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 960 is function-scoped

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

  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, 971 and const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 972 will produce a ReferenceError, while const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 973 contains the number. This is because const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 971 and const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 972 are block scoped, while const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 973 is scoped to the containing function

Objects

• Sử dụng cú pháp theo nghĩa đen để tạo đối tượng. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 977

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

• Use computed property names when creating objects with dynamic property names

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

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

• Use object method shorthand. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 978

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

• Use property value shorthand. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 978

  Why? It is shorter and descriptive

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

• Group your shorthand properties at the beginning of your object declaration

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

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

• 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, 980

  Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines

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

• Do not call const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 981 methods directly, such as const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 982, const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 983, and const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 984. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 985

  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, 986 - 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, 987)

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

• Prefer the object spread syntax over const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 988 to shallow-copy objects. Use the object rest parameter syntax to get a new object with certain properties omitted. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 989

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

Arrays

• Use the literal syntax for array creation. eslint. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 990

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

• 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, 94

• Use array spreads const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 991 to copy arrays

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

• 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, 991 instead of const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 993

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

• Sử dụng const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 993 để 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, 97

• Sử dụng const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 993 thay vì trải rộng const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 991 để ánh xạ qua các lần lặp, vì nó tránh tạo mảng trung gian

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

• Sử dụng các câu lệnh trả về trong các cuộc gọi lại phương thức mảng. 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ụ, như sau. dây dẫn. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 997

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

• Sử dụng ngắt dòng sau khi mở và trước khi đóng dấu ngoặc mảng nếu một mảng có nhiều dòng

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

hủy hoại

• Sử dụng phá hủy đối tượng khi truy cập và sử dụng nhiều thuộc tính của một đối tượng. dây dẫn. const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 998

  Tại sao? . Việc lặp lại quyền truy cập đối tượng tạo ra nhiều mã lặp lại hơn, yêu cầu đọc nhiều hơn và tạo ra nhiều cơ hội mắc lỗi hơn. 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, 998

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

Chức năng

• Sử dụng các 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

• 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

• 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 (_______4_______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

• Ghi chú. 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

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

• Không bao giờ đặt tên cho một tham số // 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

• 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, 991. 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 sự chứ không chỉ giống Mảng như // 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

  Tại sao?

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

• Không bao giờ chỉ định lại các thông 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

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

• Ư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, 991 để 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 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 10

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

Hàm mũi tên

• Khi bạn phải sử dụng một chức năng ẩn danh (như khi chuyển một cuộc 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 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 12

• Nếu thân hàm bao gồm một câu lệnh trả về một mà 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 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 13

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

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

• 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 16

• 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 17

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 18

• 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 19

• 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

  Why? Modules are the future, let’s start using the future now

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

• Do not use wildcard imports

  Why? This makes sure you have a single default export

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

• And do not export directly from an import

  Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent

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

• Only import from a path in one place. eslint. // bad var a = 1; var b = 2; // good const a = 1; const b = 2;58

  Why? Having multiple lines that import from the same path can make code harder to maintain

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

• Do not export mutable bindings. eslint. // bad var a = 1; var b = 2; // good const a = 1; const b = 2;59

  Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported

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

• In modules with a single export, prefer default export over named export. eslint. // bad var a = 1; var b = 2; // good const a = 1; const b = 2;60

  Why? To encourage more files that only ever export one thing, which is better for readability and maintainability

  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

• Put all // bad var a = 1; var b = 2; // good const a = 1; const b = 2;56s above non-import statements. eslint. // bad var a = 1; var b = 2; // good const a = 1; const b = 2;62

  Why? Since // bad var a = 1; var b = 2; // good const a = 1; const b = 2;56s are hoisted, keeping them all at the top prevents surprising behavior

  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

• Multiline imports should be indented just like multiline array and object literals. eslint. // bad var a = 1; var b = 2; // good const a = 1; const b = 2;64

  Why? The curly braces follow the same indentation rules as every other curly brace block in the style guide, as do the trailing commas

  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

• Disallow Webpack loader syntax in module import statements. 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

  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, };4

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

• 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

  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

  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, };6

Của cải

• 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, 959 hoặc const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 để 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, 961

  // 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, 959 hoặc const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 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, 959 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, 963 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

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

  // 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). eslint // 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

• Tránh ngắt dòng trước hoặc sau // bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; }13 trong bài tập. 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

  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; }, };6

• Không cho phép các biến không sử 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; }17

  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

  // 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, 960 khai báo đượ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. Các khai báo của const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 959 và const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 963 đượ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 chẳng hạ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
  • 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 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, 963, const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 959, const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 958, 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? . Điều này gây ra vấn đề khi nhiều mệnh đề // bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; }29 cố gắng định nghĩa cùng một thứ

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