JavaScript

Bài viết được sự cho phép của tác giả Lưu Bình An Trong javascript có rất nhiều cách để loop qua một array, chúng ta cùng bàn qua 4 cách chính hay sử dụng nhất for (let i = 0; i < arr.length; ++i) arr.forEach((v, i) => { /* ….. */}) for (let i in arr) for (const v of arr) 2 phương thức là for và for/in cho phép chúng ta truy cập đến giá trị index trong array, ko phải giá trị của element trong array const arr = ['a', 'b', 'c']; // sau đó chúng ta dùng truy cập element bằng giá trị index for (let i = 0; i < arr.length; ++i) { console.log(arr[i]); } for (let i in arr) { console.log(arr[i]); } Trong khi đó hai phương thức for/of và forEach sẽ truy xuất đến phần tử trong element, cũng có thể truy xuất vào index , nếu thích. arr.forEach((v, i) => console.log(v)); for (const v of arr) { console.log(v); } Có thể bạn chưa biết, array trong javascript cũng là một dạng đặc biệt của object, chúng ta có thể gán một property cho nó const arr = ['a', 'b', 'c']; console.log(typeof arr); // 'object' arr.test = 'bad'; console.log(arr.test); // bad arr[1] === arr['1']; // true, Nếu loop qua bằng 4 phương thức trên, chỉ duy nhất thằng for/in sẽ chạy qua const arr = ['a', 'b', 'c']; arr.test = 'bad'; // "a, b, c, bad" for (let i in arr) { console.log(arr[i]); } Đó là lý do tại sao chúng ta ko nên dùng for/in để loop qua array Đối với một element trống như thế này const arr = ['a',,'b'] console.log(arr.length); // 3 Xem thêm các tin đăng tuyển dụng lập trình viên javascript trên Station D Không chỉ vậy thôi đâu,...

Bài viết được sự cho phép bởi tác giả Sơn Dương Trong bài viết tìm hiểu Promise là gì ? Bạn hẳn đã hiểu rõ về khái niệm Promise này rồi đúng không? Quả thật, sau một thời gian sử dụng Promise API, mình cảm thấy rất thích thú, viết code sướng hơn hẳn. Từ phiên bản ES7, ngoài Promise ra, bạn còn có thêm Async/Await cũng sướng không kém. Bài viết này, mình sẽ chia sẻ một số thủ thuật javascript promise hay ho khi làm việc với Promise. Đảm bảo bạn sẽ ngạc nhiên cho mà coi. Hủy một fetch request Có một vấn đề nhức nhối khi làm việc với Promises đó là bạn không thể hủy (cancel) chúng. Bạn ao ước có một API kiểu như promiseInstance.cancel() để có thể cancel một promise nào đó. Nhưng rất tiếc, đời không như mơ! Thay vào đó, chúng ta phải sử dụng phương pháp phức tạp hơn một chút để cancel một promise. Kiểu như sau: const controller = new AbortController ( ) ; const { signal } = controller ; fetch ( "http://localhost:8000" , { signal } ) . then ( response = > { console . log ( `Request 1 is complete ! ` ) ; } ) . catch ( e = > { console . warn ( `Fetch 1 error : $ { e . message } ` ) ; } ) ; // Abort request controller . abort ( ) ; Điều kỳ diệu ở đây là chúng ta cung cấp tín hiệu (signal) cho từng fetch request. Trong thế giới Javascript, việc tạo API để kế thừa và trừa tượng hóa là tương đối khó khăn. Do vậy, trước mắt bạn cứ tạm sử dụng phương pháp như trên nhé. Tham khảo...

Với lập trình web, kiến thức về DOM và khả năng thao tác DOM là hai yếu tố quan trọng nhất. DOM cho bạn khả năng thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất. Và Javascript là một ngôn ngữ được sử dụng trên các Browser nên nó đóng một vai trò quan trọng trong các website. Javascript giúp cho việc thao tác với các tài liệu HTML kết hợp với các cú pháp riêng của nó để tạo nên các trải nghiệm thân thiện của web. Để thao tác được với các thẻ HTML thì nó phải thông qua một cơ chế ta gọi là DOM. DOM là gì? DOM là tên gọi viết tắt của ( D ocument O bject M odel – tạm dịch Mô hình Các Đối tượng Tài liệu ). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu – World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP… Trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha – con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ. Có thể thấy tất cả các thẻ HTML sẽ được quản lý trong đối tượng document. Thẻ cao nhất là thẻ html , tiếp theo là phân nhánh body và head . Bên...

Nếu bạn cần gọi một hàm lặp lại theo một khoản thời gian nhất định trong javascript bạn sẽ dùng gì? Một là dùng setInterval hay là đệ quy setTimeout Vì sao bạn nên cân nhắc trước khi sử dụng setInterval , nó đã gây ra tội tình gì? Vì sao sẽ tốt hơn nếu chúng ta lắng nghe và đợi một tín hiệu nào đó rồi chạy window.onload = () => { // đợi tính hiệu nào đó rồi thực thi một số việc // sẽ luôn là lựa chọn tốt nhất }; Nếu ông bà có dạy đợi mua bò mới đi làm chuồng thì đã muộn không đúng trong trường hợp này. CÓ trước hẳn làm gì thì làm. setInterval Với setInterval nó sẽ tiếp tục chạy cho tới khi chúng ta ra lệnh xóa nó hoặc đóng luôn trình duyệt. setInterval cam kết đoạn code của chúng ta nó sẽ được đưa vào STACK theo đúng một chu kỳ thời gian. Tuy nhiên , đoạn code này của bạn không được cam kết sẽ chạy theo đúng chu kỳ thời gian, phụ thuộc vào các yếu tố khác nữa, và đã phần là có độ trễ, theo một cách dân gian ta gọi nó là HÊN XUI Thời gian chạy của hàm dummyMethod1 tốn nhiều thời gian hơn dự tính, lý do thì không rõ. Nếu bạn chưa biết, javascript được thiết kế để chạy single thread, nghĩa là nó không thực hiện hai công việc cùng một lúc. Điều đó có nghĩa, các phương thức khác phía trên stack phải đợi cho đến khi dummyMethod1 làm xong công chuyện của nó. Tuyển dụng Javascript lương cao, xem ngay! Thêm một ví dụ khác, nếu hàm khai báo bên trong setInterval có thời gian chạy lớn...

Bài viết được sự cho phép của tác giả Kiên Nguyễn Mang tiếng là FE Developer, chính chiến khắp nơi, nào là Vuejs, ReactJs, Angular, nhưng đôi khi lại quên mất những điều đặc biệt ở Javascript ES6. Chà, tắc trách quá! Hãy cùng Kieblog điểm qua một số điều thú vị đôi khi ta quên mất là chỉ có ở ES6. Cùng bắt đầu nha! ES6 được xem như bước ngoặt lớn trong quá trình phát triển của ECMA Script 1. Default parameter Rõ ràng mà nói, từ xưa tới nay vẫn luôn dùng || để set giá trị default cho argument trong trường hợp không được truyền vào var kieblog = function (author, article, url) { var author = author || 'Kien nguyen' var article = article || 'Javascript ES6' var url = url || 'https://kieblog.vn' ... } Tuy nhiên, ở Javascript ES6, ta có thể set giá trị default của argument ngay khi khai báo function. Đơn giản như sau: var kieblog = function(author = 'Kien nguyen', article = 'Javascript ES6', url = 'https://kieblog.vn') { ... } Viết kiểu này vừa gọn, vừa tiện lại không làm source trở nên quá dài. Trông ra cũng giống Ruby đấy chứ! Việc làm Javascript lương cao 2. Template Literals Trước đây, khi muốn concat string các giá trị lấy theo chuỗi, ta sử dụng +. Tuy nhiên, với một hai cái thì không sao, tới chừng 5,6 cái thì thật sự là hoa cả mắt. Không ổn không ổn. // Chỉ 2 cái thì okie, không sao hết // Mặc dù nhìn hơi củ chuối, nhưng vẫn chấp nhận được! var aboutme = 'My name is ' + first + ' ' + last + '.' May mắn thay, ở Javascript ES6 ta có thể sử dụng syntax ${NAME}...

Bài viết được sự cho phép của tác giả Lưu Bình An Number.prototype.toLocaleString() const number = 12345.6789 // sẽ lấy local mặc định của trình duyệt console . log ( number . toLocaleString ( ) ) ; // 12,345.679 (en-US) console . log ( number . toLocaleString ( 'vi-VN' ) ) ; // 123.456,789 Định dạng tiền tệ Nếu muốn định dạng tiền tệ, bạn cần sử dụng thêm tham số thứ 2 của hàm toLocaleString { style : 'currency' , currency : [ giá trị ISO 4217 ] // tham số bắt buộc, ko truyền lỗi } Tham khảo giá trị ISO 3217 const number = 12345.6789 ; console . log ( number . toLocaleString ( 'vi-VN' , { style : 'currency' , currency : 'VND' } ) ) ; // 12.346 ₫ console . log ( number . toLocaleString ( 'ja-JP' , { style : 'currency' , currency : 'JPY' , } ) , ) ; // ￥12,346 Phần trăm Chuyển đồi thành đơn vị phần % ngoài việc nhân với 100, ns còn thêm 2 tùy chỉnh cũng vui là minimumFractionDigits và maximumFractionDigits (mặc định là 0 và 2 cho kiểu tiền tệ) để lấy số lượng ký tự muốn lấy const number = 0.1234 ; console . log ( number . toLocaleString ( 'en-US' , { style : 'percent' , minimumFractionDigits : 2 , } ) , ) ; // 12.34% console . log ( number . toLocaleString ( 'en-US' , { style : 'percent' , minimumFractionDigits : 1 , } ) , ) ; // 12.3% Intl.NumberFormat Nếu hông ưu Number.prototype.toLocaleString() có thể dùng constructor Intl.NumberFormat . Nếu như thấy sao phải lăng tăng giữa 2 thằng này? Trong trường hợp bạn cần làm việc định dạng này tới lui nhiều lần cho cùng một...

Tác giả: Abiola Farounbi Theo như kết quả nghiên cứu của Stack Overflow trong năm 2020, JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới, với hơn 63% các nhà phát triển đã và đang sử dụng nó. JavaScript có kho lưu trữ gói mã nguồn mở lớn nhất trên thế giới (npm) và cũng có nhiều khung và thư viện khác nhau được xây dựng cùng với nó. JavaScript rất dễ bắt đầu vì nó không yêu cầu bất kỳ cài đặt nào để bắt đầu coding. JavaScript có thể làm nhiều việc hơn so với những gì bạn biết Phát triển Front-end Web Front-end web là một hình thức phát triển giao diện người dùng liên quan mà người dùng có thể xem và tương tác được. Có 3 ngôn ngữ chính hiện nay có thể dùng để phát triển front-end: HTML, CSS và JavaScript. HTML (Ngôn ngữ đánh dấu siêu văn bản) liên quan đến cấu trúc và nội dung của trang web, CSS (Trang tính kiểu xếp tầng) xử lý kiểu dáng. Và cuối cùng, JavaScript làm cho trang web mang các hiệu ứng động, dễ nhìn hơn. Và điều này có thể được thực hiện theo nhiều cách khác nhau, chẳng hạn như: Thuyết trình Bạn có thể tạo băng chuyền và thanh trượt trên trang web một cách dễ dàng bằng cách sử dụng một số thư viện JavaScript như Reveal JS , Swiper JS và Owl JS Với các thư viện này, bạn có thể tùy chỉnh cách trình bày trang web của mình một cách nhanh chóng và không quá phiền phức. Sử dụng thuật toán quay lui giải bài toán phân tích số bằng JavaScript Hình ảnh động Một trong những cách bạn có thể làm cho trang...

Bài viết được sự cho phép của tác giả Kiên Nguyễn Trong quá trình làm việc với Javascript array, tất nhiên sẽ không tránh khỏi trường hợp ta muốn gán array trở thành empty (Javascript empty array). Có vô vàn cách để làm điều này, nhưng bài viết hôm nay tôi sẽ chỉ cho các ông thấy gán array cho [] tệ tới mức nào! 1. Thường xuyên sử dụng Nguyên nhân bao gồm nhiều thứ: Tạo array, dùng lại. Gán array xong muốn empty đi cho đỡ rối. Không có nhu cầu truy xuất data nữa. … Tuy nhiên, hãy cẩn thận khi gán [] nhằm empty array. Tại sao? . Câu trả lời có ngay đây: 2. Thử với ví dụ sau đây Giả sử, qua vô vàn khó khăn vất vả, ta có array sau đây: let characters = ["A", "B", "C"]; Sau khi cảm thấy không còn dùng nữa, đối với một lập trình viên bình thường, tất nhiên chỉ đơn giản là: // Gán array với [] - xong characters = []; Có vấn đề khi cố gắng Javascript empty array như vậy không?. Tất nhiên là có chứ!. Nếu ta có một array khác được copy từ array này? // Gán array với [] - xong let characters = ["A", "B", "C"]; let copyCharacters = characters; Chà, copy mà kết quả tất nhiên 2 array y hệt nhau. console.log(characters) console.log(copyCharacters) // ["A", "B", "C"] // ["A", "B", "C"] Trường hợp thay đổi một item trong array thứ nhất, tất nhiên nó sẽ có ngay ở array hai. Tuyệt cú mèo! characters[2] = "D"; console.log(characters) console.log(copyCharacters) // ["A", "B", "D"] // ["A", "B", "D"] Object Prototype Javascript – Công cụ hỗ trợ OOP cho JS 3. Cuối cùng thì có gì sai với [] Đây,...

Tác giả: Lưu Bình An Nếu đang muốn tìm những ví dụ thực tế sử dụng map và reduce, quá chán với ví dụ cộng số, bài viết này chính là dành cho bạn. Xóa phần tử trùng trong mảng Bạn có một mảng String, Number, giờ chúng ta xóa đi các phần tử bị trùng giá trị. Chúng ta sử dụng kiểu Set để đạt được mục đích này let values = [3,1,3,5,2,4,4,4]; let uniqueValues = [...new Set(values)]; // uniqueValues [3,1,5,2,4] Phương thức search đơn giản, phân biệt hoa thường 10 câu hỏi javascript để nâng cao trình độ 12 Thư viện JavaScript trực quan hoá dữ liệu hot nhất năm 2025 Chúng ta dùng hàm filter để tạo mảng mới, với điều kiện phần tử đó includes một String hoặc thỏa một expression let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let res = users.filter(it => it.name.includes('oli')); // res is [] Search đơn giản, không phần biệt hoa thường Chúng ta dùng RegExp để lọc theo điều kiện let res = users.filter(it => new RegExp('oli', "i").test(it.name)); // res is [ { id: 97, name: 'Oliver', age: 28, group: 'admin' } ] Kiểm tra user có nằm trong group admin không Dùng phương thức some() để kiểm tra có ít nhất một element trong mảng thỏa điều kiện đặt ra let hasAdmin = users.some(user => user.group === ‘admin’); // hasAdmin is true Giảm số chiều của mảng Nếu chúng ta có một mảng […[], …[1,2,3]], và chúng ta muốn transform nó thành [1,2,3] let nested = [[1, 2, 3], [4, 5, 6],...

Bài viết được sự cho phép của tác giả Nguyễn Trần Chung Mảng JavaScript cho phép bạn nhóm các giá trị và lặp lại chúng. Bạn có thể thêm và loại bỏ các phần tử mảng theo những cách khác nhau. Thật không may, không có một phương thức Array.remove đơn giản để loại bỏ phần tử nào đó ra khỏi mảng. Vậy, làm thế nào để bạn xóa một phần tử khỏi mảng JavaScript? Thay vì phương thức xóa, mảng JavaScript có nhiều cách bạn có thể xóa các giá trị mảng. 1. Xóa các phần tử ở cuối mảng Javascript 1.1 Dùng cách set lại độ dài của mảng Các phần tử mảng JavaScript có thể được loại bỏ khỏi phần cuối của mảng bằng cách đặt thuộc tính độ dài thành giá trị nhỏ hơn giá trị hiện tại. Bất kỳ phần tử nào có chỉ số lớn hơn hoặc bằng độ dài mới sẽ bị xóa. var ar = [ 1 , 2 , 3 , 4 , 5 , 6 ] ; ar . length = 4 ; // đặt độ dài để xóa bớt phần tử ở cuối console . log ( ar ) ; // [1, 2, 3, 4] 1.2 Dùng pop() Phương thức pop loại bỏ phần tử cuối cùng của mảng, trả về phần tử đó và cập nhật thuộc tính độ dài. Phương thức pop sửa đổi mảng mà nó được gọi, Điều này có nghĩa là nó không giống như cách trên mà phần tử cuối cùng được loại bỏ hoàn toàn và chiều dài mảng giảm đi. var ar = [ 1 , 2 , 3 , 4 , 5 , 6 ] ; ar . pop ( ) ; // returns 6 console . log ( ar...

Bài viết được sự cho phép của tác giả Lưu Bình An Phương thức **slice** (copy cho em một miếng) có thể sử dụng trên 2 kiểu String và Array Cách sử dụng cơ bản thì ta có thể truyền vào index bắt đầu, và index kết thúc ( kết quả tả về không bao gồm index kết thúc ) Index kết thúc cũng có thể bỏ qua , lúc này nó sẽ hiểu là lấy hết luôn các phần tử còn lại. Và nếu mà chúng ta truyền giá trị index kết thúc nó lớn hơn chiều dài của mảng, thì nó cũng không lỗi, mà trả về toàn bộ như không truyền vào Còn vui vui, bạn không truyền vào index bắt đầu luôn, thì nó cũng không lỗi nốt, mà sẽ sao y toàn bộ các phần tử vào mảng mới Xem thêm các việc làm JavaScript hấp dẫn tại Station D Với index bắt đầu nhận vào là undefined nó sẽ hiểu là 0 (em cũng lại javascript) Index bắt đầu lớn hơn độ dài của array ? Nó sẽ cho ta kết qua là một mảng rỗng Chưa đủ thú vị? Vậy truyền vào số âm thì sao? Lúc này nó sẽ được tính theo cơ chế index ngược , các giá trị âm sẽ được tính theo index: thằng cuối cùng là -1, áp cuối là -2, và cứ tiếp tục đi ngược lên. Sự khác nhau của bộ 3 Slice, Splice và Split trong Javascript 12 thủ thuật hữu ích trong JavaScript Chúng ta có thể dùng nó để lấy các phần tử từ phải qua trái (2 phần tử cuối, 3 phần tử cuối, ví dụ vậy) Đối với String thì cũng cách dùng cũng tương tự như Array (mai quá!) Mình...