Php so sánh lỏng lẻo

Như tên gọi của nó, toán tử gán (toán tử gán, ký hiệu. =) được sử dụng để gán giá trị cho các biến. Các nhà phát triển thường nhầm lẫn với toán tử bình đẳng (toán tử đẳng thức)

This is a ví dụ

const name = "javascript";

if ((name = "nodejs")) {

    console.log(name);

}

// output - nodejs

Tên biến và chuỗi 'nodejs' không được so sánh trong trường hợp này. Thay vào đó, 'nodejs' được gán cho tên và được đưa vào bảng điều khiển

Trong JavaScript, dấu bằng kép (==) và dấu bằng ba (===) được gọi là toán tử so sánh (toán tử so sánh)

Đối chiếu với đoạn mã trên, dưới đây mới là cách thích hợp để so sánh các giá trị

const name = "javascript";

if (name == "nodejs") {

    console.log(name);

}

// no output

// OR

if (name === "nodejs") {

    console.log(name);

}

// no output

Sự khác biệt giữa các toán tử so sánh này là dấu bằng kép thực hiện so sánh nhẹ nhàng (so sánh lỏng lẻo) và dấu bằng ba thực hiện so sánh chặt chẽ (so sánh nghiêm ngặt)

Trong so sánh lỏng lẻo, chỉ các giá trị được so sánh. Nhưng trong một so sánh nghiêm ngặt, các giá trị và cả kiểu dữ liệu đều được so sánh

Như đoạn mã sau đây

const number = "1";

console.log(number == 1);

// true

console.log(number === 1);

// false

Biến số được gán giá trị chuỗi là 1. Khi so sánh với 1 (thuộc kiểu số) bằng cách sử dụng ==, nó trả về đúng vì cả hai giá trị đều là 1

Nhưng khi so sánh bằng cách sử dụng ===, nó trả về false vì mỗi giá trị có một kiểu dữ liệu khác nhau

2. Mong đợi tất cả các cuộc gọi lại đồng bộ

Callback (gọi lại) là một cách mà JavaScript xử lý các hoạt động không đồng bộ. Tuy nhiên, Promise và async/await new là các phương thức thích hợp hơn để xử lý các hoạt động không đồng bộ vì nhiều lệnh gọi lại sẽ dẫn đến địa chỉ gọi lại

Callback không đồng bộ. Chúng được sử dụng như một chức năng được gọi sau một hoạt động khi hoàn thành quá trình thực thi bị trì hoãn

Một ví dụ là hàm setTimeout nhận hàm gọi lại làm đối số đầu tiên và thời lượng (tính bằng ms) là đối số thứ hai như sau

function callback() {

​​    console.log("I am the first");

​​}

​​setTimeout(callback, 300);

​​console.log("I am the last");

​​// output

​​// I am the last

​​// I am the first

Sau 300 mili giây, hàm gọi lại được gọi. Nhưng trước khi nó hoàn thành, phần còn lại của mã sẽ chạy. Đó là lý do tại sao console. log end was running first

Một sai lầm phổ biến mà các nhà phát triển đang thắc mắc phải hiểu sai lệnh gọi lại là đồng bộ. Ví dụ, một lệnh gọi lại trả về giá trị mà đáng lẽ nó sẽ được sử dụng cho các hoạt động khác

Sai lỗi đó như sau

function addTwoNumbers() {

​​    let firstNumber = 5;

​​    let secondNumber;

​​    setTimeout(function () {

​​        secondNumber = 10;

​​    }, 200);

​​    console.log(firstNumber + secondNumber);

​​}

​​addTwoNumbers();

​​// NaN

NaN là đầu ra bởi vì secondNumber không được xác định. Tại thời điểm chạy firstNumber + secondNumber, secondNumber vẫn chưa được xác định vì hàm setTimeout sẽ thực hiện lệnh gọi lại sau 200ms

Cách tốt nhất để tiếp cận bài toán này là thực thi phần còn lại của mã trong hàm gọi lại

function addTwoNumbers() {

​​    let firstNumber = 5;

​​    let secondNumber;

​​    setTimeout(function () {

​​        secondNumber = 10;

​​        console.log(firstNumber + secondNumber);

​​    }, 200);

​​}

​​addTwoNumbers();

​​// 15

3. Tham khảo sai đến điều này

đây là một khái niệm thường bị hiểu nhầm trong JavaScript. Để sử dụng điều này trong JavaScript, bạn thực sự cần hiểu cách hoạt động của nó vì nó hoạt động hơi khác so với các ngôn ngữ còn lại

Dưới đây là một ví dụ về một lỗi phổ biến khi sử dụng điều này

const obj = {

​​    name: "JavaScript",

​​    printName: function () {

​​        console.log(this.name);

​​    },

​​    printNameIn2Secs: function () {

​​        setTimeout(function () {

​​            console.log(this.name);

​​        }, 2000);

​​    },

​​};

​​obj.printName();

​​// JavaScript

​​obj.printNameIn2Secs();

​​// undefined

Kết quả đầu tiên là JavaScript vì điều này. name trỏ chính xác đến thuộc tính tên của đối tượng (object). Kết quả thứ hai là không xác định vì điều này đã làm mất tham chiếu đến các thuộc tính của đối tượng (bao gồm cả tên)

Điều này là làm điều này phụ thuộc vào đối tượng gọi hàm mà nó tồn tại trong đó. Có một biến this trong mọi hàm nhưng các đối tượng mà nó trỏ đến lại được xác định bởi các đối tượng gọi nó

this trong obj. printName() trỏ trực tiếp đến obj. this trong obj. printNameIn2Secs trỏ trực tiếp đến obj. Nhưng this trong hàm gọi lại của setTimeout không trỏ đến bất kỳ đối tượng nào vì không có đối tượng nào gọi nó

Theo đó, một đối tượng được gọi là setTimeout, hay đại loại như obj. setTimeout. will be done thi. Vì không có đối tượng nào gọi hàm nên đối tượng mặc định (cửa sổ) được sử dụng

name không tồn tại trên cửa sổ, dẫn đến undefined

Cách tốt nhất để giữ lại tham chiếu this trong setTimeout là sử dụng hàm bind​, call​, apply​ or arrow (được giới thiệu trong ES6). Không giống như thông thường hàm, mũi tên hàm không tạo ra cái này của riêng chúng

Vì vậy, mã như sau sẽ có thể giữ nguyên tham chiếu đến điều này

const obj = {

    tên. "Javascript",

    printName. chức năng () {

        bảng điều khiển. nhật ký (cái này. tên);

    },

    printNameIn2Secs. chức năng () {

        setTimeout(() => {

          bảng điều khiển. nhật ký (cái này. tên);

        }, 2000);

    },

};

đối tượng. printName();

//JavaScript

đối tượng. printNameIn2Secs();

//JavaScript

4. Bỏ qua khả năng thay đổi của đối tượng

Không giống như các kiểu dữ liệu nguyên thủy như chuỗi, số, v. v. , in the JavaScript objects are reference data type. Ví dụ. in the key-value object (đối tượng khóa-giá trị)

const obj1 = {

    tên. "Javascript",

};

const obj2 = obj1;

đối tượng2. tên = "lập trình";

bảng điều khiển. nhật ký (obj1. tên);

// lập trình

obj1 và obj2 có cùng tham chiếu đến vị trí trong bộ nhớ nơi lưu trữ đối tượng

Trong mảng

const arr1 = [2, 3, 4];

const mảng2 = mảng1;

arr2[0] = "javascript";

bảng điều khiển. nhật ký (mảng1);

// ['javascript', 3, 4]

Một sai lầm phổ biến mà các nhà phát triển thắc mắc phải là họ coi thường bản chất này của JavaScript và điều này dẫn đến các lỗi không mong muốn. Ví dụ. nếu 5 đối tượng có cùng tham chiếu đến cùng một đối tượng, thì một trong các đối tượng có thể dựa vào các thuộc tính (thuộc tính) trong một codebase quy mô lớn

Khi điều này xảy ra, bất kỳ nỗ lực nào để truy cập vào các thuộc tính ban đầu sẽ trả về không xác định hoặc có thể gây ra lỗi

Cách tốt nhất để tránh và giải quyết lỗi này là luôn tạo các tham chiếu mới cho các đối tượng mới khi bạn muốn nhân bản một đối tượng. Để làm điều này, toán tử còn lại (toán tử còn lại, ký hiệu. được giới thiệu trong ES6) là một giải pháp hoàn hảo

Ví dụ. trong key-value của các đối tượng

const obj1 = {

    tên. "Javascript",

};

const obj2 = {. obj1 };

bảng điều khiển. nhật ký (obj2);

// {tên. 'JavaScript' }

đối tượng2. tên = "lập trình";

bảng điều khiển. nhật ký (obj. tên);

// 'JavaScript'

Trong mảng.  

const arr1 = [2, 3, 4];

const arr2 = [. mảng1];

bảng điều khiển. nhật ký (mảng2);

// [2,3,4]

arr2[0] = "javascript";

bảng điều khiển. nhật ký (mảng1);

// [2, 3, 4]

5. Lưu mảng và đối tượng vào bộ nhớ của trình duyệt

Thỉnh thoảng khi làm việc với JavaScript, các nhà phát triển có thể muốn tận hưởng localStorage để lưu các giá trị. Nhưng một sai lầm phổ biến ở đây là cố gắng lưu các mảng và đối tượng trạng thái trong localStorage. localStorage chỉ chấp nhận các chuỗi

Trong nỗ lực lưu các đối tượng, JavaScript chuyển đối tượng thành một chuỗi. Vì thế đừng khóc khi kết quả mà bạn nhận được là [đối tượng đối tượng] cho các đối tượng và một chuỗi được phân tách bằng dấu phẩy cho các phần tử mảng

Ví dụ

const obj = { tên. "JavaScript" };

cửa sổ. lưu trữ cục bộ. setItem("đối tượng thử nghiệm", obj);

bảng điều khiển. nhật ký (cửa sổ. lưu trữ cục bộ. getItem("đối tượng kiểm tra"));

// [Đối tượng đối tượng]

const arr = ["JavaScript", "lập trình", 45];

cửa sổ. lưu trữ cục bộ. setItem("mảng kiểm tra", arr);

bảng điều khiển. nhật ký (cửa sổ. lưu trữ cục bộ. getItem("mảng kiểm tra"));

// JavaScript, lập trình, 45

Khi các đối tượng được lưu như vậy, rất khó để truy cập chúng. At ví dụ, việc truy cập các đối tượng như. name sẽ dẫn đến lỗi. Do [object object] bây giờ là một chuỗi, không thuộc tính name

Một cách tốt hơn để lưu các đối tượng và mảng trong bộ nhớ cục bộ là sử dụng JSON. stringify (để chuyển đối tượng thành chuỗi) và JSON. parse (để chuyển đổi chuỗi thành đối tượng). Bằng cách này, việc truy cập các đối tượng trở nên dễ dàng

Phiên bản chính xác của đoạn mã trên sẽ là

const obj = { tên. "JavaScript" };

cửa sổ. lưu trữ cục bộ. setItem("đối tượng thử nghiệm", JSON. stringify(obj));

const objInStorage = cửa sổ. lưu trữ cục bộ. getItem("đối tượng kiểm tra");

bảng điều khiển. nhật ký (JSON. phân tích cú pháp (objInStorage));

// {tên. 'JavaScript'}

const arr = ["JavaScript", "lập trình", 45];

cửa sổ. lưu trữ cục bộ. setItem("mảng kiểm tra", JSON. xâu chuỗi (mảng));

const arrInStorage = cửa sổ. lưu trữ cục bộ. getItem("mảng kiểm tra");

bảng điều khiển. nhật ký (JSON. phân tích cú pháp (arrInStorage));

// JavaScript, lập trình, 45

6. Không sử dụng được các giá trị mặc định

Đặt giá trị mặc định (default value) trong các biến động (biến động) là một cách rất tốt để ngăn chặn các lỗi không mong muốn. Đây là một ví dụ về một biến phổ biến

hàm addTwoNumbers(a, b) {

    bảng điều khiển. log(a + b);

}

addTwoNumbers();

// NaN

Kết quả trả về NaN bờ vì a là không xác định và b cũng không xác định. Khi sử dụng giá trị mặc định, lỗi như thế này sẽ được ngăn chặn. Ví dụ.  

hàm addTwoNumbers(a, b) {

    nếu (. a) a = 0;

    nếu (. b) b = 0;

    bảng điều khiển. log(a + b);

}

addTwoNumbers();

// 0

Ngoài ra, tính năng giá trị mặc định được giới thiệu trong ES6 có thể được sử dụng như sau

hàm addTwoNumbers(a = 0, b = 0) {

    bảng điều khiển. log(a + b);

}

addTwoNumbers();

// 0

Ví dụ này nhấn mạnh tầm quan trọng của các giá trị mặc định. Ngoài ra, các nhà phát triển có thể cung cấp lỗi hoặc thông báo cảnh báo khi có các giá trị bên ngoài mong đợi được cung cấp

7. Đặt tên biến sai

Vâng, các nhà phát triển vẫn đang hỏi lỗi này. Việc đặt tên rất khó, nhưng đó là điều cơ bản và bạn không nên thắc mắc những sai lầm phản bác

Ví dụ

hàm tổng(giảm giá, p) {

    trả p * giảm giá

}

Biến giảm thì ok thôi, nhưng còn p và tổng?

hàm totalPrice(giảm giá, giá) {

    giảm giá hoàn trả * giá

}

Việc đặt tên biến đúng cách là rất quan trọng vì hiện tại và tương lai luôn có nhiều lập trình viên khác cùng làm việc với bạn trên một cơ sở mã. Đặt tên các biến đúng cách sẽ giúp mọi người dễ dàng hiểu được cách hoạt động của một dự án

8. Kiểm tra các giá trị boolean

const isRaining = false

nếu(isRaining) {

    bảng điều khiển. log('Trời đang mưa')

} khác {

    bảng điều khiển. log('Trời không mưa')

}

// Trời không mưa

Kiểm tra các giá trị boolean rất phổ biến như có thể tìm thấy trong đoạn mã trên. Ổn định, nhưng lỗi xuất hiện lại khi kiểm tra một số giá trị

Trong JavaScript, so sánh lỏng lẻo của 0 và false trả về true, và 1 và true trả về true. Điều này có nghĩa là nếu isRain là 1, isRain sẽ là true

Đây cũng là một lỗi thường thắc mắc phải ở các đối tượng. Ví dụ

const obj = {

    tên. 'Javascript',

    số. 0

}

nếu (đối tượng. con số) {

    bảng điều khiển. log('thuộc tính số tồn tại')

} khác {

    bảng điều khiển. log('thuộc tính số không tồn tại')

}

// thuộc tính số không tồn tại

Mặc dù thuộc tính số tồn tại, obj. number trả về 0, is a false value, do that block other được thực thi

Vì vậy, trừ khi bạn chắc chắn về phạm vi giá trị sẽ được sử dụng, giá trị và thuộc tính boolean trong các đối tượng nên được kiểm tra như sau

nếu (a === sai)

nếu (đối tượng. hasOwnProperty(thuộc tính))

Dấu cộng (+) có hai chức năng trong JavaScript. plus and connection. Add-unabledable cho các số và nối là cho các chuỗi. Một số nhà phát triển thường sử dụng sai toán tử này

Ví dụ

const num1 = 30;

const num2 = "20";

const num3 = 30;

const word1 = "Java"

const word2 = "Tập lệnh"

bảng điều khiển. log(num1 + num2);

// 3020

bảng điều khiển. log(num1 + num3);

// 60

bảng điều khiển. nhật ký(từ1 + từ2);

//JavaScript

Khi thêm chuỗi và số, JavaScript sẽ chuyển đổi chuỗi số thành chuỗi và kết nối tất cả các giá trị. Để cộng các số, phép toán phải được thực hiện

Kết luận

Hãy đảm bảo rằng bạn luôn cập nhật những phát triển và thay đổi mới trong ngôn ngữ JavaScript. Nghiên cứu và tránh những sai lầm này sẽ giúp bạn xây dựng các ứng dụng và công cụ web tốt hơn và trở thành một lập trình viên JavaScript đáng tin cậy hơn

Trên đây là các thông tin về JavaScipt,   nếu muốn học thêm các khóa học lập trình khác, đừng quên liên hệ với chúng tôi tại Viện Công nghệ thông tin T3H nhé