Phá Kén

5 min
1 năm ago

Cho một mảng số nguyên số, quay lại đúng nếu bất kỳ giá trị nào xuất hiện ít nhất hai lần trong mảng và trả về sai nếu mọi phần tử đều khác biệt. Ví dụ 1: Thoạt nhìn, vấn đề có vẻ khá đơn giản. Ý […]

Tagged #ctdl&gt

Cho một mảng số nguyên số, quay lại đúng nếu bất kỳ giá trị nào xuất hiện ít nhất hai lần trong mảng và trả về sai nếu mọi phần tử đều khác biệt.

Ví dụ 1:

Input: nums = [1,2,3,1] Output: true

Thoạt nhìn, vấn đề có vẻ khá đơn giản. Ý tưởng ở đây là lặp lại mảng và tìm bất kỳ bản sao nào. Có một chút mã gian lận mà chúng ta có thể sử dụng với JavaScript trong phần này.

Giải pháp đầu tiên (cheating)

Đối tượng tập hợp là tập hợp các giá trị. Bạn có thể lặp qua các phần tử của một tập hợp theo thứ tự chèn. Một giá trị trong Tập hợp chỉ có thể xuất hiện một lần; nó là duy nhất trong Bộ sưu tập của Set.

Biết được điều này, điều duy nhất chúng ta cần làm là chuyển mảng của mình thành Tập hợp và so sánh độ dài của nó với độ dài mảng số ban đầu.

var containsDuplicate = function(nums) { const set = new Set([...nums]); return set.size != nums.length; };

Việc chuyển đổi một mảng thành Tập hợp rất đơn giản, chỉ cần trải mảng đó thành một mảng mới trong hàm tạo Set. Nó có thuộc tính tính toán kích thước (số lượng mục). Chúng ta chỉ cần so sánh nó với độ dài của mảng ban đầu, nums.

return set.size != nums.length;

Giải pháp thứ hai

Giống như của chúng ta (giải pháp đầu tiên) chúng ta có thể tạo một bảng băm của mảng khi lặp lại và đánh giá nó tại chỗ.

var containsDuplicate = function(nums) { const hashTable = new Map(); for(let i = 0; i < nums.length; i++) { if(hashTable.has(nums[i])) return true; else hashTable.set(nums[i], true); } return false; };

Để chia nhỏ điều này một chút: trước tiên chúng ta lặp lại mảng số. Nếu bản đồ đã có giá trị thì chúng ta trả về true. Chúng ta kiểm tra điều này với thuộc tính .has của map s

if(hashtable.has(nums[i]) return true;

Nếu không, chúng ta sẽ thêm nó vào bản đồ và tiếp tục.

else hashTable.set(nums[i], true);

Tổng Kết

Chúng ta có thể rút ra 1 cách làm ngắn gọn như sau:

Giải pháp:

Độ phức tạp thời gian: O(n)
Độ phức tạp của không gian: O(n)

var containsDuplicate = function(nums) { const map = {} for(const num of nums) { // If we have seen this num before return true if(map[num]) return true map[num] = true } return false };

Qua đây, hy vọng bạn có thêm chút kiến thức về giải thuật và nâng cao quá trình coding của mình nhé bạn ơi. Chúc các bạn làm việc hiệu quả :>

Leetcode 121: Giải bài Best Time to Buy and Sell Stock bằng JavaScript LeetCode

5 min
1 năm ago
5

Giải thích và mã giả: Để giải quyết vấn đề này, trước tiên người ta sử dụng một Cách tiếp cận thuật toán Brute Force. chúng tôi sẽ thử tất cả lợi nhuận có thể có được từ các giá trị nhất định […]

Tagged #seriesLeetCode

LeetCode – Rotate Image

1 min
1 năm ago
2

Vấn đề Bạn được cấp một nxn 2D ma trận đại diện cho một hình ảnh, xoay hình ảnh bằng cách 90 độ (theo chiều kim đồng hồ). Bạn phải xoay hình ảnh tại chỗ, điều đó có nghĩa là bạn phải sửa đổi trực tiếp ma trận 2D […]

Tagged #ctdl&gt

Vấn đề

Bạn được cấp một nxn 2D ma trận đại diện cho một hình ảnh, xoay hình ảnh bằng cách 90 độ (theo chiều kim đồng hồ).

Bạn phải xoay hình ảnh tại chỗ, điều đó có nghĩa là bạn phải sửa đổi trực tiếp ma trận 2D đầu vào. KHÔNG phân bổ một ma trận 2D khác và thực hiện phép quay.

Câu hỏi được lấy từ: https://leetcode.com/problems/rotate-image

Ví dụ 1:

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] Output: [[7, 4, 1], [8, 5, 2], [9, 6, 3]]

Ví dụ 2:

Input: matrix = [[5, 1, 9, 11], [2, 4, 8, 10], [13, 3, 6, 7], [15, 14, 12, 16]] Output: [[15, 13, 2, 5], [14, 3, 4, 1], [12, 6, 8, 9], [16, 7, 10, 11]]

Ví dụ 3:

Input: matrix = [[1]] Output: [[1]]

Ví dụ 4:

Input: matrix = [[1, 2], [3, 4]] Output: [[3, 1], [4, 2]]

Hạn chế:

- matrix.length == n - matrix[i].length == n - 1 <= n <= 20 - -1000 <= matrix[i][j] <= 1000

Giải thích

Xoay nhóm bốn ô

Giải pháp đầu tiên chúng ta có thể nghĩ đến là xoay bốn góc của ma trận. Chúng tôi cũng lặp lại điều này với các ô tiếp theo.

Hãy kiểm tra thuật toán.

- initialize m = matrix.size, tmp - loop for i = 0; i < m / 2; i++ - loop for j = i; j < m - 1 - i; j++ - tmp = matrix[i][j] - matrix[i][j] = matrix[m - 1 - j][i] - matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - j] - matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i] - matrix[j][m - 1 - i] = tmp

Độ phức tạp về thời gian của chương trình là O(M) vì mỗi ô sẽ được đọc một lần và được viết một lần. Độ phức tạp của không gian là ồ(1) bởi vì chúng tôi không sử dụng bất kỳ cấu trúc dữ liệu bổ sung nào khác.

giải pháp C++

class Solution { public: void rotate(vector<vector<int>>& matrix) { int m = matrix.size(), tmp; int j = 0; for(int i = 0; i < m/2; i++){ for(int j = i; j < m - 1 - i; j++){ tmp = matrix[i][j]; matrix[i][j] = matrix[m - 1 - j][i]; matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - j]; matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i]; matrix[j][m - 1 - i] = tmp; } } } };

Giải pháp Golang

func rotate(matrix [][]int) { m := len(matrix) tmp := 0 for i := 0; i < m / 2; i++ { for j := i; j < m - 1 - i; j++ { tmp = matrix[i][j]; matrix[i][j] = matrix[m - 1 - j][i]; matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - j]; matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i]; matrix[j][m - 1 - i] = tmp; } } }

Giải pháp Javascript

var rotate = function(matrix) { let m = matrix.length; let tmp = 0; let i, j; for(i = 0; i < m/2; i++){ for(j = i; j < m - 1 - i; j++){ tmp = matrix[i][j]; matrix[i][j] = matrix[m - 1 - j][i]; matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - j]; matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i]; matrix[j][m - 1 - i] = tmp; } } };

Chạy khô

Hãy chạy thử thuật toán của chúng tôi để xem giải pháp hoạt động như thế nào.

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] Step 1: m = matrix.length m = 3 Step 2: tmp = 0 Step 3: loop i = 0; i < 3/2 0 < 3/2 0 < 1 true j = i; j < 3 - 1 - 0 0 < 2 true tmp = matrix[i][j] tmp = 1 matrix[i][j] = matrix[m - 1 - j][i] matrix[0][0] = matrix[3 - 1 - 0][0] matrix[0][0] = matrix[2][0] matrix[0][0] = 7 matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - j] matrix[3 - 1 - 0][0] = matrix[3 - 1 - 0][3 - 1 - 0] matrix[2][0] = matrix[2][2] matrix[2][0] = 9 matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i] matrix[3 - 1 - 0][3 - 1 - 0] = matrix[0][3 - 1 - 0] matrix[2][2] = matrix[0][2] matrix[2][2] = 3 matrix[j][m - 1 - i] = tmp matrix[0][3 - 1 - 0] = 1 matrix[0][2] = 1 j++ j = 1 Step 4: j < 2 1 < 2 true tmp = matrix[0][1] tmp = 2 matrix[i][1] = matrix[m - 1 - j][i] matrix[0][1] = matrix[3 - 1 - 1][0] matrix[0][1] = matrix[1][0] matrix[0][1] = 4 matrix[m - 1 - j][i] = matrix[m - 1 - i][m - 1 - 1] matrix[3 - 1 - 1][0] = matrix[3 - 1 - 0][3 - 1 - 1] matrix[1][0] = matrix[2][1] matrix[1][0] = 8 matrix[m - 1 - i][m - 1 - j] = matrix[j][m - 1 - i] matrix[3 - 1 - 0][3 - 1 - 1] = matrix[1][3 - 1 - 0] matrix[2][1] = matrix[1][2] matrix[2][1] = 6 matrix[1][m - 1 - i] = tmp matrix[1][3 - 1 - 0] = 1 matrix[1][2] = 2 j++ j = 2 Step 5: j < 2 2 < 2 false Step 6: i++ i = 1 1 < 3/2 1 < 1 false Output: [[7, 4, 1], [8, 5, 2], [9, 6, 3]]

OOP trong javascript – Tính Encapsulation trong Javascript

Tài Liệu - Khóa Học Free

6 min
1 năm ago

Cái gì ??? Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức. Nó là một trong bốn […]

Tagged #javascript

Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức.

Nó là một trong bốn trụ cột của OOP, cùng với Kế thừa, Đa hình và Trừu tượng dữ liệu.

Tại sao ?

Việc đưa ra giả định mù quáng và tiếp tục sử dụng tính năng Encapsulation ở mọi nơi sẽ dễ dàng hơn, nhưng điều quan trọng là phải hiểu lý do tại sao để bạn có thể sử dụng nó đúng cách.

Hãy cố gắng hiểu (các) lý do tại sao bằng cách xem một nhiệm vụ ví dụ.

Nhiệm vụ:

Xây dựng một máy tính kết quả học sinh,

Tính điểm trung bình
Xác định xem học sinh có trượt hay đỗ không
Lỗi ném nếu bất kỳ dấu chủ đề nào không hợp lệ ( < 0 || > 100)

Giải pháp 1: cách không đóng gói

Ý tưởng chỉ nhằm giải quyết vấn đề nên tôi đã chọn Lập trình thủ tục cách đạt được nó mà tôi tin rằng có thể cho thấy sự tương phản tốt và làm cho vấn đề có vẻ rõ ràng hơn.

type Subject = "english" | "maths"; interface IStudent { name: string; marks: Record<Subject, number>; } // Receive Input const studentInput: IStudent = { name: "John", marks: { english: 100, maths: 100, }, }; // Step1: Validate the provided marks Object.keys(studentInput.marks).forEach((subjectName) => { const mark = studentInput.marks[subjectName as Subject]; if (mark > 100 || mark < 0) { throw new Error(`invlid mark found`); } }); // Step2: find the total marks const totalMarks = Object.keys(studentInput.marks).reduce( (accumulator: number, current: string) => studentInput.marks[current as Subject] + accumulator, 0 ); // Step3: find the average const average = totalMarks / Object.keys(studentInput.marks).length; // Step4: find the result const boolResult = average > 40; // Step 5: print result console.log(boolResult); console.log(average);

Vấn đề với giải pháp 1:

Điều này chắc chắn đạt được kết quả mong đợi nhưng có một số vấn đề liên quan đến nó. Để kể tên một vài,

Mọi triển khai ở đây đều có thể truy cập được trên toàn cầu và những người đóng góp trong tương lai không có quyền kiểm soát việc sử dụng nó.

Dữ liệu và hoạt động tách biệt nên khó theo dõi chức năng nào ảnh hưởng đến dữ liệu. Bạn sẽ phải xem xét cẩn thận từng đoạn mã để hiểu cái gì được gọi và một phần của quá trình thực thi.

Các chức năng trở nên khó quản lý hơn khi logic mở rộng. Các thay đổi có thể phá vỡ mã không liên quan do khớp nối chặt chẽ.

Làm thế nào để giải quyết vấn đề ?

Bằng cách kết hợp Đóng gói hoặc làm cho nó rõ ràng hơn bằng cách thực hiện hai bước dưới đây,

Kiểm soát quyền truy cập vào dữ liệu và chức năng
Kết hợp dữ liệu với hành vi

Giải pháp 2: Cách đóng gói

type SubjectNames = "english" | "maths"; interface IStudent { name: string; marks: Record<SubjectNames, number>; } class ResultCalculator { protected student: IStudent; constructor(student: IStudent) { this.student = student; } isPassed(): boolean { let resultStatus = true; Object.keys(this.student.marks).forEach((subject: string) => { if (this.student.marks[subject as SubjectNames] < 40) { resultStatus = false; } }); return resultStatus; } getAverage(): number { this.validateMarks(); return this.totalMarks() / this.subjectCount(); } private validateMarks() { Object.keys(this.student.marks).forEach((subject: string) => { if ( this.student.marks[subject as SubjectNames] < 0 || this.student.marks[subject as SubjectNames] > 100 ) { throw new Error(`invalid mark`); } }); } private totalMarks() { return Object.keys(this.student.marks).reduce( (acc, curr) => this.student.marks[curr as SubjectNames] + acc, 0 ); } private subjectCount() { return Object.keys(this.student.marks).length; } } // Receive Input const a: IStudent = { name: "jingleheimer schmidt", marks: { english: 100, maths: 100, }, }; // Create an encapsulated object const result = new ResultCalculator(a); // Perform operations & print results console.log(result.isPassed()); console.log(result.getAverage());

thông báo trong giải pháp trên,

phương pháp totalMarks, subjectCount, validateMarks & biến thành viên student không được hiển thị và chỉ có thể được sử dụng bởi đối tượng lớp.

2.dữ liệu student được đi kèm với mọi hành vi của nó.

React Native VS Flutter – Nên Học Cái Nào?

Tài Liệu - Khóa Học Free

11 min
1 năm ago
3

Giới thiệu Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công. Những […]

Tagged #ReactNative

Giới thiệu

Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công.

Những vấn đề mình gặp phải khi học nó:

Ngôn ngữ: Mình là nhà phát triển web nên tôi biết rõ về JavaScript. Nhưng đối với ứng dụng Android, bạn cần biết Java hoặc Kotlin. Tôi biết Java nhưng không nhiều lắm. Tương tự trên iOS, bạn cần học Swift.
Studio Android: Mình cảm thấy Android Studio phức tạp hơn. Khó hiểu.

Phát triển di động

Gần đây, một lần nữa mình quyết định học phát triển ứng dụng di động nhưng có một sự thay đổi. Tôi sẽ không sử dụng nền tảng phát triển gốc mà sử dụng nền tảng phát triển chéo cho cả Android và iOS.

Sau rất nhiều nghiên cứu và đọc các bài báo, có hai framework đa nền tảng chính để phát triển ứng dụng di động. Một là React Native và cái còn lại là rung chuyển. Hôm nay chúng ta sẽ mổ xẻ cả hai để biết cái nào phù hợp với bạn nhất.

Vì vậy hãy bắt đầu.

Phát triển ứng dụng Cross- PlatForm là gì?

Trước tiên hãy giải quyết câu hỏi phát triển ứng dụng di động Cross.

Thuật ngữ Phát triển ứng dụng Cross- PlatForm ngụ ý rằng nhà phát triển có thể chạy chương trình của họ trên nhiều nền tảng di động khác nhau trong trường hợp của chúng mình là Android và iOS, đồng thời với một cơ sở mã duy nhất.

Bạn không cần phải viết mã riêng cho một nền tảng riêng. Điều này giúp tiết kiệm thời gian và chi phí khi thuê hai nhóm nhà phát triển cho cùng một ứng dụng.

Vì vậy, bây giờ chuyển sang phần giới thiệu về hai framework của chúng ta.

React Native

React bản địa là một khung phát triển ứng dụng di động đa nền tảng Nguồn mở được Facebook phát triển vào năm 2015. Nó có thể được sử dụng để phát triển ứng dụng cho Android, Android TV, iOS, macOS, TV, Web, Windows và UWP bằng cách cho phép các nhà phát triển sử dụng Khung của React cùng với khả năng của nền tảng gốc.
–Wikipedia

React Native sử dụng JavaScript, giúp các nhà phát triển web phát triển ứng dụng di động một cách đơn giản. Nếu bạn đã quen thuộc với khung React. Khái niệm về React-Native gần giống với React.

Tất cả những yếu tố này đã khiến React Native trở nên phổ biến hơn trong cộng đồng.

Ứng dụng được phát triển bằng React Native

Facebook
Instagram
UberEATS
Pinterest
Skype
Và nhiều hơn nữa

Flutter

Flutter là bộ công cụ phát triển phần mềm UI nguồn mở do Google tạo ra. Nó được sử dụng để phát triển các ứng dụng đa nền tảng cho Android, iOS, Linux, Mac, Windows, Google Fuchsia và web từ một cơ sở mã duy nhất. Được mô tả lần đầu tiên vào năm 2015, Flutter được phát hành vào tháng 5 2017.
-Wikipedia

Đối thủ cạnh tranh lớn nhất của React Native là Flutter. Gần đây, rung động đang được rất nhiều người yêu thích. Google Trends hiển thị nhiều tìm kiếm về Flutter hơn React Native trong thời gian gần đây.

Flutter sử dụng ngôn ngữ lập trình Dart. Nó được phát triển bởi Google.

Ứng dụng được phát triển bằng Flutter

Cửa hàng Google Play
eBay
Tencent
Mơ11
ByteDance
Quảng cáo Google
Và nhiều hơn nữa

Sự khác biệt giữa

Hãy cùng tìm hiểu xem framework nào ưu việt hơn trong concept sau đây

Ý tưởng	Sự miêu tả	Người chiến thắng
Hiệu suất	JS nhanh hơn Dart. Nhưng Flutter trên Android và iOS nhanh hơn React Native rất nhiều.	Flutter
Thiết kế	React Native có giao diện gốc cho cả Android và iOS theo mặc định. Flutter sử dụng widget tùy chỉnh.	React Native
Cộng đồng	React Native có cộng đồng lớn hơn Flutter nhưng cộng đồng Flutter đang phát triển với tốc độ nhanh hơn.	React Native
Hỗ trợ tự động hóa xây dựng và phát hành	Flutter có hỗ trợ phát triển thông qua CLI và triển khai với Fastlane, điều còn thiếu trong React Native.	Flutter
Thư viện của bên thứ ba	React Native hỗ trợ nhiều thư viện, nó cũng hỗ trợ hầu hết các thư viện dựa trên React. Flutter có ít thư viện của bên thứ ba.	React Native
Kiểm tra	Trong Flutter, bạn có thể thực hiện kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử widget. Trong React Native, bạn phụ thuộc vào các công cụ của bên thứ ba.	Flutter
Số lượng ứng dụng	hơn 30 nghìn ứng dụng được xây dựng bằng React Native và chỉ hơn 12 nghìn ứng dụng sử dụng Flutter. Ngoài ra, các ứng dụng hàng đầu sử dụng React Native hơn là Flutter	React Native

Lộ trình học tập

Flutter

Flutter sử dụng Dart. Dart được phát triển bởi google, là Ngôn ngữ lập trình hướng đối tượng. Đối với người mới bắt đầu, việc học Dart và sau đó là Flutter sẽ dễ dàng hơn.

Vì vậy, đối với người mới bắt đầu muốn tìm hiểu framework phát triển ứng dụng di động chéo, Flutter sẽ là lựa chọn lý tưởng.

React Native

Lộ trình học tập của React Native bao gồm học JavaScript làm ngôn ngữ lập trình chính, có kiến thức về React và sau đó bạn có thể học React Native.

Để học React Native bạn nên biết JavaScript và React. Điều này làm cho lộ trình học tập dài hơn một chút so với sự rung động dành cho người mới bắt đầu.

Phần kết luận

Cả hai khung đều có khả năng xây dựng các ứng dụng đẹp và hữu dụng cho cả Android và iOS. Bạn có thể chọn những gì phù hợp nhất với yêu cầu của bạn.

Mình chọn React Native làm lộ trình học tập của nó. Theo mình biết React và JavaScript thì React Native dễ học hơn.

Vì vậy mình sẽ tải lên nhiều nội dung liên quan đến React Native trong những ngày tới. Đảm bảo theo dõi mình về nội dung đó.

Cảm ơn đã đọc bài đăng trên blog.

Từ Web đến Native với React

50 min
1 năm ago
3
9

Mọi thứ mà nhà phát triển web cần biết về việc xây dựng ứng dụng React Native đầu tiên của mình. React Native là lựa chọn tuyệt vời cho các nhà phát triển web có kinh nghiệm về React và đang muốn […]

Tagged #ReactNative

Data Structures Cheat Sheet

Tài Liệu - Khóa Học Free

24 min
1 năm ago
11

Tagged #ctdl&gt

Trong bài viết này, mình sẽ giới thiệu về các cấu trúc dữ liệu, kèm theo ví dụ minh họa cho từng cấu trúc và cách chúng được biểu diễn trong Memgraph. Trong các cấu trúc này, đồ thị nổi bật như một cấu trúc dữ liệu phi tuyến tính bao gồm một tập hợp hữu hạn các nút, được kết nối bởi các mối quan hệ. Đồ thị thường được ứng dụng để giải quyết các vấn đề thực tế trong các lĩnh vực như mạng, đồ thị tri thức hoặc các trường hợp phát hiện gian lận.

Hãy xem qua bảng tham khảo nhanh Data Structures Cheat Sheet để nắm tổng quan về các cấu trúc mà mình sẽ đề cập dưới đây.

Đồ thị là gì?
Để bước vào thế giới cấu trúc dữ liệu, trước tiên chúng ta cần hiểu những khái niệm cơ bản. Như đã đề cập, đồ thị là một cấu trúc dữ liệu bao gồm các nút (đỉnh) và các mối quan hệ (cạnh). Các mối quan hệ kết nối bất kỳ hai nút nào trong đồ thị, và mỗi nút có thể lưu trữ các thuộc tính khác nhau. Ở hình dưới, ta thấy một đồ thị gồm năm nút được kết nối bằng các mối quan hệ có hướng.

Tạo nút và mối quan hệ
Giờ hãy tạo đồ thị trong hình minh họa trên bằng Memgraph. Đảm bảo rằng bạn đã có một phiên bản Memgraph đang chạy. Nếu chưa cài đặt, bạn có thể tham khảo hướng dẫn cài đặt trong tài liệu của Memgraph. Cách nhanh nhất để trải nghiệm Memgraph Platform (bao gồm cơ sở dữ liệu Memgraph, thư viện MAGE và Memgraph Lab) là chạy một trong các lệnh sau với Docker:

Trên Linux/macOS:

 curl https://install.memgraph.com | sh

Trên Windows:

 iwr https://windows.memgraph.com | iex

Từ hình trên, ta thấy có năm nút, mỗi nút được đánh dấu bởi một số. Hãy tạo các nút với nhãn là Node và các số là thuộc tính name trong các nút đó, kèm theo mối quan hệ có hướng :TO giữa chúng:

CREATE (n1:Node {name: '1'}), (n2:Node {name: '2'}), (n3:Node {name: '3'}), (n4:Node {name: '4'}), (n5:Node {name: '5'}), (n1)-[:TO]->(n4), (n3)-[:TO]->(n2), (n2)-[:TO]->(n4), (n4)-[:TO]->(n5)

Nếu bạn sử dụng giao diện trực quan của Memgraph là Memgraph Lab, bạn có thể xem đồ thị vừa tạo bằng cách chạy lệnh:

MATCH p=(()-[]-()) RETURN p;

Tạo chỉ mục
Giống như các hàm băm có chỉ mục, Memgraph cũng hỗ trợ tạo chỉ mục trên một số kết hợp giữa nhãn Node hoặc Node+Property để quét qua cơ sở dữ liệu và truy xuất nút nhanh hơn khi có một tập dữ liệu lớn. Ví dụ, nếu có nhiều nhãn khác nhau và một tập dữ liệu lớn, bạn có thể tạo chỉ mục trên nhãn Node bằng cách:

CREATE INDEX ON :Node

Cấu trúc dữ liệu

Trong khoa học máy tính, cấu trúc dữ liệu là cách tổ chức, quản lý và lưu trữ dữ liệu nhằm truy cập dữ liệu hiệu quả hơn. Nói cụ thể hơn, một cấu trúc dữ liệu là tập hợp các giá trị dữ liệu, các mối quan hệ giữa chúng, và các hàm hoặc thao tác có thể áp dụng lên dữ liệu. Có nhiều loại cấu trúc dữ liệu khác nhau, và trong bài viết này, mình sẽ đề cập đến Danh sách liên kết, Ma trận, Hàng đợi, Ngăn xếp và Cấu trúc cây.

Danh sách liên kết

Danh sách liên kết là một cấu trúc dữ liệu tuyến tính, trong đó các phần tử không được lưu trữ tại vị trí liên tiếp mà được liên kết thông qua các con trỏ. Nó tổ chức các mục theo thứ tự, với mỗi mục chứa một con trỏ đến mục tiếp theo. Một mục trong danh sách liên kết được gọi là nút. Nút đầu tiên gọi là “head” và nút cuối gọi là “tail.”

Biểu diễn Danh sách liên kết trong Memgraph

Tương tự như vậy, trong Memgraph, mình cũng sẽ biểu diễn các mục trong danh sách liên kết bằng các nút, nhưng mình không cần lưu trữ thông tin về địa chỉ của nút tiếp theo, mà chỉ cần sử dụng đồ thị có hướng để thực hiện điều đó. Hãy tạo lại danh sách liên kết từ hình minh họa bên trên, với mối quan hệ là LINKED_TO:

CREATE (n1:Node {name: 'A'}), (n2:Node {name: 'B'}), (n3:Node {name: 'C'}), (n4:Node {name: 'D'}), (n1)-[:LINKED_TO]->(n2)-[:LINKED_TO]->(n3)-[:LINKED_TO]->(n4)

Ngoài ra, bạn có thể lưu trữ các thuộc tính khác bên trong các nút của mình, như IDcode, tên khác của các nút hoặc bất kỳ thông tin bổ sung nào khác.

Khi chạy truy vấn sau, chúng ta có thể trực quan hóa dữ liệu đã tạo và dễ dàng truy cập vào các thuộc tính của nó bằng cách nhấp vào một nút cụ thể:

MATCH p=(()-[]-()) RETURN p;

Nếu bạn có một đồ thị lớn hơn và muốn, ví dụ, lấy thông tin về nơi mà nút có tên C liên kết tới, bạn có thể dùng truy vấn sau:

MATCH (:Node {name: 'C'})-[:LINKED_TO]->(m) RETURN m;

Hàng đợi

Hàng đợi là một cấu trúc dữ liệu tuyến tính mở ở cả hai đầu và các thao tác được thực hiện theo thứ tự vào trước ra trước (FIFO).

Chúng ta định nghĩa hàng đợi là một danh sách trong đó tất cả các bổ sung vào danh sách đều được thực hiện ở một đầu và tất cả các thao tác xóa khỏi danh sách đều được thực hiện ở đầu kia. Phần tử nào được thêm vào hàng đợi trước, thao tác sẽ được thực hiện trên nó trước.

Biểu diễn Hàng đợi trong Memgraph

Trong Memgraph, mình có thể biểu diễn một hàng đợi bằng cách tạo các nút và kết nối chúng với mối quan hệ chỉ ra nút nào đến trước với mối quan hệ :BEFORE. Tương tự, mình cũng có thể tạo mối quan hệ :AFTER và định hướng các mối quan hệ theo chiều ngược lại, tùy thuộc vào điều gì phù hợp nhất.

Truy vấn sau tạo ra ba nút và mối quan hệ :BEFORE giữa chúng, chỉ ra rằng nút A “đến hàng đợi” trước, sau đó là các nút B và C:

CREATE (n1:Node {name: 'A'}), (n2:Node {name: 'B'}), (n3:Node {name: 'C'}), (n1)-[:BEFORE]->(n2)-[:BEFORE]->(n3);

Các thao tác với Hàng đợi

Nếu muốn tìm phần tử nào ở đầu hàng đợi và loại bỏ nó, giống như chức năng Dequeue(), mình có thể thực hiện với truy vấn sau:

MATCH (a)-[:AFTER]->(b) WHERE NOT exists((b)-[:AFTER]->()) RETURN b;

Tương tự, nếu muốn thêm một phần tử D vào cuối hàng đợi, giả lập chức năng Enqueue():

MATCH (a)-[:AFTER]->(b)
WHERE NOT exists(()-[:AFTER]->(a))
CREATE (n4:Node {name: ‘D’})-[:AFTER]->(a);

Ngăn xếp (Stack)

Ngăn xếp là một cấu trúc dữ liệu tuyến tính theo một thứ tự đặc biệt khi thực hiện các thao tác. Thứ tự này có thể là LIFO (Last In First Out – vào sau ra trước) hoặc FILO (First In Last Out – vào trước ra sau). Với LIFO, phần tử được thêm vào cuối cùng sẽ là phần tử đầu tiên được lấy ra. Với FILO, phần tử đầu tiên được thêm vào sẽ là phần tử cuối cùng được lấy ra.

Biểu diễn Ngăn xếp trong Memgraph

Trong Memgraph, mình có thể biểu diễn ngăn xếp tương tự như cách biểu diễn hàng đợi. Truy vấn sau tạo ra các nút và mối quan hệ :ON_TOP giữa chúng, cho thấy rằng nút A vào ngăn xếp đầu tiên, tiếp theo là các nút B và C. Vì ngăn xếp hoạt động theo nguyên tắc First In Last Out, ta chỉ có thể truy cập nút vào cuối cùng, trong trường hợp này là nút C.

CREATE (n1:Node {name: 'A'}), (n2:Node {name: 'B'}), (n3:Node {name: 'C'}), (n3)-[:ON_TOP]->(n2)-[:ON_TOP]->(n1)

Các thao tác với Ngăn xếp

Pop: Để lấy phần tử ở đầu ngăn xếp và xóa nó, tương tự như hàm Pop(), ta có thể dùng truy vấn sau: MATCH (a)-[:ON_TOP]->(b) WHERE NOT exists(()-[:ON_TOP]->(a)) DETACH DELETE a Truy vấn này trước tiên khớp với tất cả các nút trên một nút khác và lọc ra nút không có nút nào ở trên cùng, tức là nút đang ở đầu ngăn xếp.
Push: Để thêm một nút mới vào ngăn xếp, tương tự như hàm Push(), ta có thể thực hiện truy vấn sau: MATCH (a)-[:ON_TOP]->(b) WHERE NOT exists(()-[:ON_TOP]->(a)) CREATE (n4:Node {name:'D'})-[:ON_TOP]->(a) Tương tự như truy vấn trước, ta lấy nút ở đầu ngăn xếp rồi tạo nút mới, kết nối với nút đó bằng mối quan hệ :ON_TOP.

Cấu trúc cây

Cây tổ chức các giá trị theo thứ bậc. Mỗi mục trong cây được gọi là một nút và mỗi nút có thể liên kết tới 0 hoặc nhiều nút con. Các nút lá là những nút ở cuối cây (nói cách khác: các nút không có con). Mỗi nút trong cây có độ sâu: số mối quan hệ từ gốc tới nút đó. Chiều cao của cây là số mối quan hệ từ gốc đến nút lá xa nhất (tức là độ sâu lớn nhất của nút).

Cách biểu diễn Cấu trúc cây trong Memgraph

Memgraph đã có cấu trúc tương tự với cây, bao gồm các nút được kết nối với nhau bằng các mối quan hệ, chỉ cần chỉ định kết nối giữa các nút để xác định nút cha và nút con.

Để tạo cây giống như hình minh họa trên, ta có thể chạy truy vấn sau, tạo ra các nút từ A đến I với mối quan hệ :PARENT_OF để chỉ ra kết nối.

CREATE (n1:Node {name: 'A'}), (n2:Node {name: 'B'}), (n3:Node {name: 'C'}), (n4:Node {name: 'D'}), (n5:Node {name: 'E'}), (n6:Node {name: 'F'}), (n7:Node {name: 'G'}), (n8:Node {name: 'H'}), (n9:Node {name: 'I'}), (n1)-[:PARENT_OF]->(n2)-[:PARENT_OF]->(n4), (n2)-[:PARENT_OF]->(n5)-[:PARENT_OF]->(n8), (n5)-[:PARENT_OF]->(n9), (n1)-[:PARENT_OF]->(n3)-[:PARENT_OF]->(n6), (n3)-[:PARENT_OF]->(n7)

Sau khi chạy truy vấn này, chúng ta sẽ có thể trực quan hóa cấu trúc cây mới tạo trong Memgraph.

MATCH p=(()-[]-()) RETURN p;

Duyệt cây (Tree Traversal)

Trong khoa học máy tính, duyệt cây (còn được gọi là tìm kiếm cây) là quá trình ghé thăm từng nút trong cấu trúc dữ liệu cây đúng một lần để truy xuất, cập nhật hoặc xóa. Các phương pháp duyệt cây được phân loại dựa trên thứ tự ghé thăm các nút. Hai thuật toán phổ biến nhất cho duyệt cây là Duyệt theo chiều rộng (Breadth-First Search, BFS) và Duyệt theo chiều sâu (Depth-First Search, DFS).

Table of Contents

Thuật toán Duyệt theo Chiều Rộng (BFS)

Trong duyệt theo chiều rộng, BFS bắt đầu từ một nút duy nhất, và thứ tự của các nút được ghé thăm phụ thuộc vào độ rộng của các nút (tức là khoảng cách từ nút nguồn). Điều này có nghĩa là khi một nút nào đó được ghé thăm, tất cả các nút ở khoảng cách gần hơn từ nút nguồn đã được ghé thăm trước, giúp xác định đường đi ngắn nhất từ nút nguồn đến nút vừa ghé thăm.

Ví dụ, với cây mẫu, các nút được gán nhãn theo thứ tự BFS như hình bên dưới:

Thực thi BFS trong Memgraph
Trong Memgraph, BFS được triển khai dựa trên cú pháp mở rộng mối quan hệ, có một số lợi ích so với hàm chuyên biệt. Cú pháp này cho phép lọc nút và mối quan hệ ngay trên đường đi, tìm nhiều đường đến nhiều nút đích, và duyệt qua vùng lân cận của một nút theo thứ tự BFS.

Truy vấn sau đây sẽ hiển thị đường đi ngắn nhất giữa các nút A và H:

MATCH path=(a {name: 'A'})-[*BFS]->(h {name: 'H'}) RETURN path;

Để lấy danh sách các mối quan hệ, thêm biến trước *BFS và trả về kết quả:

MATCH (a {name: 'A'})-[relationships *BFS]->(h {name: 'H'}) RETURN relationships;

Thuật toán Duyệt theo Chiều Sâu (DFS)

DFS là một thuật toán duyệt cây bằng cách khám phá các nút lân cận càng xa càng tốt. Khi đạt đến điểm cuối (dead-end), thuật toán sẽ quay lại tìm một nút mới chưa được khám phá, sau đó tiếp tục duyệt từ nút này để tìm các nút chưa được khám phá. Theo cách này, thuật toán duyệt qua tất cả các nút trong cây.

Ví dụ, DFS sẽ duyệt qua cây mẫu như hình bên dưới:

Thực thi DFS trong Memgraph
DFS trong Memgraph cũng được triển khai dựa trên cú pháp mở rộng mối quan hệ, cho phép tìm nhiều mối quan hệ giữa hai nút nếu tồn tại.

Truy vấn sau đây hiển thị tất cả các đường đi từ nút A đến nút H:

MATCH path=(a {name: 'A'})-[*]->(h {name: 'H'}) RETURN path;

Để lấy danh sách tất cả các mối quan hệ, thêm biến trong dấu ngoặc vuông và trả về kết quả:

MATCH (a {name: 'A'})-[relationships *]->(h {name: 'H'}) RETURN relationships;

Duyệt cây theo BFS và DFS trong Memgraph cho phép trực quan hóa cấu trúc và tính liên kết của các nút một cách hiệu quả, đặc biệt khi phân tích dữ liệu lớn và tìm kiếm đường đi trong các cấu trúc cây phức tạp.

Hiểu về optimistic UI và React useOptimistic Hook

17 min
2 năm ago
2

Tagged #React, #ReactNative

Milliseconds có thể tạo nên hoặc phá hỏng trải nghiệm người dùng, vì sự chậm trễ có thể khiến họ rời khỏi trang web của chúng ta. Một chiến lược đang được chú ý nhờ khả năng mang lại các tương tác nhanh chóng và nhạy bén là mẫu giao diện lạc quan (Optimistic UI pattern). Mẫu này cho phép chúng ta cập nhật giao diện người dùng ngay lập tức sau khi người dùng hoàn thành một hành động, dựa trên giả định rằng các hoạt động nền sẽ thành công. Phương pháp này làm tăng cảm giác về tốc độ của ứng dụng và cải thiện đáng kể trải nghiệm người dùng bằng cách cung cấp phản hồi ngay tức thì.

Hiểu về Optimistic UI và Hook useOptimistic của React
Trong bài viết này, chúng ta sẽ khám phá Hook mới của React là useOptimistic và cách nó có thể giúp chúng ta triển khai các cập nhật giao diện lạc quan để làm cho ứng dụng của chúng ta cảm giác nhanh hơn và nhạy bén hơn.

React useOptimistic Hook là gì?
Hook useOptimistic là một tính năng mạnh mẽ hiện có sẵn trong phiên bản Canary của React. Nó cho phép chúng ta hiển thị một trạng thái khác trong khi một hành động bất đồng bộ, chẳng hạn như yêu cầu mạng, đang diễn ra. Điều này đặc biệt quan trọng trong những trường hợp người dùng mong đợi phản hồi tức thì cho các hành động của họ, chẳng hạn như khi gửi biểu mẫu hoặc bình luận trên mạng xã hội.

Bằng cách triển khai Hook useOptimistic, các ứng dụng có thể cập nhật giao diện người dùng ngay lập tức, mang lại trải nghiệm người dùng liền mạch và hấp dẫn. Hãy cùng tìm hiểu với một ví dụ:

const [optimisticComments, postComment] = useOptimistic(commentsFromServer, addComment);

optimisticComments: Đây là trạng thái Optimistic, được khởi tạo với giá trị từ commentsFromServer. Nó hiển thị danh sách các bình luận hiện có trên một bài đăng, phản ánh ngay lập tức mọi hành động của người dùng.
postComment: Đây là hàm dispatch mà chúng ta gọi để áp dụng mutation được định nghĩa trong addComment. Hàm này cập nhật optimisticComments một cách Optimistic khi người dùng thêm một bình luận.
commentsFromServer: Đây là nguồn dữ liệu chính, đại diện cho danh sách các bình luận đã được xác nhận lấy từ server. Nếu giá trị này thay đổi (ví dụ, sau khi lấy dữ liệu mới từ server), optimisticComments cũng sẽ cập nhật để đảm bảo tính nhất quán.
addComment: Đây là logic mutation sẽ được áp dụng cho optimisticComments khi postComment được gọi. Nó xác định cách thêm một bình luận mới vào danh sách một cách Optimistic.

Xét về hiệu quả của nhà phát triển, React đã giới thiệu Hook useOptimistic được tùy chỉnh cho mẫu giao diện này. Việc cập nhật giao diện lạc quan đảm bảo rằng người dùng không phải chờ đợi phản hồi từ server, điều này là rất quan trọng để duy trì trải nghiệm người dùng mượt mà. Khi người dùng thực hiện một hành động, useOptimistic phản ánh ngay lập tức các thay đổi trạng thái trước khi server phản hồi.

Hook này quản lý trạng Optimistic bằng cách ban đầu giả định rằng API sẽ phản hồi thành công. Nếu API phản hồi thành công, trạng thái giả định sẽ được duy trì. Trong trường hợp API thất bại, trạng thái sẽ trở lại trạng thái ban đầu. Sự cân bằng này là rất quan trọng để duy trì tính toàn vẹn của dữ liệu trong khi cung cấp trải nghiệm người dùng nhanh chóng và nhạy bén.

Bằng cách sử dụng Hook useOptimistic, các nhà phát triển có thể tạo ra những ứng dụng cảm giác tức thì và hấp dẫn hơn, giữ cho người dùng luôn tham gia và hài lòng với hiệu suất.

Một ví dụ đơn giản: Bình luận trên một bài đăng
Hãy tưởng tượng một nền tảng mạng xã hội nơi người dùng có thể xem các bài đăng của người khác. Khi người dùng nhấn nút Gửi, ứng dụng sẽ đợi phản hồi từ server trước khi cập nhật giao diện người dùng. Sự chậm trễ này có thể làm cho ứng dụng cảm giác chậm chạp.

Giả sử chúng ta đã có một server được thiết lập với các tệp cần thiết, hãy tiến hành triển khai chức năng Optimistic:

import { useState } from 'react';
import { useOptimistic } from 'react';
function CommentButton({ postId }) {
const [comments, setComments] = useOptimistic([]);
const [newComment, setNewComment] = useState('');
const [error, setError] = useState('');
const handleCommentSubmit = async () => {
setError(''); // Xóa mọi lỗi trước đó
const optimisticNewComment = { id: Date.now(), text: newComment, status: 'sending' };
setComments([...comments, optimisticNewComment]);  // Cập nhật danh sách bình luận một cách Optimistic
try {
const response = await api.postComment(postId, newComment);
const updatedComments = comments.map(comment =>
comment.id === optimisticNewComment.id ? { ...comment, status: 'sent' } : comment
);
setComments(updatedComments); // Cập nhật trạng thái bình luận thành 'sent'
} catch (error) {
const filteredComments = comments.filter(comment => comment.id !== optimisticNewComment.id);
setComments(filteredComments);
setError('Không thể đăng bình luận. Vui lòng thử lại.');
}
};
return (
<div>
<input 
type="text"
value={newComment}
onChange={(e) => setNewComment(e.target.value)}
placeholder="Viết bình luận..."
/>
<button onClick={handleCommentSubmit} disabled={!newComment.trim()}>
Đăng bình luận
</button>
{comments.map(comment => (
<div key={comment.id}>
{comment.text} {comment.status === 'sending' && <span>(Đang gửi...)</span>}
</div>
))}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default CommentButton;

Trong đoạn mã này, chúng ta đang khởi tạo Optimistic. Biến trạng thái optimisticComments chứa danh sách các bình luận, bao gồm mọi cập nhật Optimistic (các bình luận xuất hiện ngay lập tức khi người dùng thêm chúng, trước khi được xác nhận từ server). Nó bắt đầu dưới dạng một mảng trống [].

postComment là một hàm mà chúng ta sử dụng để cập nhật optimisticComments một cách Optimistic. Nó nhận một bình luận mới và thêm nó vào danh sách các bình luận hiện có. Hàm mutation (comments, newComment) => [...comments, newComment] xác định cách cập nhật danh sách bình luận khi thêm một bình luận mới. Nó tạo ra một mảng mới chứa tất cả các bình luận hiện có và bình luận mới.

Để gửi một bình luận một cách Optimistic, trước tiên chúng ta sẽ tạo một bình luận Optimistic. optimisticNewComment là một đối tượng bình luận mới với một ID tạm thời, văn bản từ trường nhập liệu, và trạng thái là sending. Đối tượng này đại diện cho bình luận mà người dùng vừa thêm.

Sau đó, để đạt được cập nhật Optimistic, chúng ta sẽ sử dụng postComment(optimisticNewComment), hành động này sẽ cập nhật danh sách optimisticComments để bao gồm bình luận mới ngay lập tức. Điều này mang lại cho người dùng phản hồi tức thì rằng bình luận của họ đã được thêm.

Sau đó, khối try sẽ cố gắng gửi bình luận mới đến server bằng cách sử dụng api.postComment(postId, newComment). Nếu server xác nhận bình luận đã được thêm, trạng thái của optimisticNewComment sẽ được cập nhật thành sent. Danh sách bình luận sẽ được cập nhật để phản ánh trạng thái mới này. Nếu cuộc gọi đến server thất bại, khối catch sẽ xóa bình luận Optimistic khỏi optimisticComments và đặt một thông báo lỗi để thông báo cho người dùng rằng bình luận không thể được đăng.

Khi chúng ta chạy ứng dụng và nhấn nút Đăng bình luận, nó sẽ trông như thế này:

Lưu ý cách nó hiển thị “Đang gửi” cùng với bình luận — đó chính là điều mà Hook useOptimistic làm. Nó đăng bình luận trong khi vẫn đang chờ yêu cầu mạng hoàn tất.

Optimistic UI vs. Các phương pháp truyền thống
Bằng cách triển khai mẫu giao diện Optimistic, các ứng dụng có thể giả lập phản hồi tức thì bằng cách cập nhật giao diện người dùng ngay khi người dùng tương tác, điều này đặc biệt quan trọng trong các môi trường tương tác liền mạch như mạng xã hội.

Các cập nhật giao diện truyền thống dựa vào thời gian phản hồi từ server, khiến người dùng phải chờ đợi lâu và làm cho ứng dụng cảm giác chậm chạp. Giao diện Optimistic biến đổi trải nghiệm này bằng cách cập nhật giao diện trước khi server phản hồi, hiển thị ngay kết quả mong đợi của hành động người dùng — như việc nhìn thấy một bình luận xuất hiện ngay khi nhấn.

ấn “Đăng bình luận”. Điều này làm cho ứng dụng cảm giác nhanh hơn nhiều.

Tóm lại, mẫu giao diện Optimistic giúp cải thiện trải nghiệm người dùng bằng cách giảm thiểu sự chậm trễ và mang lại cảm giác tức thì. Bằng cách sử dụng Hook useOptimistic của React, chúng ta có thể dễ dàng triển khai chiến lược này, mang lại trải nghiệm người dùng mượt mà hơn và tăng cường sự tương tác với người dùng.

Chúng ta đã đi qua các khái niệm và lợi ích của Optimistic UI và React Hook useOptimistic. Khi triển khai các kỹ thuật này, bạn có thể tạo ra các ứng dụng cảm giác nhanh hơn và nhạy bén hơn. Những ứng dụng này không chỉ cung cấp phản hồi tức thì cho người dùng mà còn giúp nâng cao trải nghiệm tổng thể của họ.

Hãy cân nhắc sử dụng useOptimistic trong dự án React tiếp theo của bạn để tận dụng mẫu giao diện Optimistic và mang lại trải nghiệm tốt nhất cho người dùng!

Làm thế nào để thêm màn hình Splash Screen và biểu tượng ứng dụng App Icon trong React Native?