Tổng quan ECMAScript 6

ECMAScript (ES) là một đặc tả ngôn ngữ kịch bản được chuẩn hóa bởi ECMAScript International. Được được dùng cho các ứng dụng cho phép kịch bản phía máy khách (client-side). Các ngôn ngữ như JavaScript, Jscript và ActionScript được điều chỉnh bởi đặc tả này. Các bài viết sẽ hướng dẫn về ES6 trong JavaScript.

Các bài viết sẽ hướng tới các nhà phát triển (developer) JavaScript muốn tìm hiểu sự khác biệt giữa ECMAScript 5 và ECMAScript 6. Các bài viết cũng hữu dụng cho những người muốn học những kỹ thuật mới nhất trong JavaScript.

Yêu cầu tiên quyết

Bạn cần có kiến thức nền tảng về JavaScript để có thể tiếp thu tốt nhất những hướng dẫn sau đây.

JavaScript (JS)

JavaScript được phát triển bởi Brendan Eich, là một developer tại Netscape Communications Corporation năm 1995. JavaScript ban đầu có tên Mocha, sau đó chuyển sang tên LiveScript trước khi có tên chính thức là JavaScript. JS là ngôn ngữ kịch bản được thực thi bởi trình duyệt, tức ở điểm cuối của trình khách. Nó được dùng cùng với HTML để phát triển các website đáp ứng (responsive).

Những chủ đề chính về ECMA Script6 ta sẽ bàn đến gồm:

  • Hỗ trợ hằng số
  • Phạm vi khối
  • Hàm mũi tên (=>)
  • Xử lý tham số mở rộng
  • Literal mẫu
  • Literal mở rộng
  • Các thuộc tính Object nâng cao
  • Áp đặt lại cấu trúc
  • Module
  • Class
  • Lặp
  • Generator
  • Collection
  • Các phương thức mới xây dựng cho các lớp khác nhau
  • Promise

ES6: Cài đặt

Bài viết này sẽ hướng dẫn các cách cài đặt môi trường cho ES6.

Thiết lập môi trường cục bộ

JavaScript có thể chạy trên mọi trình duyệt, mọi host, mọi hệ điều hành. Ta sẽ cần những điều sau đây để viết và test code JavaScript.

Trình soạn thảo văn bản

Ta cần một trình soạn thảo văn bản để soạn viết code JS, ta có thể dùng đến Notepad, Notepad++, Emacs, vim hoặc vi, Sublime Text, DreamWeaver. Sau khi soạn code xong ta sẽ lưu file với đuổi mở rộng là .js.

Cài đặt Node.js

Node.js là một môi trường runtime đa nền tảng, mã nguồn mở cho JavaScript phía máy chủ (server-side). Node.js được yêu cầu để chạy JavaScript mà không cần trình duyệt hỗ trợ nếu sử dụng engine Google V8 JavaScript. Ta có thể download Node.js hoặc bản cài pre-built tại https://nodejs.org/en/download.

Cài đặt trên Window

Download và chạy bản cài đặt .msi

MSI Installer

Để xác nhận việc cài đặt thành công hay không thì ta mở terminal và soạn câu lệnh: node -v

Cài đặt trên Mac OS X

Để cài đặt Node.js trên OS X ta có thể download bản pre-compiled binary package cho dễ dàng cài đặt. Ta truy cập vào nodejs.org và nhấn nút Install để download package mới nhất.

Latest Package

Sau đó tiến hành cài đặt từ .dmg bằng cách làm theo các hướng dẫn cài đặt để cài đặt cả node và npm. npm là Node Package Manager và nó sẽ cài đặt các gói bổ sung cho Node.js.

Install Node

Cài đặt trên Linux

Ta cần cài đặt các dependency trước khi cài Node.js và npm.

  • Ruby và GCC. Ta cần Ruby 1.8.6 hoặc cao hơn và GCC 4.2 hoặc cao hơn

  • Homebrew. Homebrew là trình quản lý gói gốc dành cho Mac, nó cũng được chuyển sang cho Linux là Linuxbrew.

Hỗ trợ Môi trường Phát triển Tích hợp (IDE)

JavaScript có thể được xây dựng trên một IDE như Visual Studio, Sublime Text 3, WebStorm/PHPStorm, Eclipse, Brackets, DreamWeaver, ...

ES6: Cú pháp

Cú pháp xác định bộ quy tắc để viết chương trình. Mỗi đặc tả ngôn ngữ sẽ định nghĩa một cú pháp riêng.

Một chương trình JavaScript có thể bao gồm:

  • Biến - Đại diện cho một khối bộ nhớ được đặt tên có thể lưu trữ các giá trị cho chương trình.

  • Literal - Đại diện cho các giá trị không đổi/cố định.

  • Toán tử - Ký hiệu xác định cách xử lý toán hạng.

  • Từ khóa - Những từ có ý nghĩa đặc biệt trong ngữ cảnh của ngôn ngữ.

Bảng sau liệt kê một số từ khóa trong JavaScript. Một số từ khóa phổ biến được liệt kê trong bảng sau:

break as any switch
case if throw else
var number string get
module type instanceof Typeof
finally for enum export
while void this new
null super catch let
static return true false
  • Các mô-đun - Đại diện cho các khối mã có thể được sử dụng lại trên các chương trình/tập lệnh khác nhau.

  • Comment - Được sử dụng để cải thiện khả năng đọc mã, tạo chú thích, rào code. Chúng bị bỏ qua bởi công cụ JavaScript.

  • Đặt tên (định danh) - Đây là các tên được đặt cho các thành phần trong chương trình như biến, hàm, v.v. Các quy tắc cho mã định danh gồm:

    • Tên có thể bao gồm ký tự và chữ số. Tuy nhiên, tên không thể bắt đầu bằng một chữ số.

    • Tên không thể bao gồm các ký hiệu đặc biệt ngoại trừ dấu gạch dưới (_) hoặc ký hiệu đô la ($).

    • Tên không thể là từ khóa. Chúng phải là duy nhất.

    • Tên không được chứa dấu cách.

Bảng sau đây minh họa một số tên hợp lệ và không hợp lệ.

Ví dụ đặt tên hợp lệ Ví dụ đặt tên không hợp lệ

firstName

first_name

num1

$result

Var#

first name

first-name

1number

Khoảng trắng và ngắt dòng

ES6 bỏ qua khoảng trắng, tab và dòng mới xuất hiện trong các chương trình. Bạn có thể sử dụng các khoảng trắng, tab và dòng mới một cách tự do trong chương trình của mình và bạn có thể tự do định dạng và thụt lề các chương trình của mình một cách gọn gàng và nhất quán giúp mã dễ đọc và dễ hiểu.

JavaScript phân biệt chữ hoa chữ thường

JavaScript phân biệt chữ hoa chữ thường. Điều này có nghĩa là JavaScript phân biệt giữa các ký tự chữ hoa và chữ thường.

Dấu chấm phẩy là tùy chọn

Mỗi dòng được coi là một lệnh. Nếu mỗi lệnh đặt trên một dòng thì dấu chấm phẩy là không bắt buộc.

Ví dụ

console.log("V1Study") 
console.log("Hello ES6")

Một dòng có thể chứa nhiều câu lệnh. Tuy nhiên, những câu lệnh này phải được phân tách bằng dấu chấm phẩy.

Comment

Comment là một cách để cải thiện khả năng đọc của một chương trình. Comment có thể được sử dụng để đưa vào thông tin bổ sung về một chương trình như tác giả của code, gợi ý về hàm/cấu trúc, v.v. Comment bị bỏ qua bởi trình biên dịch.

JavaScript hỗ trợ các loại comment sau:

  • Comment một dòng (//) - Bất kỳ văn bản nào nằm sau // được coi là một nhận xét.

  • Comment nhiều dòng (/* */) - Những comment này có thể trải dài trên nhiều dòng.

Ví dụ

//đây là comment 1 dòng
/* đây là comment
nhiều dòng
*/

Viết code JavaScript

Ta hãy bắt đầu với ví dụ truyền thống "Hello World".

Mở Sublime Text ra và soạn đoạn code sau:

var message = "Hello World" 
console.log(message)

Phân tích code:

  • Dòng 1 khai báo một biến. Các biến là một cơ chế để lưu trữ các giá trị trong một chương trình.

  • Dòng 2 in giá trị của biến. Ở đây, console sẽ tham chiếu đến terminal. Hàm log() được sử dụng để hiển thị văn bản trên màn hình.

Thực thi code

Chúng ta sẽ sử dụng Node.js để thực thi code.

  • Bước 1 - Lưu tệp dưới tên Test.js

  • Bước 2 - Nhấp chuột phải vào vùng bất kỳ của file rồi chọn Open in Browser

Node.js và JS/ES6

Các tính năng của ECMAScript 2015 (ES6) được phân thành ba nhóm:

  • For Shipping - Đây là những tính năng mà V8 coi là ổn định.

  • Staged Features - Đây là những tính năng gần như đã hoàn thành nhưng không được nhóm V8 coi là ổn định.

  • In Progress - Những tính năng này chỉ nên được sử dụng cho mục đích thử nghiệm.

Shipping được hỗ trợ đầy đủ và được bật theo mặc định theo nút. Staged yêu cầu một runtime -- cờ harmony để thực thi.

Ta có thể tham khảo danh sách các cờ CLI đặc tả thành phần cho Node.js tại https://nodejs.org/api/cli.html

Chế độ Strict

Phiên bản thứ năm của đặc tả ECMAScript đã giới thiệu Chế độ Strict. Chế độ này áp đặt một lớp ràng buộc đối với JavaScript. Nó thực hiện một số thay đổi đối với ngữ nghĩa JavaScript thông thường.

Code có thể được chuyển sang hoạt động ở Chế độ Strict bằng cách như sau:

// cú pháp chế độ strict
"use strict";
 v = "Xin chào! Đây là chế độ strict!";  // Lỗi: chưa khai báo biến v

Trong đoạn mã trên, toàn bộ mã chạy dưới dạng một biến thể bị ràng buộc của JavaScript.

JavaScript cũng cho phép hạn chế, Chế độ strict trong phạm vi của một khối như của một hàm. Điều này được minh họa như sau:

v = 15 
function f1() { 
   "use strict"; 
   var v = "Xin chào! Chế độ strict chỉ áp dụng trong f1()";
}

Trong đoạn mã trên, bất kỳ lệnh nào ngoài hàm sẽ chạy ở chế độ không strict. Tất cả các câu lệnh trong hàm sẽ được thực thi trong Chế độ strict.

ES6 và Hoistring

Công cụ JavaScript theo mặc định sẽ di chuyển các khai báo lên đầu. Tính năng này được gọi là hoisting. Tính năng này áp dụng cho các biến và hàm. Hoisting cho phép JavaScript sử dụng một thành phần trước khi nó được khai báo. Tuy nhiên, khái niệm hoisting không áp dụng cho các tập lệnh được chạy trong Chế độ strict.

Hoisting biến và hoisting hàm sẽ được giải thích trong các bài viết tiếp theo.

ES6: Biến

Một biến, theo định nghĩa, là “một không gian tên trong bộ nhớ” dùng để lưu giá trị hay dữ liệu. Nói cách khác, nó hoạt động như một thùng chứa các giá trị trong một chương trình. Tên biến được gọi là định danh. Sau đây là các quy tắc đặt tên cho một định danh:

  • Định danh không thể là từ khóa.

  • Định danh có thể chứa bảng chữ cái và số.

  • Định danh không thể chứa dấu cách và ký tự đặc biệt, ngoại trừ dấu gạch dưới (_) và ký hiệu đô la ($).

  • Tên biến không thể bắt đầu bằng một số.

Kiểu cú pháp

Một biến phải được khai báo trước khi nó được sử dụng. Cú pháp ES5 đã sử dụng từ khóa var để đạt được điều tương tự. Cú pháp ES5 để khai báo một biến như sau:

//Khai báo biến sử dụng từ khóa var
var tên_biến

ES6 giới thiệu cú pháp khai báo biến sau:

  • Sử dụng let.
  • Sử dụng const.

Khởi tạo biến đề cập đến quá trình lưu trữ một giá trị trong biến ban đầu. Một biến có thể được khởi tạo tại thời điểm khai báo hoặc sau khai báo.

Cú pháp kiểu ES5 truyền thống để khai báo và khởi tạo một biến như sau:

//Khai báo và khởi tạo biến
var tên_biến = giá_trị

Ví dụ: Sử dụng biến trong ES5

var ten = "V1Study"
console.log("Giá trị trong biến là: " + ten)

JavaScript và kiểu động

JavaScript là một ngôn ngữ không định kiểu giống như PHP. Điều này có nghĩa là một biến JavaScript có thể giữ một giá trị của bất kỳ loại dữ liệu nào. Không giống như nhiều ngôn ngữ khác, bạn không phải nói với JavaScript trong quá trình khai báo biến loại giá trị mà biến sẽ lưu. Loại giá trị của một biến có thể thay đổi trong quá trình thực thi chương trình và JavaScript sẽ tự động xử lý nó. Tính năng này được gọi là kiểu động.

Phạm vi của biến JavaScript

Phạm vi của một biến là khu vực của chương trình mà nó được xác định, được sử dụng. Theo truyền thống, JavaScript chỉ định nghĩa hai phạm vi - global và local.

  • Phạm vi global - Một biến có phạm vi global có thể được truy cập từ bên trong bất kỳ phần nào của code JavaScript.

  • Phạm vi local - Một biến có phạm vi local có thể được truy cập từ bên trong một hàm nơi nó được khai báo.

Ví dụ:

Ví dụ sau khai báo hai biến cùng có tên number - một biến ngoài hàm (phạm vi toàn cục) và biến còn lại trong hàm (phạm vi cục bộ).

var number = 'v'
function checkValue() {
   var number = '1' 
   console.log("Giá trị của biến number trong hàm checkValue() là: " + number) 
}
console.log("Giá trị của biến number ngoài hàm checkValue() là: " + number) 
checkValue()

Biến khi được khai báo trong hàm sẽ chỉ hoạt động trong hàm đó và đây là biến cục bộ. Tuy nhiên, biến khi được truy cập bên ngoài hàm sẽ là biến toàn cục.

Đầu ra sau đây được hiển thị khi thực hiện thành công.

Giá trị của biến number trong hàm checkValue() là: v
Giá trị của biến number ngoài hàm checkValue() là: 1

ES6 định nghĩa một phạm vi biến mới đó là phạm vi Khối (Block).

let và phạm vi khối

Phạm vi khối giới hạn quyền truy cập của một biến vào khối mà nó được khai báo. Từ khóa var chỉ định phạm vi chức năng vào biến. Không giống như từ khóa var, từ khóa let cho phép tập lệnh hạn chế quyền truy cập vào biến tại khối bao gần nhất.

"use strict" 
function checkValue() { 
   var num = 1 
   console.log("Giá trị của num trong checkValue(): "+num) { 
      console.log("Bắt đầu khối inner") 
      let num = 2 
      console.log("Giá trị của num: "+num)  
   } 
} 
checkValue()

Trên đây là đoạn script khai báo một biến num trong phạm vi cục bộ của một hàm và khai báo lại nó trong một khối bằng cách sử dụng từ khóa let. Giá trị của biến phạm vi cục bộ được in khi biến được truy cập bên ngoài khối inner, trong khi biến phạm vi khối được tham chiếu trong khối inner.

Lưu ý - Chế độ strict là một cách để chọn tham gia biến thể JavaScript bị hạn chế.

Output sau đây được hiển thị khi thực hiện thành công.

Giá trị của num trong checkValue(): 1
Bắt đầu khối inner
Giá trị của num: 2

Ví dụ với letvar

var va = 1; 
var va = 2; 
console.log(va);

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

2

Còn đây là khai báo và sử dụng let:

let le = 1; 
let le = 2; 
console.log(le);

Đoạn code trên sẽ đưa ra lỗi: Identifier 'le' has already been declared. Bất kỳ biến nào được khai báo sử dụng từ khóa let đều được gán phạm vi khối.

const

Khai báo const tạo ra một tham chiếu chỉ đọc đến một giá trị. Điều đó không có nghĩa là giá trị mà nó giữ là bất biến, chỉ là định danh biến không thể được gán lại. Các hằng số có phạm vi khối, giống như các biến được định nghĩa bằng cách sử dụng câu lệnh let. Giá trị của hằng số không thể thay đổi thông qua việc gán lại và nó không thể được khai báo lại.

Các quy tắc sau đây đúng với một biến được khai báo bằng từ khóa const:

  • Các hằng số không thể được gán lại giá trị.

  • Một hằng số không thể được khai báo lại.

  • Một hằng số yêu cầu một bộ khởi tạo. Điều này có nghĩa là hằng số phải được khởi tạo trong quá trình khai báo.

  • Giá trị được gán cho một biến const là bất biến.

Ví dụ

const x = 1 
x = 1 // sẽ gặp lỗi !!

Đoạn mã trên sẽ trả về một lỗi vì hằng không thể được gán lại một giá trị. Biến hằng là bất biến.

ES6 và hoisting biến

Phạm vi của một biến được khai báo với var là bối cảnh thực thi hiện tại của nó, có thể là hàm hoặc biến toàn cục. Hoisting biến cho phép sử dụng một biến trong chương trình JavaScript, ngay cả trước khi nó được khai báo.

Ví dụ sau giải thích rõ hơn về khái niệm này.

var test = function() {
   for(var i = 0; i<5; i++) {
      console.log(i);
   }
   console.log("i có thể được truy cập ngoài phạm vi khối, i = " + i);
   console.log('i được hoist vào phạm vi hàm');
}
test();

Output:

0
1
2
3
4
i có thể được truy cập ngoài phạm vi khối, i = 5
i được hoist vào phạm vi hàm

JavaScript engine bên trong đại diện cho script như sau:

var test = function() {
   var i; // i được hoist vào phạm vi hàm
   for(var i = 0; i<5; i++) {
      console.log(i);
   }
   console.log("i có thể được truy cập ngoài phạm vi khối, i = " + i);
   console.log('i được hoist vào phạm vi hàm');
}
test();

Lưu ý - Khái niệm hoisting áp dụng cho khai báo biến, không áp dụng cho khởi tạo biến. Nên luôn luôn khai báo các biến ở trước phạm vi của chúng (trước biến toàn cục và trước hàm) để có thể giải quyết phạm vi của biến.

Phép toán

Biểu thức là một loại lệnh đặc biệt dùng để thực hiện một tính toán và trả về giá trị tương ứng. Mỗi biểu thức bao gồm:

  • Số hạng (hay toán hạng) - Thể hiện dữ liệu.

  • Phép toán (hay toán tử) - Xác định cách các số hạng sẽ được xử lý để tạo ra một giá trị.

Xét biểu thức 2 + 3, ở đây 2 và 3 là toán hạng và ký hiệu + (cộng) là phép toán. JavaScript hỗ trợ các loại toán tử sau:

Toán tử số học

Giả sử các giá trị trong biến a và b lần lượt là 10 và 5.

Phép toán Tác dụng Thí dụ
+ Phép cộng

Trả về tổng của các toán hạng.

a + b là 15
- Phép trừ

Trả về sự khác biệt của các giá trị.

a - b là 5
* Phép nhân

Trả về sản phẩm của các giá trị.

a * b là 50
/ Phép chia

Thực hiện một hoạt động phân chia và trả về thương số.

a / b là 2
% Mô-đun (chia lấy dư)

Thực hiện chia lấy phần dư.

a % b là 0
++ Tăng

Tăng giá trị của biến đi một.

a++ là 11
-- Giảm

Giảm giá trị của biến đi một.

a-- là 9

Toán tử quan hệ (hay so sánh)

Toán tử quan hệ kiểm tra hoặc xác định loại mối quan hệ giữa hai thực thể. Toán tử quan hệ trả về giá trị boolean, tức là true hoặc false.

Giả sử giá trị của A là 10 và B là 20.

Phép toán Ý nghĩa Ví dụ
> Lớn hơn (A> B) là false
< Nhỏ hơn (A <B) là true
>= Lớn hơn hoặc bằng (A> = B) là false
<= Nhỏ hơn hoặc bằng (A <= B) là true
== So sánh bằng (A == B) là false
!= So sánh không bằng (A != B) là true

Toán tử logic

Toán tử logic được sử dụng để kết hợp hai hoặc nhiều điều kiện. Các toán tử logic cũng trả về giá trị Boolean. Giả sử giá trị của biến A là 10 và B là 20.

Phép toán Ý nghĩa Ví dụ
&&

Toán tử chỉ trả về true nếu tất cả các biểu thức được chỉ định trả về true.

(A>10 && B>10) là false
|| Hoặc là

Toán tử trả về true nếu ít nhất một trong các biểu thức được chỉ định trả về true.

(A>10 || B>10) là true
! Không phải (phủ định)

Toán tử trả về nghịch đảo của kết quả của biểu thức. Ví dụ: !(7>5) trả về false.

!(A>10) là true

Toán tử bitwise (logic nhị phân)

JavaScript hỗ trợ các toán tử bitwise sau, lưu ý là trước khi thực hiện phép toán thì các toán hạng sẽ được chuyển sang số nhị phân.

Phép toán Cách dùng Ý nghĩa
Bitwise AND a & b Trả về 1 nếu cả a và b đều là 1, 0 nếu a hoặc b bằng 0
Bitwise OR a | b Trả về 1 nếu a hoặc b là 1, 0 nếu cả a và b đều là 0
Bitwise XOR ^ b Trả về 1 nếu a khác b, 0 nếu a giống b
Bitwise NOT ~a Theo công thức: ~a = -(a+1). Ví dụ: ~10 = -(10+1) = -11; ~-10 = -(-10+1) = 9
Dịch trái a << b Dịch trái b bit, tức là thêm b số 0 vào bên phải a. Ví dụ: 7<<2 = 7*2*2 = 28
Dịch phải a >> b Dịch phải b bit, tức là bỏ đi b bit bên phải số a. Ví dụ: 7>>2 = 1
Dịch phải điền 0 a >>> b Dịch phải b bit và thêm b bit 0 vào bên trái số a. Ví dụ: 7>>>2 = 001

Toán tử gán

Bảng sau đây tóm tắt các toán tử gán.

Toán tử & Mô tả

= (Gán thông thường)

Gán các giá trị ở bên phải cho biến nằm bên trái.

Ví dụ: C = A + B sẽ gán giá trị của A + B vào C

+= (Cộng và gán)

Ví dụ: C+ = A tương đương với C = C + A

-= (Trừ và gán)

Ví dụ: C -= A tương đương với C = C - A

*= (Nhân và gán)

Ví dụ C /= A tương đương với C = C * A

/= (Chia và gán)

Ví dụ C /= A tương đương với C = C / A

Lưu ý - Logic tương tự áp dụng cho các toán tử Bitwise, vì vậy chúng sẽ trở thành << =, >> =, >> =, & =, | = và ^ =.

Các toán tử khác

Toán tử phủ định (-)

var a = 4
var b = -a;
console.log("value of a: ",a);
console.log("value of b: ",b);

Output:

value of x: 4
value of y: -4

Toán tử nối chuỗi

Toán tử + khi được áp dụng cho chuỗi sẽ nối thêm chuỗi thứ hai vào chuỗi thứ nhất. Chương trình sau đây để hiểu khái niệm này.

var a = "hello"+"world"
console.log(a)

Output:

helloworld

Phép toán 3 ngôi: điều kiện (?:)

Phép toán này được sử dụng để biểu diễn một biểu thức điều kiện. Toán tử điều kiện đôi khi cũng được gọi là toán tử ternary. Sau đây là cú pháp:

Điều_kiện ? trueVal : falseVal

Nếu Điều_kiện đúng thì trả về trueVal, ngược lại thì trả về falseVal.

Ví dụ

var number = 18
var ketQua = number%2==0 ? "Even" : "Odd"
console.log(ketQua)

Output:

Even

Toán tử typeof

typeof là loại toán tử một ngôi (unary). Toán tử này trả về một chuỗi là kiểu dữ liệu của toán hạng. Bảng sau liệt kê các kiểu dữ liệu và các giá trị được trả về bởi toán tử typeof trong JavaScript.

Kiểu Chuỗi được trả về bởi typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"

Ví dụ:

var str = "12"
console.log(typeof str);

Output:

number

Điều kiện

Cấu trúc điều kiện dùng để đánh giá một hoặc đa điều kiện trước khi lệnh hoặc khối lệnh được thực thi.

ES6: Điều kiện

Các cấu trúc có điều kiện trong JavaScript được phân loại trong bảng sau.

Điều kiện if

Cú pháp:

if(điều_kiện) {
   // khối_lệnh
}

Nếu điều_kiện là true thì khối_lệnh được thực thi.

Sơ đồ

ES6: điều kiện if

Ví dụ

var  a = 9
if (a%2==0) {
   console.log("a là số chẵn")
}

Output:

a là số chẵn

 

Điều kiện if-else

Cú pháp:

if(điều_kiện) {
   // khối_lệnh1
} else {
   // khối_lệnh2
}

Nếu điều_kiện là true thì khối_lệnh1 được thực thi, ngược lại thì khối_lệnh2 được thực thi.

Sơ đồ

ES6: Điều kiện if-else

Ví dụ

var age = 18
if (age < 18) {
   console.log("vị thành niên")
} else {
   console.log("công dân")
}

Output:

công dân

Điều kiện if-else nhiều bậc

Cú pháp

if(điều_kiện1) {
   // khối_lệnh1
} else if (điều_kiện2) {
   // khối_lệnh2
} else {
   // khối_lệnh3
}

Nếu điều_kiện1 là true thì khối_lệnh1 được thực thi, nếu không thì nếu điều_kiện2 đúng thì khối_lệnh2 được thực thi, nếu không thì khối_lệnh3 được thực thi.

Thí dụ

var number = 15
if (number < 0) {
   console.log("số âm")
} else if (number > 0) {
   console.log("số dương")
} else {
   console.log("không âm không dương")
}

Output:

số dương

Vòng lặp

Trong nhiều tình huống thì một lệnh hay một khối lệnh cần phải được thực hiện lặp đi lặp lại nhiều lần. Vòng lặp là một cách lý tưởng để thực hiện điều này. Một vòng lặp đại diện cho một tập hợp các lệnh phải được lặp. Trong ngữ cảnh của vòng lặp, sự lặp lại được gọi là phép lặp.

Hình dưới đây minh họa việc phân loại các vòng lặp:

Vòng lặp

Vòng lặp xác định (Definite)

Là vòng lặp mà ta có thể xác định được số lần lặp.

Vòng lặp for

Cú pháp:

for (khởi_tạo; điều_kiện; tăng_giảm) {
   //khối_lệnh
}

Vòng lặp for thực thi khối mã trong một số lần xác định. Nó có thể được sử dụng để lặp qua một tập hợp các giá trị cố định, chẳng hạn như một mảng. Ví dụ:

var num = 10
var total = 0;
for( let i = num ; i >= 1; i-- ) {
   total += i;
}
console.log(total);

Vòng lặp for có ba phần: phần khởi tạo (i = num), phần điều kiện (i> = 1) và phần tăng/giảm (i--).

Trong cùng một phần của vòng lặp for ta được quyền kết hợp nhiều lệnh phân cách nhau bằng dấu phẩy (,). Ví dụ vòng lặp sau đây in các số <30 của dãy Fibonacci.

"use strict"
for(let k, i = 0, j = 1; j<30; k = i, i = j, j = i + k)
console.log(j);

Output:

1 
1 
2 
3 
5 
8 
13 
21

Vòng lặp for...in

Vòng lặp for...in thường được sử dụng để lặp qua các thuộc tính của đối tượng.

Sau đây là cú pháp của 'cho vòng lặp trong'.

for (tên_biến in object) {
   khối_lệnh
}

Mỗi lần lặp thì một thuộc tính từ đối tượng được lấy và gán cho tên_biến và vòng lặp sẽ tiếp tục cho đến khi tất cả các thuộc tính của đối tượng được lấy hết.

Ví dụ

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
   console.log(obj[prop]);
}

Ví dụ trên minh họa việc lặp lại một đối tượng bằng vòng lặp for ... in. Đầu ra sau đây được hiển thị khi thực thi mã thành công.

1
2
3

Vòng lặp for...of

Vòng lặp for...of được sử dụng để lặp lại các vòng lặp thay vì các hằng đối tượng.

Cú pháp:

for (tên_biến of object) {
   khối_lệnh
}

Ví dụ:

for (let a of [12 , 13 , 123]) {
   console.log(a)
}

Output:

12
13
123

Vòng lặp không xác định (Indefinite)

Một vòng lặp không xác định sẽ được sử dụng khi ta không xác định được số lần lặp.

Vòng lặp while sẽ thực hiện kiểm tra điều kiện (condition) trước, nếu điều kiện đúng thì sẽ thực hiện khối lệnh rồi lại quay lên kiểm tra điều kiện, việc lặp được thực hiện cho đến khi điều kiện sai.

Sơ đồ

ES6: Vòng lặp while

Cú pháp

while (điều_kiện) {  
   khối_lệnh  
} 

Ví dụ

var n = 6;
var fa = 1;

while(n >= 1) {
   fa *= n;
   n--;
}
console.log("Giai thừa = " + fa);

Output:

Giai thừa = 720

Các lệnh điều khiển vòng lặp

Lệnh break

Câu lệnh break được sử dụng để thoát khỏi vòng lặp.

Ví dụ

var i = 1
while(i<= 10) {
   if (i % 5 == 0) {
      console.log("Số đầu tiên chia hết cho 5 trong đoạn [1,10] là : "+i)
      break  //thoát khỏi vòng lặp while
   }
   i++
}

Output:

Số đầu tiên chia hết cho 5 trong đoạn [1,10] là : 5

Lệnh continue

Câu lệnh continue sẽ bỏ qua lần lặp hiện thời của vòng lặp.

Ví dụ

var num = 0
var count = 0
for(num = 0; num <= 20; num++) {
   if (num % 2 == 0) {
      continue
   }
   count++
}
console.log("Số lượng những số lẻ trong đoạn [0,20] là: "+count)

Output:

Số lượng những số lẻ trong đoạn [0,20] là: 10

Sử dụng label để kiểm soát luồng xử lý

Một nhãn chỉ đơn giản là một định danh và theo sau nó là dấu hai chấm (:), được áp dụng cho một câu lệnh hoặc một khối lệnh. Một nhãn có thể được sử dụng với break và continue để có thể kiểm soát tốt hơn luồng xử lý trong lập trình.

Ngắt dòng không được phép nằm giữa câu lệnh 'continue' hay 'break' và tên nhãn. Ngoài ra, không được có bất kỳ lệnh nào khác ở giữa tên nhãn và vòng lặp liên quan.

Label với lệnh break

Một nhãn có thể được sử dụng với sự phá vỡ và tiếp tục kiểm soát dòng chảy chính xác hơn.

Ví dụ

outerLoop: // Đây là nhãn
for (var i = 0; i < 5; i++) { 
   console.log("Outer: " + i);

   innerLoop: // Đây là nhãn nữa
   for (var j = 0; j<5; j++) {  
      if (j>3 ) break; 
      
      // Thoát khỏi nhãn innerLoop  
      if (i == 2) break innerLoop;
      
      // Thoát khỏi nhãn outerLoop
      if (i == 4) break outerLoop;

      console.log("Inner: " + j);
   }
}

Kết quả:

Outer: 0 
Inner: 0 
Inner: 1 
Inner: 2 
Inner: 3 
Outer: 1 
Inner: 0 
Inner: 1 
Inner: 2 
Inner: 3 
Outer: 2 
Outer: 3 
Inner: 0 
Inner: 1 
Inner: 2 
Inner: 3 
Outer: 4

Label với lệnh continue

Nhắc lại là ngắt dòng không được phép giữa câu lệnh 'continue' hay 'break' và tên nhãn.

Ví dụ

outerLoop: // Đây là nhãn
for (var i = 0; i < 3; i++) {
   console.log("Outerloop: " + i);
   
   for (var j = 0; j < 5; j++) {
      if (j == 3){ //nếu j==3
         continue outerLoop; //thì sẽ bỏ qua lần lặp hiện thời của vòng lặp for ngoài
      }
      console.log("Innerloop: " + j );
   }
}

Output:

Outerloop: 0 
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Outerloop: 1 
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Outerloop: 2 
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 

ES6: Hàm (Function)

Hàm là khối lệnh có tên dùng để thực hiện một công việc cụ thể nào đó, nó có thể dể dàng bảo trì và tái sử dụng. Hàm được định nghĩa bằng cách sử dụng từ khóa function.

Cú pháp:

function tên_hàm(Các_đối_số_nhận_dữ_liệu) {
   // khối_lệnh_thực_thi_công_việc_cụ_thể
} 

Để hàm được thực thi thì ta phải gọi nó. Cú pháp gọi như sau:

function_name(Các_dữ_liệu)

Ví dụ:

//định nghĩa hàm
function test() {
   console.log("Hello function")
} 
//gọi hàm
test()

Output:

Hello function

Phân loại hàm

Các hàm được phần thành 2 loại chính là hàm trả về và hàm tham số.

Hàm trả về

Là loại hàm dùng để trả về giá trị sau khi xử lý dữ liệu, câu lệnh trả về ở đây là return.

Cú pháp:

function tên_hàm() {
   //khối_lệnh
   return dữ_liệu
}
  • Hàm trả về phải kết thúc bằng câu lệnh return.

  • Một hàm có thể trả về nhiều nhất một dữ liệu. Nói cách khác, chỉ có thể có một câu lệnh return được thực thi cho mỗi hàm.

  • Câu lệnh return phải là câu lệnh cuối cùng trong hàm nếu không các câu lệnh sau nó sẽ bị bỏ qua.

Ví dụ:

function retStr() {
   return "V1Study"
}
var val = retStr()
console.log(val)

Output:

V1Study

Hàm tham số

Tham số là loại cơ chế dùng để truyền dữ liệu cho các hàm xử lý. Các tham số tạo thành một phần của dấu hiệu nhận biết hàm. Dữ liệu được truyền cho hàm tại lời gọi hàm. Trừ khi được chỉ định rõ ràng, thì số lượng dữ liệu truyền cho hàm phải khớp với số lượng tham số được định nghĩa.

Cú pháp:

function tên_hàm(param1, param2, …, paramN) {
   khối_lệnh
}

Ví dụ:

function add( n1,n2) {
   var sum = n1 + n2
   console.log("The sum of the values entered "+sum)
}
add(12,13)

Output:

The sum of the values entered 25

Tham số mặc định của hàm

Trong ES6, hàm cho phép các tham số được khởi tạo các giá trị mặc định, nếu không có giá trị nào được truyền cho nó hoặc nó không được xác định.Ví dụ:

function addition(a, b = 1) { 
   return a+b; 
} 
console.log(addition(4))

Ở hàm trên thì b được đặt giá trị mặc định là 1, khi này 4 sẽ được truyền cho a. Output:

5

Giá trị mặc định của tham số sẽ được ghi đè nếu hàm truyền một giá trị cụ thể.

function addition(a, b = 1) {
   return a + b;
}
console.log(addition(4,2))

Trong trường hợp trên, a nhận 4, còn b nhận 2. Kết quả output:

6

Tham số rest

Tham số rest tương tự như trong Java. Tham số rest sẽ không giới hạn số lượng giá trị truyền cho một hàm. Tuy nhiên, tất cả các giá trị được truyền phải có cùng kiểu.

Ví dụ sử dụng:

function fun1(...params) {
   console.log(params.length);
}
fun1(); 
fun1(5);
fun1(5, 6, 7);

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

0 
1 
3

Lưu ý - Tham số rest phải là tham số cuối cùng trong danh sách tham số của hàm.

Hàm không tên (Anonymous)

Đây là loại hàm được tạo ra mà không mang bất kỳ một tên (định danh) nào. Loại hàm này thường được khai báo động khi chạy chương trình.

Cú pháp:

var tên_biến = function( các_đối_số ) { ... }

Ví dụ 1:

var ano = function(){ return "V1"}
console.log(ano())

Output:

V1

Ví dụ 2:

var area = function(x,y){ return x*y };
function prod() {
   var kq;
   kq = area(10,20);
   console.log("Area : " + kq)
}
prod()

Output:

Area : 200 

Hàm tạo Function

Ta hoàn toàn có thể định nghĩa một hàm theo cách rất linh hoạt bằng cách sử dụng hàm tạo Function() cùng với toán tử new.

Cú pháp:

var tên_biến = new Function(Arg1, Arg2, ..., "Thân_hàm");

Hàm tạo Function() chấp nhận số lượng đối số bất kỳ, trong đó đối số cuối là thân của hàm, nới chứa code xử lý dữ liệu trong đó các lệnh phân tách nhau bằng dấu chấm phẩy (;).

Hàm tạo Function() không được truyền bất kỳ đối số nào chỉ định tên cho hàm mà nó tạo.

Ví dụ:

var cons = new Function("a", "b", "return a+b;"); 
function test() { 
   var result
   result = cons(1,2); 
   console.log("Result : " + test)
} 
product()

Output:

Result : 3

Hàm đệ quy và hàm JavaScript

Hàm đệ quy là hàm gọi đến chính nó, trong hàm đệ quy cần cài đặt lệnh return và xác định điểm dừng. Kỹ thuật đệ quy được áp dụng tốt nhất khi ta cần gọi cùng một hàm nhiều lần với các tham số khác nhau từ trong một vòng lặp.

Ví dụ

function recu(n) {
   if(n<=0) {
      return 1;
   } else {
      return (n * recu(n-1))
   }
}
console.log(recu(6))

Ví dụ trên áp dụng kỹ thuật đệ quy để tính giai thừa (6!). Kết quả:

720

Ví dụ về hàm đệ quy ẩn danh

(function() { 
   var msg = "Hello Myself"
   console.log(msg)
})()

Hàm gọi chính nó bằng cách sử dụng một cặp dấu ngoặc đơn (). Kết quả:

Hello Myself

Hàm Lambda

Lambda đề cập đến các hàm ẩn danh trong lập trình. Hàm Lambda là một cơ chế ngắn gọn để biểu diễn các hàm ẩn danh. Các hàm dạng này còn được gọi là các hàm Mũi tên.

Phân tích hàm Lambda

Hàm Lambda gồm 3 phần:

  • Tham số - Có thể có hoặc không.

  • Mũi tên lambda có ký hiệu =>: Người ta còn gọi là đi vào toán tử.

  • Các lệnh - Nơi chứa phần xử lý dữ liệu của hàm.

Mẹo - Theo quy ước, việc sử dụng tham số một chữ cái được khuyến khích cho khai báo hàm nhỏ gọn và chuẩn xác.

Biểu thức Lambda

Đây là một biểu thức hàm ẩn danh chỉ đến một dòng lệnh. Cú pháp:

([param1, parma2, …, param n]) => Lệnh;

Ví dụ:

var test = (x) => 10 + x
console.log(test(10))

Output:

20

Lệnh Lambda

Đây là một khai báo hàm ẩn danh trỏ đến một khối lệnh. Cú pháp này được sử dụng khi thân hàm có nhiều dòng. Cú pháp:

([param1, parma2,…param n]) => {
   //khối lệnh
}

Ví dụ:

var test = ()=> {
   console.log("Lambda")
}
test()

Tham chiếu của hàm được trả về và được lưu trong biến test. Kết quả:

Lambda

Biến thể cú pháp

Nếu hàm có một tham số duy nhất thì ta viết như ví dụ sau:

var test = x=> { 
   console.log(x) 
} 
test(10)

Cặp ngoặc xoắn không bắt buộc khi chỉ có một lệnh, nếu không có đối số thì cần có cặp ngoặc tròn:

var test = ()=>console.log("Hello V1Study") 
test();

Biểu thức hàm và khai báo hàm

Biểu thức hàm và khai báo hàm là khác nhau, trong đó một khai báo hàm bị ràng buộc bởi tên hàm.

Sự khác biệt cơ bản giữa hai khái niệm này là khai báo hàm sẽ được phân tích cú pháp trước khi thực hiện, còn biểu thức hàm chỉ được phân tích cú pháp khi script engine gặp nó trong khi thực thi.

Khi trình phân tích cú pháp JavaScript gặp một hàm trong luồng code chính, nó sẽ hiểu đó là khai báo hàm, còn khi một hàm xuất hiện như một phần của câu lệnh, thì đó là biểu thức hàm.

Hoisting hàm

Cũng giống như các biến, các hàm cũng có thể được hoisting, khác ở một điểm là khi hàm khi được hoisting thì sẽ hoisting phần định nghĩa hàm thay vì chỉ hoisting tên của hàm.

Đoạn mã sau đây, minh họa việc hoisting hàm trong JavaScript.

funcHoist();
function funcHoist() {
   console.log("OK");
}

Output:

OK 

Tuy nhiên, các biểu thức chức năng không thể được hoisting. Đoạn code sau minh họa điều này:

funcHoist(); // TypeError: funcHoist() is not a function  
var funcHoist() = function() {
   console.log("OK"); 
};

Biểu thức hàm được gọi tức thì

Biểu thức hàm được gọi tức thì (Immediately Invoked Function Express - IIFE) có thể được sử dụng để tránh việc hoisting biến đổi từ bên trong các khối. Nó cho phép truy cập công khai vào các hàm trong khi vẫn giữ quyền riêng tư cho các biến được định nghĩa trong hàm. Mẫu này được gọi là một hàm ẩn danh tự thực hiện. Hai ví dụ sau đây giải thích rõ hơn về khái niệm này.

Ví dụ 1:

var vd1 = function() {
   var loop = function() {
      for(var a = 0; a<5; a++) {
         console.log(a);
      }
   }();
   console.log("a không thể được truy cập từ ngoài phạm vi khối, giá trị của x là :" + x);
}
vd1();

Ví dụ 2:

var vd2 = function() {
   (function() {
      for(var b = 0; b<5; b++) {
         console.log(b);
      }
   })();
   console.log("b không thể được truy cập từ ngoài phạm vi khối, b = " + b);
}
vd2();

Cả hai ví dụ sẽ hiển thị đầu ra sau.

0 
1 
2 
3 
4 
Uncaught ReferenceError: x is not define

Hàm tạo

Khi một hàm bình thường được gọi thì quyền điều khiển sẽ nằm trong hàm đó cho đến khi các lệnh trong hàm được thực hiện xong hoặc gặp lệnh return. Với các trình tạo trong ES6 thì các trình gọi hàm bây giờ có thể kiểm soát việc thực hiện hàm được gọi. Một trình tạo giống như một hàm thông thường ngoại trừ:

  • Các hàm có thể lấy lại quyền điều khiển cho người gọi bất cứ lúc nào.

  • Khi bạn gọi một bộ tạo thì nó không chạy ngay lập tức. Thay vào đó, bạn nhận lại một iterator. Hàm sẽ chạy khi bạn gọi phương thức tiếp theo của iterator.

Các trình tạo được biểu thị bằng cách thêm vào từ khóa hàm dấu hoa thị (*); còn lại thì cú pháp của chúng giống hệt với các hàm thông thường.

Ví dụ:

"use strict"
function* test() {
   // dấu * đánh dấu đây làm một generator
   yield 'đỏ';
   yield 'da cam';
   yield 'vàng';
   yield 'lục';
   yield 'lam';
   yield 'nâu';
   yield 'tím';
}
for(let mau of test()) {
   console.log(mau);
}

Generator cho phép giao tiếp hai chiều giữa trình gọi hàm và hàm được gọi. Điều này được thực hiện bằng cách sử dụng từ khóa yield.

Xét ví dụ sau:

function* ask() {
   const name = yield "Bạn tên gì?";
   const sport = yield "Bạn thích môn thể thao nào?";
   return `${name} thích môn thể thao ${sport}`;
}
const it = ask();
console.log(it.next());
console.log(it.next('Long'));
console.log(it.next('Bóng đá'));

Trình tự thực thi như sau:

  • Bộ tạo bắt đầu ở chế độ tạm dừng (paused); iterator được trả về.

  • it.next () sẽ cho phép nhập tên, bộ tạo tạm dừng, điều này được thực hiện bởi từ khóa yield.

  • Lời gọi it.next('Long') sẽ gán giá trị Long cho biến name và yield ra chuỗi "Bạn thích môn thể thao nào?", bộ tạo lại bị tạm dừng.

  • Lời gọi it.next ('Bóng đá') sẽ gán giá trị 'Bóng đá' cho biến sport và thực hiện câu lệnh return tiếp theo.

Kết quả:

{ 
   value: 'Bạn tên gì?', done: false 
} 
{
   value: 'Bạn thích môn thể thao nào?', done: false 
}
{
   value: 'Long thích môn thể thao Bóng đá', done: true 
}

Lưu ý: Các hàm của trình tạo không thể được biểu diễn bằng các hàm mũi tên.

Sự kiện

Nhiệm vụ của JavaScript là để tăng thêm khả năng tương tác với các trang web của bạn. JavaScript thực hiện điều này bằng cách sử dụng một cơ chế gọi là sự kiện. Các sự kiện là một phần của Mô hình Đối tượng Tài liệu (Document Object Model - DOM) Level 3 và mọi phần tử HTML đều chứa một tập hợp các sự kiện có thể kích hoạt Mã JavaScript.

Một sự kiện là một hành động hoặc sự xuất hiện được công nhận bởi phần mềm. Nó có thể được kích hoạt bởi người dùng hoặc hệ thống. Một số ví dụ phổ biến về các sự kiện như người dùng nhấp vào nút lệnh, tải trang web, nhấp vào siêu liên kết, v.v. Sau đây là một số sự kiện HTML phổ biến.

Xử lý sự kiện

Khi xảy ra một sự kiện, ứng dụng sẽ thực thi một tập hợp các tác vụ liên quan. Khối lệnh đạt được mục đích này được gọi là eventhandler. Mỗi phần tử HTML có một tập hợp các sự kiện liên quan đến nó. Ta có thể xác định cách các sự kiện sẽ được xử lý trong JavaScript bằng cách sử dụng các trình xử lý sự kiện.

Loại sự kiện onclick

Đây là loại sự kiện được sử dụng thường xuyên nhất xảy ra khi người dùng nhấp vào nút trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. cho loại sự kiện này.

Ví dụ

<html>
   <head>
      <script>
         function test() {
            document.write ("Hello Event")
         } 
      </script> 
   </head> 
   
   <body> 
      <p>Click vô nút dưới đây để thấy hiệu ứng</p> 
      <input type ="button" onclick="test()" value="Test"> 
   </body> 
</html> 

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Loại sự kiện onsubmit

onsubmit là một sự kiện xảy ra khi bạn cố gắng gửi một biểu mẫu. Bạn có thể đặt xác thực mẫu của bạn đối với loại sự kiện này.

Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây ta đang gọi một hàm có tên validation() trước khi gửi form dữ liệu đến máy chủ web. Nếu hàm validation() trả về true thì form sẽ được gửi, ngược lại sẽ không được gửi.

Ví dụ

<html>
   <head>
      <script>
         function validation() {
            //nơi validate
            .........
            return true hoặc false
         } 
      </script>
   </head> 
   
   <body> 
      <form method="POST" action="" onsubmit="return validation()"> 
         ....... 
         <input type="submit" value="Gửi" /> 
      </form> 
   </body> 
</html>

onmouseover và onmouseout

Hai loại sự kiện này sẽ giúp ta tạo hiệu ứng đẹp với hình ảnh hoặc thậm chí với cả văn bản. Sự kiện onmouseover được kích hoạt khi ta chạm chuột phần tử và onmouseout khi ta dời chuột khỏi phần tử

Ví dụ

<html> 
   <head> 
      <script>
         function over() {
            var h2=document.getElementById('h2')
            h2.innerHTML='HÃY DỜI CHUỘT KHỎI TÔI'
            h2.style.color='red'
         }
         function out() {  
            var h2=document.getElementById('h2')
            h2.innerHTML='HÃY CHẠM CHUỘT VÔ TÔI'
            h2.style.color='#8ac007'
         }  
      </script> 
   </head> 

   <body> 
      <div onmouseover="over()" onmouseout="out()">
         <h2 style="color:#8ac007" id="h2">HÃY CHẠM CHUỘT VÔ TÔI</h2> 
      </div> 
   </body> 
</html>

Output:

Sự kiện tiêu chuẩn HTML 5

Các sự kiện HTML 5 tiêu chuẩn được liệt kê trong bảng sau để bạn tham khảo. Kịch bản chỉ ra một hàm JavaScript sẽ được thực thi đối với sự kiện đó.

Sự kiện Giá trị Mô tả
offline script Kích hoạt khi trang web offline
onabort script Kích hoạt khi một sự kiện abort
onafterprint script Kích hoạt sau khi trang web được in
onbeforeonload script Kích hoạt trước khi trang web được load
onbeforeprint script Kích hoạt trước khi trang web được in
onblur script Kích hoạt khi đối tượng không còn được focus
oncanplay script Kích hoạt khi media có thể bắt đầu play, nhưng có thể phải dừng để đệm
oncanplaythrough script Kích hoạt khi media có thể được play đến hết, ngoại trừ việc dừng để đệm
onchange script Kích hoạt khi một phần tử thay đổi giá trị nó chứa
onclick script Kích hoạt khi nhấn phím trái chuột
oncontextmenu script Kích hoạt khi menu ngữ cảnh được kích hoạt
ondblclick script Kích hoạt khi nhấn đúp chuột
ondrag script Kích hoạt khi một phần tử được kéo
ondragend script Kích hoạt khi kết thúc hoạt động kéo
ondragenter script Kích hoạt khi một phần tử được kéo tới vị trí thả hợp lệ
ondragleave script Kích hoạt khi một phần tử rời vị trí thẻ hợp lệ
ondragover script Kích hoạt khi một phần tử được kéo qua một đích thả hợp lệ
ondragstart script Kích hoạt khi bắt đầu kéo
ondrop script Kích hoạt khi thả phần tử kéo
ondurationchange script Kích hoạt khi độ dài của media thay đổi
onemptied script Kích hoạt khi một phần tử nguồn media đột nhiên empty
onended script Kích hoạt khi media kết thúc
onerror script Kích hoạt khi xảy ra lỗi
onfocus script Kích hoạt khi phần tử được focus (bằng cách click, tab, hoặc phím tắt)
onformchange script Kích hoạt khi thay đổi form
onforminput script Kích hoạt khi form lấy thông tin người dùng
onhaschange script Kích hoạt khi trang web thay đổi
oninput script Kích hoạt khi nhập liệu cho phần tử (thường là của form)
oninvalid script Kích hoạt khi phần tử không có giá trị
onkeydown script Kích hoạt khi nhấn phím của bàn phím xuống
onkeypress script Kích hoạt khi nhấn và nhả phím
onkeyup script Kích hoạt khi nhả phím
onload script Kích hoạt khi load trang
onloadeddata script Kích hoạt khi tải dữ liệu media
onloadedmetadata script Kích hoạt khi load xong dữ liệu media
onloadstart script Kích hoạt khi trình duyệt bắt đầu tải dữ liệu media
onmessage script Kích hoạt khi thông báo được kích hoạt
onmousedown script Kích hoạt khi nhấn chuột xuống
onmousemove script Kích hoạt khi di chuyển chuột
onmouseout script Kích hoạt khi di chuyển chuột ra khỏi phần tử
onmouseover script Kích hoạt khi chạm chuột vô phần tử
onmouseup script Kích hoạt khi nhà chuột ra (không nhấn xuống nữa)
onmousewheel script Kích hoạt khi phím xoay của chuột được xoay
onoffline script Kích hoạt khi trang web hoạt động offline
ononline script Kích hoạt khi trang web hoạt động online
onpagehide script Kích hoạt khi trang ẩn
onpageshow script Kích hoạt khi trang hiện
onpause script Kích hoạt khi dữ liệu media tạm dừng
onplay script Kích hoạt khi dữ liệu media bắt đầu play
onplaying script Kích hoạt khi dữ liệu media đang chơi
onpopstate script Kích hoạt khi lịch sử của cửa sổ thay đổi
onprogress script Kích hoạt khi trình duyệt nạp dữ liệu media
onratechange script Kích hoạt khi thay đổi tốc độ play của media data
onreadystatechange script Kích hoạt khi kích hoạt khi thay đổi trạng thái ready
onredo script Kích hoạt khi redo trang web
onresize script Kích hoạt khi thay đổi kích thước trang web
onscroll script Kích hoạt khi cuộn thanh cuộn của phần tử
onseeked script Kích hoạt khi thuộc tính tìm tìm kiếm của phần tử không còn đúng nữa, và quá trình tìm kiếm đã kết thúc
onseeking script Kích hoạt khi bắt đầu quá trình tìm kiếm
onselect script Kích hoạt khi chọn phần tử
onstalled script Kích hoạt khi có lỗi xảy ra khi nạp media data
onstorage script Kích hoạt khi tải trang web
onsubmit script Kích hoạt khi gửi form dữ liệu
onsuspend script Kích hoạt khi trình duyệt đang nạp dữ liệu media thì bị dừng trước khi toàn bị file media được nạp
ontimeupdate script Kích hoạt khi khi media thay đổi tốc độ play
onundo script Kích hoạt khi undo trang web
onunload script Kích hoạt khi người dùng tắt trang web
onvolumechange script Kích hoạt khi thay đổi âm lượng, bao gồm cả khi thay đổi "mute"
onwaiting script Kích hoạt khi media dừng play và đang chờ để play tiếp

Cookie

Trình duyệt web và Máy chủ sử dụng giao thức HTTP để liên lạc. HTTP là giao thức không trạng thái, nghĩa là, nó không duy trì dữ liệu của khách qua nhiều yêu cầu được thực hiện bởi khách. Chu trình đáp ứng yêu cầu hoàn chỉnh này giữa máy khách và máy chủ được xác định là một phiên. Cookie là cơ chế mặc định được các trình duyệt sử dụng để lưu trữ dữ liệu liên quan đến phiên của người dùng.

Cách thức hoạt động

Máy chủ của ta gửi một số dữ liệu tới trình duyệt của khách truy cập dưới dạng cookie. Nếu trình duyệt chấp nhận cookie thì nó được lưu dưới dạng bản ghi văn bản đơn giản trên ổ cứng của khách truy cập (thường trong cache trình duyệt). Khi khách truy cập đến một trang khác trên trang web thì trình duyệt sẽ gửi cùng một cookie đến máy chủ để truy xuất. Sau khi truy xuất, máy chủ sẽ biết/ghi nhớ những gì đã được lưu trữ trước đó.

Cookie là bản ghi dữ liệu dạng văn bản đơn giản của 5 trường có độ dài thay đổi.

  • Expires: Ngày cookie sẽ hết hạn. Nếu để trống thì cookie sẽ hết hạn khi khách truy cập thoát khỏi trình duyệt.

  • Domain: Tên miền của trang web của ta.

  • Path: Đường dẫn đến thư mục hoặc trang web đặt cookie. Ta có thể để trống nếu muốn lấy cookie từ bất kỳ thư mục hoặc trang nào.

  • Secure: Nếu trường này chứa từ "secure", thì cookie chỉ có thể được truy xuất với một máy chủ an toàn. Nếu trường này trống thì sẽ không có giới hạn bảo mật nào được yêu cầu.

  • Name = Value: Cookie được đặt và truy xuất dưới dạng các cặp key-value.

Cookie ban đầu được thiết kế để lập trình CGI. Dữ liệu chứa trong cookie được tự động truyền giữa trình duyệt web và máy chủ web, vì vậy các tập lệnh CGI trên máy chủ có thể đọc và ghi các giá trị cookie được lưu trữ ở phía máy khách.

JavaScript cũng có thể thao tác cookie bằng thuộc tính cookie của đối tượng Tài liệu. JavaScript có thể đọc, tạo, sửa và xóa các cookie áp dụng cho trang web hiện thời.

Lưu trữ Cookie

Cách đơn giản nhất để tạo cookie là gán giá trị chuỗi cho đối tượng document.cookie:

"document.cookie = "key1 = value1; key2 = value2; expires = date";

Ở đây, thuộc tính 'expires' là tùy chọn. Nếu ta cung cấp thuộc tính này với ngày hoặc giờ hợp lệ, thì cookie sẽ hết hạn vào ngày hoặc thời gian nhất định và sau đó, giá trị của cookie sẽ không thể truy cập được.

Lưu ý: Giá trị cookie không bao gồm dấu chấm phẩy, dấu phẩy hoặc khoảng trắng. Vì lý do này, ta có thể cần sử dụng hàm esc() của JavaScript để mã hóa giá trị trước khi lưu trữ nó trong cookie. Khi đó cũng sẽ phải sử dụng hàm unescape() tương ứng khi đọc giá trị cookie.

Ví dụ

<html> 
   <head> 
      <script>
         function writeCookie() {  
            cookieValue =  escape(document.myform.myName.value) + ";";
            document.cookie = "name = " + cookieValue;
            document.write("Thiết lập Cookie : " + "name = " + cookieValue );
         }
      </script> 
   </head> 
      
   <body> 
      <form name="myform"> 
         Nhập tên của bạn: <input type="text" name="myName" required> 
         <input type="button" value="Thiết lập" onclick="writeCookie()"> 
      </form> 
   </body> 
</html>

Output:

Bây giờ máy của ta có một cookie gọi là name. Ta có thể đặt nhiều cookie bằng nhiều cặp key=value được phân tách bằng dấu phẩy.

Đọc Cookie

Đọc cookie chỉ đơn giản là lấy giá trị của đối tượng document.cookie. Vì vậy, ta có thể sử dụng chuỗi này bất cứ khi nào muốn truy cập cookie. document.cookie sẽ lưu giữ một danh sách các cặp name=value được phân tách bằng dấu chấm phẩy, trong đó tên là tên của cookie và giá trị là giá trị chuỗi của nó.

Ta có thể sử dụng hàm split() của chuỗi để tách chuỗi thành các key và value như trong ví dụ dưới đây.

Ví dụ

<html>
   <head>
      <script>
         function docCookie() {
            var allCookies  =  document.cookie;
            document.write ("Tất cả các cookie : " + allCookies + "<br>");
            // Chuyển tất cả các cookie vào một mảng dùng hàm split()
            cookieArray = allCookies.split(';');
         
            // Dùng vòng lặp for lấy từng cặp key-value
            for(var i = 0; i<cookieArray.length; i++) {
               key = cookieArray[i].split('=')[0];
               value = cookieArray[i].split('=')[1];
               document.write("<br>Key : " + key + ", Value : " + value);
            }
         }
      </script>
   </head>

   <body> 
      <form>
         <p>Nhấn nút dưới đây để xem kết quả:</p> 
         <input type="button" value="Lấy Cookie" onclick="docCookie()"> 
      </form> 
   </body> 
</html>

Lưu ý: Ở đây, length là thuộc tính của lớp Array, nó lưu độ dài của một mảng.

Đoạn code trên sẽ hiển thị tất cả các cookie được đặt trên máy tính của ta.

Output:

Cài đặt ngày hết hạn Cookie

Ta có thể kéo dài thời hạn của cookie ngoài phiên trình duyệt hiện tại bằng cách đặt ngày hết hạn và lưu vào trong cookie. Điều này có thể được thực hiện bằng cách đặt thuộc tính 'expires' thành ngày và giờ. Ví dụ sau minh họa cách kéo dài thời hạn sử dụng của cookie thêm 1 tháng.

Ví dụ

<html> 
   <head> 
      <script>
         function setCookie() {  
            var thoiGian = new Date();  
            thoiGian.setMonth(thoiGian.getMonth() + 1);  
            cookie = escape(document.frm.coName.value) + ";"  
            document.cookie = "name = " + cookie;  
            document.cookie = "expires = " + thoiGian.toUTCString() + ";"  
            document.write ("Thiết lập cookie : " + "name = " + cookie);  
         } 
      </script> 
   </head> 

   <body>
      <form name="frm">
         Nhập tên cookie: <input name="coName"> 
         <input type="button" value="Thiết lập Cookie" onclick="setCookie()"> 
      </form> 
   </body> 
</html>

Output:

Xóa cookie

Đôi khi ta muốn xóa cookie để muốn những lần đọc cookie sau đó sẽ không trả lại kết quả gì liên quan đến cookie đã xóa. Để thực hiện điều này thì ta chỉ cần đặt ngày hết hạn thành một thời gian trong quá khứ. Ví dụ sau minh họa cách xóa cookie bằng cách đặt ngày hết hạn của nó thành một tháng sau ngày hiện tại.

Ví dụ

<html>
   <head>
      <script>
         function delCookie() {
            var now = new Date()
            now.setMonth(now.getMonth() - 1)
            cookie = escape(document.frm.coName.value) + ";"
            document.cookie = "name=" + cookie
            document.cookie = "expires = " + now.toUTCString() + ";"
            document.write("Đã xóa cookie : " + "name = " + cookie)
         }
      </script>
   </head>

   <body>
      <form name="frm">
         Nhập tên cookie cần xóa: <input name="coName">
         <input type="button" value="Xóa Cookie" onclick="delCookie()">
      </form>
   </body>
</html>

Output:

Chuyển hướng

Chuyển hướng là một cách để gửi cả người dùng và công cụ tìm kiếm đến một URL khác với URL hiện tại. Chuyển hướng trang web là tự động chuyển hướng một trang web đến một trang web khác. Trang được chuyển hướng thường trên cùng một trang web hoặc có thể trên một trang web khác hoặc máy chủ web.

Chuyển hướng trang với JavaScript

location và location.href

Trong JavaScript, bạn có thể sử dụng nhiều phương pháp để chuyển hướng một trang web sang một trang khác. Hầu hết các phương thức này đều liên quan đến đối tượng window.location, đây là một thuộc tính của đối tượng Window. location có thể được sử dụng để lấy địa chỉ URL hiện tại (địa chỉ web) và để chuyển hướng trình duyệt đến một trang mới. Cả hai cách sử dụng đều giống nhau về hành vi. window.location trả về một đối tượng. Nếu .href không được đặt thì mặc định window.location sẽ thay đổi tham số .href.

Ví dụ

<!DOCTYPE html> 
<html> 
   <head> 
      <script> 
         function newLocation() { 
            window.location = "http://demo.v1study.com"; 
         } 
      </script> 
   </head> 

   <body> 
      <input type="button" value="Chuyển sang demo.v1study" onclick="newLocation()"> 
   </body> 
</html>

location.replace()

Phương thức replace() cũng là phương thức thường hay được sử dụng của đối tượng window.location, nó sẽ thay thế trang web hiện thời bằng một trang web mới.

Ví dụ:

window.location.replace("https://v1study.com")

location.assign()

Phương thức location.assign() sẽ tải một trang web mới trong cửa sổ trình duyệt.

Cách dùng:

window.location.assign("https://v1study.com");

So sánh assign() và replace()

Sự khác biệt giữa phương thức assign() và replace() là phương thức location.replace() xóa URL hiện tại khỏi lịch sử trang web, do đó không thể điều hướng trở lại trang web gốc. Ta không thể sử dụng nút "Back" của trình duyệt trong trường hợp này. Nếu muốn tránh tình huống này thì ta nên sử dụng phương thức location.assign(), vì nó sẽ tải trang web mới trong trình duyệt.

location.reload()

Phương thức location.reload() sẽ tải lại trang web hiện tại trong cửa sổ trình duyệt.

Cách dùng:

window.location.reload("https://v1study.com");

window.navigate()

Phương thức window.navigate() tương tự như việc gán một giá trị mới cho thuộc tính window.location.href. Tuy nhiên, vì phương thức này chỉ có sẵn trong MS Internet Explorer, vì vậy bạn nên tránh sử dụng khi phát triển trình duyệt chéo.

Cách dùng:

window.navigate("https://v1study.com");

Chuyển hướng và tối ưu hóa công cụ tìm kiếm

Nếu ta muốn thông báo cho các công cụ tìm kiếm (SEO) về việc chuyển tiếp URL thì ta nên thêm thẻ <meta rel="canonical"> vào phần đầu trang web của mình vì các công cụ tìm kiếm không phân tích JavaScript để kiểm tra chuyển hướng.

Cách dùng:

<link rel="canonical" href="https://v1study.com/css.css">

alert, confirm, prompt

JavaScript hỗ trợ ba loại hộp thoại quan trọng là alert(), confirm(), và prompt(). Các hộp thoại này có thể được sử dụng để nâng cao và cảnh báo hoặc để xác nhận bất kỳ đầu vào nào hoặc để có một loại đầu vào từ người dùng. Sau đây chúng ta sẽ thảo luận từng hộp thoại một.

Hộp thoại alert()

Hộp thoại alert chủ yếu được sử dụng để gửi thông điệp cảnh báo hoặc thông báo cho người dùng. Ví dụ: nếu một trường input yêu cầu nhập liệu nhưng người dùng không nhập thì ta có thể sử dụng hộp thoại alert để gửi thông điệp cảnh báo.

Hộp thoại alert cũng có thể được sử dụng cho các thông báo mang tính thân thiện hơn. Hộp thoại alert chỉ cung cấp một nút "OK" để chọn và tiếp tục.

Ví dụ

<html> 
   <head> 
      <script> 
         function thongBao() {
            alert("Đây là hộp thoại alert!");
            document.write("Đây là hộp thoại alert!");
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh dưới đây để xem kết quả:</p>
      <form>
         <input type="button" value="Button" onclick="thongBao()">
      </form>
   </body>
</html>

Output:

Hộp thoại confirm()

Hộp thoại confirm chủ yếu được sử dụng để yêu cầu người dùng xác nhận đối với tùy chọn tương ứng như xóa, cập nhật, ... Hộp thoại confirm có hai nút: OK và Cancel.

Nếu người dùng nhấp vào nút OK, phương thức confirm() sẽ trả về true, còn nếu người dùng nhấp vào nút Cancel thì confirm() trả về false.

Ví dụ

<html>
   <head>
      <script>
         function conf(){
            var retVal = confirm("Bạn muốn tiếp tục?");
            
            if(retVal == true){
               document.write("Tiếp tục!");
               return true;
            } else {
               document.write("Không tiếp tục!");
               return false;
            }
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh để xem kết quả:</p>
      <form>
         <input type="button" value="Nút lệnh" onclick="conf();">
      </form>
   </body>
</html>

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Hộp thoại prompt()

Hộp thoại prompt hữu ích khi bạn muốn bật lên một hộp văn bản để nhận đầu vào của người dùng. Do đó, nó cho phép bạn tương tác với người dùng. Người dùng cần điền vào hộp văn bản và sau đó nhấp vào OK.

Hộp thoại này được hiển thị bằng cách sử dụng phương thức có tên prompt() có hai tham số: tham số thứ nhất là thông báo, tham số thứ 2 là một chuỗi mặc định để hiển thị trong hộp văn bản.

prompt() có hai nút: OK và Cancel. Nếu người dùng nhấp vào nút OK thì prompt() sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấp vào nút Cancel thì prompt() trả về null.

Ví dụ

<html>
   <head>
      <script>
         function getValue(){
            var prom = prompt("Nhập vô tên : ", "nhập tên của bạn");
            document.write("Tên của bạn là : " + prom);
         }
      </script>
   </head>

   <body>
      <p>Click nút lệnh dưới đây để xem kết quả:</p>
      <form>
         <input type="button" value="Prompt" onclick="getValue();">
      </form>
   </body>
</html>

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Từ khóa void

void là một từ khóa quan trọng trong JavaScript, void có thể được sử dụng như một toán tử đơn nguyên xuất hiện trước toán hạng đơn của nó, cũng có thể thuộc bất kỳ loại nào. void chỉ định một biểu thức sẽ được ước tính mà không trả về giá trị. void sẽ đánh giá một biểu thức đã cho và sau đó trả về không xác định.

Cú pháp

void biểu thức

void và các biểu thức hàm được gọi tức thì

Khi sử dụng biểu thức hàm được gọi tức thì thì void có thể được sử dụng để buộc từ khóa hàm được coi là biểu thức thay vì khai báo.

Xét ví dụ sau:

void function iife_void() { 
   var test = function () {console.log("hello V1Study")}; 
   test();
}();

Output:

hello V1Study

void và JavaScript URI

Javascript: URI là cú pháp thường gặp trong một trang HTML. Trình duyệt đánh giá URI và thay thế nội dung của trang bằng giá trị được trả về. Điều này đúng trừ khi giá trị trả về là không xác định. Trường hợp dụng phổ biến nhất của toán tử void là trong JavaScript: URL phía máy khách, nơi nó cho phép ta đánh giá một biểu thức cho các tác dụng phụ của nó mà không cần trình duyệt hiển thị giá trị của biểu thức được đánh giá.

Xét đoạn code sau:

<a href="javascript:void(javascript:alert('hello nothing!!'))"> 
  Click: không làm gì cả 
</a> 
<br/><br/><br/> 
<a href="javascript:alert('hi');">Click: hiện thông báo</a>

Output:

In trang web - print()

Nhiều khi ta muốn đặt một nút trên trang web của mình để in nội dung của trang web đó thông qua một máy in thực tế. JavaScript giúp ta thực hiện chức năng này bằng cách sử dụng hàm print() của đối tượng window.

Hàm JavaScript window.print() sẽ in trang web hiện thời khi nó được thực thi. Ta có thể gọi hàm này trực tiếp bằng cách sử dụng sự kiện onclick như trong ví dụ dưới đây.

Ví dụ

<html> 
   <body> 
      <form> 
         <input type="button" value="In trang web" onclick="window.print()"> 
      </form> 
   </body> 
</html>

Output:

Đối tượng - Object

JavaScript hỗ trợ mở rộng các loại dữ liệu. Đối tượng JavaScript là một cách tuyệt vời để định nghĩa các loại dữ liệu tùy chỉnh.

Một đối tượng là một thể hiện chứa một tập hợp các cặp giá trị khóa. Không giống như các kiểu dữ liệu nguyên thủy, các đối tượng có thể biểu thị nhiều giá trị hoặc phức tạp và có thể thay đổi theo thời gian sống của chúng. Các giá trị có thể là giá trị vô hướng, hàm, thậm chí là mảng các đối tượng khác.

Bộ khởi tạo đối tượng

Giống như các kiểu nguyên thủy, các đối tượng có cú pháp theo đúng nghĩa đen: cặp ngoặc xoắn ({và}). Sau đây là cú pháp định nghĩa một đối tượng.

var obj = {
   Key1:value,
   Key2: function() {
      //khối_lệnh
   },
   Key3: [“content1”,” content2”]
}

Nội dung của một đối tượng được gọi là thuộc tính (hoặc thành phần) và thuộc tính bao gồm tên (hoặc khóa) và giá trị. Tên thuộc tính phải là chuỗi hoặc ký hiệu và các giá trị có thể là bất kỳ loại nào (bao gồm cả các đối tượng khác).

Giống như tất cả các biến JavaScript, cả tên đối tượng (có thể là biến thông thường) và tên thuộc tính đều phân biệt chữ hoa chữ thường. Ta truy cập các thuộc tính của một đối tượng bằng cách sử dụng toán tử dấu chấm

Cú pháp:

objectName.propertyName

Ví dụ:

var human = { 
   firstname:"Long", 
   lastname:"Dang", 
   func:function(){return "Hi V1Study!!"},    
}; 
//truy cập các member của đối tượng
console.log(human.firstname)   
console.log(human.lastname) 
console.log(human.func())

Output:

Long 
Dang
Hi V1Study!!

Trong ES6 ta có thể đưa 1 biến nào đó làm thuộc tính của đối tượng.

Thí dụ

var a = 'abc' 
var obj = { a } 
console.log(obj.a)

Đoạn code trên định nghĩa một đối tượng có tên obj và có 1 thuộc tính là a, với a là biến được khai báo trước đó.

Hàm tạo Object()

JavaScript cung cấp một hàm tạo đặc biệt gọi là Object() để tạo thể hiện của đối tượng. Object() sẽ kết hợp với toán tử new để tạo một thể hiện của đối tượng.

Cú pháp:

var obj = new Object(); 
obj.prop = value;    
Hoặc:
obj["prop"] = value 

Sau đây là cú pháp để truy cập vào một thuộc tính:

objectName.tên_thuộc_tính
Hoặc:
objectName["tên_thuộc_tính"]

Ví dụ

//Định nghĩa đối tượng
var mySubject = new Object(); 
mySubject.name = "PHP";
mySubject.numberSession = 30;
mySubject.money = 3000000;
//Truy cập thành phần của đối tượng
console.log(mySubject["name"])
console.log(mySubject["numberSession"]) 
console.log(mySubject["money"])

Ouptput:

PHP 
30
3000000

Các thuộc tính mà chưa được gán của một đối tượng sẽ được coi là không tồn tại.

Ví dụ

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

Kết quả:

undefined

Lưu ý: Tên thuộc tính đối tượng có thể là bất kỳ chuỗi JavaScript hợp lệ hoặc bất kỳ dữ liệu gì có thể được chuyển đổi thành chuỗi, bao gồm cả chuỗi rỗng. Tuy nhiên, bất kỳ tên thuộc tính nào không phải là định danh JavaScript hợp lệ (ví dụ: tên thuộc tính có dấu cách hoặc dấu gạch nối hoặc bắt đầu bằng số) thì chỉ có thể được truy cập bằng cách sử dụng ký hiệu dấu ngoặc vuông.

Các thuộc tính cũng có thể được truy cập bằng cách sử dụng một giá trị chuỗi được lưu trữ trong một biến. Nói cách khác, khóa thuộc tính của đối tượng có thể là một giá trị động, ví dụ như một biến chẳng hạn. Khái niệm nói trên được minh họa trong ví dụ sau.

Ví dụ

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

Output:

Ford

Hàm tạo

Một đối tượng có thể được tạo bằng hai bước sau:

Bước 1: Định nghĩa loại đối tượng bằng cách viết hàm tạo function.

Cú pháp:

function tên_hàm() {
   this.property_name = giá_trị
}

Từ khóa 'this' dùng để chỉ đối tượng hiện tại đang sử dụng và định nghĩa thuộc tính của đối tượng.

Bước 2: Tạo một thể hiện của đối tượng dùng từ khóa new.

var tên_đối_tượng= new tên_hàm()

//Truy cập thuộc tính
tên_đối_tượng.property_name

Từ khóa new gọi hàm tạo function và khởi tạo các khóa thuộc tính của hàm.

Ví dụ sử dụng hàm tạo function

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

Output:

Ford
F123

Ta hoàn toàn có thể thêm thuộc tính mới cho đối tượng đã được tạo từ trước. Ví dụ:

function Car() {
   this.make = "Ford"
}
var obj = new Car()
obj.model = "F123"
console.log(obj.make)
console.log(obj.model)

Output:

Ford 
F123

Phương thức Object.create

Các đối tượng cũng có thể được tạo bằng phương thức Object.create(). Phương thức này cho phép ta tạo nguyên mẫu cho đối tượng mong muốn mà không phải định nghĩa hàm tạo function.

Ví dụ

var roles = {
   type: "Admin", // Giá trị mặc định của thuộc tính
   displayType : function() {
      //Hiển thị type
      console.log(this.type);
   }
}
//Tạo thể hiện của roles có tên super_role
var super_role = Object.create(roles);
super_role.displayType(); // Output: Admin

//Tạo thể hiện của roles có tên guest_role
var guest_role = Object.create(roles);
guest_role.type = "Guest";
guest_role.displayType(); // Output: Guest

Output:

Admin 
Guest

Hàm Object.assign()

Object.assign() được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn vào một đối tượng đích. Nó sẽ trả về đối tượng đích.

Cú pháp:

Object.assign(đích, ...nguồn)    

Ví dụ nhân bản một đối tượng:

"use strict"
var obj = { name:"Tom", ID:"E1001" };
var obj1 = Object.assign({}, obj);
console.log(obj1);
for (let val in obj1) {
   console.log(obj1[val])
}

Output:

Tom 
E1001

Ví dụ gộp đối tượng:

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

Output:

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Lưu ý: Không giống như sao chép các đối tượng, khi các đối tượng được gộp thì đối tượng lớn hơn không lưu trữ bản sao mới của các thuộc tính. Thay vào đó, nó giữ tham chiếu đến các thuộc tính có trong các đối tượng ban đầu. Ví dụ sau đây giải thích khái niệm này.

var o1 = { a: 10 };
var obj = Object.assign(o1);
obj.a++
console.log("Giá trị của 'a' trong đối tượng gộp sau khi tăng:")
console.log(obj.a);
console.log("Giá trị của 'a' trong đối tượng gốc sau khi tăng:")
console.log(o1.a);

Output:

Giá trị của 'a' trong đối tượng gộp sau khi tăng:
11  
Giá trị của 'a' trong đối tượng gốc sau khi tăng:
11 

Xóa thuộc tính

Ta có thể xóa một thuộc tính của đối tượng bằng cách sử dụng toán tử delete.

Ví dụ

//Tạo một đối tượng có tên obj gồm 2 thuộc tính a và b.
var obj = new Object; 
obj.a = 5; 
obj.b = 12; 

//Xóa thuộc tính a
delete myobj.a; 
console.log ("a" in obj)

Output:

false

So sánh các đối tượng

Trong JavaScript thì đối tượng được hiểu là một kiểu tham chiếu. Hai đối tượng riêng biệt không bao giờ bằng nhau, ngay cả khi chúng có cùng các thuộc tính. Lý do là bởi chúng trỏ đến các địa chỉ bộ nhớ khác nhau. Chỉ những đối tượng chia sẻ cùng một tham chiếu mới giống nhau.

Ví dụ 1: Tham chiếu đối tượng khác nhau

var a = {name: "V1"}; 
var b = {name: "V1"}; 
console.log(a == b)  // return false 
console.log(a === b)  // return false

Trong ví dụ trên, a và b là hai đối tượng riêng biệt đề cập đến hai địa chỉ bộ nhớ khác nhau, vậy nên chúng khác nhau, và kết quả là trả về false.

Ví dụ 2: Tham chiếu đối tượng đơn

var val1 = {name: "Tom"};
var val2 = val1

console.log(val1 == val2) // return true
console.log(val1 === val2) // return true

Trong ví dụ trên, nội dung trong val1 được gán cho val2, tức là tham chiếu của các thuộc tính trong val1 được chia sẻ với val2. Vì vậy, chúng giống nhau, và kết quả là trả về true.

Đối tượng destructuring

Thuật ngữ destructuring có nghĩa là phá vỡ cấu trúc của một thực thể. Destructuring trong JavaScript cho phép trích xuất dữ liệu từ mảng hoặc đối tượng thành các biến khác nhau.

Ví dụ

var emp = { name: 'John', Id: 3 }
var {name, Id} = emp
console.log(name)
console.log(Id)

Output:

John 
3

Đối tượng Number

Đối tượng Number biểu thị ngày, số nguyên hoặc số dấu phẩy động. Nói chung, bạn không cần phải lo lắng về các đối tượng Number vì trình duyệt sẽ tự động chuyển đổi số chữ thành các thể hiện của lớp Number.

Sau đây là cú pháp để tạo một đối tượng Number.

var val = new Number(number);

Ở vị trí số , nếu bạn cung cấp bất kỳ đối số không phải số nào, thì đối số không thể được chuyển đổi thành số, nó sẽ trả về NaN (Not a Number).

Thuộc tính của Number

Thuộc tính và mô tả

Number.EPSILON

Khoảng nhỏ nhất giữa hai số đại diện.

Number.MAX_SAFE_INTEGER

Số nguyên an toàn tối đa trong JavaScript (2 ^ 53 - 1).

Number.MAX_VALUE

Số dương lớn nhất.

MIN_SAFE_INTEGER

Số nguyên an toàn tối thiểu trong JavaScript (- (2 ^ 53 - 1)).

Ví dụ:

console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

Number.MIN_VALUE

Số dương nhỏ nhất

Number.NaN

Trả về giá trị NaN

Ví dụ:

var days = 32; 
if (days < 1 || days > 31) { //điều kiện đúng
   days = Number.NaN 
   console.log("Số ngày trong tháng phải nằm trong đoạn [1,31].") //sẽ hiển thị
} else { 
   console.log("Ngày trong tháng: "+days) 
}

Number.NEGECT_INFINITY

Số âm vô cùng; xuất hiện khi tràn

Number.POSITIVE_INFINITY

Số dương vô cùng; xuất hiện khi tràn

Number.prototype

Giá trị đặc biệt đại diện cho vô cùng; xuất hiện khi tràn

Phương thức của Number

Phương thức & Mô tả

Số.isNaN()

Giá trị có phải là NaN (Not a Number) hay không, trả về true nếu đúng, trả về false nếu sai.

Ví dụ:

var test = Number.isNaN(10); 
console.log(test); //Output: false

Number.isFinite()

Giá trị có phải là số hữu hạn hay không.

Ví dụ:

console.log(Number.isFinite(10)); // true

Number.isInteger()

Giá trị có phải là một số nguyên hay không.

Ví dụ:

console.log(Number.isInteger(10)); // true
console.log(Number.isInteger("10")); // false

Number.isSafeInteger()

Giá trị có phải là số nguyên an toàn không (số nằm giữa - (253 - 1) và 253- 1)

Ví dụ:

console.log(Number.isSafeInteger(10)); // true

Number.parseFloat()

Ép giá trị trong chuỗi sang số thực

Ví dụ:

console.log(Number.parseFloat("10.5")); // 10.5

Number.parseInt()

Ép giá trị trong chuỗi hoặc ép số thực sang số nguyên

Ví dụ:

console.log(Number.parseFloat(10.5)); // 10

Phương thức thể hiện

Đối tượng Number chỉ chứa các phương thức mặc định là một phần của định nghĩa của mọi đối tượng.

Phương thức & Mô tả

toExponential()

Trả về một chuỗi đại diện cho số theo dạng lũy thừa

Ví dụ:

var num = 1225.30
console.log(num.toExponential()) // 1.2253e+3

toFixed()

Trả về một chuỗi số với độ chính xác mong muốn.

Ví dụ:

var num = 123.456
console.log("num.toFixed() : "+num3.toFixed()); //123 
console.log("num.toFixed(2) : "+num3.toFixed(2)); //123.45
console.log("num.toFixed(6) : "+num3.toFixed(6)); //123.456000

toLocaleString()

Trả về một chuỗi số ứng với ngôn ngữ hiện thời

Ví dụ:

var num = new Number(123.456); 
console.log(num.toLocaleString()); // 123.456

toPrecision()

Trả về một chuỗi số với độ chính xác mong muốn

Ví dụ:

var num = new Number(1.234567);
console.log(num.toPrecision()); // 1.234567
console.log(num.toPrecision(1)); // 1
console.log(num.toPrecision(2)); // 1.2

toString()

Trả về một chuỗi theo cơ số tương ứng

Ví dụ:

var num = new Number(10);
console.log(num.toString()); // 10 (cơ số 10)
console.log(num.toString(2)); // 1010 (cơ số 2)
console.log(num.toString(8)); // 12 (cơ số 8)

valueOf()

Trả về giá trị nguyên thủy của đối tượng đã chỉ định.

Ví dụ:

var num = new Number(10); 
console.log(num.valueOf()); // 10

Literal hệ 2 và hệ 8

Trong ES6 ta có thể sử dụng tiền tố 0b, 0o, 0x để biểu thị các số nguyên nhị phân, bát phân, và thập lục phân tương ứng.

Tiền tố có thể được viết bằng chữ in hoa hoặc in thường.

Ví dụ hệ nhị phân:

console.log(0b001) 
console.log(0b010) 
console.log(0b011) 
console.log(0b100)

Output:

1 
2 
3 
4

Ví dụ hệ 8:

console.log(0o10) 
console.log(0o100)

Output

8
78

Ví dụ hệ 16:

console.log(0x010) 
console.log(0x100)

Output

16
25

Boolean

Đối tượng Boolean chỉ gồm 2 giá trị là true và false. Nếu tham số giá trị là một trong các giá trị 0, -0, null, false, NaN, undefined, hoặc chuỗi rỗng (""), thì đối tượng sẽ có một giá trị khởi tạo là false.

Cú pháp tạo đối tượng:

var obj = new Boolean(giá_trị);

Các thuộc tính

Thuộc tính và mô tả

constructor

Trả về tham chiếu của hàm Boolean đã tạo đối tượng.

prototype

Thuộc tính này cho phép thêm các thuộc tính và phương thức vào đối tượng.

Các phương thức

Phương thức & mô tả

toSource()

Trả về một chuỗi chưa nguồn của đối tượng Boolean; ta có thể sử dụng chuỗi này để tạo một đối tượng tương ứng.

Ví dụ:

<html> 
   <head> 
      <title>Boolean: toSource()</title> 
   </head>
   <body> 
      <script>
         function Book(title, publisher, price) {
            this.title = title;
            this.publisher = publisher;
            this.price = price;
         } 
         var book = new Book("PHP","Long Dang",5000);
         document.write("book.toSource() is : "+ book.toSource());
      </script>
   </body>
</html>

Output:

({title:"PHP", publisher:"Long Dang", price:5000}) 

toString()

Trả về chuỗi "true" hoặc "false" phụ thuộc vào giá trị của đối tượng.

Value:

<html> 
   <head> 
      <title>Boolean: toString()</title> 
   </head>
   <body>
      <script> 
         var flag = new Boolean(false);  
         document.write("flag.toString is : " + flag.toString()); 
      </script> 
   </body>
</html>

Output:

flag.toString is : false 

valueOf()

Trả về giá trị nguyên thủy của đối tượng Boolean.

Ví dụ:

<html> 
   <head> 
      <title>Boolean: valueOf()</title>
   </head>
   <body> 
      <script>
         var flag = new Boolean(false);  
         document.write("flag.valueOf is : " + flag.valueOf());  
      </script>
   </body>
</html>

Output:

flag.valueOf is : false

Mảng (Array)

Việc sử dụng các biến để lưu trữ các giá trị gặp phải một số hạn chế như sau:

  • Mỗi biến chỉ có thể chứa một giá trị duy nhất. Điều này có nghĩa là để lưu trữ n giá trị trong một chương trình, sẽ cần n khai báo biến. Do đó, việc sử dụng các biến là không khả thi khi người ta cần lưu trữ một lượng lớn các dữ liệu.

  • Các biến trong một chương trình được cấp phát bộ nhớ theo thứ tự ngẫu nhiên, do đó gây khó khăn cho việc truy xuất/đọc các giá trị theo thứ tự khai báo của chúng.

JavaScript giới thiệu khái niệm mảng (array) để giải quyết được các hạn chế nêu trên.

Một mảng là một tập hợp các giá trị đồng nhất, bao gồm một tập hợp các giá trị có cùng kiểu dữ liệu, và do người dùng định nghĩa.

Các tính năng của một mảng

  • Một khai báo mảng sẽ phân bổ các vùng nhớ một cách tuần tự, không phải ngầu nhiên, vậy nên dễ dàng quản lý.

  • Mảng là tĩnh. Điều này có nghĩa là một mảng một khi được khởi tạo không thể thay đổi kích thước.

  • Mỗi vùng nhớ đại diện cho một phần tử mảng.

  • Môi phần tử mảng được xác định bởi một số nguyên duy nhất được gọi là chỉ số/chỉ mục của phần tử.

  • Mảng giống như các biến, cần được khai báo trước khi chúng được sử dụng.

  • Khởi tạo mảng đề cập đến việc khởi tạo giá trị cho các phần tử mảng.

  • Giá trị phần tử mảng có thể được cập nhật hoặc sửa đổi nhưng không thể xóa.

Khai báo và khởi tạo mảng

Để khai báo và khởi tạo một mảng trong JavaScript, hãy sử dụng cú pháp sau:

var tên_mảng; //khai báo
tên_mảng = [val1,val2,...,valn] //khởi tạo các phần tử mảng
Hoặc:
var tên_mảng = [val1,val2…valn]

Lưu ý: Cặp [] được gọi là thứ nguyên của mảng.

Ví dụ: var numArr = [1,3,5,7] sẽ tạo ra một mảng như trong hình dưới đây.

Khởi tạo mảng

Truy cập phần tử mảng

Cách truy cập một phần tử mảng: Tên mảng theo sau là cặp ngoặc vuông, bên trong là chỉ số của phần tử mảng.

tên_mảng[chỉ_số]

Ví dụ đơn giản:

var num = [1,3,2,5,4]
console.log(num[0]); 
console.log(num[1]);

Output:

1 
3

Đối tượng mảng

Một mảng cũng có thể được tạo bằng cách sử dụng đối tượng Array. Hàm tạo Array có thể được truyền vào như:

  • Một giá trị số đại diện cho kích thước của mảng.

  • Một danh sách các giá trị được phân tách bằng dấu phẩy.

Các ví dụ sau đây tạo ra một mảng bằng phương pháp này.

Thí dụ về đối tượng mảng

Ví dụ 1:

var arr = new Array(4)
for(var i = 0; i<arr.length; i++) {
   arr[i] = i * 2
   console.log(arr[i])
}

Output:

0 
2 
4 
6 

Ví dụ 2: Hàm tạo Array cho phép các giá trị được phân tách bằng dấu phẩy

var arr = new Array("JavaScript","PHP","Laravel","Vue.js")
for(var i = 0; i<names.length; i++) {
   console.log(arr[i])
}

Output:

JavaScript
PHP
Laravel
Vue.js

Phương thức của mảng

Sau đây là danh sách các phương thức của đối tượng Array cùng với mô tả của chúng.

concat()

Trả về một mảng mới sau khi nối 2 mảng với nhau.

Ví dụ:

var a = ['a', 'b', 'c'];
var b = [1, 2, 3];
var con = b.concat(a);
console.log(con); //1,2,3,a,b,c

every()

Trả về true nếu mọi phần tử trong mảng này thỏa mãn chức năng kiểm tra được cung cấp.

Ví dụ:

function check(x) {
   return (x >= 10);
}
var result = [12, 5, 8, 130, 44].every(check);
console.log(result); //false

filter()

Lọc những phần tử có giá trị theo điều kiện.

Ví dụ:

function filt(element) { 
   return (element >= 10); //Lọc những phần tử >=10
} 
var passed = [12, 5, 8, 130, 44].filter(filt); 
console.log("Result : " + passed ); // Result : 12,130,44

forEach()

Gọi một hàm cho mỗi phần tử trong mảng.

Ví dụ:

var arr = new Array(12,13,14,15)
console.log("In mảng gốc......")
arr.forEach(function(val,index) {
   console.log(val)
})

arr.reverse() //đảo ngược mảng
console.log("In mảng sau khi đảo ngược....")
arr.forEach(function(val,index){
   console.log(val)
})

Output:

In mảng gốc...... 
12 
13 
14 
15 
In mảng sau khi đảo ngược.... 
15 
14 
13 
12

indexOf()

Trả về chỉ số (nhỏ nhất) đầu tiên của một phần tử trong mảng ứng với giá trị được chỉ định hoặc -1 nếu không tìm thấy.

Ví dụ:

var in = [12, 5, 8, 130, 44, 8].indexOf(8); 
console.log("Kết quả : " + in) //Kết quả : 2

join()

Nối tất cả các phần tử của một mảng thành một chuỗi.

Ví dụ:

var arr = new Array("PHP","Laravel","Vue.js");
var str = arr.join("-");console.log(str); //PHP-Laravel-Vue.js

lastIndexOf()

Trả về chỉ mục cuối cùng (lớn nhất) của một phần tử trong mảng ứng với giá trị được chỉ định hoặc -1 nếu không tìm thấy.

Ví dụ:

var in = [12, 5, 8, 130, 44, 8].lastIndexOf(8); 
console.log("Kết quả : " + in) //Kết quả : 5

map()

Tạo một mảng mới với kết quả là lời gọi một hàm được cung cấp trên mỗi phần tử trong mảng này.

Ví dụ:

var arr = [1, 4, 9];
var newArr = arr.map(Math.sqrt);
console.log("Result : " + newArr ); //Result : 1,2,3

pop()

Loại bỏ phần tử cuối cùng khỏi mảng và trả về phần tử đó.

Ví dụ:

var arr = [1, 3, 2, 5, 4];
console.log("Kết quả : " + arr) //Kết quả : 1,3,2,5

push()

Thêm một hoặc nhiều phần tử vào cuối mảng và trả về độ dài mới của mảng.

Ví dụ:

var arr = [1, 3, 2, 5, 4];
arr.push(7,6);
console.log("Kết quả : " + arr) //Kết quả : 1,3,2,5,4,7,6

reduce()

Áp dụng đồng thời một hàm đối với hai giá trị của mảng (từ trái sang phải) để giảm nó thành một giá trị.

Ví dụ:

var sum = [0, 1, 2, 3].reduce(function(x, y){return x + y;}); 
console.log("Sum : " + total ); //Sum : 6

reduceRight()

Áp dụng đồng thời một hàm đối với hai giá trị của mảng (từ phải sang trái) để giảm nó thành một giá trị.

Ví dụ:

var sum = [0, 1, 2, 3].reduceRight(function(x, y){return x + y;}); 
console.log("Sum : " + total ); //Sum : 6

reverse()

Đảo ngược thứ tự các phần tử của mảng - phần tử đầu tiên trở thành phần tử cuối cùng, phần tử cuối cùng trở thành phần tử đầu tiên, ...

Ví dụ:

var arr = [0, 1, 2, 3, 4, 5].reverse(); 
console.log("Mảng sau khi đảo ngược : " + arr); //Mảng sau khi đảo ngược: 5,4,3,2,1,0

shift()

Loại bỏ phần tử đầu tiên khỏi mảng và trả về phần tử đó.

Ví dụ:

var arr = [1, 2, 3, 4, 5].shift(); 
console.log(arr); // 1

slice()

Trích xuất một phần của mảng và trả về một mảng mới.

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
console.log(arr.slice(0, 2)); //PHP,Laravel
console.log(arr.slice(1, 3)); //Laravel,Vue.js

some()

Trả về true nếu có ít nhất một phần tử trong mảng thỏa mãn hàm kiểm tra.

Ví dụ:

function check(element) { 
   return (element >= 10); 
} 
var result1 = [21, 1, 2, 3, 5, 8].some(check); 
console.log(result1); //false 

var result2 = [1, 1, 2, 3, 5, 8, 13].some(check); 
console.log(result); //true

toSource()

Hiển thị mã nguồn của đối tượng.

sort()

Sắp xếp các phần tử của một mảng theo trật tự tăng dần theo bảng mã ASCII.

splice()

Thêm và/hoặc loại bỏ các phần tử từ mảng.

Cú pháp:

array.splice(index, nums, [ele1][, ..., eleN]);

index là chỉ số nơi bắt đầu thao tác, nums là số lượng phần tử muốn thao tác, [ele1][, ..., eleN] là các phần tử cụ thể muốn thao tác (có thể không có).

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
arr.splice(1, 0, "Angular"); //thêm Angular vào vị trí có chỉ số 1 (phần tử thứ 2)
console.log(arr); //PHP,Angular,Laravel,Vue.js,Node.js,React.js
arr.splice(1, 2, "Angular"); //xóa 2 phần tử bắt đầu từ chỉ số 1, rồi thêm Angular vào vị trí có chỉ số 1
console.log(arr); //PHP,Angular,Node.js,React.js
arr.splice(1, 2); //xóa 2 phần tử bắt đầu từ chỉ số 1
console.log(arr); //PHP,Node.js,React.js

toString()

Trả về một chuỗi hiển thị các phần tử của mảng.

Ví dụ:

var arr = new Array("đỏ", "da cam", "vàng", "lục");
var str = arr.toString();
console.log(str); //đỏ,da cam,vàng,lục

unshift()

Thêm một hoặc nhiều phần tử vào phía trước của mảng và trả về độ dài mới của mảng.

Ví dụ:

var arr = ["PHP", "Laravel", "Vue.js", "Node.js", "React.js"];
var len = arr.unshift("JavaScript"); 
console.log(arr); //JavaScript,PHP,Laravel,Vue.js,Node.js,React.js 
console.log(len); //6

Phương thức của mảng trong ES6

Sau đây là một số phương thức mảng mới được giới thiệu trong ES6.

find()

find() cho phép bạn lặp qua một mảng và lấy lại phần tử đầu tiên phù hợp.

Ví dụ

var arr = [1, 2, 3]; 
var firstOdd = arr.find((x) => x % 2 == 1); 
console.log(firstOdd); // 1

findIndex()

findIndex() hoạt động tương tự như find(), nhưng thay vì trả về phần tử tìm được, nó trả về chỉ mục của phần tử đó.

var numbers = [4, 6, 3, 5];
var oddNumber = numbers.findIndex((x) => x % 2 == 1);
console.log(oddNumber); // 2

entries()

Trả về một bộ lặp mảng có thể được sử dụng để lặp qua các khóa và giá trị của mảng và sẽ trả về một mảng các mảng, trong đó mỗi mảng con là một mảng dạng [index, value]. Ví dụ:

var arr = [2, 4, 6]; 
var val = arr.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

Output:

[0,2] 
[1,4] 
[2,6]

Ngoài ra, chúng ta cũng có thể sử dụng toán tử spread để lấy một mảng các mục trong một lần.

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

Output:

[[0,1],[1,2],[2,3]]

from()

Array.from() cho phép tạo mảng mới từ đối tượng mảng. Chức năng cơ bản của from() là chuyển đổi hai loại giá trị sau thành mảng:

  • Giá trị giống như mảng.

  • Các giá trị có thể lặp như Set và Map.

Ví dụ

"use strict" 
for (let x of Array.from('V1Study')) {
   console.log(x)
}

Output:

V                               
1                               
S                               
t                               
u
d
y

keys()

Hàm này trả về các chỉ mục của mảng.

Ví dụ

console.log(Array.from(['x', 'y', 'z'].keys()))

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

[ 0, 1, 2 ] 

Array Traversal sử dụng cho vòng lặp for...in

Ta có thể sử dụng vòng lặp for...in để duyệt qua một mảng.

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

Output:

1001 
1002 
1003 
1004

Mảng trong JavaScript

JavaScript hỗ trợ các khái niệm sau về mảng:

Mảng đa chiều

JavaScript hỗ trợ các mảng đa chiều. Dạng đơn giản nhất của mảng đa chiều là mảng hai chiều.

Cú pháp khai báo:

var arrName = [ [val1,val2,val3,...],[v1,v2,v3,...] ]

Truy cập phần tử mảng:

arrName[chỉ_số_hàng][chỉ_số_cột]

Ví dụ:

var arr = [[1,2,3],[7,8,9]]  
console.log(arr[0][0]) 
console.log(arr[0][1]) 
console.log(arr[0][2]) 
console.log(arr[1][0]) 
console.log(arr[1][1]) 
console.log(arr[1][2])

Output:

1
2
3

7
8
9

Truyền mảng cho hàm

Ta có thể truyền cho hàm một con trỏ tới một mảng bằng cách chỉ định tên của mảng mà không có chỉ mục.

Ví dụ:

var arr = new Array("PHP","Laravel","Vue.js","React.js") 
function func(ar) {
   for(var i = 0; i<ar.length; i++) {
      console.log(ar[i])
   }
}
func(arr)

Output:

PHP
Laravel
Vue.js
React.js

Trả về mảng từ các hàm

JavaScript cho phép một hàm trả về một mảng.

Ví dụ:

function func() { 
   return new Array("HTML5","CSS3","JavaScript","SQL") 
} 
var arr = func() 
for(var i in arr) { 
   console.log(arr[i]);
}

Output:

HTML5
CSS3
JavaScript
SQL

Khử cấu trúc mảng

JavaScript hỗ trợ khử cấu trúc trong ngữ cảnh của một mảng.

Ví dụ

var arr = ["Laravel","Vue.js"] 
var[a,b] = arr
console.log(a)
console.log(b)

Output:

Laravel
Vue.js

String

The String object allows you work with many data types; it finish the primitive data type JavaScript string with some methods of helper.

Since JavaScript auto transform between primitive functions and String objects, you can call any helper methods of String object on each primitive string.

Using following syntax to create String object:

var val = new String(string);

string parameter is a string of characters that properly encoded. String.

String properties

The following is list of properties of String object and it's description.

constructor

Return a reference to String function created object.

length

Return length of the string.

prototype

Prototype property allows you add properties and methods to object.

String methods

Below is a list of available methods in String object and their descriptions.

charAt()

Return a character at specify position.

charCodeAt()

Return a number presentation Unicode value of character at index position.

concat()

Concatenating two strings and return a new composition string.

index()

Return index in String object at the first result of specific value or return -1 if does not find.

lastIndexOf()

Return index in String object at the last finding of specific value or -1 if not found.

localeCompare()

Return a number show a reference string to before or after or same to current string with ordered by.

match()

Being used to match between a regular expression and a string.

replace()

Being used to search the match result between regular expression and to replacing substring match with new substring.

search()

Searching equivalent between a regular expression and current string.

slice()

Extracts a part of the string and return a new string.

split()

Splits a String object to an string array by its substring parameter.

substr()

Return a string of characters from specified position with number of characters wanted to get.

substring()

Return a string of characters between tow specified indexes.

toLocaleLowerCase()

Converts all of characters of string to lower case characters with current locale.

toLocaleupperCase()

Converts all of characters of string to upper case characters with current locale.

toLowerCase()

Converts all of characters of string to lower case characters.

toString()

Return a string representation for specified object.

toUpperCase()

Converts all of characters of string to upper case characters.

valueOf()

Return the primitive of specified object.

Các phương thức mới của String

startsWith()

Phương thức xác định nếu một chuỗi bắt đầu bằng ký tự được chỉ định.

Cú pháp

str.startsWith(searchString[, position])

Tham số

  • searchString - Các ký tự được tìm kiếm ở đầu chuỗi này.

  • position - Vị trí trong chuỗi này để bắt đầu tìm kiếm searchString; mặc định là 0.

Giá trị trả về

đúng nếu chuỗi bắt đầu bằng các ký tự của chuỗi tìm kiếm; nếu không sai .

Ví dụ

var str = 'hello world!!!'; 
console.log(str.startsWith('hello'));

Output

true

endsWith()

Hàm này xác định xem một chuỗi kết thúc bằng các ký tự của chuỗi khác.

Cú pháp

str.endsWith(matchString[, position])

Tham số

  • matchString - Các ký tự mà chuỗi phải kết thúc bằng. Đây là trường hợp nhạy cảm.

  • position - Vị trí phù hợp với chuỗi diêm. Tham số này là tùy chọn.

Giá trị trả về

true nếu chuỗi kết thúc bằng các ký tự của chuỗi khớp; nếu không trả về false.

Ví dụ

var str = 'Hello World !!! ';
console.log(str.endsWith('Hello')); 
console.log(str.endsWith('Hello',5));

Output

false 
true

includes()

Phương thức xác định nếu một chuỗi là một chuỗi con của chuỗi đã cho.

Cú pháp

str.includes(searchString[, position])

Tham số

  • searchString - Chuỗi con để tìm kiếm.

  • position - Vị trí trong chuỗi này để bắt đầu tìm kiếm searchString; mặc định là 0.

Giá trị trả lại

đúng nếu chuỗi chứa chuỗi con; nếu không sai .

Thí dụ

var str = 'Hello World';
console.log(str.includes('hell'))
console.log(str.includes('Hell'));
console.log(str.includes('or'));  
console.log(str.includes('or',1))

Output

false
true
true
true

repeat()

Hàm này lặp lại chuỗi đã chỉ định trong một số lần chỉ định.

Cú pháp

str.repeat(count)

Tham số

  • count - số lần lặp lại chuỗi.

Giá trị trả về

Trả về một chuỗi mới.

Ví dụ

var myBook = new String("Perl");
console.log(myBook.repeat(2));

Output

PerlPerl

Template Literal

Template literal là chuỗi ký tự cho phép biểu thức nhúng. Templatestrings sử dụng dấu tick ngược (``) thay vì dấu ngoặc đơn hoặc dấu ngoặc kép. Do đó, một chuỗi mẫu có thể được viết là -

var greeting = `Hello World!`;

Nội suy chuỗi và mẫu bằng chữ

Chuỗi mẫu có thể sử dụng trình giữ chỗ để thay thế chuỗi bằng cú pháp $ {}, như đã trình bày.

ví dụ 1

var name = "Brendan"; 
console.log('Hello, ${name}!');

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Hello, Brendan!

Ví dụ 2: Mẫu chữ và biểu thức

var a = 10; 
var b = 10; 
console.log(`The sum of ${a} and ${b} is  ${a+b} `);

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

The sum of 10 and 10 is 20 

Ví dụ 3: Mẫu bằng chữ và biểu thức hàm

function fn() { return "Hello World"; } 
console.log(`Message: ${fn()} !!`);

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Message: Hello World !!

Chuỗi đa dòng và văn bản mẫu

Chuỗi mẫu có thể chứa nhiều dòng.

Thí dụ

var multiLine = `
   This is 
   a string 
   with multiple 
   lines`; 
console.log(multiLine)

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

This is 
a string 
with multiple 
line

String.raw()

ES6 bao gồm chức năng thẻ String.raw cho chuỗi thô, trong đó dấu gạch chéo ngược không có ý nghĩa đặc biệt. String.raw cho phép chúng ta viết dấu gạch chéo ngược như trong biểu thức chính quy. Hãy xem xét ví dụ sau.

var text =`Hello \n World` 
console.log(text)  

var raw_text = String.raw`Hello \n World ` 
console.log(raw_text)

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

Hello 
World 
Hello \n World

String.fromCodePoint ()

Chuỗi tĩnh. Phương thức fromCodePoint () trả về một chuỗi được tạo bằng cách sử dụng chuỗi các điểm mã unicode được chỉ định. Hàm ném RangeError nếu điểm mã không hợp lệ được thông qua.

console.log(String.fromCodePoint(42))        
console.log(String.fromCodePoint(65, 90))

Đầu ra sau đây được hiển thị khi thực hiện thành công mã trên.

* 
AZ

Đối tượng Date

The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date() as shown in the following syntax.

Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.

The ECMAScript standard requires the Date object to be able to represent any date and time, to millisecond precision, within 100 million days before or after 1/1/1970. This is a range of plus or minus 273,785 years, so JavaScript can represent date and time till the year 275755.

You can use any of the following syntax to create a Date object using Date () constructor.

new Date( ) 
new Date(milliseconds) 
new Date(datestring) 
new Date(year,month,date[,hour,minute,second,millisecond])

Note − Parameters in the brackets are always optional.

Date Properties

Here is a list of the properties of the Date object along with their description.

constructor

Javascript date constructor property returns a reference to the array function that created the instance's prototype.

Syntax

date.constructor

Return value

Returns the function that created this object's instance.

Example: constructor

var dt = new Date(); 
console.log("dt.constructor is : " + dt.constructor);

The following output is displayed on successful execution of the above code.

dt.constructor is : function Date() { [native code] }

prototype

The prototype property allows you to add properties and methods to any object (Number, Boolean, String, Date, etc.). Note: Prototype is a global property which is available with almost all the objects.

Syntax

object.prototype.name = value

Example: Date.prototype

var myBook = new book("Perl", "Mohtashim"); 
book.prototype.price = null; 
myBook.price = 100; 

console.log("Book title is : " + myBook.title + "<br>"); 
console.log("Book author is : " + myBook.author + "<br>"); 
console.log("Book price is : " + myBook.price + "<br>"); 

The following output is displayed on successful execution of the above code.

Book title is : Perl  
Book author is : Mohtashim  
Book price is : 100

Date Methods

Following is a list of different date methods along with the description.

Date()

JavaScript Date() method returns today's date and time and does not need any object to be called.

Syntax

Date() 

Return Value

Returns today's date and time.

Example

var dt = Date(); 
console.log("Current Date: ",dt);

Output

Current Date: Thu Feb 21 2019 18:24:35 GMT+0700 (Giờ Đông Dương)

getDate()

JavaScript getDate() method returns the day of the month for the specified date according to local time. The value returned by getDate is an integer between 1 and 31.

Syntax

Date.getDate()

Return Value

Returns today's date and time.

Example

var dt = new Date("December 25, 1995 23:15:00"); 
console.log("getDate() : " + dt.getDate() );

Output

getDate() : 25

More functions of Date object you can see at: Đối tượng Date.

HTML DOM

A page lying in an webrowser window, could same an object.

An document object represent for HTML document that be displayed in that window. Document object has difirence properties reference to other objects that allow access and update document content.

The way access to document content is retrived and updated called Document Object Model hay DOM. The objects are construct by level. This level constructive is applyed for constructing objects in an web document.

The following is the simple level constructive of important objects:

HTML DOM

There are some DOMs survived. The following sections will explain each DOM and description how you can use them to retrieve and update document content.

  • The Legacy DOM - This model was introduced in the first versions of JavaScript programming. It is good supported by all browsers, but it only access in some main sections of document as forms, form elements, and images.

  • The W3C DOM - This document object allow retrieves and update all document contents and it is standarded by World Wide Web Consortium (W3C). This model is supported by most modern browsers.

  • The IE4 DOM - This document object was introduced in the fourth Version of Internet Explorer browser of Microsoft. IE 5 and new higher version including support for almost basic features W3C DOM.

The Legacy DOM

This is the model introduced in the first versions of JavaScript language. It is good supported by all browsers, but it only access in some main sections of document as forms, form elements, and images.

This model provides some only properties, such as title, URL and lastModified provide the information about all of the document. In addition, there are many other methods provided by this model can be used to set and receive document property values.

Document properties in Legacy DOM

The following is a list of document properties can retrieve by Legacy DOM.

Sr.No Properties and description
1

alinkColor

Deprecated - A string indicates the color of actived links.

Example: document.alinkColor

2

anchors[]

An array of anchor objects, one for each anchor display in document.

Example: document.anchors[0], document.anchors[1], etc.

3

applets[]

An array Applet objects, one for each applet display in document.

Example: document.applets[0], document.applets[1], v.v.

4

bgColor

Deprecated - A string specifies background color of document.

Example: document.bgColor

5

Cookie

A property has a string value with specific behavior that allows cookies linked with this document can be query and set.

Example: document.cookie

6

Domain

A String specifies Internet domain that document comes from. Used for security purposes.

Example: document.domain

7

embeds[]

An array of objects represent data embeded in document by the <embed> tag. It is same to plugins[]. Some plugins and ActiveX controls can be controled by JavaScript code.

Example: document.embedes[0], document.embedes[1], and so on.

8

fgColor

A string that specifies the default text color for document.

Example: document.fgColor

9

forms[]

An array of form objects, one for each HTML form diplay in document.

Example: document.forms[0], document.forms[1], and so on.

10

images[]

An array of form objects, each object for each HTML form displays in the document with HTML <img>.

Example: document.forms[0], document.forms[1], and so on.

11

lastModified

Read only string specifies the last modified with document.

Example: document.lastModified

12

linkColor

Deprecated - Each string specifies a color of unvisited links.

Example: document.linkColor

13

links[]

It is a document link array.

Example: document.links[0], document.links[1], and so on.

14

Location

URL of document. It is not voted URL properties.

Example: document.location

15

plugin[ ]

It is same with embeds[].

Example: document.plugins[0], document.plugins[1], and so on.

16

Referrer

An only string contains the URL of document, if has, where the current document is linked.

Example: document.referrer

17

Title

The text content of <title> tag.

Example: document.title

18

URL

The read only string specifies the URL of document.

Example: document.URL

19

vlinkColor

Deprecated - A string specifies the color of actived links.

Example: document.vlinkColor

Document methods in Legacy DOM

Following is list of methods are supported by Legacy DOM.

Sr.No Properties and description
1

clear()

Deprecated - Clear the content of the document and return nothing.

Example: document.clear ()

2

close()

Closing a stream document that be opened by open() method and return nothing.

3

open()

Delete the document content and open a stream that the new document content can be written. Return nothing.

Example: document.open()

4

write(value, ...)

Appending a string or the specified string into the document that be syntax ananiticed or concatenated into the document openned by open(). Return nothing.

Example: document.write(value, ...)

5

writeln(value, ...)

It is same with write(), exept that it appends a newline character to output. Return nothing.

Example: document.writeln(value, ...)

We can locate any HTML element in any HTML document using HTML DOM. For example, if a document contains a form element, then using JavaScript, we can call it with document.forms[0]. If your Web document includes 2 form elements, then the first form calls with document.forms[0] and the second calls with document.forms[1].

Using the hierarchy system and properties provided above, we can access the first form element using document.forms[0] .elements [0], and so on.

Example

Following is an example retrieving the document properties by Legacy DOM method.

<html>
   <head>
      <title> Document Title </title>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var ret = document.title;
               alert("Document Title : " + ret );
               var ret = document.URL;
               alert("Document URL : " + ret );
               var ret = document.forms[0];
               alert("Document First Form : " + ret );
               var ret = document.forms[0].elements[1];
               alert("Second element : " + ret );
            } //
         -->
      </script>
   </head>
   
   <body>
      <h1 id = "title">This is main title</h1>
      <p>Click the following to see the result:</p>
      
      <form name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
         <input type = "button" value = "Cancel">
      </form>

      <form name = "SecondForm">
         <input type = "button" value = "Don't ClickMe"/>
      </form>
   </body>
   
</html>