HomeLập trìnhJavaScriptMeme JavaScript hay...

Meme JavaScript hay nhất tôi từng xem, được giải thích chi tiết


TLDR: Ép buộc bản thân sử dụng số bằng ba lần.

Tôi tình cờ tìm thấy meme JavaScript này trên Reddit, và đó là meme hay nhất mà tôi từng thấy.

best-js-meme-to-date-2

Bạn có thể xác minh tính chính xác của meme này bằng cách chạy từng đoạn mã trong Công cụ dành cho nhà phát triển. Kết quả không đáng ngạc nhiên, nhưng vẫn hơi thất vọng.

Tất nhiên thí nghiệm nhỏ này khiến tôi tự hỏi …

Lý do tại sao điều này xảy ra?

lý do tại sao điều này xảy ra

Với kinh nghiệm, tôi đã học cách nắm bắt các mặt mượt mà của JavaScript trong khi cảnh giác với những cây thông có gai của nó. Tuy nhiên, chi tiết của trường hợp góc này vẫn đặt biệt danh cho tôi.

Đúng như Kyle Simpson nói…

“Tôi không nghĩ có ai thực sự biết về JS, dù sao thì cũng không hoàn toàn.”

Khi những trường hợp này xuất hiện, tốt nhất bạn nên tham khảo nguồn—thông số kỹ thuật ECMAScript chính thức mà JavaScript được xây dựng từ đó.

Với thông số kỹ thuật trong tay, hãy hiểu sâu những gì đang diễn ra ở đây.

Phần 1 – Giới thiệu Sự ép buộc

bảng-1-1

Nếu bạn chạy 0 == "0" trong bảng điều khiển dành cho nhà phát triển của bạn, tại sao nó lại quay trở lại true?

là một số và "0" là một chuỗi, chúng sẽ không bao giờ giống nhau! Hầu hết các ngôn ngữ lập trình tôn trọng điều đó. 0 == "0" trong Java, ví dụ, trả về điều này:

error: incomparable types: int and String

Điều này có ý nghĩa hoàn hảo. Nếu bạn muốn so sánh một int và String trong Java, trước tiên bạn phải chuyển chúng về cùng một kiểu.

Đọc thêm  Phân tích các biểu thức toán học bằng JavaScript

Nhưng đây là JavaScript, y’all!
đây là javascript

Khi bạn so sánh hai giá trị thông qua ==một trong các giá trị có thể trải qua ép buộc.

cưỡng chế–tự động đổi một giá trị từ kiểu này sang kiểu khác.

tự động là từ khóa ở đây. Thay vì bạn rõ ràng chuyển đổi các loại của bạn, JavaScript sẽ thực hiện điều đó cho bạn ở hậu trường.

scumpbag-javascript

Điều này thuận tiện nếu bạn cố tình khai thác nó, nhưng có khả năng gây hại nếu bạn không biết ý nghĩa của nó.

Đây là Đặc tả ngôn ngữ ECMAScript chính thức về điều đó. Tôi sẽ diễn giải phần có liên quan:

Nếu x là Số và y là Chuỗi, trả về x == ToNumber(y)

Vì vậy, đối với trường hợp của chúng tôi về 0 == "0":

Vì 0 là Số và “0” là Chuỗi, trả về 0 == ToNumber(“0”)

chuỗi của chúng tôi "0" đã được bí mật chuyển đổi thành và bây giờ chúng ta có một trận đấu!

0 == "0" // true
// The second 0 became a number!
// so 0 equals 0 is true....

that-chuỗi-bí-mật-trở-thành-số

Kỳ lạ phải không? Hãy làm quen với nó, chúng ta thậm chí còn chưa hoàn thành được nửa chừng.

Bảng 2 – Mảng cũng bị ép buộc

bảng điều khiển-2

Điều vô nghĩa này không giới hạn đối với các nguyên hàm như chuỗi, số hoặc booleans. Đây là so sánh tiếp theo của chúng tôi:

0 == [] // true
// What happened...?

Lại cưỡng chế! Tôi sẽ diễn giải phần có liên quan của thông số kỹ thuật:

Nếu x là Chuỗi hoặc Số và y là Đối tượng, trả về x == ToPrimitive(y)

Ba điều ở đây:

Đọc thêm  Cách bắt đầu với SignalR trên Azure bằng JavaScript

1. Đúng, mảng là đối tượng

mảng-là-đối tượng

Xin lỗi để phá vỡ nó bạn.

2. Mảng rỗng trở thành chuỗi rỗng

Một lần nữa theo thông số kỹ thuật, trước tiên JS tìm kiếm một đối tượng toString phương pháp để cưỡng chế nó.

Trong trường hợp mảng, toString nối tất cả các phần tử của nó và trả về chúng dưới dạng một chuỗi.

[1, 2, 3].toString() // "1,2,3"
['hello', 'world'].toString() // "hello,world"

Vì mảng của chúng tôi trống, chúng tôi không có gì để tham gia! Vì vậy…

[].toString() // ""

trống-mảng-coerces-to-empty-string-1

Thông số kỹ thuật ToPrimitive biến mảng trống này thành một chuỗi rỗng. Tài liệu tham khảo ở đây và ở đây để thuận tiện cho bạn (hoặc nhầm lẫn).

3. Chuỗi rỗng sau đó trở thành 0

trống-chuỗi-trở thành-0

Bạn không thể làm cho công cụ này lên. Bây giờ chúng tôi đã ép buộc mảng ""chúng ta quay lại thuật toán đầu tiên…

Nếu x là Số và y là Chuỗi, trả về x == ToNumber(y)

Vì vậy đối với 0 == ""

Vì 0 là Số và “” là Chuỗi, trả về 0 == ToNumber(“”)

ToNumber("") trả về 0.

Vì vậy, 0 == 0 một lần nữa…

ép buộc mọi lúc-2

Bảng 3 – Tóm tắt nhanh

bảng điều khiển-3-1

Đây là sự thật

0 == "0" // true

Bởi vì sự ép buộc biến điều này thành 0 == ToNumber("0").

Đây là sự thật

0 == [] // true

Bởi vì sự ép buộc chạy hai lần:

  1. ToPrimitive([]) đưa ra chuỗi rỗng
  2. sau đó ToNumber("") cho 0.

Vì vậy, sau đó cho tôi biết … theo các quy tắc trên, cái này nên trả về cái gì?

"0" == []

Bảng 4 – SAI!

bảng điều khiển-4-1

SAI! Chính xác.

Đọc thêm  Có thể sử dụng toString để chuyển đổi entero và cadena de texto

Phần này có ý nghĩa nếu bạn hiểu các quy tắc.

Đây là so sánh của chúng tôi:

"0" == [] // false

Tham khảo thông số kỹ thuật một lần nữa:

Nếu x là Chuỗi hoặc Số và y là Đối tượng, trả về x == ToPrimitive(y)

Điều đó có nghĩa là…

Vì “0” là Chuỗi và [] là Đối tượng, trả về x == ToPrimitive([])

ToPrimitive([]) trả về chuỗi rỗng. So sánh bây giờ đã trở thành

"0" == ""

"0""" là cả hai chuỗi, vì vậy JavaScript nói không cần ép buộc nữa. Đây là lý do tại sao chúng tôi nhận được false.

Phần kết luận

chỉ-dùng-ba-bằng

Sử dụng ba bằng và ngủ ngon vào ban đêm.

0 === "0" // false
0 === [] // false
"0" === [] // false

Nó hoàn toàn tránh được sự ép buộc, vì vậy tôi đoán nó cũng hiệu quả hơn!

Nhưng việc tăng hiệu suất gần như vô nghĩa. Chiến thắng thực sự là bạn sẽ có thêm sự tự tin trong mã của mình, khiến cho lần nhấn phím bổ sung đó hoàn toàn xứng đáng.

Muốn được huấn luyện miễn phí?

Nếu bạn muốn lên lịch miễn phí Cuộc gọi 15-30 phút để thảo luận về các câu hỏi phát triển Front-End liên quan đến mã, phỏng vấn, nghề nghiệp hoặc bất kỳ điều gì khác theo dõi tôi trên Twitter và DM cho tôi.

Sau đó, nếu bạn thích cuộc gặp đầu tiên của chúng ta, chúng ta có thể thảo luận về mối quan hệ huấn luyện đang diễn ra sẽ giúp bạn đạt được các mục tiêu phát triển Front-End của mình!

Cảm ơn vì đã đọc

Để biết thêm nội dung như thế này, hãy xem https://yazeedb.com!

Cho đến lần sau!





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status