Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích
Bạn có thể gặp những thứ như i ++ , –i trong vòng lặp hoặc **! ** khi viết điều kiện. Bạn đã bao giờ tự hỏi những hoạt động này hoạt động như thế nào chưa? Đây là các toán tử đơn phân và ta sẽ xem xét sâu hơn về cách chúng hoạt động.
Toán tử là gì?
Về mặt toán học, một phép toán là một phép tính trên một hoặc nhiều giá trị được gọi là ánh xạ toán hạng tới một giá trị kết quả . Toán tử là một ký hiệu / ký hiệu ánh xạ các toán hạng đến các giá trị kết quả .
Toán tử một ngôi là gì?
Toán tử một ngôi là toán tử nhận một toán hạng / đối số và thực hiện một phép toán.
Phép toán một ngôi là một phép toán chỉ có một toán hạng. Toán hạng này đứng trước hoặc sau toán tử.
Các toán tử đơn nguyên hiệu quả hơn các lệnh gọi hàm JavaScript tiêu chuẩn. Ngoài ra, không thể overrides các toán tử đơn nguyên, do đó chức năng của chúng được đảm bảo.
Tóm tắt tất cả các toán tử một ngôi
| Nhà điều hành | Giải trình |
|---|---|
| Cộng một bậc (+) | Cố gắng chuyển đổi toán hạng thành một số |
| * Phủ định một bậc (-) * | Cố gắng chuyển đổi toán hạng thành một số và phủ định sau |
| Không logic (!) | Chuyển đổi thành giá trị boolean sau đó phủ định nó |
| Tăng dần (++) | Thêm một vào toán hạng của nó |
| Giảm dần (-) | Giảm đi một từ toán hạng của nó |
| Bitwise không (~) | Đảo ngược tất cả các bit trong toán hạng và trả về một số |
| loại | Trả về một chuỗi là kiểu của toán hạng |
| xóa bỏ | Xóa index cụ thể của một mảng hoặc thuộc tính cụ thể của một đối tượng |
| vô hiệu | Loại bỏ giá trị trả về của một biểu thức. |
Cộng một bậc (+)
Toán tử này đứng trước toán hạng và cố gắng chuyển nó thành một số.
Nó có thể chuyển đổi tất cả các biểu diễn chuỗi của số, giá trị boolean (đúng và sai) và null thành số. Các con số sẽ bao gồm cả số nguyên, số thực, số thập lục phân, ký hiệu khoa học (số mũ) và Infinity.
Nếu toán hạng không thể chuyển thành số, toán tử cộng một bậc sẽ trả về NaN .
Ví dụ:
+3 // returns 3
+'-3' // returns -3
+'3.14' // returns 3.14
+'3' // returns 3
+'0xFF' // returns 255
+true // returns 1
+'123e-5' // returns 0.00123
+false // returns 0
+null // returns 0
+'Infinity' // returns Infinity
+'infinity' // returns NaN
+function(val){ return val } // returns NaN
Hình minh họa trên cho thấy rõ toán tử + sẽ hoạt động như thế nào khi được áp dụng cho các kiểu dữ liệu khác nhau.
- Các con số sẽ không bị thay đổi.
- Ký hiệu chuỗi của một số, ví dụ '3' được chuyển đổi thành số đó ( 3 ).
- Giá trị boolean true được chuyển đổi thành 1 và false thành 0.
- Các loại khác, ví dụ như chức năng và đối tượng được chuyển đổi thành NaN.
Ghi chú
Một đối tượng chỉ có thể được chuyển đổi nếu nó có khóa valueOf và hàm của nó trả về bất kỳ kiểu nào ở trên.
+{
valueOf: function(){
return '0xFF'
}
}
//returns 255
Phủ định một bậc (-)
Nó cũng đứng trước toán hạng và chuyển đổi các kiểu dữ liệu không phải số thành số như cộng một bậc, tuy nhiên, nó thực hiện một phép toán bổ sung, phủ định.
Cộng một lần được coi là cách nhanh nhất và được ưa thích để thực hiện chuyển đổi vì nó không thực hiện thêm bất kỳ thao tác nào.
Cả phủ định một ngôi và cộng đều thực hiện thao tác tương tự như hàm Number () đối với các số không phải là số.
Ví dụ:
-3 // returns -3
-'-3' // returns 3
-'3.14' // returns -3.14
-'3' // returns -3
-'0xFF' // returns -255
-true // returns -1
-'123e-5' // returns -0.00123
-false // returns -0
-null // returns -0
-'Infinity' // returns -Infinity
-'infinity' // returns NaN
-function(val){ return val } // returns NaN
-{ valueOf: function(){
return '0xFF'
}
} //returns -255
Không logic (!)
Toán tử này đứng trước toán hạng. Nó chuyển đổi toán hạng thành tương đương boolean trước khi phủ định nó.
Ví dụ:
!false // returns true
!NaN // returns true
!0 // returns true
!null // returns true
!undefined // returns true
!"" // returns true
!true // returns false
!-3 // returns false
!"-3" // returns false
!42 // returns false
!"42" // returns false
!"foo" // returns false
!"true" // returns false
!"false" // returns false
!{} // returns false
![] // returns false
!function(){} // returns false
Hình minh họa trên cho thấy cách logic không trả về ** false ** nếu toán hạng có thể được chuyển đổi thành true, nếu không thì trả về false.
Bạn có thể sử dụng phủ định kép (!!)
Hãy để ta xem xét một ví dụ tuyệt vời hơn:
!!'hi' === true // returns true
!!1 === true // returns true
!!0 === false // returns true
Tại sao đúng?
Vì vậy, ta thực hiện từ phải sang trái.
!'hi' //returns false
Sau đó:
!false //returns true
Như vậy:
true === true //returns true
Tăng dần (++)
Toán tử này thêm một vào toán hạng của nó và trả về kết quả.
Nó được dùng như một toán tử hậu tố hoặc tiền tố.
- Postfix: - nghĩa là toán tử đứng sau toán hạng (y ++). Điều này trả về giá trị trước khi tăng dần.
- Tiền tố: - toán tử đứng trước toán hạng (++ y). Sử dụng nó làm tiền tố, trả về giá trị sau khi tăng dần.
Ví dụ:
Postfix
x = 4 // x=4
y = x++ // y = 4 and x = 5
// y is set to the value before incrementing and it adds 1 to x
// Be careful about resetting values when using postfix
var a = 5 // a = 5
a = a++ // a = 5
// a is set to the value before incrementing
Tiếp đầu ngữ
x = 4 // x=4
y = ++x // y = 5 and x = 5
// y is set to the value after incrementing and it adds 1 to x
var a = 5 // a = 5
a = ++a // a = 6
// a is set to the value after incrementing
Giảm dần (-)
Toán tử giảm dần trừ một từ toán hạng của nó.
Nó trả về một giá trị trước khi giảm dần nếu nó là hậu tố. Tiền tố nó trả về giá trị sau khi giảm dần.
Ví dụ:
Postfix
var a = 5 // a = 5
a = a-- // a = 5
// a is set to the value before incrementing
x = 4 // x=4
y = x-- // y = 4 and x = 3
// sets y to the value before decrementing and it removes 1 from x
Tiếp đầu ngữ
var a = 5 // a = 5
a = --a // a = 4
// a is set to the value after incrementing
x = 4 // x=4
y = --x // y =3 and x = 3
// sets y to the value after incrementing and it adds 1 to x
Bitwise không (~)
Thực hiện phép toán NOT binary , bằng cách đảo ngược tất cả các bit trong toán hạng và trả về một số.
Một chút không trên một số dẫn đến: - (x + 1) .
| a | Không phải là một |
|---|---|
| 0 | 1 |
| 1 | 0 |
Ví dụ:
~2 //returns -3
~'2' //returns -3
~'-3' // returns 2
-'-3.14' // returns 2
~'-3.54' // returns 2
~'0xFF' // returns -256
~true // returns -2
~'123e-5' // returns -1
~false // returns -1
~null // returns -1
~'Infinity' // returns -1
~'infinity' // returns -1
~function(val){ return val } // returns -1
~{ valueOf: function(){
return '0xFF'
}
} //returns -256
Bảng bên dưới xem xét sâu hơn về cách hoạt động này được thực hiện.
| (cơ số 10) | (cơ số 2) | Không phải (cơ số 2) | Không (cơ số 10) |
|---|---|---|---|
| 2 | 00000010 | 11111101 | -3 |
| 1 | 00000001 | 11111110 | -2 |
| 0 | 00000000 | 11111111 | -1 |
| -1 | 11111111 | 00000000 | 0 |
| -2 | 11111110 | 00000001 | 1 |
| -3 | 11111101 | 00000010 | 2 |
loại
Toán tử này đứng trước toán hạng. Nó trả về một chuỗi chỉ ra kiểu dữ liệu của toán hạng.
Ví dụ:
typeof 2 // returns 'number'
typeof -3.14 // returns 'number'
typeof 0xFF // returns 'number'
typeof 123e-5 // returns 'number'
typeof true // returns 'boolean'
typeof false // returns 'boolean'
typeof null // returns 'object'
typeof Infinity // returns 'number'
typeof '2' // returns 'string'
typeof '-3' // returns 'string'
typeof 'infinity' // returns 'string'
typeof Date() // returns 'string'
typeof [1,2,3] // returns 'object'
typeof {hi: 'world'} // returns 'object'
typeof function(val){ return val } // returns 'function'
typeof { valueOf: function(){
return '0xFF'
}
} // returns 'object'
typeof undefined // returns 'undefined'
typeof hi // returns 'undefined'
typeof NaN // returns 'number'
typeof new Date() // returns 'object'
typeof /ab+c/ // returns 'object'
typeof new RegExp('ab+c') // returns 'object'
typeof document // returns 'undefined'
xóa bỏ:
Nó cũng đến trước toán hạng. Nó xóa các giá trị của một index cụ thể của một mảng và một thuộc tính cụ thể của một đối tượng.
Nó trả về true nếu nó đã xóa thành công thuộc tính hoặc nếu thuộc tính không tồn tại.
Nó trả về ** false ** nếu nó không xóa được một mục.
Xóa không có bất kỳ ảnh hưởng nào đến cả hàm và biến. Hãy xem các ví dụ sau.
// Deleting a variable
var hi = 1;
delete hi; // returns false
console.log(hi); // returns 1
// Deleting a function
function yo(){ };
delete yo; // returns false
console.log(yo); // returns function foo(){ }
// Deleting an object
var pub = {bar: '1'}
delete pub // returns false
console.log(pub); // returns {bar: '1'}
//Deleting an array
var code = [1,1,2,3,5]
delete code // returns false
console.log(code); // [1,1,2,3,5]
Các đối tượng
Như đã nêu trước đó, nó xóa thuộc tính hoặc toàn bộ đối tượng.
Ví dụ:
// Deleting a property with the literal notation
var fruits = {1: 'apple', 2: 'mango'}
delete fruits[1] // returns true
console.log(fruits); // returns { '2': 'mango' }
console.log(fruits[1]); // returns undefined
// Deleting a property with the dot notation
var pub = { bar: "42" };
delete pub.bar; // returns true
console.log(pub); // returns {}
// Deleting a property that does not exist
var lunch = { fries: 1 };
delete lunch.beans; // returns true
console.log(lunch); // returns { fries: 1 }
// Deleting a non-configurable property of a predefined object
delete Math.PI; // returns false console.log(Math.PI); // returns 3.141592653589793
Thuộc tính không thể cấu hình
Xóa không ảnh hưởng đến một thuộc tính đối tượng không thể cấu hình . Nó sẽ luôn trả về false.
Trong chế độ nghiêm ngặt, điều này sẽ gây ra lỗi SyntaxError.
Ví dụ:
// When Non Configurable
var Person = {};
Object.defineProperty(Person, 'name', { value: 'Scot', configurable: false })
// Defines an object property and sets it to non-configurable
console.log(Person.value); // returns 'Scot'
delete Person.value // returns false
console.log(Person.value); // returns 'Scot'
// When configurable
var b = {};
Object.defineProperty(Person, 'name', { value: 'Scot', configurable: true })
console.log(b.value); // returns 'Scot'
delete b.value // returns true
console.log(b.value); // returns undefined
Đọc thêm về defineProperty ()
var, let và const tạo các thuộc tính không thể cấu hình mà không thể xóa bằng toán tử xóa:
Thí dụ:
var num = 1;
// We can access this global property using:
Object.getOwnPropertyDescriptor(window, 'num') // returns { value: 'XYZ',
// writable: true,
// enumerable: true,
// configurable: false } delete num; // returns false
// Node
Object.getOwnPropertyDescriptor(global, 'num')
// returns { value: 'XYZ',
// writable: true,
// enumerable: true,
// configurable: false }
// regular objects
var lunch = { fries: 1 }; Object.getOwnPropertyDescriptor(lunch, 'fries')
// returns { value: 1,
// writable: true,
// enumerable: true,
// configurable: true }
Lưu ý từ khóa var được đánh dấu là không thể cấu hình
Mảng
Mảng được coi là đối tượng kiểu trong javascript. Vì vậy, phương pháp này sẽ hoạt động trên chúng.
Ví dụ:
// Deleting values of an array index
var lol=[20,30,40];
console.log(lol.length); // returns 3
delete lol[2] // returns true
console.log(lol); // returns [ 20, 30, ]
console.log(lol[2]); // returns undefined
console.log(lol.length); // returns 3
Ghi chú
Toán tử xóa sẽ chỉ xóa giá trị và * không phải chỉ số * của mảng. Nó sẽ để lại giá trị của index cụ thể đó là không xác định. Đây là lý do tại sao độ dài không thay đổi.
chế độ nghiêm ngặt
Trong chế độ nghiêm ngặt, xóa sẽ ném ra một Lỗi cú pháp do việc sử dụng tham chiếu trực tiếp đến một biến, một đối số hàm hoặc một tên hàm.
‘use strict’
var fruits = {1:'mango', 2:'apple'};
delete fruits;
// Output: Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
function Person() {
delete name; // SyntaxError
var name; }
function yo() {
}
delete yo; // SyntaxError
Dưới đây là một số lưu ý cần luôn cân nhắc khi sử dụng xóa:
Cố gắng xóa một thuộc tính không tồn tại, xóa sẽ trả về true nhưng sẽ không có ảnh hưởng đến đối tượng.
Xóa chỉ ảnh hưởng đến các thuộc tính của đối tượng. Điều này nghĩa là nếu một thuộc tính có cùng tên tồn tại trên chuỗi nguyên mẫu của đối tượng, thì việc xóa sẽ không ảnh hưởng đến nó. Sau khi xóa, đối tượng sẽ sử dụng thuộc tính từ chuỗi nguyên mẫu.
Biến được khai báo var , _ let_ và const không thể bị xóa khỏi phạm vi toàn cục hoặc khỏi phạm vi của một hàm.
- Ý nghĩa: - Delete không thể xóa bất kỳ chức năng nào trong phạm vi toàn cục hoặc trong phạm vi chức năng.
- Xóa hoạt động trên các chức năng là một phần của đối tượng (ngoài phạm vi toàn cục).
Không thể xóa các thuộc tính không thể cấu hình .
Xóa không hoạt động trên bất kỳ đối tượng tích hợp nào như Math, Array, Object hoặc các thuộc tính được tạo dưới dạng không thể cấu hình bằng các phương thức như Object.defineProperty ().
Toán tử hư không:
Nó đi trước một hoạt động. Nó loại bỏ giá trị trả về của một biểu thức, nghĩa là nó đánh giá một biểu thức nhưng trả về không xác định.
Mục đích chính của toán tử Void là trả về không xác định. Toán tử void chỉ định một biểu thức được đánh giá mà không trả về giá trị.
Toán tử void được sử dụng theo một trong hai cách sau:
void (biểu thức)
biểu thức vô hiệu
Ghi chú:
Toán tử void không phải là một hàm, vì vậy () không bắt buộc, nhưng bạn nên sử dụng chúng theo MDN
Thí dụ:
void 0 // returns undefined
var hi = function () {
console.log('Yap')
return 4;
}
var result = hi() // logs 'Yap' and returns 4
console.log(result); // returns 4
var voidResult = void (hi()) // logs 'Yap' and returns undefined
console.log(voidResult); // returns undefined
Toán tử void được dùng để chỉ định một biểu thức như một liên kết siêu văn bản. Biểu thức được đánh giá nhưng không được tải ở vị trí của tài liệu hiện tại.
Một số ví dụ khác
<a href="javascript:void(0)">Click here to do nothing</a>
Đoạn mã trên tạo ra một liên kết không có tác dụng gì khi user nhấp vào nó. Điều này là do void (0) đánh giá là không xác định.
<a href="javascript:void(document.form.submit())">
Click here to submit</a>
Mã này tạo ra một liên kết gửi biểu mẫu khi user nhấp vào nó.
Kết luận
Luôn xem xét thứ tự của các hoạt động khi giao dịch với nhiều hơn một toán tử. Đây là một thực tiễn tốt trong việc giảm thiểu các lỗi không lường trước được.
Dưới đây là một bảng ngắn gọn cho thấy thứ tự ưu tiên trong các thao tác khi sử dụng Javascript. Các toán hạng cùng cấp có cùng thứ tự ưu tiên.
| Loại nhà điều hành | Người điều hành | Thí dụ |
|---|---|---|
| thành viên | . [] | [1,2,3] |
| gọi / tạo version | () Mới | var xe = new Xe (); |
| phủ định / gia tăng | ! ~ - + ++ - xóa void typeof | typeof [1,2,2] |
| nhân / chia | * /% | 3% 3 |
| cộng / trừ | + - | 3 + 3 |
| dịch chuyển bitwise | << >> >>> | 9 << 2 |
| quan hệ | <<=>> = in instanceof | [1] instanceof Array |
| * bình đẳng * | ==! = ===! == | void (0) === undefined |
| bitwise-và | & | 5 & 1 |
| * bitwise-xor * | ^ | 5 ^ 1 |
| bitwise-hoặc | \ | |
| logic-và | && | x <10 && y> 1 |
| logic-hoặc | \ | \ |
| có điều kiện | ?: | (tuổi <18)? “Quá trẻ”: “Đủ tuổi” |
| sự phân công | = + = - = * = / =% = << = >> = >>> = & = ^ = \ | = |
| * dấu phẩy * | , | b = 3, c = 4 |
Các tin liên quan
Lời hứa của JavaScript dành cho người giả2020-09-15
Sao chép các đối tượng trong JavaScript
2020-09-15
Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu
2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript
2020-09-15
Hiểu Hoisting trong JavaScript
2020-09-15
5 Mẹo để Viết Điều kiện Tốt hơn trong JavaScript
2020-09-15
Hiểu Vòng lặp sự kiện, Gọi lại, Hứa hẹn và Không đồng bộ / Chờ đợi trong JavaScript
2020-09-10
Bốn phương pháp để tìm kiếm thông qua các mảng trong JavaScript
2020-09-09
Sử dụng phương thức Array.find trong JavaScript
2020-09-09
split () Phương thức chuỗi trong JavaScript
2020-09-09
