Skip to main content

Posts

Showing posts with the label JavaScript

Danh sách những câu hỏi trong phỏng vấn Javascript

Danh sách những câu hỏi trong phỏng vấn Javascript. Dưới đây là những câu hỏi có thể giúp bạn giải đáp những câu hỏi mà có thể xảy ra trong các buổi phỏng vấn lập trình. Chúc bạn may mắn ! Xem chi tiết

Javascript kiểm tra Array chính xác hơn bằng Array.isArray

Các dev Javascript có thể điều biết, arrays is not true arrays . Mọi thứ trong javascript đều là object. Một cách điều hiểu điều đó rõ nhất là sử dụng typeof để kiểm tra nó, và tất nhiên nó sẽ là object. LOL Vậy làm sao để kiểm tra chính xác một phần tử có phải là array hay không trong javascript ? Đó đã không còn là vấn đề với Array.isArray(). Đây là các đơn giản để kiểm tra chính xác giá trị có phải là mảng hay không. Array is not true array Hãy xem ví dụ dưới để hiểu hơn, array is not true array Đó chính là lý do tại sao ta không lên dùng typeof để kiểm tra array. Array.isArray() demo Ví dụ dưới đây đều là array và đều return về true

Setting Default Parameters

Rất đơn giản để xét tham số mặc định trong ES6. Thông thường nếu như bạn không truyền tham số vào function thì kết quả hiển thị ra sẽ là undefined. Hoặc bạn sẽ phải if else để lọc. Bằng cách sử dụng tham số mặc định sẽ giúp tốt hơn. Ví dụ: Resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

Pretty JSON Output

Bạn cảm thấy khó chịu khi JSON output trên cùng 1 dòng, điều đó sẽ chấm dứt với JSON.stringify giúp output ngắn gọn hơn và dễ nhìn hơn. Chỉ cần truyền vào tham số thứ 3 là khoảng cách (space) BOOM ! Tab Spacing Để sử dụng Tab bạn chỉ cần truyền vào tham số "\t" . Ví dụ: Understanding the “Space” argument Tham số thứ 3 của JSON.stringify sử dụng khoảng cách. Nó sẽ giúp cho string output của bạn gọn gàng và dễ nhìn hơn. Nó có 2 loại tham số truyền vào: Number và String . a. Number Bạn có thể dùng bất kì các số từ 0 tới 10. b. String Bạn có thể dùng string thay cho khoảng trống của JSON.stringify. Tối đa bạn chỉ được dùng 10 kí tự. Nếu lớn hơn nó sẽ chỉ lấy 10 kí tự đầu tiên. Hãy thử nó: What is the 2nd parameter ? Tham số thứ 2 dùng để replace. Nó sẽ có 2 loại: Array và Function. a. Array Tôi sẽ demo thử cho bạn với array để thấy sự thú vị của nó: Bạn có thể chọn các cặp key-value bạn muốn output ra...

Hiểu hơn về React default props

Trong bài viết này, ta sẽ hiểu hơn về default props trong React. Short Intro Reactjs, JSX-based JavaScript UI là một thư viện JS phổ biến nhất hiện nay. Hàng triệu ứng dụng được xây dựng bằng React, nó cung cấp khá nhiều ý tưởng: - Performance tốt - Ứng dụng nhỏ - Vitual DOM - Tái sử dụng code - UI xây dựng bằng Components - Chạy trên nhiều nền tảng: Mobile/Tablet and Desktop - Dễ dàng cho người mới bắt đầu Một React component y như một HTML element và component cơ bản là một class bao gồm: - props - data - state ( dùng setState() để thay đổi ) - markup ( dùng render() ) Tất cả những điều trên sẽ tạo ra một UI widget. Components là một công cụ chính để ta xây dựng giao diện UI. Tất cả các ứng dụng React sẽ có root component, nó thương được gọi là App component. React cung cấp các component truyền data cho nhau và các events khác nhau. Bạn có thể viết một component và sử dụng nó như là một component con - chúng thì có liên kết đến nhau. Mỗi component sẽ ba...

Master Proptypes trong React

React là một thư viện JavaScript cho việc xây dựng giao diện người dùng (UI). React giúp quản lý dễ các trạng thái (state) của ứng dụng hơn và sẽ thay đổi UI khi mà state thay đổi. React dựa vào các component và mỗi component có state của nó. Nếu như là state của component dùng setState() và có thể thể props từ component cha. The Problem Từ khi Reatc là một thư viện JavaScript và JS không cung cấp bất cứ thứ gì về type-checking , bỏ qua việc đó khi sử dụng props component có thể khiến bạn gặp bugs trong ứng dụng. Solution Bạn có thể dùng Js extensions như TypeScript cho việc checking, nhưng nếu bạn không muốn sử dụng nó, React cung cấp đầy đủ cho tính năng type-checking verify props của các component chính xác type. Sử dụng PropTypes, bạn có thể chắc chắn các component nhận đúng type của props. Ví dụ, ta có Person component và nhận 2 props: `name` và `age`. Sử dụng PropTypes, ta có thể chắc chắn `name` luôn luôn là `string` và `age` luôn luôn là number. Installing Pr...

ES6 Arrow Function Cheatsheet

Dưới đây là một số cách để bạn có thể viết arrow functions trong ES6 . // Explicit Return, Multi-Line a => { return a } // Explicit Return, Single-Line a => { return a } // Implicit Return, Multi-line a => ( a ) // Implicit Return, Single-Line a => a // Multiple Parameters, Parentheses Required (a, b) => a, b Implicit vs Explicit Return Mỗi chúng ta có một cách viết arrow functions khác nhau. Với normal functions , nếu bạn muốn return 1 cái gì đó, bạn sẽ dùng từ khóa return . Arrow functions cũng như vậy. Khi bạn dùng từ khóa return , nó sẽ gọi là ` explicit return `. Hãy thử coi các ví dụ sau: Có thể nhận rõ ràng sự khác biệt. Khi nào thì dùng dấu ngoặc nhọn` {} `, bạn cần phải chính xác cái mà return ra. Tuy nhiên, nếu không dùng ` {} `, return sẽ là bao hàm, và bạn không cần chúng. Có một cách gọi tên cho việc đó. Khi bạn sử dụng dấu ngoặc nhọn như ở Example B thì nó gọi là ` block body `, và cú pháp ở Example C gọi là ` concise body `....

Xóa phần tử Duplicates trong mảng sử dụng ES6

Dưới đây là 3 cách để lọc các phần tử trùng nhau (duplicates) trong mảng và trả về những giá trị duy nhất. Tôi thích sử dụng Set bởi vì nó ngắn và đơn giản. 1. Sử dụng Set: Đầu tiên sẽ tìm hiểu Set là gì: Set là một đối tượng mới được giới thiệu trong ES6. Bởi vì Set chỉ cho lưu trữ các giá trị duy nhất. Khi bạn truyền vào nó 1 mảng thì nó sẽ xóa những giá trị trùng lặp. Okay, chúng ta sẽ nhìn những đoạn code sau để hiểu hơn về Set: 1. Đầu tiên, chúng ta sẽ tạo 1 Set mới bằng cách truyền vào cho nó 1 mảng. Bởi vì Set chỉ nhận các giá trị duy nhất lên sẽ xóa các phần tử trùng lặp. 2. Bây giờ các phần tử trùng nhau biến mất, chúng ta sẽ convert nó lại thành mảng bằng cách sử dụng toán tử ... Convert Set sang mảng sử dụng Array.from Ngoài ra, bạn có thể sử dụng Array.from để convert Set sang mảng: 2. Sử dụng filter: Để hiểu hơn về cách này, chúng ta sẽ xem qua cách 2 phương thức hoạt động: indexOf và filter. indexOf Phương thức indexOf sẽ trả về vị trí ...