(Object:: khá quan trọng trong việc tiến xa và hiệu quả phát triển code)
** Trước tiên NODE.JS là gì?
~ Nó là javascript runtime
~ Vì sao runtime: vì nó được cài lên máy tính và tạo lên 1 môi trường độc lập để chạy những đoạn code JS trong đó (mà ko cần 1 số môi trường như trình duyệt)
~ Và để Nodejs chạy được JS thì t cần 1 cái gọi là “chrome V8 js engine”
~ Nodejs có thằng npm là nó chứa toàn bộ những thư viện mình cần
✅Introducing Javascript Objects
Object basics
Dot notation (sử dụng dấu chấm)
Sub-namespaces (Không gian tên phụ)
+ Object có tên thuộc tính (đó là sub-namespaces)
+ Từ array chuyển sang kiểu object dễ dàng
Bracket notation (sử dụng khung [ten_thuoc_tinh])
+ object[ten_thuoc_tinh]
Object-oriented JavaScript for beginners(javascript hướng đối tượng cho người bắt đầu)
The Object() constructor
+ let avaible = new Object() / new Object({ten_thuoc_tinh: value})
Using create() method (tuy nhiên bị hạn chế ở 1 số browsers)
+ let object_2 = Object.create(object_1)
Object prototypes (đối tượng nguyên mẫu ~ là cơ chế các đối tượng Javascript kế thừa các tính năng từ nhau)
A prototype-báed language? (Một ngôn ngữ dựa trên nguyên mẫu)
+ JS thường được mô tả như một ngôn ngữ dựa trên nguyên mẫu - để cung cấp tính kế thừa
+ Một đối tượng có thể có một đối tượng nguyên mẫu, hoạt động như một đối tượng mẫu mà nó kế thừa các phương thức và thuộc tính
+ Đối tượng nguyên mẫu của một đối tượng cũng có thể là một đối tượng nguyên mẫu, đối tượng này kế thừa các phương thức và thuộc tính,
+> tất cả giải thích các đối tượng khác nhau có các thuộc tính và phương thức được xác định trên các đối tượng khác có sẵn cho chúng,
+ Trên các hàm khởi tạo (constructor function) thì ::
Note:: từ ES6 có thể truy cập gián tiếp đối tượng nguyên mẫu thông qua Object.getPrototypeOf (obj)
The prototype property: Where inherited members are defined
+ Những cái được kế thừa là những cái được xác định trên thuộc tính nguyên mẫu (prototype property) ~ đó là những cái bắt đầu từ “Object.prototype.” not “Object.”
Working with JSON - Converting between object and text
JSON.parse():: Nhận vào chuỗi và trả về object tương ứng
JSON.stringify():: Nhận vào 1 object và trả về chuỗi JSON tương ứng
JSON là gì:
+ Là một định dạng dữ liệu miêu tả dưới dạng key-value
+ Khá giống object trong js → nhưng có điểm khác biệt
+ Key: phải nằm trong dấu ngoặc kép
+ Value: chỉ cho phép numbers, String, Booleans, arrays, objects, null, → ko có function, date, undefined
~~~~~
✅Asynchronous JavaScript
~ Cơ chế hoạt động:
+ Các method sẽ chạy và push vào call stack, sau đó pop ra ngoài
+ Đối với async method thì sẽ push vào call stack, nhưng ko thực thi -> đợi thực thi cuối cùng chờ xử lý
+ push vào call stack và được gửi sang WebAPIs xử lý, lúc này sẽ chứa timer, đợi sau timer fn sẽ được gửi sang callback Queue chờ xử lý
+ Cuối cùng sau timer, Event loop check callback Queue thấy tòn tại callback, lúc này nó thấy call stack đang trống, nên nó push callback vào call stack và thực thi xử lý.
-> Trong js, async xảy ra khi + Call api, setTimeout, setInterval, XMLHttpRequest, file reading, RequestAnimationFrame
Cooperative asynchronous JavaScript:: Timeouts and interval (JS không hợp tác đồng bộ:: hết thời gian và khoảng thời gian)
setTimeout():: Thực thi code 1 lần sau khi thời gian cụ thể trôi qua
setInterval():: Thực thi lặp đi lặp lại 1 đạo code với không thời gian cố định giữa mỗi cuộc gọi
clearTimeout():: Nếu thời gian được tạo, trước khi set timeout cho nó
EX::
// clear time out if exist
if (typeof this.currentTimeOut !== 'undefined') {
clearTimeout(this.currentTimeOut);
}
// set time out
this.currentTimeOut = setTimeout(() => {
this.currentTimeOut = undefined;
//Action handle
this.cdr.markForCheck();
}, timeout);
clearInterval():: interval sẽ chạy mãi, nếu muốn dừng lại sử dụng clearInterval()
—————————————————————————————————————
Variables
+ biến - là vùng chứa, để chưa 1 giá trị nào đó, mà ngôn ngữ lập trình nào cũng có
+ Giá trị có thể sẽ được thay đổi theo thời gian khi cần thiết
+ variable names(tên biến), including function(bao gồm tên hàm):: tuân theo quy tắc đặt tên, bắt đầu từ { a-z, A-Z, $ or _ }, then là { 0 - 9 }
F:: Có những từ không thể đk sử dụng làm variable nhưng được dùng làm tên thuộc tính:: những từ này gọi là “reserved words(từ dành riêng)” và bao gồm những từ khoá JS(for, in,if, etc.) cũng như là null, true, false
Block (khối)
+ 1 khối lệnh thường được đặt trong dấu {…}
+ Nó có thể đứng độc lập, nhưng ko thường thấy trong chương trình JS
Conditionals
+ Khi bị ép thành boolean thì giá trị như “”, 0 đều có giá trị là “false”
Loops (vòng lặp)
+ Tiêu biểu có while(dk){}, do{}…while()
+ Ta có thể sử dụng break để thót khỏi vòng lặp
Values & Types
+ string, number, boolean, null, undefined, object, symbol
+ Các biến chỉ là các vùng chứa đơn giản cho các giá trị, chỉ các giá trị có loại trong js -> vậy nên kiểu giá trị ko phải của a mà là của giá trị trong a
+ typeof null = object -> khá thú vị phải ko!
+ Null là có gán giá trị rỗng, còn undefined là biến chưa được xác định và cũng chưa gán giá trị nào
+ Có 1 vài kiểu array/function. Chúng được coi là phiên bản chuyên biệt của kiểu đối tượng
Arrays
+ Là đối tượng chứa các giá trị, không đặc biệt như cách đặt tên thuộc tính/key, các vị trí có chỉ mục số
+ typeof của arr=[] -> object
+ Mảng tính số chỉ mục bắt đầu từ số 0 -> vì là đối tượng đặc biệt, chúng có thể có properties, tự động cập nhật độ dài của properties
Functions
+ Object khác có kiểu đối tượng function
Built-In Type Methods
+ Các kiểu và kiểu con tích hợp có những hành vi được hiển thị dưới dạng các thộc tính, phương pháp khá mạnh mẽ
+ let a = ‘string’ | a.lenght, a.toUpperCase()
+ let b = number | b.toFixed(2)
Comparing values
+ 2 kiểu so sánh: bình đẳng(equality) và bất bình đẳng(inequality)
+ Kết quả đều quy về dạng boolean
- Equality:
+ Operators: ==, ===, !=, !==
+ == and === -> Theo cách hiểu là “==“ so sánh giá trị, “===“ so sánh giá trị và kiểu. Tuy nhiên
—> “==“ là so sánh giá trị với sự ép buộc được phép, còn “===“ so sánh giá trị mà không cho phép sự ép buộc (ép kiểu)
- Equality:
+ Có 4 toán tử bình đẳng: ==, ===,!=, Và !==. Các ! là phiên bản đối xứng
-> ss a=b: js nhận thấy rằng các kiểu không khớp với nhau, vì thế nó sẽ thử nghiệm 1 loạt sự ép kiểu 1 hoặc cả 2 giá trị sang 1 kiểu khác cho đến khi các kiểu khác nhau
Coercion (Ép kiểu)
+ explicit / implicit
+ EX: Number( string );
Truthy & Falsy
+ Khi một giá trị không phải là boolean bị ép buộc thành boolean, nó sẽ trở thành true / false tương ứng
+ List of falsy:
> “” (empty string).
> 0, -0, NaN (invalid number).
> null, undefined.
> false.
+ List of truthy -> Tất cả những dạng không thuộc list of falsy thì sẽ là truthy
Function scopes (phạm vi chức năng)
+ Use var keyword::
+ Hoisting: Gọi biến hoặc hàm trước khi khai báo var a = 2;
+ Nested scopes:: Khi khai báo 1 biến thì nó sẽ ở bất cứ đâu trong phạm vi
Conditionals(Điều kiện)
Syntax:: if...else if…else
+ Dài dòng thay thế bằng :: switch…case
+ Bỏ “break” có thể hữu ích để thực thi câu lệnh tiếp theo, coi như 2 case cùng hành động
Strict mode (Chế độ nghiêm ngặt)
+ Từ ES5 đã thêm strict mode cho JS
+ Được áp dụng cho phạm vi sử dụng (giống như phạm vi sử dụng keyword var)
Function as values
+ Immediately Invoked Function Expressions (IIFEs):: Biểu thức hàm gọi ngày lập tức
+ Closure(khép kín):: Sử dụng biến tham chiếu ngoài fn(x){}
+ Modules
“This” Identifier (mã định danh ‘this’)
Nothing
Prototypes(Khuân mẫu)
+ ví dụ:: khi ta có 1 object foo = {a: 1, b: 2}
Foo.c = 3
-> foo = { a: 1, b: 2, c: 3 }
Old & New
+ Polyfilling
+ Transpiling
-> Hiện tại mình đang dùng Transpiling, cú pháp mới
Non-Javascript
+ Một số phương thức không phải của JS mà là 1 bên thứ 3 nào đó
Như là:: var el = document.getElementById( "foo" ) hay alert(), hay nữa là console.log()
—————————————————————————————————————
TIP:: ❤️
~ Sự khác nhau giữa i++ và ++i
i++ là i chưa được cộng sau khi hàm chạy;
++i là i đã được cộng ngay thời điểm đó, và show i.
—————————————————————————————————————
✅Callback trong JS
~ Là một function sẽ được thực thi sau khi 1 function khác được thực thi xong. / đơn giản hơn là 1 hàm sẽ được gọi bởi 1 hàm khác
~ Tại sao cần callbacks::
+ Js là ngôn ngữ hướng sự kiện (có nghĩa là thay vì chờ phản hồi trước khi tiếp tục thì js sẽ tiếp tục thực thi trong khi lắng nghe các sự kiệ n khác - tiếp tục thực thi các sự kiện khác thay vì đợi)
~ Chắc chắn tham số phải là function
function b(name, callback) {
return callback(name);
}
function c(name){
return name;
}
console.log(b(‘name’, c));
~~~Tương tự~~~
function b(name, callback) {
callback(name);
}
function c(name){
console.log(name)
}
b(’name’, c) //excuse
—————————————————————————————————————
~~~~~
Chi tiết❤️
OBJECT ( không hẳn là tất cả những gì của JS là object )
+ Type trong JS có 6 loại ( string, number, boolean, null, undefined, object )
+ Array/fn đều là 1 dạng object (sub-object, array có thêm hành vi, và cấu trúc phức tạp hơn tý)
+ instanceof kiểm tra sự hiện diện của constructor.prototype trong chuỗi nguyên mẫu của object
+ delete:: Xoá thuộc tính của object
+ Kiểm tra sự tồn tại: myObj.hasOwnProperty(‘property’)
Array (mảng)
+ Sử dụng biểu mẫu []
✅Types & Grammar (Loại và ngữ pháp)
Types (loại kiểu)
+ JS định nghĩa ra 7 loại kiểu:: null, undefined, boolean, number, string, object, symbol (added in ES6)
+ typeof null = ‘object’
+ “typeof” luôn trả về dạng string
Values as Types
+ In JS:: các biến(variable) không có kiểu - giá trị (value) mới có kiểu
Undefined # “Undeclared” (không xác định # không khai báo)
+ In JS:: Không xác định khác so với không khai báo
Values (giá trị)
Arrays (mảng)
+ Không nên sử dụng “delete” cho mảng
Array - likes
+ Dùng slice() để trả về 1 mảng giống mảng đã chọn dưới dạng mảng mới, slice(start, end)
String (Chuỗi)
+ Chuỗi string không giống như mảng ký tự
+ Dùng split(), tách chuỗi thành dạng mảng
Numeric syntax
+ Dùng .toFixed(number):: Cho phép chỉ định cho phép bao nhiêu số sau giá trị thập phân
+ Dải số nguyên an toàn(safe integer ranges):: Number.MAX_SAFE_INTEGER | Number.MIN_SAFE_INTEGER
(Chỉ có 16 kí tự số)
+ Nếu muốn ép kiểu (string to number)::
+”0”, Number(“0”), JSON.parse(“0”)
+ (number to string)
const a = number;
a.toString(), a + “”, String(a), JSON.stringify(a)
Nếu a = 0 | -0, All => result:: “0” ~ Xảy ra vấn đề giá trị âm thành dương -> sai
Nếu a # 0 | -0, All => result return đúng
OPERATORS || AND &&
+ Giá trị được tạo ra từ && or || toán tử ko nhất thiết thuộc kiểu Boolean.
+ Giá trị được tạo ra sẽ luôn là giá trị của 1 trong 2 toán hạng.
var a = 42;
var b = "abc";
var c = null;
a || b; // 42
a && b; // "abc"
c || b; // "abc"
c && b; // null
=>
+ Đối với || : Nếu toán hạng -> true, sẽ return giá trị đầu tiên
Nếu toán hàng -> false, sẽ return giá trị thứ 2.
+ Đối với &&: Nếu toán hạng -> true, sẽ return giá trị thứ 2
Nếu toán hạng -> false, sẽ return giá trị đầu tiên
a || b;=>> a ? a : b;
a && b; =>> a ? b : a
LOOSE EQUALS VS STRICT EQUALS (Bình đẳng lỏng lẻo vs bình đẳng nghiêm ngặt)
(==) vs (===)
+ Hiệu suất không quan trọng nếu nó cùng kiểu
+ Nếu khác kiểu và cần ép kiểu (coercion) thì hiệu suất quan trọng
-> If you want coercion, use == loose equality, but if you don’t want coercion, use === strict quality.
+ Những cách xử lý tốt nhất::
vả a = “42”;
if(a) ~ good, if(!!a) ~ better, if(Boolean(a)) ~ also great
Compare: null to undefined
+ Khi so sánh == or ===: thì 2 giá trị giống nhau
var a = null; var b; -> a==b, a===b, all -> true
-> do vậy, khi code, nếu ko biết giá trị trả về null or undefined thì dùng cách sau::
var a = doSomething();
if(a == null){} -> Lúc này chỉ có null or undefined thoả mãn
Một số ép kiểu có thể an toàn, hợp lý và chấp nhận được::
42 == "42"; // true
"foo" == [ "foo" ]; . // true
GRAMMAR
Switch…case
+ Sử dụng switch thay cho if..else
+ Khi muốn ngắt sử dụng:: break
✅✅Difference between WINDOWN, DOCUMENT and SCREEN in JAVASCRIPT
+ Tìm hiểu BOM (Browser Object Model) and DOM (Document Object Model)
Browser Object Model:: Chưa các đối tượng đại diện cho của sổ (Windows) or tab trình duyệt hiện tại
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
TIP - JAVASCRIPT ❤️✅