Ví dụ về toán tử ternary JavaScript với hàm

Question

Tôi đang sử dụng jQuery 1.7.1

Tôi chỉ bắt đầu sử dụng toán tử ternary JavaScript để thay thế câu lệnh if/else đơn giản. Tôi đã làm rất thành công ở nhiều nơi. Tôi đã rất ngạc nhiên khi tôi thực hiện thành công một công việc khác khi tôi nghĩ chắc chắn nó sẽ không, nhưng tôi vẫn cố gắng.

Dưới đây là báo cáo kết quả ban đầu:

function updateItem() { 
    $this = $(this); 
    var IsChecked = $this.hasClass("IsChecked"); 
    if (IsChecked == true){ 
     removeItem($this); 
    } else { 
     addItem($this); 
    } 
} 

Đây là cùng một chức năng sử dụng các nhà điều hành ternary:

function updateItem() { 
    $this = $(this); 
    var IsChecked = $this.hasClass("IsChecked"); 
    (IsChecked == true) ? removeItem($this) : addItem($this); 
} 

Tôi rất ngạc nhiên vì tất cả các ví dụ tôi thấy đang được sử dụng đã được chỉ đơn thuần là thiết lập các biến như thế này :

x = (1 < 2) ? true : false; 

Câu hỏi của tôi là việc sử dụng này có "bình thường" hay không và nó sẽ hoạt động trong hầu hết các phiên bản của JavaScript? Nó sẽ thất bại ở đâu? Có sử dụng ít rõ ràng hơn cho nó?

CẬP NHẬT - Cảm ơn lời khuyên "thế giới thực"!

Tôi đang sử dụng này như chức năng của tôi:

function updateItem() { 
    $this = $(this); 
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this); 
} 

Answer 1

Anh h, có một số việc sử dụng cú pháp ternary khá thú vị trong câu hỏi của bạn; Tôi thích cái cuối cùng là tốt nhất ...

x = (1 < 2) ? true : false; 

Việc sử dụng ternary ở đây là hoàn toàn uncessesary - bạn chỉ có thể viết

x = (1 < 2); 

Tương tự như vậy, các yếu tố điều kiện của một tuyên bố ternary luôn được đánh giá là một giá trị Boolean, do đó bạn có thể bày tỏ:

(IsChecked == true) ? removeItem($this) : addItem($this); 

Đơn giản chỉ cần như:

(IsChecked) ? removeItem($this) : addItem($this); 

Infact, tôi cũng sẽ loại bỏ các IsChecked tạm thời cũng mà lá bạn với:

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this); 

Đối với thời tiết này là cú pháp chấp nhận được, nó chắc chắn là! Đó là một cách tuyệt vời để giảm bốn dòng mã thành một mà không ảnh hưởng đến khả năng đọc. Lời khuyên duy nhất tôi đưa ra cho bạn là tránh làm tổ nhiều câu lệnh ternary trên cùng một dòng (theo cách đó nằm điên khùng!)

Answer 2

Không có gì đặc biệt khó khăn về ví dụ bạn được đăng là.

Trong toán tử bậc ba, đối số đầu tiên (điều kiện) được đánh giá và nếu kết quả là true, đối số thứ hai được đánh giá và trả về, nếu không, đối số thứ ba được đánh giá và trả về. Mỗi đối số có thể là bất kỳ khối mã hợp lệ nào, kể cả các cuộc gọi hàm.

Hãy suy nghĩ về nó theo cách này:

var x = (1 < 2) ? true : false; 

cũng có thể được viết như sau:

var x = (1 < 2) ? getTrueValue() : getFalseValue(); 

này là hoàn toàn hợp lệ, và những chức năng có thể chứa bất kỳ mã tùy ý, cho dù nó có liên quan để trở về một giá trị hay không. Bên cạnh đó, kết quả của các hoạt động ternary không cần phải được gán cho bất cứ điều gì, cũng giống như kết quả chức năng không cần phải được gán cho bất cứ điều gì:

(1 < 2) ? getTrueValue() : getFalseValue(); 

Bây giờ chỉ cần thay thế những người có bất kỳ chức năng tùy ý, và bạn trái với một cái gì đó giống như ví dụ của bạn:

(1 < 2) ? removeItem($this) : addItem($this); 

Bây giờ ví dụ cuối cùng của bạn thực sự không cần một ternary ở tất cả, vì nó có thể được viết như thế này:

x = (1 < 2); // x will be set to "true" 

Answer 3

Kiểu ternary thường được sử dụng để tiết kiệm không gian. Về mặt ngữ nghĩa, chúng giống hệt nhau. Tôi thích đi với cú pháp if/then/else nếu tôi không muốn hy sinh khả năng đọc - tôi là trường học cũ và tôi thích niềng răng.

Định dạng đầy đủ nếu/sau đó/khác được sử dụng cho mọi thứ. Nó đặc biệt phổ biến nếu bạn nhận được vào các khối mã lớn hơn trong mỗi nhánh, bạn có một cây ifi-branched if/else, hoặc nhiều else/ifs trong một chuỗi dài.

Toán tử bậc ba là phổ biến khi bạn chỉ định giá trị cho biến dựa trên điều kiện đơn giản hoặc bạn đang đưa ra nhiều quyết định với kết quả rất ngắn. Ví dụ bạn trích dẫn thực sự không có ý nghĩa, vì biểu thức sẽ đánh giá một trong hai giá trị mà không có bất kỳ logic bổ sung nào.

ý tưởng tốt:

this > that ? alert(this) : alert(that); //nice and short, little loss of meaning 

if(expression) //longer blocks but organized and can be grasped by humans 
{ 
    //35 lines of code here 
} 
else if (something_else) 
{ 
    //40 more lines here 
} 
else if (another_one) /etc, etc 
{ 
    ... 

Ít tốt:

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now. 
//Not complete... or for average humans to read. 

if(this != that) //Ternary would be done by now 
{ 
    x = this; 
} 
else 
} 
    x = this + 2; 
} 

Một nguyên tắc cơ bản thực sự của ngón tay cái - bạn có thể hiểu được toàn bộ sự việc cũng hay tốt hơn trên cùng một dòng? Ternary là OK. Nếu không mở rộng nó.

Answer 4

Nếu bạn đang đi để khai thác ternary tổ, tôi tin rằng bạn sẽ muốn làm điều gì đó như thế này:

var audience = (countrycode == 'eu') ? 'audienceEU' : 
        (countrycode == 'jp') ? 'audienceJP' : 
        (countrycode == 'cn') ? 'audienceCN' : 
        'audienceUS'; 

Đó là một rất nhiều hiệu quả hơn để viết/đọc hơn:

var audience = 'audienceUS'; 
if countrycode == 'eu' { 
    audience = 'audienceEU'; 
} else if countrycode == 'jp' { 
    audience = 'audienceJP'; 
} else if countrycode == 'cn' { 
    audience = 'audienceCN'; 
} 

Như với tất cả các chương trình tốt, khoảng trắng làm cho tất cả mọi thứ tốt đẹp cho những người phải đọc mã của bạn sau khi bạn đang thực hiện với dự án.

Answer 5

Tôi biết câu hỏi đã được trả lời.

Nhưng hãy để tôi thêm một điểm tại đây. Đây không chỉ là trường hợp đúng hay sai.Xem bên dưới:

var val="Do"; 

Var c= (val == "Do" || val == "Done") 
      ? 7 
      : 0 

Ở đây nếu val là Do hoặc Xong thì c sẽ bằng 7 nếu không thì sẽ bằng 0. Trong trường hợp này c sẽ là 7.

Đây thực sự là quan điểm khác của toán tử này.

Answer 6

Tôi cũng muốn thêm điều gì đó từ tôi.

cú pháp khác có thể gọi chức năng với các nhà điều hành ternary, sẽ là:

Nó có thể hữu ích nếu bạn phải vượt qua cùng một danh sách các thông số cho cả hai chức năng, vì vậy bạn phải viết chúng chỉ Một lần.

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5); 

Bạn có thể sử dụng toán tử ternary ngay cả với tên hàm thành viên, mà cá nhân tôi thích rất nhiều để tiết kiệm không gian:

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible'); 

hoặc

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible'); 

Một ví dụ khác:

var addToEnd = true; //or false 
var list = [1,2,3,4]; 
list[addToEnd ? 'push' : 'unshift'](5);