Sử dụng const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 cho tất cả các tài liệu tham khảo của bạn; . eslint. 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 62Why? 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, 9 63 instead of 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 65Why? 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
// 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, 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 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, 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
ObjectsSử 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, 9 77// 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, 9 78// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
Use property value shorthand. eslint. const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 78Why? 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, 9 80Why? 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, 9 0
Do not call const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 81 methods directly, such as 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, and 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 85Why? 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
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. eslint. const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 89const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 2
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, 9 90const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 3
Use Array#push instead of direct assignment to add items to an array const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 4
Use array spreads const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 91 to copy arraysconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 5
To convert an iterable object to an array, use spreads const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 91 instead of const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 93const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 6
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ảngconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 7
Sử dụng const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 93 thay vì trải rộng const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 91 để ánh xạ qua các lần lặp, vì nó tránh tạo mảng trung gianconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 8
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, 9 97const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 9
hủy hoạiSử 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, 9 98Tạ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, 9 98// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 2
Use object destructuring for multiple return values, not array destructuring Why? You can add new properties over time or change the order of things without breaking call sites
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 3
Strings Use single quotes // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 00 for strings. eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 01// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 4
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; 03Why? 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
Do not unnecessarily escape characters in strings. eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 06Tại sao?
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 7
Chức năngSử 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; 07Tạ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; 08Tạ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
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, 9 91. dây dẫn. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 17Tạ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; 21Tạ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; 24Tạ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; 25Tạ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; 25Tạ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, 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; 29Tạ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 1 0
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 1 1
Hàm mũi tênKhi 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; 34Tạ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 1 2
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; 38Tạ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 1 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 and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 4
Always include parentheses around arguments for clarity and consistency. eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 37Why? Minimizes diff churn when adding or removing arguments
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 5
Avoid confusing arrow function syntax ( // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 40) with comparison operators (// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 41, // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 42). eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 43// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 6
Enforce the location of arrow function bodies with implicit returns. eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 44// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 7
Classes & Constructors Always use // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 45. Avoid manipulating // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 46 directlyWhy? // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 45 syntax is more concise and easier to reason about
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 8
Use // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 48 for inheritanceWhy? It is a built-in way to inherit prototype functionality without breaking // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 49
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 9
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; 53Why? 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 systemWhy? Modules are the future, let’s start using the future now
// bad
const item = new Object();
// good
const item = {}; 5
Only import from a path in one place. eslint. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 58Why? 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; 59Why? 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; 60Why? 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; 62Why? 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; 64Why? 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; 65Tạ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; 67Tạ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ạoKhô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; 71Tạ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
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; 82Tạ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ảiSử 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; 89function 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ếnfunction 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; 92function 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ếnLuôn sử dụng const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 hoặc const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 63 để khai báo biến. Không làm như vậy sẽ dẫn đến các biến toàn cầu. Chúng tôi muốn tránh làm ô nhiễm không gian tên toàn cầu. Captain Planet đã cảnh báo chúng tôi về điều đó. dây dẫn. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 95 const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 61// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
}; 0
Sử dụng một khai báo const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 hoặc const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 63 cho mỗi biến hoặc phép gán. dây dẫn. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 99Tại sao? . Bạn cũng có thể duyệt qua từng khai báo bằng trình gỡ lỗi, thay vì xem qua tất cả chúng cùng một lúc
// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
}; 1
Nhóm tất cả các const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 của bạn và sau đó nhóm tất cả các const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 63 của bạnTạ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;
} 06Tạ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;
} 09Tạ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;
} 15Tạ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;
} 17Tạ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ẩuconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 60 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, 9 59 và const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 63 được ban phước với một khái niệm mới gọi là. Điều quan trọng là phải biết tại sao typeof không còn an toàn// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
}; 8
Các biểu thức hàm ẩn danh nâng tên biến của chúng, nhưng không gán chức năng // bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
}; 9
Các biểu thức hàm được đặt tên kéo theo tên biến, không phải tên hàm hoặc thân hàm const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 0
Khai báo hàm nâng tên của chúng và thân hàm const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 1Để biết thêm thông tin, hãy tham khảo JavaScript Scoping & Hoisting của Ben Cherry
Toán tử so sánh & Bình đẳng- Sử dụng
// bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 21 và // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 22 thay vì // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 23 và // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 24. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 25
Các câu điều kiện 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àyconst lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 2
Sử dụng phím tắt cho booleans, nhưng so sánh rõ ràng cho chuỗi và số const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 3
- Để biết thêm thông tin, xem bởi Angus Croll
Sử dụng dấu ngoặc nhọn để tạo các khối trong mệnh đề // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 29 và // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 30 có chứa khai báo từ vựng (e. g. const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 63, const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59, const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 58, và // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 45). dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 35Tạ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
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. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 39const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 5
Tránh báo cáo ternary không cần thiết. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 40const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 6
Khi trộn các toán tử, hãy đặt chúng trong ngoặc đơn. The only exception is the standard arithmetic operators. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 41, // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 42 và // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 91 vì quyền ưu tiên của chúng được hiểu rộng rãi. Chúng tôi khuyên bạn nên đặt // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 44 và // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 84 trong ngoặc đơn vì thứ tự ưu tiên của chúng có thể không rõ ràng khi chúng được trộn lẫn. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 46Tại sao?
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 7
khốiSử 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. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 47const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 8
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à // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 49, hãy đặt // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 49 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. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 52const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
}; 9
Nếu khối // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 09 luôn thực thi câu lệnh // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 36, thì khối // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 49 tiếp theo là không cần thiết. Một // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 36 trong một khối // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 57 theo sau một khối // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 09 có chứa một // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 36 có thể được tách thành nhiều khối // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 09. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 61const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 0
Tuyên bố kiểm soátTrong 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òngTại sao? . Điều này cũng cải thiện khả năng đọc bằng cách giúp dễ dàng theo dõi logic phức tạp một cách trực quan.
const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 1
Không sử dụng toán tử lựa chọn thay cho câu lệnh điều khiển const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 2
Bình luậnSử dụng // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 64 cho nhận xét nhiều dòngconst anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 3
Sử dụng // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 65 cho nhận xét một dòng. Đặt nhận xét một dòng trên một dòng mới phía trên chủ đề của nhận xét. Đặt một dòng trống trước nhận xét trừ khi nó nằm trên dòng đầu tiên của khốiconst anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 4
Bắt đầu tất cả các bình luận với một khoảng trắng để dễ đọc hơn. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 66const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 5
- Tiền tố nhận xét của bạn bằng
// bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 67 hoặc // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 68 giúp các nhà phát triển khác nhanh chóng hiểu liệu bạn đang chỉ ra một vấn đề cần xem xét lại hay nếu bạn đang đề xuất một giải pháp cho vấn đề cần được triển khai. Những nhận xét này khác với các nhận xét thông thường vì chúng có thể thực hiện được. Các hành động là // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 69 hoặc // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 70
Sử dụng // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 71 để chú thích các vấn đềconst anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 6
Sử dụng // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 72 để chú thích các giải pháp cho vấn đềconst anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 7
Khoảng trắngSử dụng các tab mềm (ký tự khoảng trắng) được đặt thành 2 dấu cách. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 73const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 8
Đặt 1 dấu cách trước dấu ngoặc nhọn. dây dẫn. // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 24const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
}; 9
Đặt 1 dấu cách trước dấu ngoặc đơn mở trong câu lệnh điều khiển ( // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 09, // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 10, v.v. ). Không đặt khoảng trắng giữa danh sách đối số và tên hàm trong lời gọi hàm và khai báo. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 77const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 00
Tắt các toán tử có dấu cách. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 78const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 01
Kết thúc tệp bằng một ký tự dòng mới. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 79const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 02const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 03const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 04
Sử dụng thụt đầu dòng khi tạo chuỗi phương thức dài (hơn 2 chuỗi phương thức). Sử dụng dấu chấm ở đầu, nhấn mạnh rằng dòng này là lời gọi phương thức, không phải câu lệnh mới. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 80 // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 81const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 05
Để lại một dòng trống sau các khối và trước câu lệnh tiếp theo const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 06
Không đệm các khối của bạn bằng các dòng trống. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 82const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 07
Không sử dụng nhiều dòng trống để đệm mã của bạn. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 83const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 08
Không thêm khoảng trắng bên trong dấu ngoặc đơn. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 84const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 09
Không thêm dấu cách vào trong ngoặc. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 85const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 10
Thêm khoảng trắng bên trong dấu ngoặc nhọn. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 86const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 11
Tránh các dòng mã dài hơn 100 ký tự (bao gồm cả khoảng trắng). Ghi chú. per , các chuỗi dài được miễn quy tắc này và không được chia nhỏ. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 14Tại sao?
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 12
Yêu cầu khoảng cách nhất quán bên trong mã thông báo khối mở và mã thông báo tiếp theo trên cùng một dòng. Quy tắc này cũng thực thi khoảng cách nhất quán bên trong mã thông báo khối gần và mã thông báo trước đó trên cùng một dòng. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 88const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 13
Tránh khoảng trắng trước dấu phẩy và yêu cầu khoảng trắng sau dấu phẩy. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 89const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 14
Thực thi giãn cách bên trong dấu ngoặc thuộc tính được tính. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 90const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 15
Tránh khoảng cách giữa các chức năng và lời gọi của chúng. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 91const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 16
Thực thi khoảng cách giữa các khóa và giá trị trong các thuộc tính bằng chữ của đối tượng. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 92const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 17
Tránh nhiều dòng trống, chỉ cho phép một dòng mới ở cuối tệp và tránh một dòng mới ở đầu tệp. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 83const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 18
dấu phẩydấu phẩy hàng đầu. Không. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 95const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 19
Thêm dấu phẩy sau. Chuẩn rồi. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 96Tại sao? . Ngoài ra, các trình chuyển mã như Babel sẽ xóa dấu phẩy ở cuối bổ sung trong mã được chuyển mã, điều đó có nghĩa là bạn không phải lo lắng về dấu phẩy trong các trình duyệt cũ
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 20const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 21
dấu chấm phẩyChuẩn rồi. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 97Tại sao? . Tuy nhiên, ASI chứa một vài hành vi lập dị và mã của bạn sẽ bị hỏng nếu JavaScript hiểu sai ngắt dòng của bạn. Các quy tắc này sẽ trở nên phức tạp hơn khi các tính năng mới trở thành một phần của JavaScript. Việc chấm dứt rõ ràng các câu lệnh của bạn và định cấu hình trình nói dối của bạn để bắt các dấu chấm phẩy bị thiếu sẽ giúp bạn không gặp phải sự cố
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 22.
Loại đúc và ép buộc- Thực hiện ép kiểu ở đầu câu lệnh
Dây. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 98const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 23
số. Sử dụng // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 99 để truyền kiểu và // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 00 luôn có cơ số để phân tích chuỗi. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 01 // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 98Tại sao? . Khoảng trắng hàng đầu trong chuỗi bị bỏ qua. Nếu cơ số là const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 53 hoặc // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 05, thì nó được giả định là // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 06 trừ khi số bắt đầu bằng cặp ký tự // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 07 hoặc // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 08, trong trường hợp đó cơ số là 16 được giả định. Điều này khác với ECMAScript 3, chỉ đơn thuần là không khuyến khích (nhưng được phép) giải thích bát phân. Nhiều triển khai đã không áp dụng hành vi này kể từ năm 2013. 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
Nếu vì bất kỳ lý do gì mà bạn đang làm điều gì đó hoang dã và // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 00 là nút cổ chai của bạn và cần sử dụng Bitshift vì lý do hiệu suất, hãy để lại nhận xét giải thích lý do và việc bạn đang làmconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 25
Ghi chú. Hãy cẩn thận khi sử dụng các hoạt động bitshift. Các số được biểu diễn dưới dạng , nhưng các thao tác chuyển đổi bit luôn trả về một số nguyên 32 bit (). Bitshift có thể dẫn đến hành vi không mong muốn đối với các giá trị số nguyên lớn hơn 32 bit. Thảo luận. Int 32 bit có chữ ký lớn nhất là 2.147.483.647 const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 26
Booleans. dây dẫn. // bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
} 98const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 27
quy ước đặt tênTránh những tên có một chữ cái. Hãy mô tả với tên của bạn. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 11const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 28
Sử dụng camelCase khi đặt tên đối tượng, chức năng và phiên bản. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 12const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 29
Chỉ sử dụng PascalCase khi đặt tên cho hàm tạo hoặc lớp. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 13const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 30
Không sử dụng dấu gạch dưới hoặc dấu gạch dưới ở đầu. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 14Tại sao? . Mặc dù dấu gạch dưới ở đầu là một quy ước phổ biến có nghĩa là “riêng tư”, trên thực tế, các thuộc tính này hoàn toàn công khai và do đó, là một phần trong hợp đồng API công khai của bạn. Quy ước này có thể khiến các nhà phát triển nghĩ sai rằng một thay đổi sẽ không được tính là vi phạm hoặc không cần kiểm tra. tl;dr. nếu bạn muốn một cái gì đó là "riêng tư", nó không được hiện diện rõ ràng
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 31
Không lưu tham chiếu đến // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 35. Sử dụng các chức năng mũi tên hoặc Hàm # liên kếtconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 32
Tên tệp cơ sở phải khớp chính xác với tên xuất mặc định của nó const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 33
Sử dụng camelCase khi bạn xuất hàm mặc định. Tên tệp của bạn phải giống với tên hàm của bạn const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 34
Sử dụng PascalCase khi bạn xuất hàm tạo/lớp/thư viện hàm đơn/hàm/đối tượng trần const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 35
Các từ viết tắt và viết tắt phải luôn luôn là chữ hoa hoặc tất cả chữ thường Tại sao?
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 36
Bạn có thể tùy ý viết hoa một hằng số chỉ khi nó (1) được xuất, (2) là const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 (không thể gán lại nó) và (3) lập trình viên có thể tin tưởng nó (và các thuộc tính lồng nhau của nó) sẽ không bao giờ thay đổiTại sao? . UPPERCASE_VARIABLES đang cho lập trình viên biết rằng họ có thể tin tưởng biến (và các thuộc tính của nó) sẽ không thay đổi
- Thế còn tất cả các biến
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 59 thì sao? . Tuy nhiên, nó nên được sử dụng cho các hằng số đã xuất - Đối với các đối tượng đã xuất thì sao? . g.
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 18) và duy trì rằng tất cả các thuộc tính lồng nhau không thay đổi
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 37
Accessors- Hàm truy cập cho các thuộc tính không bắt buộc
Không sử dụng JavaScript getters/setters vì chúng gây ra tác dụng phụ không mong muốn và khó kiểm tra, bảo trì và lý do hơn. Thay vào đó, nếu bạn tạo các hàm truy cập, hãy sử dụng // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 19 và // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 20const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 38
Nếu thuộc tính/phương pháp là một const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 51, hãy sử dụng // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 22 hoặc // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 23const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 39
Bạn có thể tạo các hàm // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 24 và // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 25, nhưng phải nhất quánconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 40
Sự kiệnKhi đính kèm tải trọng dữ liệu vào các sự kiện (dù là sự kiện DOM hay thứ gì đó độc quyền hơn như sự kiện Xương sống), hãy chuyển một đối tượng theo nghĩa đen (còn được gọi là "hàm băm") thay vì giá trị thô. Điều này cho phép người đóng góp tiếp theo thêm nhiều dữ liệu hơn vào tải trọng sự kiện mà không cần tìm và cập nhật mọi trình xử lý cho sự kiện. Ví dụ, thay vì const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 41thích hơn const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 42
jQueryBiến đối tượng jQuery có tiền tố với một // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 26const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 43
Tra cứu bộ nhớ cache jQuery const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 44
- Đối với các truy vấn DOM, hãy sử dụng Cascading
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 27 hoặc parent > child // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 28. jsPerf
Sử dụng // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 29 với các truy vấn đối tượng jQuery có phạm viconst foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 45
Khả năng tương thích ECMAScript 5- Tham khảo bảng tương thích ES5 của Kangax
Kiểu ECMAScript 6+ (ES 2015+)- Đây là tập hợp các liên kết đến các tính năng khác nhau của ES6+
Thư viện tiêu chuẩnThư viện tiêu chuẩn chứa các tiện ích bị hỏng chức năng nhưng vẫn tồn tại vì lý do cũ Sử dụng // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 30 thay vì toàn cầu // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 31. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 32Tại sao? . Nếu hành vi này là mong muốn, làm cho nó rõ ràng
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 46
Sử dụng // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 34 thay vì toàn cầu // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 35. dây dẫn. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 32Tại sao? . Nếu hành vi này là mong muốn, làm cho nó rõ ràng
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9 47
thử nghiệm- Không, nhưng nghiêm túc
- Cho dù bạn sử dụng khung kiểm tra nào, bạn nên viết bài kiểm tra
- Cố gắng viết nhiều hàm thuần túy nhỏ và giảm thiểu nơi xảy ra đột biến
- Hãy thận trọng với sơ khai và giả - chúng có thể làm cho bài kiểm tra của bạn trở nên dễ vỡ hơn
- Chúng tôi chủ yếu sử dụng
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 38 và // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 39 tại Airbnb. // const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 40 đôi khi cũng được sử dụng cho các mô-đun nhỏ, riêng biệt - Phạm vi kiểm tra 100% là một mục tiêu tốt để phấn đấu, ngay cả khi không phải lúc nào cũng thực tế để đạt được nó
- Bất cứ khi nào bạn sửa lỗi, hãy viết bài kiểm tra hồi quy. Một lỗi được sửa mà không kiểm tra hồi quy gần như chắc chắn sẽ lại bị hỏng trong tương lai
Hiệu suất- Về Bố cục và Hiệu suất Web
- Chuỗi so với mảng Concat
- Try/Catch Cost In a Loop
- chức năng bang
- jQuery Tìm so với Ngữ cảnh, Bộ chọn
- InternalHTML so với textContent cho văn bản tập lệnh
- Nối chuỗi dài
- Các hàm JavaScript như
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 72, // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 77 và // bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2; 74 có được tối ưu hóa để duyệt qua các mảng không? - Đang tải
Tài nguyênHọc ES6+ - Thông số kỹ thuật ECMA mới nhất
- Khám pháJS
- Bảng tương thích ES6
- Tổng quan toàn diện về các tính năng của ES6
Đọc này Công cụ - Mã phong cách Linters
- ESlint - Phong cách Airbnb. eslintrc
- JSHint - Phong cách Airbnb. jshintrc
- Đặt trước Neutrino - @neutrinojs/airbnb
Hướng dẫn phong cách khác - Hướng dẫn kiểu Google JavaScript
- Hướng dẫn kiểu Google JavaScript (Cũ)
- Nguyên tắc phong cách cốt lõi của jQuery
- Nguyên tắc viết JavaScript nhất quán, thành ngữ
- tiêu chuẩnJS
phong cách khác - Đặt tên này trong các hàm lồng nhau - Christian Johansen
- Gọi lại có điều kiện - Ross Allen
- - Byun Jeonghoon
- Nhiều câu lệnh var trong JavaScript, không thừa - Ben Alman
Đọc thêm - Hiểu về JavaScript Closures - Angus Croll
- JavaScript cơ bản cho lập trình viên thiếu kiên nhẫn - Dr. Axel Rauschmayer
- Bạn có thể không cần jQuery - Zack Bloom & Adam Schwartz
- Tính năng ES6 - Luke Hoban
- Nguyên tắc giao diện người dùng - Benjamin De Cock
Sách - JavaScript. Những Phần Tốt - Douglas Crockford
- Mẫu JavaScript - Stoyan Stefanov
- Mẫu thiết kế JavaScript chuyên nghiệp - Ross Harmes và Dustin Diaz
- Trang web hiệu suất cao. Kiến Thức Cần Thiết Cho Kỹ Sư Front-End - Steve Souders
- JavaScript có thể duy trì - Nicholas C. Zakas
- Ứng dụng web JavaScript - Alex MacCaw
- Kỹ thuật JavaScript chuyên nghiệp - John Resig
- đập vỡ nút. js. JavaScript ở mọi nơi - Guillermo Rauch
- Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
- JavaScript của con người - Henrik Joreteg
- Siêu anh hùng. js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
- JSBooks - Julien Bouquillon
- JavaScript của bên thứ ba - Ben Vinegar và Anton Kovalyov
- JavaScript hiệu quả. 68 cách cụ thể để khai thác sức mạnh của JavaScript - David Herman
- JavaScript hùng hồn - Marijn Haverbeke
- Bạn không biết JS. ES6 & Hơn thế nữa - Kyle Simpson
Blog - JavaScript hàng tuần
- JavaScript, JavaScript
- Blog Bocoup
- Đủ Tốt
- NCZTrực tuyến
- Sự hoàn hảo giết chết
- Ben Alman
- Dmitry Baranovsky
- quả óc chó
Podcast - Không khí JavaScript
- Jabber JavaScript
Trong thế giới hoang dãĐây là danh sách các tổ chức đang sử dụng hướng dẫn phong cách này. Gửi cho chúng tôi yêu cầu kéo và chúng tôi sẽ thêm bạn vào danh sách - 123erfast. 123erfasst/javascript
- 4bộ xúc tác. 4Catalyzer/javascript
- Aan Zee. AanZee/javascript
- Airbnb. airbnb/javascript
- AloPeyk. AloPeyk
- trường thay thế. AltSchool/javascript
- căn hộ. căn hộ/javascript
- Thường gán. gán/javascript
- tiên phong. tín dụng tiên phong/javascript
- axept. axept/javascript
- Billabong. hóa đơn/javascript
- Canh tôm cua. canh tôm cua
- Bonhomme. bonhommeparis/javascript
- cá mập. brainshark/javascript
- CaseNine. CaseNine/javascript
- Cerner. Cerner
- tăng biểu đồ. ChartBoost/javascript-style-guide
- Coeur d'Alene Tribe. www. cdatribe-nsn. chính phủ
- So sánh trực tuyến. so sánh trực tuyến/javascript
- học la bàn. hướng dẫn sử dụng la bàn/javascript-style-guide
- chuyển động hàng ngày. dailymotion/javascript
- Làm việc gì đó. DoS Something/eslint-config
- Digitpaint Digitpaint/javascript
- drupal. www. drupal. tổ chức
- hệ sinh thái. sinh thái/javascript
- Evernote. evernote/javascript-style-guide
- Trò chơi tiến hóa. tiến hóa-chơi game/javascript
- EvozonJs. evozonjs/javascript
- Mục tiêu chính xác. Mục tiêu chính xác/javascript
- dâu dẻo. Flexberry/javascript-style-guide
- truyền thông gawker. gawkermedia
- điện tổng hợp. Điện tổng hợp/javascript
- Tux thế hệ. Thế hệTux/javascript
- dữ liệu tốt. gooddata/gdc-js-style
- đầu bếp xanh. đầu bếp xanh/javascript
- rãnh. rãnh/javascript
- Grupo-Abraxas. Grupo-Abraxas/javascript
- Happeo. happeo/javascript
- Mật ong. khoa học mật ong/javascript
- Chúng tôi thì sao. howaboutwe/javascript
- HubSpot. HubSpot/javascript
- siêu. hyperoslo/javascript-playbook
- Nhóm liên thành phố. intercitygroup/javascript-style-guide
- mứt3. Jam3/Javascript-Code-Conventions
- JSSolutions. JSSolutions/javascript
- Máy tính Kaplan. kaplankomputing/javascript
- KickorStick. gậy đánh bóng
- giải pháp động học. động học/javascript
- LEINWAND. LEINWAND/javascript
- Hành tinh cô đơn. hành tinh cô đơn/javascript
- M2GEN. M2GEN/javascript
- Mùa xuân hùng vĩ. hùng mạnh/javascript
- TrinPost. TrinPost/javascript
- MitocNhóm. Nhóm Mitoc/javascript
- Muber. người chăn bò
- Hội Địa lý Quốc gia. xã hội tự nhiên
- NullDev. NullDevCo/JavaScript-Styleguide
- Nuology. nulogy/javascript
- Phát triển Đồi Cam. màu cam/javascript
- Sức khỏe Orion. orionhealth/javascript
- ngang hàng. Peerby/javascript
- Pier 1. Pier1/javascript
- Qotto. Qotto/javascript-style-guide
- React.
- REI. reidev/js-style-guide
- Ripple. ripple/javascript-style-guide
- Sainsbury’s Supermarkets. jsainsburyplc
- Shutterfly. shutterfly/javascript
- Sourcetoad. sourcetoad/javascript
- Springload. springload
- StratoDem Analytics. stratodem/javascript
- SteelKiwi Development. steelkiwi/javascript
- StudentSphere. studentsphere/javascript
- SwoopApp. swoopapp/javascript
- SysGarage. sysgarage/javascript-style-guide
- Syzygy Warsaw. syzygypl/javascript
- Target. target/javascript
- Terra. terra
- TheLadders. TheLadders/javascript
- The Nerdery. thenerdery/javascript-standards
- Tomify. tomprats
- Traitify. traitify/eslint-config-traitify
- T4R Technology. T4R-Technology/javascript
- UrbanSim. urbansim
- VoxFeed. VoxFeed/javascript-style-guide
- WeBox Studio. weboxstudio/javascript
- Weggo. Weggo/javascript
- Zillow. zillow/javascript
- ZocDoc. ZocDoc/javascript
TranslationThis style guide is also available in other languages - Brazilian Portuguese. armoucar/javascript-style-guide
- Bulgarian. borislavvv/javascript
- Catalan. fpmweb/javascript-style-guide
- Chinese (Simplified). lin-123/javascript
- Chinese (Traditional). jigsawye/javascript
- French. nmussy/javascript-style-guide
- German. timofurrer/javascript-style-guide
- Italian. 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
- Ukrainian. ivanzusko/javascript
- Vietnam. dangkyokhoang/javascript-style-guide
The JavaScript Style Guide GuideChat With Us About JavaScriptContributorsLicense(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 sửa đổiChúng tôi khuyến khích bạn rẽ nhánh hướng dẫn này và thay đổi các quy tắc để phù hợp với hướng dẫn phong cách của nhóm bạn. Dưới đây, bạn có thể liệt kê một số sửa đổi đối với hướng dẫn phong cách. This allows you to periodically update your style guide without having to deal with merge conflicts |