So sánh tiền tố trong html jva năm 2024
Bài viết này là một phần của series JavaScript dành cho người không mới, giúp các bạn đã có kinh nghiệm code trong các ngôn ngữ khác nhanh chóng làm quen với JS. Show
Nếu được rất mong nhận được sự ủng hộ và đóng góp ý kiến của mọi người để hoàn thiện series. A. Data typesTrong JS có 6 kiểu dữ liệu cơ bản:
Mặc dù JS là ngôn ngữ weak type, không có nghĩa là nó không có khái niệm kiểu dữ liệu. JS chỉ không phải chỉ định rõ ràng kiểu và có khả năng ép kiểu linh hoạt, nên nó được gọi là weak typing (kiểu yếu). Primitive types Trong 6 kiểu trên, 5 kiểu đầu còn được gọi là primitive types (kiểu nguyên thủy), và kiểu object là non-primitive. Kiểu nguyên thủy chỉ thuần chứa dữ liệu, ví dụ.
Và các kiểu primitive cũng có thể có method và property như object, nhưng thực sự không phải. Đó là trick của JS, khi chúng ta dùng tới bất kì property hoặc method nào, JS sẽ biến đối tượng primitive thành một wrapper. Wrapper là kiểu primitive, được gói thành một object và sử dụng như object, do đó nó có thuộc tính và phương thức.
Tuy nhiên, không nên sử dụng dạng như trên. Nó vừa gây rối code, vừa dài dòng không cần thiết, lại vừa sinh ra một số vấn đề khác. Ví dụ như phép so sánh hai kiểu wrapper sẽ luôn trả về false, vì JS không so sánh value chứa bên trong. Nếu bạn không hiểu rõ, bạn sẽ gặp lỗi. Do đó, primitive thì cứ dùng như bình thường thôi. Và đối với wrapper, có thể dùng method
0 để lấy ra nội dung primitive được gói bên trong. Object types Kiểu dữ liệu còn lại là object, có thể chứa thuộc tính (property) và phương thức (method). Object phải được khởi tạo bằng từ khóa new và Object constructor.
Các phiên bản JS mới hơn cho phép sử dụng cú pháp dấu ngoặc {} để tạo object gọn gàng hơn.
Từ kiểu object, có thể phát sinh thêm nhiều kiểu object khác, như mảng (array) cũng là object, function cũng là object (mặc dù tên kiểu là function), Date cũng là object,... B. Number1. OverviewNumber trong JavaScript dùng cho cả số nguyên (integer) và số thực (float), và luôn là số có dấu (signed). Kiểu dữ liệu được xác định trên giá trị gán cho nó (value) chứ không cần chỉ định rõ ràng.
Vì không phân biệt số nguyên và số thực, nên có thể viết số nguyên dạng có chấm hoặc không chấm như nhau. Số thực có thể viết dạng thập phân hoặc khoa học, số dạng
1 được viết gọn lại thành
2.
Có thể viết số dạng hexa (hệ 16) với tiền tố
3 ở đầu, hoặc một số phiên bản JS cho phép số hệ octal (hệ 8) bằng cách viết chữ số đầu tiên là 0. Do đó, không nên viết số với chữ số 0 ở đầu, trừ khi bạn hiểu rõ bạn đang làm gì. 2. OperatorsCác toán tử trong JS tương tự trong các ngôn ngữ khác. Từ ES6 trở đi có thêm toán tử ** để tính lũy thừa. Phép cộng trong JS có điểm đặc biệt, là khi cộng một number với một string sẽ cho kết quả là string (phép nối chuỗi).
Đối với phép tính khác như nhân chia,... giữa hai string có nội dung số, JS sẽ cố gắng chuyển đổi thành số và thực hiện tính. Ví dụ.
3. Special valuesHai value number đặc biệt trong JS là NaN (not a number) và Infinity. Hai giá trị đặc biệt này thuộc kiểu number, khi dùng typeof cho ra kết quả number.
NaN value Giá trị NaN được trả về khi thực hiện phép tính không hợp lệ, chẳng hạn chia một chuỗi cho một số (chuỗi không có nội dung là số). Khi đó kết quả phép tính là NaN.
Sử dụng hàm
4 để kiểm tra xem một số có mang giá trị NaN hay không. Trong những biểu thức có chứa NaN, thì kết quả cuối cùng là NaN. Nếu kết quả dạng chuỗi, JS sẽ chuyển đổi NaN thành chuỗi "NaN" và ghép lại cho phù hợp. Infinity value Số vô cực dương (Infinity) và vô cực âm (-Infinity) được trả về khi kết quả biểu thức quá lớn so với giới hạn của JS. Infinity cũng được trả về nhờ phép chia một số cho 0, hoặc tính toán biểu thức có Infinity.
0 Dùng hàm
5 để kiểm tra số có hữu hạn hay không, nếu là số vô hạn (Infinity và -Infinity) sẽ trả về false. NaN cũng trả về false. 4. Number methodsMặc dù number là kiểu primitive (nguyên thủy), nhưng JS thực hiện một số trick để làm number hoạt động tương tự object, nghĩa là có các thuộc tính (property) và phương thức (method). Các property và method bên dưới không nhất thiết phải gọi từ biến number, có thể gọi từ value, const hoặc biểu thức tính ra number. Ví dụ.
1 5. Number propertiesCác thuộc tính bên dưới chỉ được truy cập qua Number, không phải qua biến, hằng hoặc biểu thức như method bên trên. Nếu cố tình vi phạm, thì kết quả trả về là undefined.
2 Bên dưới là danh sách các thuộc tính. Có lẽ không cần nói nhiều nữa, chỉ cần đọc qua tên thôi các bạn cũng có thể hiểu được rồi.
3 C. Boolean1. OverviewBoolean lưu trữ hai giá trị đúng (true) và sai (false). Biến kiểu boolean có thể được dùng thay cho điều kiện trong các câu lệnh khác.
4 Các biểu thức so sánh (comparison) và logic đều trả về một giá trị boolean. 2. Truthy & falsyTrong JS, mọi thứ đều có thể được xem như một kiểu boolean, và có hai giá trị là truthy và falsy:
Sử dụng toán tử
6 phía trước một đối tượng sẽ biến nó thành Boolean, như ví dụ sau đây.
5 3. Properties & methodsBoolean không có nhiều property và method, chủ yếu là hai method
7 (chuyển thành string) và
0 (lấy giá trị primitive - trong trường hợp này không có nhiều ý nghĩa). 4. Boolean tricksMột số trick liên quan tới boolean, giúp viết code nhanh hơn. Shorthand evaluate Thay vì viết.
6 Thì có thể viết nhanh thành
7 Trick này được thực hiện nhờ JS tối ưu hóa phép so sánh AND. Nếu vế trái
9 là false, thì không thực hiện vế phải (tối ưu hơn), ngược lại
9 là true thì phải xét tiếp vế phải
01 nữa. Kết quả là
01 chỉ được thực thi khi
9 là true. Default value Đôi khi chúng ta muốn kiểm tra dữ liệu nhập vào, thường là kiểm tra dữ liệu có tồn tại hay không. Nếu có thì ok, nếu không có cần cho nó một giá trị mặc định (default value) thay thế. Do đó, chúng ta thường viết code như sau.
8 Với boolean trong JS, có thể rút gọn code trên thành thế này.
9 Giải thích là trong các phép so sánh logic, thì JS chuyển các phần thành boolean hết. Vế trái được kiểm tra có dữ liệu hay không, nghĩa là biến thành boolean. Nếu là true, thì không cần so sánh vế phải, toàn bộ phép OR trả về vế trái. Ngược lại nếu vế trái là false, nghĩa là không có dữ liệu, thì xét vế phải. Vế phải phép OR luôn là true (do là string có dữ liệu), nên lúc này giá trị trả về là vế phải. Trong code nên, phép so sánh OR bắt JS lựa chọn: Nếu
04 có dữ liệu thì chọn nó, nếu không có dữ liệu thì chọn vế phải biểu thức là chuỗi
05. Number tricks Hai phép and và or cũng dùng đượ với các số, như sau.
0 D. String1. OverviewString (chuỗi) dùng lưu dữ liệu dạng text. Nội dung của string được bao lại trong cặp nháy kép hoặc nháy đơn tùy trường hợp. Nếu nội dung chứa nháy kép, thì dùng nháy đơn, và ngược lại. Một số trường hợp code JS trong HTML event, thì phải bắt buộc dùng nháy đơn do nháy kép bị HTML attribute lấy rồi.
1 Khác với các ngôn ngữ khác, việc truy cập ngoài phạm vi mảng hoặc chuỗi không xảy ra lỗi. Khi đó giá trị bên ngoài phạm vi có value là undefined. Chuỗi về cơ bản là một mảng các kí tự, có index đếm từ 0. Escape character String không thể trực tiếp chứa một số kí tự, do không gõ được trên bàn phím hoặc gây nhầm lẫn (như trường hợp trên). Do đó cần thoát nó bằng cách chèn dấu \ (backslash) trước kí tự đặc biệt trên. Ví dụ.
2 Kí tự
06 trong chuỗi phải ghi thành
07 gọi là escape character (escape sequense) Ngoài ra các kí tự khác như tab (
08), new line (
09),... cũng được viết như trên, tương tự các ngôn ngữ khác. Line breaking Khi viết code không nên dài quá 80 kí tự một dòng, khi đó nên ngắt xuống dòng mới ngay tại toán tử, không ngắt giữa string như sau là sai.
3 Trong trường hợp nếu muốn ngắt ngay giữa string, nghĩa là chia chuỗi thành 2 dòng, thì phải viết như sau với dấu \ ở cuối dòng.
4 ES6 có template string nhưng tạm thời không nói tới ở đây. 2. Properties & methodsVì phần property của string chỉ có mỗi cái length, nên mình gộp chung vào đây luôn. Length property Thuộc tính length trả về độ dài chuỗi, chú ý length là thuộc tính nên không có ngoặc () tham số.
5 Access character Dùng hai method
10 và
11 để lấy kí tự và mã tại một vị trí (index) nào đó.
6 Chú ý chuỗi mã hóa UTF-16, nên có thể chứa tiếng Việt và có mã trong khoảng 0 - 65535. ES5 giới thiệu cách dùng [] để truy xuất kí tự trong chuỗi, tương tự như mảng. Khi không tìm thấy kí tự, [] trả về undefined trong khi
10 trả về rỗng. Ngoài ra không thể thay đổi nội dung của string, vì JS string là immutable (bất biến). Mọi thay đổi vào string phải tạo chuỗi mới, do đó các method tiếp theo sẽ trả về chuỗi mới thay vì thay đổi trực tiếp lên chuỗi cũ. Nếu cố tình thay đổi chuỗi, thì không có lỗi nhưng không có gì xảy ra cả. String concat Có nhiều cách nối chuỗi, gồm dùng phép +, dùng method
13 hoặc gom thành mảng rồi
14. Phần này chỉ nó về method
13.
7 Trim method Dùng method này để loại bỏ các khoảng trắng (space) ở đầu và cuối chuỗi.
8 Uppercase, lowercase Dùng hai method
16 và
17 để chuyển chuỗi thành hoa/thường toàn bộ.
9 Find substring position Để tìm vị trí chuỗi con (substring) trong chuỗi đã cho thì có 3 method như sau. Các method này trả về index (vị trí) tìm thấy, nếu không có trả về -1.
0 Đúng, đó là 3 method
18,
19 và
20. Khác biệt như sau:
Ngoài ra
20 không có param (tham số) thứ 2 là vị trí bắt đầu tìm, trong khi hai method còn lại có. Vị trí này chỉ định tìm từ index trở đi, không phải tìm từ đầu, giúp tối ưu hơn trong một số bài toán. Extract substring Dùng 3 method sau để trích xuất (extract) một phần chuỗi và trả về chuỗi mới.
1 Method
28 không cho phép chỉ số là số âm, trong khi hai method còn lại cho phép. Method này cắt chuỗi từ start index và kết thúc tại end index (kí tự end không được lấy). Method
29 bắt đầu tìm tại index và lấy ra chuỗi con có độ dài yêu cầu. Method
30 khá giống
28, nhưng chấp nhận chỉ số index âm (chỉ số âm sẽ đếm ngược từ cuối chuỗi lên đầu, -1, -2,....). Replace method Method
32 dùng để thay thế một phần của chuỗi bằng một chuỗi mới.
2 Tham số 1 là chuỗi cũ, tham số 2 là chuỗi cần thay thế.
32 chấp nhận tham số 1 là chuỗi regex. Split method Dùng tách chuỗi thành một mảng các chuỗi con, dựa trên chuỗi phân tách (separator).
3 Khi tách theo dấu phân cách như trên, sẽ gặp trường hợp nhiều dấu phân cách liền nhau. Khi đó split sẽ không hoạt động như mong đợi, ví dụ.
4 Để xử lý trường hợp nhiều dấu phân tách liền kề nhau, chúng ta sử dụng regex.
5 Chuỗi regex trên đại diện cho 1 hoặc nhiều kí tự space liền kề, do đó regex có thể làm dấu phân tách chuỗi, kết quả cho ra sẽ đúng với những gì bạn nghĩ. ES6 new methods ES6 bổ sung thêm một số method xử lý string mới.
6 Mặc dù các method này có thể được thay thế bằng cách so sánh
18, nhưng dùng những method mới sẽ rõ ràng hơn. E. Array 11. OverviewArray (mảng) cho phép lưu trữ nhiều giá trị trong một biến duy nhất (biến mảng). Các phần tử (element) trong array được truy cập theo chỉ số (index) tính từ 0. Khác với nhiều ngôn ngữ khác, array trong JS cho phép chứa nhiều kiểu dữ liệu khác nhau. Và array không bị giới hạn số phần tử như một số ngôn ngữ strong type. Array declaration
7 Khai báo mảng gồm tên mảng và danh sách các value trong cặp [], cách nhau bởi dấu phẩy. Access array element Sử dụng chỉ số (index) để truy cập phần tử. Chỉ số được tính từ 0.
8 Nếu vượt quá phạm vi mảng, thì không có lỗi mà giá trị nhận được là undefined. 2. Array and object?Array is an object Array thực sự là một object, nếu dùng typeof cho một mảng thì kết quả trả về là object. Mảng trong JS dùng index truy cập các phần tử, đây là cách tốt nhất. Tuy nhiên tương tự các object khác, những phần tử có thể được truy cập thông qua tên thuộc tính. Creating array as an object Array thay vì được khai báo bằng cách gán giá trị thông thường, còn có thể được khai báo bởi từ khóa new và Array constructor.
9 Array constructor nhận vào danh sách các đối số làm giá trị khởi tạo cho mảng. Tuy nhiên, không nên dùng cách này vì rối rắm và gây lỗi. Ví dụ.
0 Nghĩa là gì, tạo mảng a có một giá trị 10, hay mảng a có 10 giá trị ban đầu??? Do đó, nên khai báo array với [] như bình thường thôi. Associative array Như đã nói, thì array trong JS thực sự là một object, nó sẽ có tên thuộc tính và value của thuộc tính đó. Thay vì truy cập value qua index, thì dạng object sẽ sử dụng tên thuộc tính để truy cập. Do đó, array dạng này gọi là associative array, có index được đặt tên (named index). Khi khai báo với [] thì chỉ tạo value và index. Để thực sự có tên thuộc tính, cần phải gán thêm giá trị cho mảng.
1 Lúc này, chúng ta có thể gọi
35 thay vì
36 để truy cập value. Index là số, trong trường hợp này đã được đặt tên là "John". Chú ý, lúc này một số method, property sẽ cho giá trị không đúng. Và nên hạn chế dùng array dạng này, nếu muốn có tên thuộc tính thì dùng object thay thế. Compare array Vì array là object, nên việc so sánh hai array thực chất là so sánh hai object. Mà so sánh hai object dù bằng cách nào đi nữa, bằng toán tử
37 hay
38 hoặc cả
39 thì đều là so sánh địa chỉ của chúng. Hai object khác nhau sẽ có địa chỉ khác nhau, array cũng thế, nên các phép so sánh trên luôn trả về false. Để so sánh nội dung hai array có giống nhau hay không, phải sử dụng các phép lặp kiểm tra từng phần tử và kèm thêm so sánh độ dài. 3. Properties & methods 1Length property Trả về độ dài mảng. Chú ý
40 là thuộc tính, không phải method, nên viết như sau là sai.
2
40 có một số hành vi kì lạ, cụ thể giá trị của length là giá trị index cao nhất có value + 1. Ví dụ mảng
42 có chỉ số cao nhất là 3, nên
40 được tính là 3 + 1 = 4. Điều này dẫn tới một vấn đề sau đây.
3 Bạn nghĩ
44 sẽ có giá trị bao nhiêu? Nếu là 5 thì bạn sai rồi đó, bây giờ length là 7 (index cao nhất 6 + 1 = 7). Rõ ràng nó không đúng với logic suy nghĩ của mình, khi mảng chỉ có 5 phần tử mà length lại là 7. Thực ra, cấu trúc mảng a bây giờ như sau.
4 Xuất hiện những khoảng empty (chưa có value) bên trong mảng, và nó làm thuộc tính
40 bị tính sai. Do đó, thay vì gán trực tiếp như trên, nên sử dụng các method được trình bày tiếp theo đây để thêm phần tử vào mảng một cách an toàn. Unshift & push method
5 Hai method này thêm element vào mảng và trả về độ dài mảng mới.
46 thêm vào cuối còn
47 thêm vào đầu mảng (các phần tử khác bị đẩy về sau). Shift & pop method
6 Hai method này xóa element ra khỏi mảng, và return giá trị vừa xóa.
48 xóa ở cuối còn
49 xóa ở đầu (các phần tử khác bị dời về trước 1 đơn vị). Delete element
7 Xóa element của array nhưng không dời chỗ các element khác. Xem lại ví dụ vấn đề của length, thì có thể dùng lệnh này để xóa đi một phần tử, xem như nó chưa từng có value. Xóa toàn bộ mảng Có hai cách, gán cho nó mảng rỗng [] hoặc đặt
40 thành 0. F. Array 21. Methods 2Array concat Dùng method
13 để gộp hai mảng thành 1, method trả về một mảng mới.
8 Ngoài ra còn cách khác là dùng spread operator (ES6) để nối nhanh hơn, nhưng không bàn tới ở đây. Splice method Method này vừa xóa các phần tử đã có, vừa thêm các phần tử mới vào.
9 Ngoài ra,
52 còn có thể dùng chỉ để xóa hoặc chèn thêm. Slice method Giống với string, method
30 dùng cắt một phần mảng và trả về mảng mới.
0
30 có thể có 1 hoặc 2 tham số, nếu tham số 2 không có thì nó sẽ cắt tới hết mảng. Nếu có đối số thứ 2 thì đó là vị trí dừng, phần tử ở vị trí end không được lấy. Chú ý tên method là
30, khác với
52 ở trên. Join & toString method Hai method này dùng chuyển mảng thành một chuỗi duy nhất.
1
7 chuyển thành chuỗi, phân tách các phần tử bởi dấu phẩy và viết sát nhau. Phần tử cuối không có phẩy (no trailing comma). Trong khi đó
14 thì nâng cao hơn một chút. Method này nhận vào một chuỗi làm dấu phân tách tùy chỉnh, ví dụ muốn đẹp hơn thì dùng
14.
2 Nếu
14 không có tham số thì giống như
7. IndexOf, lastIndexOf method Dùng tìm vị trí một value trong mảng, tương tự như của string. Kết quả trả về là -1 nếu không tìm thấy, là vị trí nếu tìm thấy element. Hai method trên nhận vào một tham số thứ 2, là vị trí bắt đầu tìm. Includes method Method trả về boolean, cho biết một value có tồn tại trong mảng hay không.
3 Mặc dù có thể sử dụng phép so sánh
62 nhưng nên dùng
63 vì làm code rõ ràng hơn. Fill method Method dùng để điền (fill) một phần tử vào một đoạn liên tục của mảng. Method nhận vào ba đối số:
Kết quả trả về là chính mảng đó.
4 Hai đối số sau có thể bỏ qua, nếu đối 3 bỏ qua thì điền từ vị trí bắt đầu cho tới hết, nếu hai đối sau bị bỏ qua thì điền toàn bộ mảng.
5 2. Array constructor methodsNhững method với array bên trên như
13,
14 đều dùng thông qua biến array. Bên cạnh đó JS còn hỗ trợ thêm một số method trong
66 constructor, có dạng
67 để xử lý một số thao tác trên mảng. Array.isArray method Dùng kiểm tra một đối tượng có phải array hay không.
6 Vì array là object, nên chúng ta có cách thứ 2 là dùng toán tử
68 như sau.
7 Ngoài ra còn có một cách là tìm chữ "Array" trong code constructor (thuộc tính constructor) của biến đó. Nhưng chúng ta không dùng cách này vì hơi nhảm và chậm. Array.of method Method
69 nhận vào một số lượng đối số bất kì và trả về một mảng mới. Ví dụ hai lệnh sau là tương đương.
8 Array.from method Method
69 lấy các phần tử trong một thứ giống mảng và trả về một mảng mới. Nói nôm nay là method này biến một danh sách giống mảng thành một mảng. Ví dụ như bên dưới,
71 trả về một HTMLcollection, và dùng
69 để tạo một mảng từ nó.
9 Cách thứ hai là nó cũng hoạt động như method
73, dùng để map phần tử từ mảng sang mảng nhưng với giá trị được tính toán khác đi (ví dụ mỗi phần tử nhân đôi). Phần method
73 phần sau sẽ được bàn tới.
0 3. SortingString sort Array có hai method để sắp xếp và đảo ngược mảng là
75 và
76.
1
75 sắp xếp tăng dần, nếu muốn giảm dần thì dùng thêm
76 để đảo lại. Nhưng có vấn đề,
75 mặc định sẽ sắp xếp chuỗi (string sort), nên các số bị xếp sai (ví dụ 11 nhỏ hơn 2). Do đó, để sắp xếp các mảng số thì cần dùng numberic sort như bên dưới. Numberic sort Ở đây chúng ta cũng dùng method
75 với 1 tham số là hàm callback tùy chỉnh cách so sánh, gọi là compare function. Function này nhận vào hai số, và kết quả trả về sẽ quyết định cách sort.
2 Kết quả trên cho mảng sắp xếp tăng dần. Để xếp giảm dần, không cần dùng
76 trong trường hợp này, chỉ cần sửa
82 thành
83 trong code trên là được. 4. Find max, minTìm max, min trong mảng nhanh chóng thì dùng method
84 và
85. Chú ý không gọi như cách bình thường được, vì các method trên không nhận mảng, do đó cần gọi với
86 như sau.
3 Tham số null không cần quan tâm, vì chúng ta không truyền object gì vào cho
86 cả. G. Array iteration methods1. OverviewES5 có thêm một số iteration methods, là những method dùng để lặp, duyệt qua tất cả phần tử của iterable object, hiểu đơn giản là những đối tượng có thể lặp qua (iterable). Trong phần này chỉ xét tới array. Các iteration method đều yêu cầu truyền 1 param dạng callback function. Function này có dạng như sau.
4 Qua mỗi lần duyệt một phần tử, thì thông tin sẽ được cập nhật và hàm callback trên được gọi một lần, với thông tin mới. Do đó, chúng ta đặt các xử lý bên trong chúng, và return về một giá trị phù hợp với chức năng từng method. Nếu vẫn chưa hiểu, không sao cả, hãy đi vào ví dụ bên dưới. Không nhất thiết các method này duyệt hết mảng, một số method chỉ duyệt đủ điều kiện là dừng ngay, như
88 hoặc
89. 2. Iteration methodsArray looping Để lặp qua các phần tử của mảng thì chúng ta có thể dùng vòng lặp for như bình thường, lặp qua các index và truy cập phần tử qua index. Hoặc ES5 có thêm vòng lặp for of như sau.
5 Trong mỗi lần lặp như vậy e sẽ lần lượt mang từng giá trị của phần tử trong mảng. Nhược điểm cách này là không biết được index cua phần tử là bao nhiêu, muốn biết cần thêm vài dòng code rườm rà nữa. Do đó, method
90 ra đời như một cách thức nâng cao hơn để lặp mảng.
6 Chú ý tới function ẩn danh (không có tên) có chứa 3 tham số
91. Các bạn sẽ gặp lại nó trong suốt phần này. Hàm callback trên có 3 tham số, nhưng có thể bỏ đi hai tham số sau nếu không cần thiết, chỉ cần giữ lại value. Với method
90 có tới 3 tham số như trên, chúng ta có thể vừa biết value, vừa biết được index đang ở vị trí nào, vừa có thể truy cập array. Quá tiện phải không, nhưng bù lại thì tốc độ sẽ chậm hơn. Map method Tạo mảng mới có độ dài giống mảng ban đầu, nhưng các phần tử có giá trị được tính toán, biến đổi mới lại theo một cách nào đó.
7 Method
73 tạo array mới, với từng phần tử trong array cũ sẽ được áp dụng một số phép biến đổi (trong code là nhân 2) để thành phần tử mới. Thao tác này gọi là map. Chú ý return trong callback là return từng giá trị mới cho mảng mới được tổng hợp. Filter method Trả về mảng mới, gồm các phần tử nào trong mảng cũ khớp với điều kiện gì đó.
8 Method
94 duyệt từng phần tử, với mỗi phần tử xét xem nó có được thêm vào mảng mới hay không. Return của filter là return boolean, true thì phần tử được nhận, false thì phần tử bị bỏ qua. Every, some method Toàn bộ method trả về boolean,
89 kiểm tra mảng có tất cả phần tử hợp điều kiện, trong khi
88 chỉ cần một phần tử khớp điều kiện cho là ok.
9 Cả hai method duyệt từng element,
89 tất cả element phải return true thì every mới true, còn
88 chỉ cần một element true là true ngay. Find, findIndex method Dùng trả về vị trí một value trong mảng.
99 trả về value, trong khi
00 trả về index của value tìm thấy (phần tử đầu tiên). Nếu không có,
99 trả về undefined và
00 trả về -1. Lưu ý "find" ở đây không chỉ đơn thuần là tìm một giá trị trong mảng, mà chính xác hơn nó tìm phần tử đầu tiên khớp với một điều kiện nào đó.
0 Bên trong callback, chúng ta return một boolean mô tả điều kiện tìm thấy, ví dụ như bằng 5 (tìm số 5 trong mảng), nhỏ hơn 5 (tìm số đầu tiên nhỏ hơn 5),...) Nếu đang tìm giữa chừng mà tìm thấy value khớp điều kiện, thì dừng lại luôn không xét nữa. Reduce, reduceRight Reduce là thao tác từ một array nhiều phần tử "giảm" (reduce) xuống còn một giá trị duy nhất. Thường dùng cho tính tổng tất cả phần tử trong mảng, ta gọi là "giảm dần mảng thành một tổng" thay vì "tính tổng của toàn bộ mảng".
03 và
04 hơi khác với các iteration method khác, là callback của nó có thêm một tham số
05 đầu tiên.
1 Giá trị
05 là giá trị được "gom" lại trước đó. Trong đoạn code trên thì giá trị trước đó được cộng thêm value vào, và return thành giá trị mới. Giá trị này trong vòng lặp tiếp theo sẽ trở thành
05. Tóm lại, sau khi lặp hết mọi phần tử,
05 từ 0 được cộng dần lên, và cuối cùng thành tổng của mảng. Tổng này được trả về cho method
03 hoặc
04. Hai method trên còn nhận vào param 2 phía sau hàm callback, là khởi tạo giá trị ban đầu cho
05. Và đặc biệt, JS rất thông minh khi dùng phép cộng (tính tổng) thì mặc định giá trị ban đầu là 0, nhưng khi dùng phép nhân (tính tích) thì giá trị ban đầu lại là 1. Thông minh chưa .
04 tương tự
03, nhưng được chạy từ cuối mảng lên đầu, vậy thôi. 3. Arrow functionThường thì người ta sẽ dùng arrow function (ES6) trong trường hợp này để viết code ngắn hơn. Ví dụ thay vì.
2 thì sẽ viết với arrow function là
3 hoặc
4 Nếu bạn chưa biết arrow function thì đừng lo, các bài sau sẽ có nói tới. Trong các code phía trên mình viết function callback dạng thường cho dễ hiểu. H. Date1. Date objectĐể thực hiện các thao tác với thời gian, chúng ta sử dụng đối tượng Date. Chú ý thời gian ở đây gồm ngày tháng (date) và thời gian (time). Có 4 cách để tạo date object, bằng các tham số khác nhau được truyền cho Date constructor. Current datetime
5
14 constructor không có param sẽ lấy thời gain hiện tại lưu vào biến. Chú ý thời gian lưu vào là cố định, không tự động thay đổi trừ khi bạn cập nhật lại cho nó. Custom datetime
6 Nhận 7 tham số lần lượt là năm (year), tháng (month), ngày (day), giờ (hour), phút (minute), giây (second) và mili giây (milisecond - msec). Có hai chú ý sau:
Miliseconds JS thực sự lưu trữ thời gian dưới dạng số nguyên cực lớn, là số mili giây trôi qua từ thời điểm gốc. Thời điểm được chọn làm mốc của JS là 1/1/1970, 00:00:00.
7 Số miliseconds có thể là số âm, như vậy thì thời điểm sẽ được lùi về quá khứ. String datetime JS cũng cho phép nhận chuỗi ngày tháng và tự động phân tích ra thời gian phù hợp. Chuỗi datetime này phải tuân theo một số chuẩn nhất định để JS nhận diện chính xác, đọc thêm phần tiếp theo.
8 2. Date formatJS cho phép nhận diện chuỗi ngày tháng theo một quy tắc nhất định, gồm ngày chuẩn ISO, ngày dài (long date) hoặc ngày ngắn (short date) được chấp nhận. ISO date
9 Bên trên là một số ví dụ chuỗi ISO date được chấp nhận.
0 Thời gian trên có chữ "T" phân tách ngày tháng và thời gian. Chữ "Z" ở cuối cho biết đây là thời gian UTC, múi giờ GMT (0). Hoặc có thể bỏ Z đi và chỉ định độ lệch múi giờ như sau.
1 Thay chữ "Z" bằng
15 hoặc
16 đều được. Long date Long date trong JS có dạng
17, trong đó dùng dấu space để tách ra. Năm luôn ở cuối cùng và tháng và ngày có thể đổi chỗ cho nhau.
2 Tháng có thể viết tắt hoặc đầy đủ đều được, và không phân biệt hoa thường. Short date Cú pháp chuỗi short date trong JS chấp nhận có dạng
18. 3. Date get, set methodsDate object có một số method dạng
19 và
20, dùng để đọc (get) hoặc thay đổi (change) các thành phần của thời gian. Get methods
3 Chú ý các method lấy thời gian cần có
21.
4 Ngoài ra còn có các method dạng
22 tương tự để lấy thời gian tại mốc GMT. Set methods Tương tự như
19, nhưng nhận vào các tham số là giá trị mới để gán, thay vì để trống. Ví dụ
5 4. Date actionsDisplay date Method
7 chuyển date object thành một chuỗi mô tả thời gian, gồm thứ, tháng ngày, năm, giờ, phút, giây, (không có miligiây), múi giờ và tên múi giờ. Bên cạnh đó ocnf có method
25 để lấy chuỗi thời gian tại GMT. Get miliseconds Nếu chri muốn lấy số miligiây của một chuỗi ngày cụ thể mà không cần tạo date object, có thể dùng method
26 để parse chuỗi và lấy ra số miliseconds.
6 So sánh Vì các date object lưu trữ số mili giây, nên có thể xác định thời điểm nào trướ thời điểm nào bằng cách so sánh. Current time Khi bạn muốn cập nhật lại thời gian hiện tại cho date object, sử dụng method
27 và method
28 của đối tượng cần update như sau.
7
27 trả về số mili giây hiện tại, do đó để gán giá trị miligiây cần dùng
28. Cộng trừ thêm ngày Dùng kết hợp method
31 và
32 để cộng trừ một số ngày nhất định.
8 Tính số ngày giữa hai ngày Thực sự không có hàm, method nào hỗ trợ việc này cả. Có một giải pháp là tìm hiệu số miligiây, rồi chia cho số miligiây của một ngày như sau. |