Các cấu trúc điều khiển khác nhau trong JavaScript được giải thích bằng các ví dụ là gì?

Các câu lệnh 'Nếu' cũng có thể kiểm tra sự xuất hiện của một đối tượng con của một đối tượng có thể không tồn tại. Ví dụ: một số trình duyệt cung cấp tài liệu. cơ thể người. style trong khi một số trình duyệt cũ hơn thậm chí không cung cấp

if( x < 5 )
x++;
window.alert(x);

3. Trong các trình duyệt này, viết '

if( x < 5 )
x++;
window.alert(x);

4' sẽ chỉ gây ra lỗi (xem phần trên tiểu mục 'Biến' ''). Để giải quyết vấn đề này, chúng ta có thể viết

if( document.body ) {
  if( document.body.style ) { etc. }
}

Tuy nhiên, toán tử

if( x < 5 )
x++;
window.alert(x);

5 có một tính năng hữu ích mà chúng ta có thể sử dụng ở đây để kết hợp hai câu lệnh 'if' thành một

if( document.body && document.body.style ) { etc. }

Thử nghiệm đầu tiên sẽ sai, vì vậy trình duyệt sẽ không tiếp tục thử nghiệm thứ hai. Điều này được gọi là ngắn mạch. Toán tử

if( x < 5 )
x++;
window.alert(x);

6 có tính năng tương tự, nhưng nó sẽ chỉ đánh giá lần kiểm tra thứ hai nếu lần đầu tiên không thành công

JavaScript hiểu rằng nếu các ký tự '{' và '}' (dấu ngoặc nhọn) bị bỏ đi, thì chỉ lệnh tiếp theo thuộc câu lệnh đó

if( x < 5 )
x++;
window.alert(x);

Ở đây, cảnh báo sẽ luôn xảy ra bất kể x, nhưng x sẽ chỉ tăng lên nếu x nhỏ hơn 5. Điều này có vẻ thuận tiện, vì nó cho phép bạn làm cho mã của mình ngắn hơn một chút, nhưng tôi khuyên bạn nên tránh cú pháp này. Nó làm cho mã của bạn khó đọc hơn, đặc biệt nếu bạn bắt đầu lồng các cấu trúc điều khiển của mình. Nó cũng giúp bạn dễ dàng quên đưa chúng vào khi bạn cần và cũng khiến việc gỡ lỗi mã khó hơn nhiều, vì bạn sẽ cần quay lại mã của mình để thêm chúng để bạn có thể thêm các bài kiểm tra gỡ lỗi bổ sung. Tốt nhất là luôn sử dụng dấu ngoặc nhọn, ngay cả khi chúng là tùy chọn

Như mọi khi, có một ngoại lệ. Các câu lệnh 'nếu' lồng nhau như thế này có thể bắt đầu khó quản lý

if( myVariable == 2 ) {
  myVariable = 1;
} else {
  if( myVariable == 5 ) {
    myVariable = 3;
  } else {
    myVariable = 4;
  }
}

Bằng cách loại bỏ một cách chiến lược các dấu ngoặc nhọn, cấu trúc này có thể được rút gọn một cách hữu ích (mà bạn có thể nhận ra từ các ngôn ngữ lập trình khác) - lưu ý rằng 'else if' không được viết là 'elseif'

________số 8_______

Vòng lặp 'for'

Đây là một trong những cấu trúc phổ biến nhất được sử dụng. Thông thường, nó được sử dụng để duyệt qua nội dung của một mảng hoặc để tạo một số đối tượng mới cụ thể, nhưng nó có thể thực hiện nhiều việc hữu ích hơn nếu cần. Cú pháp của vòng lặp 'for' như sau

for( starting_initialise; continue_as_long_as_condition; do_this_each_time )

starting_initialiseĐây là nơi bạn xác định các biến mới mà bạn sẽ sử dụng trong vòng lặp, thường để sử dụng với cách đếm tăng dần. Như với tất cả các biến, bạn phải khai báo chúng (nếu bạn chưa khai báo). Bạn có thể xác định nhiều biến nếu cần, sử dụng.

var myVariable1 = value, myVariable2 = another_value;

Các biến này không bị giới hạn ở bên trong vòng lặp 'for' và sẽ có sẵn cho tất cả các mã sau vòng lặp (trong cùng phạm vi với vòng lặp). continue_as_long_as_condition Đây là nơi bạn xác định các điều kiện để vòng lặp tiếp tục thực hiện. Cú pháp hoàn toàn giống với câu lệnh 'if', vì vậy bạn có thể áp dụng nhiều hơn một điều kiện tiếp tục bằng cách sử dụng && hoặc. nhà khai thác.

myVariable1 <= 5 && myVariable2 >= 70;

Nếu điều kiện không được thỏa mãn khi vòng lặp for bắt đầu, thì nó sẽ không bao giờ lặp qua nó. do_this_each_timeSau khi kết thúc vòng lặp, nó sẽ làm bất cứ điều gì bạn yêu cầu tại đây. Thông thường, điều này được sử dụng để tăng hoặc giảm một biến bước và có thể thực hiện các hành động trên nhiều biến bằng cách phân tách chúng bằng dấu phẩy.

myVariable1++, myVariable2 -= 4

Sau đây là một ví dụ đầy đủ

if( document.body ) {
  if( document.body.style ) { etc. }
}

0

myArray[1] đến myArray[5] giờ là 1

Vòng lặp 'for - in'

Vòng lặp 'for - in' được sử dụng để duyệt qua tất cả các thuộc tính được hiển thị của một đối tượng (hoặc mảng). Mỗi khi bạn tạo các thuộc tính hoặc phương thức trên một đối tượng, chúng sẽ được thêm vào danh sách các thuộc tính sẽ được hiển thị. Hầu hết các thuộc tính bên trong (những thuộc tính mà JavaScript tạo ra) cũng sẽ được hiển thị, nhưng các công cụ JavaScript được phép ẩn các thuộc tính và phương thức bên trong nếu chúng muốn. Bạn không nên dựa vào bất kỳ hành vi cụ thể nào ở đây, nhưng lưu ý rằng một số trình duyệt sẽ cung cấp các thuộc tính và phương thức bên trong của các đối tượng nội tại và một số thì không.

Một lần nữa, bạn nên khai báo các tên biến mà bạn sử dụng, nếu bạn chưa khai báo. Cú pháp của vòng lặp 'for - in' như sau

if( document.body ) {
  if( document.body.style ) { etc. }
}

1

Điều này sẽ chạy qua vòng lặp, một lần cho mỗi thuộc tính được hiển thị trong anObjectOrArray. Mỗi lần nó lặp lại, nó sẽ gán tên thuộc tính tiếp theo dưới dạng giá trị chuỗi cho myVariable. Sau đó, bạn có thể sử dụng ký hiệu mảng để truy cập giá trị của thuộc tính đó. Ví dụ sau ghi tất cả các thuộc tính được hiển thị của đối tượng tài liệu

if( document.body ) {
  if( document.body.style ) { etc. }
}

2

Lưu ý rằng nếu bạn sử dụng vòng lặp này trên một mảng, nó sẽ liệt kê các khóa được đánh số và đặt tên, bao gồm thuộc tính 'độ dài' bên trong. Rất dễ mắc lỗi ở đây, vì vậy hãy cẩn thận để không nhầm lẫn các loại tài sản này với nhau

Vòng lặp 'trong khi'

Vòng lặp 'while' có hành vi giống hệt vòng lặp 'for', chỉ khác là không có thiết lập ban đầu và các hành động kết thúc vòng lặp. Nó sẽ tiếp tục chạy miễn là điều kiện được thỏa mãn

if( document.body ) {
  if( document.body.style ) { etc. }
}

3

myArray[1] đến myArray[5] giờ là 1

Sử dụng một tính năng của toán tử tăng (và giảm) ở đây, có thể rút ngắn mã bên trong vòng lặp thành '

if( x < 5 )
x++;
window.alert(x);

7' và nó sẽ có tác dụng chính xác như vậy. Đầu tiên, nó sẽ sử dụng giá trị của myVariable để lập chỉ mục cho ô mảng, sau đó nó sẽ tăng myVariable

Điều này cũng hoạt động ngược lại; . Đầu tiên, nó sẽ tăng giá trị của myVariable, sau đó nó sẽ sử dụng giá trị mới để lập chỉ mục cho ô mảng. Nếu tôi đã làm điều này, myArray[2] đến myArray[6] bây giờ sẽ là 1

Các tính năng này cũng hoạt động bên ngoài các vòng lặp, nhưng đây là nơi bạn thường thấy chúng nhất, vì vậy tôi đã đưa chúng vào đây

Vòng lặp 'do - while'

Điều này tương tự như vòng lặp while, nhưng có một sự khác biệt quan trọng. Điều kiện được đánh giá ở cuối vòng lặp, nghĩa là ngay cả khi điều kiện không bao giờ được thỏa mãn, nó vẫn sẽ chạy qua vòng lặp ít nhất một lần

if( document.body ) {
  if( document.body.style ) { etc. }
}

4

myArray[1] đến myArray[5] giờ là 1

Tuyên bố 'chuyển đổi'

Câu lệnh 'switch' giống như câu lệnh 'if' lặp đi lặp lại, kiểm tra một giá trị đơn lẻ để xem liệu nó có khớp với một trong các giá trị hay không

Nếu một trường hợp được thỏa mãn, mã ngoài trường hợp đó cũng sẽ được thực thi trừ khi câu lệnh break được sử dụng. Trong ví dụ trên, nếu myVar là 1, mã cho trường hợp 'mẫu', trường hợp sai và mặc định cũng sẽ được thực thi. Giải pháp là sử dụng break;

Câu lệnh 'với'

Lấy ví dụ như ví dụ sau

if( document.body ) {
  if( document.body.style ) { etc. }
}

5

Sử dụng câu lệnh 'with', điều này có thể được thay thế bằng

if( document.body ) {
  if( document.body.style ) { etc. }
}

6

Lưu ý rằng câu lệnh 'with' đưa các tên biến bổ sung vào phạm vi hiện tại. Trong ví dụ trên, nếu tôi đã có sẵn một biến gọi là pow trước câu lệnh 'with', thì biến này sẽ không có sẵn bên trong câu lệnh with, vì nó sẽ được thay thế bằng phương thức của đối tượng Math (cũng như bất kỳ biến nào khác mà . Khi câu lệnh 'với' hoàn tất, các biến cũ sẽ khả dụng trở lại

Câu lệnh 'nếu' nhanh chóng

Đây được gọi là toán tử có điều kiện hoặc bậc ba và là một cách dễ dàng để gán các giá trị khác nhau cho một biến, tùy thuộc vào một điều kiện

if( document.body ) {
  if( document.body.style ) { etc. }
}

7

Điều này giống hệt với

if( document.body ) {
  if( document.body.style ) { etc. }
}

8

Câu lệnh thử - bắt - cuối cùng

• Netscape 4, Internet Explorer 4 và WebTV không hỗ trợ cấu trúc này và sẽ gây ra lỗi nếu bạn sử dụng nó

Cấu trúc kiểm soát 'thử - nắm bắt - cuối cùng' cho phép bạn phát hiện lỗi và lặng lẽ xử lý chúng mà không tạo ra thông báo lỗi hoặc hủy bỏ tập lệnh và trên thực tế, thậm chí không làm gián đoạn dòng tập lệnh đang chạy. Điều này làm cho nó vượt trội hơn so với cách ban đầu để xử lý lỗi tập lệnh (không có thông báo lỗi) trong đó tập lệnh bị hủy bỏ hoàn toàn

if( document.body ) {
  if( document.body.style ) { etc. }
}

9

Cú pháp của cấu trúc điều khiển 'try - catch - finally' như sau

Nếu xảy ra lỗi trong phần 'thử', nó sẽ ngay lập tức chuyển sang phần 'bắt', chuyển một số thông tin về lỗi. Các trình duyệt khác nhau cung cấp thông tin khác nhau cho cùng một lỗi, vì vậy đừng tin vào nó (về lý thuyết, các trình duyệt DOM sẽ sử dụng một tập hợp các loại lỗi cụ thể, nhưng điều này phụ thuộc vào mức độ hỗ trợ DOM của chúng - Internet Explorer ít tuân thủ nhất ở đây). Khi các phần 'thử' hoặc 'bắt' đã được chạy, phần 'cuối cùng' sẽ được chạy nếu bạn đã cung cấp một phần, sau đó tập lệnh theo cấu trúc điều khiển sẽ được chạy, trừ khi bạn đưa ra một lỗi khác

Nếu bạn lồng các câu lệnh này (một 'thử - bắt' bên trong một câu lệnh khác), bạn có thể sắp xếp lại lỗi từ phần 'bắt' của câu lệnh bên trong sang phần 'bắt' của câu lệnh bên ngoài (phần 'cuối cùng' - nếu có . Điều này được thực hiện bằng phương pháp 'ném'

Bạn cũng có thể đưa ra các lỗi của riêng mình tại bất kỳ thời điểm nào bằng cách tạo một đối tượng có các thuộc tính cần thiết và chuyển nó làm tham số khi sử dụng ném

if( document.body && document.body.style ) { etc. }

0

Điều gì là sai với nó?

Việc thiếu hỗ trợ trong các trình duyệt cũ hơn là lỗi lớn duy nhất của nó. Rất may những trình duyệt này hầu như không được sử dụng nữa. Có thể hữu ích khi sử dụng cấu trúc phát hiện lỗi này trong Netscape 4 (chẳng hạn như từ khóa 'this' + lỗi phương thức nội tuyến - ví dụ - có nhiều lỗi hơn), nhưng trình duyệt đó không hỗ trợ câu lệnh. Nó cũng sẽ hữu ích để kiểm tra các lỗi ngu ngốc, chẳng hạn như kiểm tra thứ gì đó như hoa tiêu. taintEnabled gây ra lỗi trong các phiên bản Internet Explorer cũ hơn. Tuy nhiên, lỗi không được ném chính xác cho những lỗi này

Thật không may, nếu bạn sử dụng cấu trúc này trong bất kỳ tập lệnh nào được chạy bởi trình duyệt không hỗ trợ nó, trình duyệt sẽ hủy bỏ toàn bộ tập lệnh có lỗi, ngay cả khi nó không sử dụng phần chứa cấu trúc. Rất may, những trình duyệt cũ này có thể được bỏ qua một cách an toàn

Nó không bao giờ được sử dụng để phát hiện xem trình duyệt có hỗ trợ một phương thức hoặc thuộc tính như tài liệu hay không. getElementById như một phát hiện đối tượng thích hợp sẽ đủ

Vậy khi nào nên sử dụng?

Nó có thể được sử dụng cho tập lệnh W3C DOM, nơi bạn có thể muốn tránh các lỗi đột biến DOM (ví dụ), đây là các lỗi hợp lệ, nhưng dùng để cảnh báo bạn không được làm điều gì đó và không phải lúc nào cũng cần phải hủy bỏ toàn bộ tập lệnh. Các trình duyệt cũ hơn không hỗ trợ DOM, vì vậy sẽ không sao nếu họ không hiểu phần này của nó. Tuy nhiên, chúng sẽ vẫn chạy script (không thể bảo vệ chúng bằng thuộc tính language trên thẻ script, vì bạn cần sử dụng JavaScript 1. 2 - không cao hơn - để kích hoạt hỗ trợ Internet Explorer 5). Điều này có nghĩa là các trình duyệt cũ hơn sẽ vẫn tạo ra lỗi, trừ khi bạn xác định phương pháp xử lý lỗi cũ trong tập lệnh trước đó

Nó có thể được sử dụng để ném lỗi của chính bạn nếu bạn cố tình tạo ra 'lỗi' trong một số trường hợp nhất định

Nó có thể được sử dụng để kiểm tra xem việc truy cập vào khung bộ khung có gây ra lỗi bảo mật trình duyệt hay không (ví dụ: nếu trang trong khung thuộc về một trang web khác)

Nó cũng có thể cho phép bạn tránh các sự cố trong đó các trình duyệt khác nhau hỗ trợ cùng một phương thức nhưng yêu cầu một cú pháp khác, ví dụ: selectBox. thêm phương thức (Tôi đã không đưa phương thức này vào phần DOM của hướng dẫn do sự cố này)

if( document.body && document.body.style ) { etc. }

1

Điều kiện không có điều kiện?

Bạn có thể nhận thấy trong ví dụ về "Câu lệnh 'nếu' nhanh" mà tôi đã kiểm tra một thuộc tính mà không kiểm tra bất kỳ giá trị cụ thể nào. '______0_______9'

Điều đó hợp lệ và là một trong những phần hữu ích nhất của JavaScript. Đây là một quy tắc rất quan trọng cần tìm hiểu, vì nó tạo cơ sở cho việc phát hiện đối tượng và khả năng, đồng thời là cơ sở để tạo các tập lệnh trình duyệt chéo. Điều này sẽ đúng nếu

if( document.body && document.body.style ) { etc. }

2

Điều ngược lại cũng có thể. '______7_______0'

Điều này sẽ đúng nếu

if( document.body && document.body.style ) { etc. }

3

Sử dụng điều này, bạn có thể phát hiện một loại khả năng và nếu nó không thành công, hãy phát hiện một loại khác và tiếp tục cho đến khi bạn tìm thấy một loại hoạt động

Bạn cũng có thể thực hiện việc này ở bất kỳ nơi nào có điều kiện, chẳng hạn như với điều kiện vòng lặp 'while', điều kiện vòng lặp 'do - while' và 'contin_as_long_as_condition' trong vòng lặp for

Kiểm tra các thuộc tính có 'in'

• WebTV gặp sự cố nếu bạn sử dụng toán tử 'in' để kiểm tra thuộc tính không tồn tại
• Netscape 4, Internet Explorer 5. 0- trên Windows và Internet Explorer trên Mac không thể sử dụng toán tử 'in' như được hiển thị ở đây

Toán tử 'in' được sử dụng trong vòng lặp 'for - in' có mục đích khác. Nó cũng có thể được sử dụng để kiểm tra sự tồn tại của các thuộc tính được đặt tên của một đối tượng. Trong hầu hết các trường hợp, tốt nhất là sử dụng câu điều kiện không có điều kiện, như hình trên. Tuy nhiên, có một số trường hợp bạn muốn kiểm tra sự tồn tại của một thuộc tính thậm chí nghĩ rằng giá trị của thuộc tính có thể không được đánh giá là đúng. Một ví dụ sẽ là nơi bạn muốn kiểm tra sự tồn tại của một thuộc tính có giá trị có thể là 0 hoặc một chuỗi rỗng hoặc null

Nếu bạn biết loại thuộc tính sẽ là gì, bạn có thể đạt được điều này bằng cách sử dụng toán tử nhận dạng hoặc toán tử typeof, như được hiển thị ở đây

if( document.body && document.body.style ) { etc. }

4

Tuy nhiên, cũng có thể sử dụng toán tử 'in' để kiểm tra thuộc tính. Điều này cho phép bạn kiểm tra sự tồn tại của nó, bất kể giá trị hiện tại của nó là gì và loại giá trị hiện tại của nó (ngay cả khi nó đã được gán giá trị không xác định). Trong vòng lặp 'for - in', toán tử 'in' đã trả về tên của các thuộc tính dưới dạng một chuỗi và do đó, ở đây, nó hy vọng tên đó sẽ là một chuỗi. Điều này hạn chế một chút tính hữu ích, vì nó chỉ có thể tìm kiếm tên và không thể được sử dụng để xem liệu một trong các thuộc tính có chứa một giá trị hoặc loại giá trị cụ thể hay không

if( document.body && document.body.style ) { etc. }

5

Lưu ý rằng điều này chậm hơn khoảng 20 lần trong Internet Explorer so với điều kiện không có điều kiện, như được hiển thị ở trên. Trong hầu hết các trình duyệt khác, hai lựa chọn thay thế hoạt động giống nhau. Nói chung, tôi cho rằng tốt nhất là sử dụng các lựa chọn thay thế phổ biến hơn, trừ khi bạn có một mục đích sử dụng cụ thể cần hành vi của toán tử 'in'

Bài tập bên trong một điều kiện

JavaScript cho phép bạn thực hiện một nhiệm vụ cùng lúc với việc kiểm tra xem nhiệm vụ đó có hiệu quả không. Điều này có thể được sử dụng bên trong bất kỳ điều kiện nào, kể cả bên trong 'if', 'for', 'while' và 'do - while'

if( document.body && document.body.style ) { etc. }

6_______4_______7

Lưu ý rằng Internet Explorer trên máy Mac sẽ báo lỗi nếu bạn cố thực hiện việc này với một mảng, khi nó bước ra khỏi phần cuối của mảng

Tiếp tục và ngắt câu lệnh và nhãn

nhãn

Các nhãn được sử dụng để đặt tên cho cấu trúc điều khiển 'while', 'do - while', 'for', 'for - in' và 'switch'. Cú pháp được sử dụng là

if( document.body && document.body.style ) { etc. }

8

Nhãn rất hiếm khi được sử dụng trong JavaScript

Tuyên bố phá vỡ

Việc viết ngắt bên trong cấu trúc điều khiển switch, for, for-in, while hoặc do - while sẽ khiến chương trình nhảy đến cuối câu lệnh. Nếu bạn chỉ sử dụng, ví dụ

if( document.body && document.body.style ) { etc. }

9

Tập lệnh sẽ chuyển qua cuối vòng lặp while khi y bằng 5. Nhưng nếu bạn sử dụng cái này

if( x < 5 )
x++;
window.alert(x);

0

Tập lệnh sẽ nhảy qua phần cuối của vòng lặp for khi y bằng 5

Tuyên bố tiếp tục

Việc viết tiếp tục bên trong cấu trúc điều khiển 'for', 'for - in', 'while' hoặc 'do - while' sẽ khiến chương trình chuyển sang điều kiện kiểm tra của cấu trúc và đánh giá lại nó đã thực hiện bất kỳ hướng dẫn 'do_this_each_time' nào. Nếu bạn chỉ sử dụng cái này, ví dụ

if( x < 5 )
x++;
window.alert(x);

1

Tập lệnh này sẽ chuyển sang điều kiện kiểm tra của vòng lặp while khi y bằng 5 nên 5 sẽ không bao giờ được viết nhưng 6 và 7 sẽ được viết. Nếu bạn sử dụng cái này thay thế

Các loại cấu trúc điều khiển khác nhau trong JavaScript là gì?

Các cấu trúc điều khiển khác nhau giải thích với một ví dụ là gì?

3 loại cấu trúc điều khiển với các ví dụ là gì?

Có bao nhiêu cấu trúc điều khiển trong JavaScript?