Phá Kén

120 min
1 năm ago
160

1. Giải thích cách hoạt động của Bridge trong React Native? Câu hỏi: Mô tả cơ chế hoạt động của Bridge và cách React Native kết nối giữa JavaScript và mã gốc (native code). Giải thích: Điểm quan trọng: 2. HOC (Higher-Order […]

Tagged #interview, #ReactNative

1. Giải thích cách hoạt động của Bridge trong React Native?

Câu hỏi: Mô tả cơ chế hoạt động của Bridge và cách React Native kết nối giữa JavaScript và mã gốc (native code).

// React Native sử dụng Bridge để giao tiếp giữa JavaScript và mã gốc. // Dưới đây là cách truyền dữ liệu từ JS đến mã native: import { NativeModules } from 'react-native'; // Gọi module native const { MyNativeModule } = NativeModules; MyNativeModule.showToast('Hello from JavaScript!', Toast.LENGTH_SHORT);

Giải thích:

Bridge là một cơ chế cho phép giao tiếp giữa JavaScript (JSC) và mã native (Objective-C/Java).
Mỗi lần gửi dữ liệu qua Bridge, dữ liệu được chuyển đổi thành JSON để đảm bảo nền tảng gốc hiểu.
Quy trình:
- JS gửi dữ liệu đến native (qua Bridge).
- Native xử lý và có thể trả dữ liệu lại cho JS.

Điểm quan trọng:

Hiệu năng Bridge: Tránh gửi lượng lớn dữ liệu qua Bridge do giới hạn về tốc độ.
Sử dụng công cụ như Flipper để theo dõi giao tiếp qua Bridge.

2. HOC (Higher-Order Components) vs Custom Hooks trong React Native?

Câu hỏi: Sự khác nhau giữa Higher-Order Components (HOC) và Custom Hooks? Khi nào nên sử dụng mỗi loại?

// Ví dụ sử dụng HOC để chia sẻ logic function withLogger(WrappedComponent) { return class extends React.Component { componentDidMount() { console.log('Component Mounted:', WrappedComponent.name); } render() { return <WrappedComponent {...this.props} />; } }; } const EnhancedComponent = withLogger(MyComponent); // Custom Hook chia sẻ logic import { useEffect } from 'react'; function useLogger(componentName) { useEffect(() => { console.log(`Component Mounted: ${componentName}`); }, []); } // Sử dụng trong functional component function MyComponent() { useLogger('MyComponent'); return <Text>Hello!</Text>; }

Giải thích:

HOC:
- Là một hàm nhận một component và trả về một component mới.
- Dùng cho các ứng dụng class-based components hoặc khi cần mở rộng component cụ thể.
Custom Hooks:
- Là một cách tái sử dụng logic trong functional components.
- Linh hoạt hơn và được khuyến nghị dùng trong các dự án mới (Hooks-based architecture).

3. Cách tối ưu hóa hiệu năng khi làm việc với danh sách lớn trong React Native?

Câu hỏi: Làm thế nào để hiển thị danh sách lớn mà không làm chậm ứng dụng?

import React from 'react'; import { FlatList, Text, View } from 'react-native'; const data = Array.from({ length: 10000 }, (_, index) => `Item ${index}`); const renderItem = ({ item }) => ( <View> <Text>{item}</Text> </View> ); export default function App() { return ( <FlatList data={data} // Chỉ render các item hiển thị trên màn hình renderItem={renderItem} keyExtractor={(item, index) => index.toString()} initialNumToRender={10} // Số lượng item render lần đầu maxToRenderPerBatch={10} // Số lượng render tối đa mỗi batch windowSize={5} // Số lượng màn hình buffer /> ); }

Giải thích:

FlatList: Chỉ render các item trên màn hình, giúp tối ưu hóa hiệu năng so với ScrollView.
Các thuộc tính tối ưu hóa:
- initialNumToRender: Giảm số lượng phần tử render ban đầu.
- windowSize: Tăng/giảm số lượng buffer render để tối ưu RAM.
- keyExtractor: Đảm bảo mỗi item có khóa duy nhất để tránh lỗi render.

4. Redux Toolkit vs Context API: Khi nào dùng cái nào?

Câu hỏi: Giải thích sự khác biệt giữa Redux Toolkit và Context API. Khi nào nên sử dụng mỗi loại?

// Redux Toolkit import { configureStore, createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, }, }); const store = configureStore({ reducer: { counter: counterSlice.reducer }, }); export const { increment, decrement } = counterSlice.actions; export default store; // Context API import React, { createContext, useContext, useState } from 'react'; const CounterContext = createContext(); export const CounterProvider = ({ children }) => { const [value, setValue] = useState(0); return ( <CounterContext.Provider value={{ value, setValue }}> {children} </CounterContext.Provider> ); }; export const useCounter = () => useContext(CounterContext);

Giải thích:

Redux Toolkit:
- Dành cho ứng dụng lớn, cần quản lý trạng thái phức tạp.
- Có các công cụ như Redux DevTools và middleware mạnh mẽ.
Context API:
- Tốt cho ứng dụng nhỏ hoặc chia sẻ dữ liệu trong một nhánh cây component.

5. Làm thế nào để quản lý side effects trong React Native với Redux Saga?

Câu hỏi: Tại sao nên dùng Redux Saga để quản lý side effects?

import { takeLatest, put, call } from 'redux-saga/effects'; import axios from 'axios'; // Worker Saga function* fetchData(action) { try { const response = yield call(axios.get, 'https://api.example.com/data'); yield put({ type: 'FETCH_SUCCESS', payload: response.data }); } catch (error) { yield put({ type: 'FETCH_FAILURE', payload: error.message }); } } // Watcher Saga function* watchFetchData() { yield takeLatest('FETCH_REQUEST', fetchData); } export default function* rootSaga() { yield all([watchFetchData()]); }

Giải thích:

Redux Saga:
- Là một middleware để xử lý side effects như API call, debounce.
- Sử dụng Generator Functions để quản lý luồng async code dễ dàng hơn.
So sánh:
- Saga mạnh hơn Redux Thunk trong các trường hợp phức tạp.
- Dễ dàng quản lý luồng và xử lý lỗi.

6. Làm thế nào để tích hợp và tối ưu React Native với mã Native (Android và iOS)?

Câu hỏi: Giải thích cách tích hợp React Native với mã native (Android/iOS) và khi nào nên làm điều này?

Ví dụ trên Android (Java):

Tạo một module native để hiển thị Toast.

// MyNativeModule.java package com.myapp; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; public class MyNativeModule extends ReactContextBaseJavaModule { MyNativeModule(ReactApplicationContext context) { super(context); } @Override public String getName() { return "MyNativeModule"; } @ReactMethod public void showToast(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); } }

Tích hợp module vào React Native.

// MyPackage.java package com.myapp; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class MyPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new MyNativeModule(reactContext)); return modules; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }

Kết nối module với ứng dụng chính.

// MainApplication.java @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new MyPackage() // Thêm module tại đây ); }

Sử dụng trong React Native.

import { NativeModules } from 'react-native'; const { MyNativeModule } = NativeModules; MyNativeModule.showToast('Hello from React Native!', 1);

Giải thích:

Khi nào cần dùng mã native?
- Khi cần truy cập các API/SDK chỉ có sẵn trên nền tảng native.
- Khi muốn tối ưu hiệu năng cho các tác vụ đặc biệt (ví dụ: xử lý video/audio phức tạp).
Tối ưu hóa:
- Giảm số lần gọi qua Bridge (batch các yêu cầu nếu có thể).
- Viết mã native chỉ khi thật sự cần thiết, tận dụng thư viện sẵn có trước.

7. Dynamic Loading và Code Splitting trong React Native

Câu hỏi: React Native có hỗ trợ Dynamic Loading không? Làm thế nào để giảm kích thước bundle?

Ví dụ Dynamic Import:

import React, { Suspense } from 'react'; import { View, Text } from 'react-native'; // Sử dụng dynamic import const LazyLoadedComponent = React.lazy(() => import('./LazyComponent')); export default function App() { return ( <Suspense fallback={<Text>Loading...</Text>}> <View> <LazyLoadedComponent /> </View> </Suspense> ); }

Giải thích:

Dynamic Import: Cho phép tải các module chỉ khi cần thiết, giảm kích thước bundle ban đầu.
Tối ưu hóa kích thước bundle:
- Sử dụng công cụ như metro-config để loại bỏ mã không cần thiết.
- Giảm phụ thuộc vào thư viện bên ngoài, chỉ import những module cần dùng.

8. Làm thế nào để xử lý lỗi và theo dõi hiệu năng trong ứng dụng React Native?

Câu hỏi: Các công cụ và kỹ thuật theo dõi lỗi hiệu quả trong React Native?

Sentry để theo dõi lỗi:

import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'https://your-sentry-dsn', enableNative: true, // Kích hoạt theo dõi native crash }); // Ghi lại lỗi tùy chỉnh try { throw new Error('Something went wrong'); } catch (error) { Sentry.captureException(error); }

React Native Performance Monitor:

import performance from 'react-native-performance'; // Ghi lại thời gian tải màn hình performance.mark('start_screen_load'); // ... logic render màn hình performance.mark('end_screen_load'); performance.measure('screen_load_time', 'start_screen_load', 'end_screen_load');

Giải thích:

Sentry:
- Theo dõi cả lỗi JS và native crash.
- Hữu ích cho các ứng dụng phát hành trên sản phẩm thực tế.
React Native Performance Monitor:
- Đo hiệu năng của từng màn hình và phân tích.
- Giúp tìm ra các bottleneck trong ứng dụng.

9. Làm thế nào để triển khai Dark Mode trong React Native?

Câu hỏi: Làm thế nào để hỗ trợ theme động (Light/Dark Mode) trong ứng dụng React Native?

import React from 'react'; import { useColorScheme, Text, View, StyleSheet } from 'react-native'; export default function App() { const colorScheme = useColorScheme(); // Lấy thông tin chế độ Light/Dark const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colorScheme === 'dark' ? '#000' : '#fff', justifyContent: 'center', alignItems: 'center', }, text: { color: colorScheme === 'dark' ? '#fff' : '#000', }, }); return ( <View style={styles.container}> <Text style={styles.text}>Hello, {colorScheme} mode!</Text> </View> ); }

Giải thích:

useColorScheme:
- API tích hợp sẵn của React Native, tự động thay đổi dựa trên cài đặt hệ thống.
Tối ưu hóa Dark Mode:
- Sử dụng các thư viện như react-native-paper hoặc styled-components với theme dynamic.

10. Xử lý đa ngôn ngữ (i18n) trong React Native

Câu hỏi: Làm thế nào để thêm hỗ trợ đa ngôn ngữ trong ứng dụng React Native?

Sử dụng `react-i18next`:

import React from 'react'; import { Text, Button, View } from 'react-native'; import i18n from 'i18next'; import { initReactI18next, useTranslation } from 'react-i18next'; const resources = { en: { translation: { welcome: 'Welcome', changeLanguage: 'Change Language', }, }, vi: { translation: { welcome: 'Chào mừng', changeLanguage: 'Thay đổi ngôn ngữ', }, }, }; i18n.use(initReactI18next).init({ resources, lng: 'en', // Ngôn ngữ mặc định interpolation: { escapeValue: false, }, }); export default function App() { const { t, i18n } = useTranslation(); return ( <View> <Text>{t('welcome')}</Text> <Button title={t('changeLanguage')} onPress={() => i18n.changeLanguage('vi')} /> </View> ); }

Giải thích:

react-i18next:
- Hỗ trợ đa ngôn ngữ và thay đổi runtime.
Dynamic Language:
- Người dùng có thể chuyển đổi ngôn ngữ mà không cần reload ứng dụng.

11. Làm thế nào để triển khai Deep Linking trong React Native?

Câu hỏi: Làm thế nào để cấu hình Deep Linking trong ứng dụng React Native, và tại sao nó quan trọng?

Cấu hình Deep Linking:

Cấu hình trên Android (AndroidManifest.xml):

<intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myapp" android:host="home" /> </intent-filter>

Cấu hình trên iOS (Info.plist):

<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>myapp</string> </array> </dict> </array>

Xử lý Deep Linking trong React Native:

import React, { useEffect } from 'react'; import { Linking, Text, View } from 'react-native'; export default function App() { useEffect(() => { const handleDeepLink = (event) => { const url = event.url; console.log('Deep Link URL:', url); // Xử lý URL }; // Lắng nghe sự kiện Deep Linking Linking.addEventListener('url', handleDeepLink); // Cleanup listener return () => Linking.removeEventListener('url', handleDeepLink); }, []); return ( <View> <Text>Deep Linking Example</Text> </View> ); }

Giải thích:

Deep Linking:
- Cho phép mở ứng dụng từ liên kết bên ngoài (ví dụ: từ email hoặc trình duyệt).
- Hữu ích cho việc chia sẻ nội dung hoặc định tuyến vào các màn hình cụ thể.
Universal Linking (iOS):
- Cần thêm cấu hình trên Apple Developer để hỗ trợ liên kết HTTPS.

12. Làm thế nào để tích hợp Push Notifications trong React Native?

Câu hỏi: Mô tả cách tích hợp và xử lý thông báo đẩy trong React Native?

Sử dụng Firebase Cloud Messaging (FCM):

Cài đặt thư viện:

npm install @react-native-firebase/app @react-native-firebase/messaging

Cấu hình Firebase cho Android và iOS (theo tài liệu Firebase).
Xử lý thông báo trong ứng dụng:

import messaging from '@react-native-firebase/messaging'; import React, { useEffect } from 'react'; import { Alert, View, Text } from 'react-native'; export default function App() { useEffect(() => { // Yêu cầu quyền thông báo const requestPermission = async () => { const authStatus = await messaging().requestPermission(); console.log('Authorization status:', authStatus); }; // Lắng nghe thông báo foreground const unsubscribe = messaging().onMessage(async (remoteMessage) => { Alert.alert('A new message arrived!', JSON.stringify(remoteMessage)); }); requestPermission(); return unsubscribe; // Cleanup listener }, []); return ( <View> <Text>Push Notifications Example</Text> </View> ); }

Giải thích:

Firebase Messaging:
- Hỗ trợ gửi thông báo từ server đến ứng dụng.
Foreground Notifications:
- Cần xử lý thủ công để hiển thị khi ứng dụng đang chạy.

13. Cách triển khai Animations phức tạp với `react-native-reanimated`

Câu hỏi: Giải thích cách sử dụng react-native-reanimated để tạo animations mượt mà hơn?

Ví dụ: Kéo thả Animation với Reanimated 2:

import React from 'react'; import { View, StyleSheet } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring, PanGestureHandler, } from 'react-native-reanimated'; export default function App() { const translateX = useSharedValue(0); const translateY = useSharedValue(0); const animatedStyle = useAnimatedStyle(() => { return { transform: [ { translateX: translateX.value }, { translateY: translateY.value }, ], }; }); const onGestureEvent = Animated.event( [ { nativeEvent: { translationX: (event) => (translateX.value = event), translationY: (event) => (translateY.value = event), }, }, ], { useNativeDriver: true } ); return ( <PanGestureHandler onGestureEvent={onGestureEvent}> <Animated.View style={[styles.box, animatedStyle]} /> </PanGestureHandler> ); } const styles = StyleSheet.create({ box: { width: 100, height: 100, backgroundColor: 'blue', borderRadius: 10, }, });

Giải thích:

Reanimated:
- Cung cấp hiệu năng cao hơn so với Animated nhờ sử dụng UI thread.
- Hỗ trợ các animation phức tạp với Shared Values và Worklets.
Use Cases:
- Gesture-based animations (ví dụ: swipe, drag & drop).
- Performance-critical animations.

14. Tích hợp WebView trong React Native

Câu hỏi: Khi nào cần sử dụng WebView và cách tối ưu nó?

Ví dụ sử dụng WebView:

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( <View style={styles.container}> <WebView source={{ uri: 'https://reactnative.dev/' }} startInLoadingState={true} javaScriptEnabled={true} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, });

Giải thích:

Khi nào cần WebView?
- Hiển thị nội dung web mà không cần viết lại logic.
Tối ưu hóa WebView:
- Bật javaScriptEnabled và domStorageEnabled khi cần thiết.
- Sử dụng caching và preload nội dung để tăng tốc độ.

15. Làm thế nào để xử lý Offline Mode trong React Native?

Câu hỏi: Làm thế nào để phát hiện trạng thái mạng và lưu dữ liệu khi không có kết nối?

Sử dụng `@react-native-community/netinfo`:

npm install @react-native-community/netinfo

Ví dụ:

import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import NetInfo from '@react-native-community/netinfo'; export default function App() { const [isConnected, setIsConnected] = useState(true); useEffect(() => { const unsubscribe = NetInfo.addEventListener((state) => { setIsConnected(state.isConnected); }); return () => unsubscribe(); }, []); return ( <View style={styles.container}> <Text>{isConnected ? 'Online' : 'Offline'}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Giải thích:

NetInfo:
- Theo dõi trạng thái mạng (online/offline).
Lưu trữ dữ liệu:
- Sử dụng AsyncStorage hoặc các thư viện như redux-persist để lưu dữ liệu cục bộ khi offline.

16. Cách triển khai và tối ưu hóa hiệu năng `Navigation` trong ứng dụng React Native?

Câu hỏi: Làm thế nào để triển khai hệ thống điều hướng phức tạp và tối ưu hóa hiệu năng khi sử dụng react-navigation?

Ví dụ sử dụng `React Navigation` với Dynamic Tabs:

import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { Text, View } from 'react-native'; const Tab = createBottomTabNavigator(); function ScreenA() { return ( <View> <Text>Screen A</Text> </View> ); } function ScreenB() { return ( <View> <Text>Screen B</Text> </View> ); } function generateTabs(userRole) { const tabs = { Admin: [ { name: 'ScreenA', component: ScreenA }, { name: 'ScreenB', component: ScreenB }, ], User: [{ name: 'ScreenA', component: ScreenA }], }; return tabs[userRole] || []; } export default function App() { const userRole = 'Admin'; // Thay đổi dựa trên trạng thái người dùng const tabs = generateTabs(userRole); return ( <NavigationContainer> <Tab.Navigator> {tabs.map((tab) => ( <Tab.Screen key={tab.name} name={tab.name} component={tab.component} /> ))} </Tab.Navigator> </NavigationContainer> ); }

Giải thích:

Dynamic Tabs:
- Điều hướng động dựa trên quyền người dùng hoặc trạng thái ứng dụng.
Tối ưu hóa hiệu năng:
- Sử dụng lazy trong Screen để tải màn hình khi cần thiết.
- Giảm số lượng màn hình được tải trước bằng unmountOnBlur trong Tab.Screen.

17. Cách quản lý memory leaks trong ứng dụng React Native?

Câu hỏi: Làm thế nào để phát hiện và ngăn chặn memory leaks trong React Native?

Ví dụ với Clean-Up trong Hooks:

import React, { useEffect, useState } from 'react'; import { View, Text } from 'react-native'; export default function App() { const [data, setData] = useState(null); useEffect(() => { let isMounted = true; const fetchData = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); if (isMounted) setData(await response.json()); }; fetchData(); return () => { isMounted = false; // Clean-up để tránh cập nhật state khi component unmount }; }, []); return ( <View> <Text>{data ? 'Data Loaded' : 'Loading...'}</Text> </View> ); }

Giải thích:

Nguyên nhân chính:
- Không xóa các listener, timeout hoặc promise khi component bị hủy.
Giải pháp:
- Sử dụng clean-up trong useEffect.
- Kiểm tra bằng các công cụ như Flipper hoặc Xcode Instruments để phát hiện memory leaks.

18. Cách tích hợp và tối ưu hóa Video Streaming trong React Native?

Câu hỏi: Làm thế nào để tích hợp video streaming mượt mà với hiệu năng cao?

Sử dụng `react-native-video`:

import React from 'react'; import { StyleSheet, View } from 'react-native'; import Video from 'react-native-video'; export default function App() { return ( <View style={styles.container}> <Video source={{ uri: 'https://www.example.com/video.mp4' }} style={styles.video} controls resizeMode="contain" onBuffer={() => console.log('Buffering...')} // Xử lý buffering onError={(error) => console.error('Error:', error)} // Xử lý lỗi /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, video: { width: '100%', height: 300, }, });

Giải thích:

Hiệu năng Video Streaming:
- Sử dụng cache hoặc offline mode để giảm thời gian tải video.
- Tối ưu hóa thông qua các tùy chọn như bufferConfig trong thư viện.
Ưu điểm:
- Thư viện hỗ trợ cross-platform.
- Hỗ trợ DRM cho các nội dung được bảo vệ.

19. Sử dụng Native Modules để tăng tốc độ xử lý tác vụ phức tạp

Câu hỏi: Làm thế nào để tạo module native nhằm xử lý các tác vụ tính toán phức tạp?

Tạo module native trên iOS (Objective-C):

// RCTMathModule.h #import <React/RCTBridgeModule.h> @interface RCTMathModule : NSObject <RCTBridgeModule> @end // RCTMathModule.m #import "RCTMathModule.h" @implementation RCTMathModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(fibonacci:(NSInteger)n resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { if (n < 0) { reject(@"error", @"Invalid input", nil); return; } NSInteger a = 0; NSInteger b = 1; for (NSInteger i = 2; i <= n; i++) { NSInteger temp = a + b; a = b; b = temp; } resolve(@(b)); } @end

Sử dụng trong React Native:

import { NativeModules } from 'react-native'; const { MathModule } = NativeModules; MathModule.fibonacci(10) .then((result) => console.log('Fibonacci Result:', result)) .catch((error) => console.error('Error:', error));

Giải thích:

Tại sao sử dụng Native Modules?
- Giảm tải tính toán từ JavaScript sang native.
- Đặc biệt hữu ích khi cần xử lý các tác vụ như mã hóa, xử lý ảnh hoặc tính toán phức tạp.

20. Tích hợp Gesture Detection với `react-native-gesture-handler`

Câu hỏi: Làm thế nào để tạo các gestures phức tạp như kéo, vuốt và chạm nhiều ngón tay?

Ví dụ: Gesture Detection đơn giản:

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { GestureHandlerRootView, PanGestureHandler, } from 'react-native-gesture-handler'; import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'; export default function App() { const translateX = useSharedValue(0); const translateY = useSharedValue(0); const animatedStyle = useAnimatedStyle(() => ({ transform: [ { translateX: translateX.value }, { translateY: translateY.value }, ], })); const gestureHandler = useAnimatedGestureHandler({ onStart: (_, ctx) => { ctx.startX = translateX.value; ctx.startY = translateY.value; }, onActive: (event, ctx) => { translateX.value = ctx.startX + event.translationX; translateY.value = ctx.startY + event.translationY; }, }); return ( <GestureHandlerRootView style={styles.container}> <PanGestureHandler onGestureEvent={gestureHandler}> <Animated.View style={[styles.box, animatedStyle]} /> </PanGestureHandler> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 100, height: 100, backgroundColor: 'blue', }, });

Giải thích:

react-native-gesture-handler:
- Xử lý gestures một cách mượt mà và chính xác hơn so với Gesture API mặc định.
- Hỗ trợ các loại gestures phức tạp như Pinch, Pan, Swipe, và Tap.

21. Phân tích hiệu năng với Flipper và React DevTools

Câu hỏi: Làm thế nào để sử dụng Flipper để phân tích hiệu năng React Native?

Các bước cài đặt Flipper:

Cài đặt Flipper: Tải Flipper từ Flipper.dev.
Tích hợp Flipper:
- Đối với Android: Đảm bảo enableHermes: true trong android/app/build.gradle.
- Đối với iOS: Đảm bảo Flipper được thêm trong Podfile.

Phân tích hiệu năng:

React DevTools:
- Xem cấu trúc component và cập nhật state/props theo thời gian thực.
Perf Monitor:
- Theo dõi các bottleneck như render time, memory usage.

22. Cách sử dụng Hermes Engine để tăng hiệu năng cho ứng dụng React Native?

Câu hỏi: Hermes Engine hoạt động như thế nào? Làm thế nào để kích hoạt và tối ưu nó trong React Native?

Kích hoạt Hermes trên Android:

Mở tệp android/app/build.gradle và bật Hermes:

project.ext.react = [ enableHermes: true // Bật Hermes ]

Cài đặt lại các thư viện gốc:

cd android && ./gradlew clean && cd .. npm install

Xây dựng lại ứng dụng:

npm run android

Kiểm tra Hermes đã được kích hoạt chưa:

Sử dụng công cụ Flipper hoặc kiểm tra trong console:

console.log(`Hermes Enabled: ${!!global.HermesInternal}`);

Tối ưu hóa với Hermes:

Minify bundle: Hermes hỗ trợ minify để giảm kích thước gói JavaScript.
Bộ nhớ: Hermes giảm đáng kể việc sử dụng bộ nhớ, đặc biệt trên các thiết bị Android tầm thấp.

Giải thích:

Hermes là gì?
- Hermes là một engine JavaScript nhẹ được tối ưu hóa cho React Native, được phát triển bởi Facebook.
- Nó tăng tốc thời gian khởi động (TTI – Time to Interactive) và giảm kích thước bộ nhớ.
Khi nào nên sử dụng?
- Dành cho ứng dụng có đối tượng người dùng trên các thiết bị Android cũ hoặc hạn chế tài nguyên.

23. Làm thế nào để triển khai Animations phức tạp với `react-native-lottie`?

Câu hỏi: Khi nào nên sử dụng Lottie và làm thế nào để tích hợp trong React Native?

Cài đặt Lottie:

npm install lottie-react-native npx pod-install

Ví dụ: Animation đơn giản:

import React from 'react'; import { StyleSheet, View } from 'react-native'; import LottieView from 'lottie-react-native'; export default function App() { return ( <View style={styles.container}> <LottieView source={require('./animation.json')} autoPlay loop style={styles.lottie} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, lottie: { width: 200, height: 200, }, });

Giải thích:

Lottie là gì?
- Lottie cho phép sử dụng animations được tạo bằng After Effects trong ứng dụng React Native.
Ưu điểm:
- Hiệu năng cao vì animations được xử lý trên native layer.
- Dễ dàng chỉnh sửa và tích hợp với JSON file.

24. Làm thế nào để xử lý Large Image Upload trong React Native?

Câu hỏi: Làm thế nào để nén hình ảnh trước khi tải lên server để tiết kiệm băng thông?

Sử dụng `react-native-image-resizer`:

npm install react-native-image-resizer npx pod-install

Ví dụ: Nén ảnh trước khi upload:

import React from 'react'; import { Button } from 'react-native'; import ImagePicker from 'react-native-image-picker'; import ImageResizer from 'react-native-image-resizer'; export default function App() { const pickImage = () => { ImagePicker.launchImageLibrary({}, async (response) => { if (!response.didCancel && !response.error) { const resizedImage = await ImageResizer.createResizedImage( response.uri, // Đường dẫn ảnh gốc 800, // Chiều rộng 600, // Chiều cao 'JPEG', // Định dạng 80 // Chất lượng ); console.log('Resized Image:', resizedImage.uri); } }); }; return <Button title="Pick and Resize Image" onPress={pickImage} />; }

Giải thích:

Tại sao cần nén ảnh?
- Giảm kích thước tệp ảnh, tăng tốc độ tải lên và tiết kiệm băng thông.
Tối ưu hóa thêm:
- Sử dụng các API CDN như AWS S3 hoặc Cloudinary để xử lý hình ảnh phía server.

25. Làm thế nào để triển khai WebSocket trong React Native?

Câu hỏi: Làm thế nào để sử dụng WebSocket cho các ứng dụng real-time?

Ví dụ: WebSocket cơ bản:

import React, { useEffect, useState } from 'react'; import { View, Text, Button } from 'react-native'; export default function App() { const [message, setMessage] = useState(''); const [socket, setSocket] = useState(null); useEffect(() => { const ws = new WebSocket('wss://example.com/socket'); setSocket(ws); ws.onopen = () => { console.log('WebSocket Connected'); }; ws.onmessage = (event) => { console.log('Received Message:', event.data); setMessage(event.data); }; ws.onerror = (error) => { console.error('WebSocket Error:', error); }; ws.onclose = () => { console.log('WebSocket Disconnected'); }; return () => { ws.close(); // Đảm bảo đóng kết nối khi component unmount }; }, []); const sendMessage = () => { if (socket) { socket.send('Hello Server!'); } }; return ( <View> <Text>Message from server: {message}</Text> <Button title="Send Message" onPress={sendMessage} /> </View> ); }

Giải thích:

WebSocket là gì?
- WebSocket cung cấp giao tiếp 2 chiều giữa client và server, thích hợp cho ứng dụng chat, thông báo real-time.
Lưu ý:
- Luôn đóng kết nối WebSocket khi component unmount để tránh memory leaks.

26. Làm thế nào để triển khai Local Database trong React Native?

Câu hỏi: Khi nào cần sử dụng cơ sở dữ liệu cục bộ, và thư viện nào là tốt nhất?

Ví dụ với SQLite:

Cài đặt thư viện SQLite:

npm install react-native-sqlite-storage npx pod-install

Sử dụng SQLite:

import React, { useEffect } from 'react'; import SQLite from 'react-native-sqlite-storage'; export default function App() { useEffect(() => { const db = SQLite.openDatabase( { name: 'test.db', location: 'default', }, () => console.log('Database opened'), (error) => console.error('Database error:', error) ); db.transaction((tx) => { tx.executeSql( 'CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)', [], () => console.log('Table created'), (error) => console.error('Error creating table:', error) ); tx.executeSql( 'INSERT INTO Users (name) VALUES (?)', ['John Doe'], (_, result) => console.log('Data inserted:', result), (error) => console.error('Insert error:', error) ); tx.executeSql( 'SELECT * FROM Users', [], (_, result) => console.log('Query Result:', result.rows.raw()), (error) => console.error('Query error:', error) ); }); }, []); return null; }

Giải thích:

Khi nào cần dùng SQLite?
- Khi cần lưu trữ dữ liệu phức tạp hoặc có quan hệ giữa các bảng.
Các tùy chọn khác:
- WatermelonDB: Thích hợp cho các ứng dụng có nhiều dữ liệu và cần đồng bộ hóa với server.
- AsyncStorage: Đơn giản, nhưng không phù hợp cho dữ liệu lớn.

27. Cách xử lý Authentication với OAuth trong React Native

Câu hỏi: Làm thế nào để tích hợp OAuth (Google, Facebook) vào ứng dụng?

Sử dụng Google OAuth với `react-native-google-signin`:

Cài đặt thư viện:

npm install @react-native-google-signin/google-signin npx pod-install

Cấu hình Google OAuth (trên Google Cloud Console).
Sử dụng trong ứng dụng:

import React, { useEffect } from 'react'; import { Button } from 'react-native'; import { GoogleSignin } from '@react-native-google-signin/google-signin'; GoogleSignin.configure({ webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', }); export default function App() { const signIn = async () => { try { await GoogleSignin.hasPlayServices(); const userInfo = await GoogleSignin.signIn(); console.log('User Info:', userInfo); } catch (error) { console.error('Google Sign-In Error:', error); } }; return <Button title="Sign in with Google" onPress={signIn} />; }

Giải thích:

OAuth là gì?
- OAuth là giao thức xác thực an toàn, thường dùng để đăng nhập với các nhà cung cấp như Google, Facebook.
Tại sao cần OAuth?
- Đơn giản hóa quá trình đăng nhập, tăng tính bảo mật.

28. Làm thế nào để tối ưu hóa ứng dụng React Native cho sản xuất (Production)?

Câu hỏi: Những bước cần thiết để tối ưu hóa ứng dụng React Native trước khi phát hành?

1. Tối ưu hóa kích thước bundle

Sử dụng Proguard (Android):
- Mở android/app/proguard-rules.pro và thêm: -keep class com.facebook.** { *; } -keep class com.reactnative.** { *; }
- Đảm bảo Proguard được bật trong android/app/build.gradle: release { minifyEnabled true shrinkResources true proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' }
Minify JavaScript:
- Đảm bảo enableHermes: true để giảm kích thước bundle trên Android.
- Thực thi npm run bundle để kiểm tra kích thước bundle.

2. Tối ưu hóa hình ảnh

Sử dụng WebP trên Android:
- Chuyển đổi hình ảnh PNG/JPEG sang WebP bằng công cụ.
- Trong android/app/build.gradle: android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Lazy Loading Images:
- Dùng react-native-fast-image để load hình ảnh hiệu quả.

3. Tối ưu hóa Redux và State Management

Redux DevTools:
- Vô hiệu hóa Redux DevTools trong môi trường production: const store = createStore( rootReducer, process.env.NODE_ENV === 'production' ? undefined : window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );

4. Theo dõi hiệu năng với Flipper

React DevTools:
- Sử dụng Flipper để phân tích rendering của các component.
Leak Detection:
- Thêm plugin Flipper để kiểm tra memory leaks.

29. Cách triển khai và quản lý GraphQL trong React Native

Câu hỏi: Làm thế nào để sử dụng Apollo Client với React Native cho GraphQL?

Cài đặt Apollo Client:

npm install @apollo/client graphql

Sử dụng Apollo Client:

import React from 'react'; import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client'; import { View, Text } from 'react-native'; const client = new ApolloClient({ uri: 'https://example.com/graphql', cache: new InMemoryCache(), }); const GET_USERS = gql` query GetUsers { users { id name } } `; function Users() { const { loading, error, data } = useQuery(GET_USERS); if (loading) return <Text>Loading...</Text>; if (error) return <Text>Error: {error.message}</Text>; return ( <View> {data.users.map((user) => ( <Text key={user.id}>{user.name}</Text> ))} </View> ); } export default function App() { return ( <ApolloProvider client={client}> <Users /> </ApolloProvider> ); }

Giải thích:

Apollo Client:
- Quản lý dữ liệu GraphQL với cache tích hợp.
Tối ưu hóa:
- Sử dụng InMemoryCache để giảm số lần gọi API.
- Phân trang dữ liệu với fetchMore.

30. Tích hợp và tối ưu hóa BLE (Bluetooth Low Energy) trong React Native

Câu hỏi: Làm thế nào để tích hợp BLE và quản lý kết nối với các thiết bị ngoại vi?

Cài đặt thư viện BLE:

npm install react-native-ble-plx

Ví dụ sử dụng BLE:

import React, { useEffect, useState } from 'react'; import { BleManager } from 'react-native-ble-plx'; import { View, Text, Button, PermissionsAndroid, Platform } from 'react-native'; const manager = new BleManager(); export default function App() { const [devices, setDevices] = useState([]); const startScan = async () => { if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION ); if (granted !== PermissionsAndroid.RESULTS.GRANTED) { console.log('Location permission denied'); return; } } manager.startDeviceScan(null, null, (error, device) => { if (error) { console.error(error); return; } if (device && !devices.some((d) => d.id === device.id)) { setDevices((prev) => [...prev, device]); } }); setTimeout(() => { manager.stopDeviceScan(); }, 5000); // Quét trong 5 giây }; return ( <View> <Button title="Start Scan" onPress={startScan} /> {devices.map((device) => ( <Text key={device.id}>{device.name || 'Unknown Device'}</Text> ))} </View> ); }

Giải thích:

BLE (Bluetooth Low Energy):
- Dùng để giao tiếp với thiết bị ngoại vi như cảm biến hoặc thiết bị IoT.
Tối ưu hóa:
- Giới hạn thời gian quét để tiết kiệm pin.
- Sử dụng chế độ background scanning nếu cần.

31. Làm thế nào để triển khai Video Chat trong React Native?

Câu hỏi: Làm thế nào để tích hợp WebRTC cho video chat trong React Native?

Cài đặt WebRTC:

npm install react-native-webrtc

Ví dụ tích hợp WebRTC:

import React, { useRef } from 'react'; import { View, Button } from 'react-native'; import { RTCView, mediaDevices } from 'react-native-webrtc'; export default function App() { const streamRef = useRef(null); const startVideo = async () => { const stream = await mediaDevices.getUserMedia({ video: true, audio: true, }); streamRef.current = stream; }; return ( <View> <Button title="Start Video" onPress={startVideo} /> {streamRef.current && <RTCView streamURL={streamRef.current.toURL()} style={{ width: 300, height: 400 }} />} </View> ); }

Giải thích:

WebRTC:
- Giao thức mã nguồn mở để truyền thông real-time qua mạng.
Tối ưu hóa Video Chat:
- Sử dụng TURN server cho kết nối ổn định hơn.
- Giảm băng thông bằng cách điều chỉnh bitrate và độ phân giải.

32. Làm thế nào để triển khai Dynamic Themes (Light/Dark Mode)?

Câu hỏi: Làm thế nào để hỗ trợ nhiều theme (Light/Dark) trong ứng dụng React Native?

Sử dụng Context API cho Dynamic Themes:

import React, { createContext, useState, useContext } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const ThemeContext = createContext(); export const useTheme = () => useContext(ThemeContext); export default function App() { const [theme, setTheme] = useState('light'); const toggleTheme = () => { setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: theme === 'light' ? '#fff' : '#000', }, text: { color: theme === 'light' ? '#000' : '#fff', }, }); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <View style={styles.container}> <Text style={styles.text}>Current Theme: {theme}</Text> <Button title="Toggle Theme" onPress={toggleTheme} /> </View> </ThemeContext.Provider> ); }

Giải thích:

Dynamic Themes:
- Tự động thay đổi giao diện dựa trên trạng thái ứng dụng hoặc cài đặt hệ thống.
Ưu điểm:
- Dễ dàng mở rộng để hỗ trợ nhiều themes.

33. Cách tích hợp Machine Learning trong React Native

Câu hỏi: Làm thế nào để sử dụng Machine Learning trong ứng dụng React Native?

Sử dụng TensorFlow.js với React Native

Cài đặt TensorFlow.js:

npm install @tensorflow/tfjs @tensorflow/tfjs-react-native npx pod-install

Ví dụ: Dự đoán chữ số viết tay (MNIST):

import React, { useEffect } from 'react'; import { Text, View } from 'react-native'; import * as tf from '@tensorflow/tfjs'; import { bundleResourceIO } from '@tensorflow/tfjs-react-native'; export default function App() { useEffect(() => { const loadModel = async () => { await tf.ready(); const modelJson = require('./model/model.json'); const modelWeights = require('./model/weights.bin'); const model = await tf.loadLayersModel(bundleResourceIO(modelJson, modelWeights)); // Dự đoán với tensor giả lập const input = tf.tensor2d([[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]]); const prediction = model.predict(input); console.log('Prediction:', prediction.dataSync()); }; loadModel(); }, []); return ( <View> <Text>TensorFlow.js in React Native</Text> </View> ); }

Giải thích:

TensorFlow.js:
- Cho phép chạy mô hình ML trong ứng dụng React Native.
- Hỗ trợ cả các mô hình pre-trained và mô hình custom.
BundleResourceIO:
- Được dùng để nạp mô hình từ tài nguyên cục bộ thay vì tải từ server.

Tối ưu hóa:

Nén mô hình bằng TensorFlow Lite hoặc TensorFlow.js quantization để giảm kích thước.
Sử dụng GPU nếu cần tăng hiệu năng.

34. Xử lý hiệu quả Push Notifications trong các môi trường khác nhau

Câu hỏi: Làm thế nào để tích hợp và tối ưu hóa thông báo đẩy trên cả Android và iOS?

Sử dụng Firebase Cloud Messaging (FCM)

Cài đặt Firebase SDK:

npm install @react-native-firebase/app @react-native-firebase/messaging npx pod-install

Yêu cầu quyền thông báo trên iOS:

import messaging from '@react-native-firebase/messaging'; const requestPermission = async () => { const authStatus = await messaging().requestPermission(); const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL; if (enabled) { console.log('Authorization status:', authStatus); } }; useEffect(() => { requestPermission(); }, []);

Xử lý thông báo nền (background):

messaging().setBackgroundMessageHandler(async (remoteMessage) => { console.log('Message handled in the background!', remoteMessage); });

Hiển thị thông báo foreground với react-native-notifications:

npm install react-native-notifications

import { Notifications } from 'react-native-notifications'; Notifications.events().registerNotificationReceivedForeground((notification, completion) => { console.log('Notification received in foreground:', notification); completion({ alert: true, sound: true, badge: false }); });

Giải thích:

FCM (Firebase Cloud Messaging):
- Cho phép gửi thông báo đẩy qua cả Android và iOS.
Foreground Notifications:
- Cần thư viện bổ sung như react-native-notifications để hiển thị khi ứng dụng đang hoạt động.

Tối ưu hóa:

Giảm số lượng thông báo không cần thiết để tránh gây phiền nhiễu.
Sử dụng segmentation để gửi thông báo tới đúng nhóm người dùng.

35. Làm thế nào để triển khai Offline Synchronization?

Câu hỏi: Làm thế nào để đồng bộ hóa dữ liệu cục bộ với server khi mất kết nối mạng?

Ví dụ với WatermelonDB:

Cài đặt WatermelonDB:

npm install @nozbe/watermelondb npx pod-install

Cấu hình cơ sở dữ liệu:

import { Database } from '@nozbe/watermelondb'; import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite'; import schema from './schema'; import Post from './models/Post'; const adapter = new SQLiteAdapter({ schema, }); export const database = new Database({ adapter, modelClasses: [Post], });

Đồng bộ hóa với server:

import { synchronize } from '@nozbe/watermelondb/sync'; const syncData = async () => { await synchronize({ database, pullChanges: async ({ lastPulledAt }) => { const response = await fetch(`https://example.com/sync?since=${lastPulledAt}`); const { changes, timestamp } = await response.json(); return { changes, timestamp }; }, pushChanges: async ({ changes }) => { await fetch('https://example.com/sync', { method: 'POST', body: JSON.stringify(changes), }); }, }); };

Giải thích:

WatermelonDB:
- Hỗ trợ đồng bộ hóa dữ liệu cục bộ với server.
- Tối ưu hóa cho hiệu năng với SQLite backend.
Tối ưu hóa đồng bộ:
- Sử dụng chiến lược delta sync để giảm dữ liệu truyền tải.
- Kiểm tra xung đột dữ liệu (data conflicts) cẩn thận.

36. Làm thế nào để tích hợp CI/CD với React Native?

Câu hỏi: Làm thế nào để tự động hóa quá trình build và deploy ứng dụng React Native?

Sử dụng Fastlane cho CI/CD:

Cài đặt Fastlane:

sudo gem install fastlane

Cấu hình Fastlane cho Android:

cd android fastlane init

Tệp Fastfile:

platform :android do desc "Build and deploy to Play Store" lane :deploy do gradle(task: "assembleRelease") upload_to_play_store(track: "production", skip_upload_apk: false) end end

Cấu hình Fastlane cho iOS:

cd ios fastlane init

Tệp Fastfile:

platform :ios do desc "Build and deploy to App Store" lane :deploy do build_app(scheme: "YourApp") upload_to_app_store end end

Tích hợp CI (GitHub Actions):

Tệp .github/workflows/deploy.yml:

name: Build and Deploy on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install Node.js uses: actions/setup-node@v2 with: node-version: '16' - name: Install Dependencies run: npm install - name: Build Android run: cd android && fastlane deploy

Giải thích:

Fastlane:
- Công cụ mạnh mẽ để tự động hóa quy trình phát hành ứng dụng.
CI/CD:
- Tích hợp CI/CD đảm bảo các phiên bản build luôn nhất quán và tiết kiệm thời gian.

37. Tối ưu hóa hiệu năng ứng dụng với Virtualized Lists

Câu hỏi: Làm thế nào để hiển thị danh sách lớn trong React Native mà vẫn đảm bảo hiệu năng?

Sử dụng FlatList cho danh sách lớn:

import React from 'react'; import { FlatList, Text, View, StyleSheet } from 'react-native'; const data = Array.from({ length: 10000 }, (_, index) => `Item ${index}`); const renderItem = ({ item }) => ( <View style={styles.item}> <Text>{item}</Text> </View> ); export default function App() { return ( <FlatList data={data} renderItem={renderItem} keyExtractor={(item, index) => index.toString()} initialNumToRender={10} // Render tối thiểu 10 items ban đầu maxToRenderPerBatch={20} // Số lượng items tối đa mỗi batch windowSize={5} // Số màn hình render trước và sau removeClippedSubviews={true} // Giảm sử dụng bộ nhớ /> ); } const styles = StyleSheet.create({ item: { padding: 20, borderBottomWidth: 1, borderBottomColor: '#ccc', }, });

Giải thích:

FlatList:
- Tối ưu hơn ScrollView vì chỉ render các items hiển thị trên màn hình.
Tối ưu hóa:
- Sử dụng initialNumToRender và maxToRenderPerBatch để giảm số lượng items render cùng lúc.
- Bật removeClippedSubviews để giải phóng bộ nhớ cho các items ngoài màn hình.

38. Xử lý sự kiện đa điểm (Multi-touch gestures) trong React Native

Câu hỏi: Làm thế nào để xử lý các sự kiện đa điểm như Pinch-to-Zoom?

Sử dụng `react-native-gesture-handler`:

npm install react-native-gesture-handler

Ví dụ: Pinch-to-Zoom Gesture

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { GestureHandlerRootView, PinchGestureHandler, } from 'react-native-gesture-handler'; import Animated, { useSharedValue, useAnimatedStyle, withTiming, } from 'react-native-reanimated'; export default function App() { const scale = useSharedValue(1); const onPinchGesture = Animated.event( [{ nativeEvent: { scale: (s) => (scale.value = s) } }], { useNativeDriver: true } ); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: withTiming(scale.value) }], })); return ( <GestureHandlerRootView style={styles.container}> <PinchGestureHandler onGestureEvent={onPinchGesture}> <Animated.View style={[styles.box, animatedStyle]} /> </PinchGestureHandler> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 150, height: 150, backgroundColor: 'blue', }, });

Giải thích:

PinchGestureHandler:
- Xử lý sự kiện đa điểm như pinch hoặc zoom một cách mượt mà.
useSharedValue:
- Đảm bảo giá trị trạng thái animation không ảnh hưởng đến JS thread.

39. Xử lý Authentication với JWT và Refresh Token

Câu hỏi: Làm thế nào để triển khai xác thực với JSON Web Token (JWT) và Refresh Token?

Ví dụ: Authentication Workflow

Lưu token trong Secure Storage:

npm install react-native-keychain

import * as Keychain from 'react-native-keychain'; const saveToken = async (token) => { await Keychain.setGenericPassword('user', token); }; const getToken = async () => { const credentials = await Keychain.getGenericPassword(); return credentials ? credentials.password : null; };

Tự động làm mới token (Refresh Token):

const refreshToken = async () => { const oldToken = await getToken(); const response = await fetch('https://example.com/refresh-token', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: oldToken }), }); const { newToken } = await response.json(); await saveToken(newToken); return newToken; };

Bảo vệ API calls:

const apiCall = async () => { try { const token = await getToken(); const response = await fetch('https://example.com/protected', { headers: { Authorization: `Bearer ${token}` }, }); if (response.status === 401) { const newToken = await refreshToken(); return apiCall(); // Thử lại với token mới } return response.json(); } catch (error) { console.error(error); } };

Giải thích:

JWT:
- Token-based authentication cho các ứng dụng di động.
Refresh Token:
- Sử dụng để làm mới token mà không yêu cầu người dùng đăng nhập lại.

40. Bảo mật dữ liệu nhạy cảm trong React Native

Câu hỏi: Làm thế nào để bảo vệ dữ liệu nhạy cảm (token, thông tin cá nhân) trong ứng dụng?

Sử dụng Secure Storage:

npm install react-native-keychain

import * as Keychain from 'react-native-keychain'; // Lưu dữ liệu an toàn const saveSensitiveData = async (key, value) => { await Keychain.setGenericPassword(key, value); }; // Lấy dữ liệu an toàn const getSensitiveData = async (key) => { const credentials = await Keychain.getGenericPassword(); if (credentials && credentials.username === key) { return credentials.password; } return null; };

Tối ưu hóa bảo mật:

Biometric Authentication:
- Sử dụng react-native-keychain để tích hợp xác thực vân tay hoặc nhận diện khuôn mặt.
Encrypt dữ liệu cục bộ:
- Kết hợp với thư viện mã hóa như react-native-sensitive-info.

41. Triển khai Localization (i18n) nâng cao

Câu hỏi: Làm thế nào để hỗ trợ đa ngôn ngữ với khả năng thay đổi runtime trong React Native?

Sử dụng `react-i18next`:

npm install react-i18next i18next

Cấu hình i18n:

import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n.use(initReactI18next).init({ resources: { en: { translation: { welcome: 'Welcome' } }, vi: { translation: { welcome: 'Chào mừng' } }, }, lng: 'en', // Ngôn ngữ mặc định fallbackLng: 'en', interpolation: { escapeValue: false }, }); export default i18n;

Sử dụng trong React Native:

import React from 'react'; import { Text, Button, View } from 'react-native'; import { useTranslation } from 'react-i18next'; export default function App() { const { t, i18n } = useTranslation(); const changeLanguage = (lang) => { i18n.changeLanguage(lang); }; return ( <View> <Text>{t('welcome')}</Text> <Button title="English" onPress={() => changeLanguage('en')} /> <Button title="Vietnamese" onPress={() => changeLanguage('vi')} /> </View> ); }

Giải thích:

Dynamic Localization:
- Thay đổi ngôn ngữ runtime mà không cần khởi động lại ứng dụng.
Ưu điểm của react-i18next:
- Hỗ trợ lazy loading ngôn ngữ và các tính năng phức tạp như namespace.

42. Tối ưu hóa xử lý dữ liệu lớn trong React Native

Câu hỏi: Làm thế nào để xử lý dữ liệu lớn (ví dụ: lọc, sắp xếp, tìm kiếm) trong React Native mà vẫn đảm bảo hiệu năng?

Sử dụng `memoization` để tối ưu hóa lọc và sắp xếp

import React, { useState, useMemo } from 'react'; import { FlatList, Text, TextInput, View, StyleSheet } from 'react-native'; const data = Array.from({ length: 10000 }, (_, index) => ({ id: index, name: `Item ${index}`, })); export default function App() { const [searchQuery, setSearchQuery] = useState(''); const filteredData = useMemo(() => { return data.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase()) ); }, [searchQuery]); return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="Search..." value={searchQuery} onChangeText={(text) => setSearchQuery(text)} /> <FlatList data={filteredData} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => <Text style={styles.item}>{item.name}</Text>} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 10, }, input: { borderWidth: 1, borderColor: '#ccc', marginBottom: 10, padding: 10, }, item: { padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc', }, });

Giải thích:

useMemo:
- Tối ưu hóa việc tính toán lại dữ liệu lọc khi searchQuery thay đổi.
Tại sao cần tối ưu hóa?
- Giảm số lần tính toán lại cho dữ liệu lớn, giúp UI mượt hơn.

43. Sử dụng Redux Toolkit cho các tác vụ phức tạp

Câu hỏi: Làm thế nào để quản lý trạng thái ứng dụng phức tạp với Redux Toolkit?

Cấu hình Redux Toolkit:

npm install @reduxjs/toolkit react-redux

Tạo Slice:

import { createSlice, configureStore } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, incrementByAmount: (state, action) => { state.value += action.payload; }, }, }); export const { increment, decrement, incrementByAmount } = counterSlice.actions; const store = configureStore({ reducer: { counter: counterSlice.reducer }, }); export default store;

Sử dụng Redux trong Component:

import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement, incrementByAmount } from './store'; export default function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => dispatch(increment())} /> <Button title="Decrement" onPress={() => dispatch(decrement())} /> <Button title="Increment by 10" onPress={() => dispatch(incrementByAmount(10))} /> </View> ); }

Giải thích:

Redux Toolkit:
- Đơn giản hóa cấu hình Redux với các công cụ tích hợp sẵn.
Tối ưu hóa:
- Hỗ trợ immer để cập nhật trạng thái bất biến mà không cần clone thủ công.

44. Xử lý công việc bất đồng bộ với Redux Saga

Câu hỏi: Tại sao nên sử dụng Redux Saga để quản lý các tác vụ async phức tạp?

Ví dụ: Xử lý API call với Redux Saga

Cài đặt Redux Saga:

npm install redux-saga

Tạo Saga Worker:

import { takeLatest, call, put } from 'redux-saga/effects'; function* fetchUser(action) { try { const response = yield call(fetch, `https://api.example.com/users/${action.payload}`); const data = yield response.json(); yield put({ type: 'FETCH_USER_SUCCESS', payload: data }); } catch (error) { yield put({ type: 'FETCH_USER_FAILURE', payload: error.message }); } } function* watchFetchUser() { yield takeLatest('FETCH_USER_REQUEST', fetchUser); } export default watchFetchUser;

Kết nối Saga với Store:

import createSagaMiddleware from 'redux-saga'; import { configureStore } from '@reduxjs/toolkit'; import watchFetchUser from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = configureStore({ reducer: rootReducer, middleware: [sagaMiddleware], }); sagaMiddleware.run(watchFetchUser); export default store;

Giải thích:

Redux Saga:
- Sử dụng Generator Functions để quản lý các luồng bất đồng bộ phức tạp.
- Dễ dàng xử lý các yêu cầu lặp lại hoặc debounce trong các tác vụ async.

45. Bảo mật API với OAuth 2.0 và PKCE

Câu hỏi: Làm thế nào để tích hợp OAuth 2.0 với PKCE trong React Native?

Cài đặt Thư viện OAuth:

npm install react-native-app-auth

Cấu hình OAuth:

import { authorize } from 'react-native-app-auth'; const config = { issuer: 'https://example.com/oauth', clientId: 'your-client-id', redirectUrl: 'yourapp://callback', scopes: ['openid', 'profile', 'email'], usePKCE: true, // Kích hoạt PKCE }; export const authenticate = async () => { try { const result = await authorize(config); console.log('Access Token:', result.accessToken); } catch (error) { console.error('OAuth Error:', error); } };

Giải thích:

OAuth 2.0 với PKCE:
- PKCE (Proof Key for Code Exchange) tăng tính bảo mật khi xử lý mã ủy quyền trên các ứng dụng di động.
Tối ưu hóa:
- Lưu trữ token an toàn bằng Secure Storage.
- Sử dụng Refresh Token để tránh đăng nhập lại.

46. Xây dựng ứng dụng React Native với microservices

Câu hỏi: Làm thế nào để tích hợp kiến trúc microservices trong React Native?

Kết nối với API Gateway:

const fetchData = async (endpoint) => { try { const response = await fetch(`https://api.example.com/${endpoint}`); if (!response.ok) { throw new Error('Network response was not ok'); } return await response.json(); } catch (error) { console.error('API Error:', error); } }; fetchData('users').then((data) => console.log(data));

Quản lý dịch vụ bằng Redux Thunk:

export const fetchUsers = () => async (dispatch) => { dispatch({ type: 'FETCH_USERS_REQUEST' }); try { const response = await fetch('https://api.example.com/users'); const data = await response.json(); dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_USERS_FAILURE', payload: error.message }); } };

Giải thích:

Microservices:
- Phân chia API theo domain giúp dễ dàng mở rộng và bảo trì.
Tích hợp với API Gateway:
- Đảm bảo tính đồng nhất giữa các dịch vụ thông qua API Gateway.

47. Tối ưu hóa giao diện người dùng với Skeleton Loading

Câu hỏi: Làm thế nào để cải thiện trải nghiệm người dùng khi tải dữ liệu bằng Skeleton Loading?

Ví dụ Skeleton Loader bằng `react-content-loader`:

Cài đặt thư viện:

npm install react-content-loader

Sử dụng Skeleton Loader:

import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, FlatList } from 'react-native'; import ContentLoader, { Rect } from 'react-content-loader/native'; const SkeletonLoader = () => ( <ContentLoader speed={2} width={300} height={50} backgroundColor="#f3f3f3" foregroundColor="#ecebeb" > <Rect x="0" y="0" rx="5" ry="5" width="300" height="10" /> <Rect x="0" y="20" rx="5" ry="5" width="250" height="10" /> </ContentLoader> ); export default function App() { const [loading, setLoading] = useState(true); const [data, setData] = useState([]); useEffect(() => { setTimeout(() => { setData(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`)); setLoading(false); }, 2000); }, []); return ( <View style={styles.container}> {loading ? ( Array.from({ length: 5 }).map((_, index) => ( <SkeletonLoader key={index} /> )) ) : ( <FlatList data={data} renderItem={({ item }) => <Text style={styles.item}>{item}</Text>} keyExtractor={(item, index) => index.toString()} /> )} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, item: { padding: 10, fontSize: 16, borderBottomWidth: 1, borderBottomColor: '#ccc', }, });

Giải thích:

Skeleton Loading:
- Hiển thị các placeholder UI trước khi dữ liệu được tải hoàn tất.
- Cải thiện trải nghiệm người dùng bằng cách tránh khoảng trống.
Ưu điểm:
- Giảm cảm giác chờ đợi.
- Tạo giao diện liền mạch.

48. Triển khai Server-Sent Events (SSE) trong React Native

Câu hỏi: Làm thế nào để sử dụng SSE để cập nhật dữ liệu real-time?

Ví dụ sử dụng SSE:

import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default function App() { const [messages, setMessages] = useState([]); useEffect(() => { const eventSource = new EventSource('https://example.com/sse'); eventSource.onmessage = (event) => { setMessages((prev) => [...prev, JSON.parse(event.data)]); }; eventSource.onerror = (error) => { console.error('SSE Error:', error); eventSource.close(); }; return () => eventSource.close(); // Cleanup connection }, []); return ( <View style={styles.container}> {messages.map((message, index) => ( <Text key={index} style={styles.message}> {message.text} </Text> ))} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, message: { padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc', }, });

Giải thích:

SSE (Server-Sent Events):
- Gửi dữ liệu liên tục từ server đến client qua kết nối HTTP.
- Thích hợp cho các cập nhật real-time ít tương tác như thông báo hoặc dữ liệu thời gian thực.
So sánh với WebSocket:
- SSE: Một chiều (server → client), dễ tích hợp với API REST.
- WebSocket: Hai chiều, thích hợp cho các ứng dụng cần tương tác cao.

49. Tích hợp React Native với Native Modules (Nâng cao)

Câu hỏi: Làm thế nào để viết và sử dụng Native Modules cho tác vụ phức tạp?

Ví dụ Native Module trên iOS:

Tạo Native Module (Objective-C):

// RCTExampleModule.h #import <React/RCTBridgeModule.h> @interface RCTExampleModule : NSObject <RCTBridgeModule> @end // RCTExampleModule.m #import "RCTExampleModule.h" #import <React/RCTLog.h> @implementation RCTExampleModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(exampleMethod:(NSString *)message callback:(RCTResponseSenderBlock)callback) { RCTLogInfo(@"Received message: %@", message); callback(@[[NSNull null], @"Native Response"]); } @end

Sử dụng Native Module trong React Native:

import { NativeModules } from 'react-native'; const { ExampleModule } = NativeModules; ExampleModule.exampleMethod('Hello Native!', (error, response) => { if (error) { console.error(error); } else { console.log('Native Response:', response); } });

Giải thích:

Native Modules:
- Cho phép sử dụng các tính năng hoặc thư viện không có trong React Native.
- Kết hợp logic phức tạp (như xử lý tín hiệu âm thanh hoặc hình ảnh) trực tiếp từ mã native.
Tối ưu hóa:
- Giảm số lần gọi Bridge giữa JS và Native để tránh bottleneck.

50. Triển khai Dynamic Feature Modules

Câu hỏi: Làm thế nào để triển khai Dynamic Feature Modules để giảm kích thước ứng dụng?

Dynamic Feature Modules trên Android:

Cấu hình build.gradle:

apply plugin: 'com.android.dynamic-feature' android { ... dynamicFeatures = [':dynamicmodule'] }

Tải module động trong React Native:

import { NativeModules } from 'react-native'; const { DynamicFeatureLoader } = NativeModules; DynamicFeatureLoader.loadFeature('dynamicmodule') .then(() => { console.log('Module Loaded'); }) .catch((error) => { console.error('Module Load Error:', error); });

Giải thích:

Dynamic Feature Modules:
- Cho phép tải các phần của ứng dụng theo yêu cầu, giảm kích thước ban đầu.
- Tích hợp tốt với kiến trúc microservices hoặc ứng dụng lớn.
Tối ưu hóa:
- Đảm bảo phân tách logic hợp lý giữa các modules để tối ưu tải trọng.

51. Tích hợp và quản lý WebAssembly trong React Native

Câu hỏi: Làm thế nào để sử dụng WebAssembly (WASM) trong React Native để tăng hiệu năng?

Ví dụ sử dụng WASM:

Cài đặt thư viện:

npm install @wasmer/wasm

Tích hợp WASM:

import { WasmFs } from '@wasmer/wasmfs'; import { WASI } from '@wasmer/wasi'; export default async function loadWasm() { const wasi = new WASI({ args: [], env: {}, bindings: { ...WASI.defaultBindings, fs: new WasmFs().fs, }, }); const wasmBinary = await fetch('path_to_wasm_file.wasm').then((res) => res.arrayBuffer() ); const { instance } = await WebAssembly.instantiate(wasmBinary, wasi.getImports()); wasi.start(instance); }

Giải thích:

WebAssembly:
- Cung cấp hiệu năng cao hơn cho các tác vụ tính toán nặng bằng cách chạy mã native trong sandbox.
Khi nào nên sử dụng?
- Khi xử lý hình ảnh, mô phỏng vật lý, hoặc các thuật toán nặng.

52. Sử dụng Code Splitting và Lazy Loading trong React Native

Câu hỏi: Làm thế nào để giảm tải tài nguyên không cần thiết và tăng tốc độ tải ứng dụng bằng cách sử dụng Code Splitting và Lazy Loading?

Ví dụ: Lazy Loading với React.lazy

import React, { Suspense } from 'react'; import { View, Text, StyleSheet } from 'react-native'; // Lazy load component const LazyComponent = React.lazy(() => import('./LazyComponent')); export default function App() { return ( <View style={styles.container}> <Suspense fallback={<Text>Loading...</Text>}> <LazyComponent /> </Suspense> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Giải thích:

React.lazy:
- Chỉ tải module khi cần thiết, giảm kích thước bundle ban đầu.
Suspense:
- Hiển thị nội dung dự phòng trong khi chờ tải module.

Tối ưu hóa:

Phân chia mã logic ứng dụng thành các module nhỏ hơn.
Sử dụng công cụ như Metro để theo dõi hiệu quả của bundle splitting.

53. Tối ưu hóa giao tiếp với API bằng GraphQL và Relay

Câu hỏi: Làm thế nào để sử dụng Relay để tối ưu hóa giao tiếp với GraphQL?

Cài đặt Relay:

npm install react-relay npm install --save-dev relay-compiler

Sử dụng Relay với GraphQL:

1. Cấu hình Relay Environment:

import { Environment, Network, RecordSource, Store } from 'relay-runtime'; function fetchQuery(operation, variables) { return fetch('https://example.com/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query: operation.text, variables, }), }).then((response) => response.json()); } const environment = new Environment({ network: Network.create(fetchQuery), store: new Store(new RecordSource()), }); export default environment;

2. Query với Relay:

import React from 'react'; import { QueryRenderer, graphql } from 'react-relay'; import { View, Text } from 'react-native'; import environment from './RelayEnvironment'; const AppQuery = graphql` query AppQuery { users { id name } } `; export default function App() { return ( <QueryRenderer environment={environment} query={AppQuery} render={({ error, props }) => { if (error) { return <Text>Error: {error.message}</Text>; } if (!props) { return <Text>Loading...</Text>; } return ( <View> {props.users.map((user) => ( <Text key={user.id}>{user.name}</Text> ))} </View> ); }} /> ); }

Giải thích:

Relay:
- Relay tối ưu hóa giao tiếp GraphQL bằng cách giảm thiểu dữ liệu tải về và sử dụng cache hiệu quả.
Ưu điểm:
- Xử lý tốt các query phức tạp.
- Dễ dàng quản lý các trạng thái API call với query fragments.

54. Tích hợp Camera và xử lý hình ảnh trong React Native

Câu hỏi: Làm thế nào để tích hợp camera và xử lý hình ảnh từ camera trong React Native?

Cài đặt Camera:

npm install react-native-vision-camera npx pod-install

Sử dụng Camera:

import React, { useEffect } from 'react'; import { StyleSheet, View, Button } from 'react-native'; import { Camera, useCameraDevices } from 'react-native-vision-camera'; export default function App() { const devices = useCameraDevices(); const device = devices.back; useEffect(() => { const requestCameraPermission = async () => { const status = await Camera.requestCameraPermission(); console.log('Camera Permission:', status); }; requestCameraPermission(); }, []); if (device == null) return <View style={styles.container}><Text>Loading...</Text></View>; return ( <View style={styles.container}> <Camera style={StyleSheet.absoluteFill} device={device} isActive /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Xử lý hình ảnh sau khi chụp:

const capturePhoto = async () => { const photo = await camera.takePhoto({ flash: 'on', qualityPrioritization: 'balanced', }); console.log('Captured Photo:', photo); };

Giải thích:

react-native-vision-camera:
- Cung cấp hiệu năng cao và khả năng xử lý video/hình ảnh với camera.
Tích hợp xử lý:
- Kết hợp thư viện xử lý ảnh như react-native-image-editor để chỉnh sửa sau khi chụp.

55. Tối ưu hóa trải nghiệm với Gesture Animations

Câu hỏi: Làm thế nào để kết hợp Gesture Animations và Reanimated để tạo giao diện mượt mà?

Sử dụng Gesture Animations:

npm install react-native-reanimated react-native-gesture-handler

Ví dụ: Swipe Animation:

import React from 'react'; import { StyleSheet } from 'react-native'; import Animated, { useSharedValue, useAnimatedGestureHandler, useAnimatedStyle, withSpring, } from 'react-native-reanimated'; import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler'; export default function App() { const translateX = useSharedValue(0); const gestureHandler = useAnimatedGestureHandler({ onActive: (event) => { translateX.value = event.translationX; }, onEnd: () => { translateX.value = withSpring(0); // Animation quay về vị trí cũ }, }); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: translateX.value }], })); return ( <GestureHandlerRootView style={styles.container}> <PanGestureHandler onGestureEvent={gestureHandler}> <Animated.View style={[styles.box, animatedStyle]} /> </PanGestureHandler> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 100, height: 100, backgroundColor: 'blue', }, });

Giải thích:

Reanimated:
- Cho phép animation chạy trên UI thread, giúp mượt mà hơn.
Gesture Animations:
- Kết hợp gestures như swipe, pinch, và drag để cải thiện UX.

56. Tích hợp các Native SDK trong React Native

Câu hỏi: Làm thế nào để tích hợp các SDK native của bên thứ ba như Map, Analytics?

Ví dụ tích hợp Google Maps SDK:

Cài đặt thư viện:

npm install react-native-maps npx pod-install

Cấu hình API Key:
- Trên Android: Thêm API Key vào AndroidManifest.xml.
- Trên iOS: Thêm API Key vào tệp AppDelegate.m.
Sử dụng Google Maps:

import React from 'react'; import MapView from 'react-native-maps'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, map: { flex: 1, }, });

Giải thích:

Google Maps SDK:
- Cung cấp các chức năng bản đồ nâng cao như vẽ polyline, marker clustering.
Tối ưu hóa:
- Sử dụng caching và marker clustering để tăng hiệu năng khi hiển thị nhiều điểm trên bản đồ.

57. Tối ưu hóa trải nghiệm người dùng với Animation Transitions

Câu hỏi: Làm thế nào để sử dụng React Native Reanimated để tạo hiệu ứng chuyển đổi mượt mà giữa các màn hình?

Ví dụ: Transition Animation với Reanimated

Cài đặt thư viện:

npm install react-native-reanimated react-native-gesture-handler react-navigation npm install @react-navigation/native-stack

Cấu hình Navigation với Animation:

import React from 'react'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { NavigationContainer } from '@react-navigation/native'; import { View, Text, Button, StyleSheet } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withTiming, } from 'react-native-reanimated'; const Stack = createNativeStackNavigator(); function ScreenA({ navigation }) { const translateX = useSharedValue(0); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: withTiming(translateX.value, { duration: 500 }) }], })); return ( <Animated.View style={[styles.container, animatedStyle]}> <Text style={styles.text}>Screen A</Text> <Button title="Go to Screen B" onPress={() => navigation.navigate('ScreenB')} /> </Animated.View> ); } function ScreenB() { return ( <View style={styles.container}> <Text style={styles.text}>Screen B</Text> </View> ); } export default function App() { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="ScreenA" component={ScreenA} /> <Stack.Screen name="ScreenB" component={ScreenB} /> </Stack.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 24, }, });

Giải thích:

React Native Reanimated:
- Cho phép tạo hiệu ứng chuyển đổi mượt mà trên UI thread.
Tối ưu hóa chuyển đổi:
- Sử dụng useSharedValue và withTiming để kiểm soát thời gian chuyển đổi.
- Kết hợp với react-navigation để đồng bộ hóa animation giữa các màn hình.

58. Xử lý trạng thái phức tạp với Zustand

Câu hỏi: Tại sao sử dụng Zustand để quản lý trạng thái thay cho Redux hay Context API?

Cài đặt Zustand:

npm install zustand

Ví dụ sử dụng Zustand:

import create from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); export default function App() { const { count, increment, decrement } = useStore(); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontSize: 24 }}>Count: {count}</Text> <Button title="Increment" onPress={increment} /> <Button title="Decrement" onPress={decrement} /> </View> ); }

Giải thích:

Zustand:
- Quản lý trạng thái nhẹ, không cần boilerplate như Redux.
Ưu điểm:
- Hỗ trợ reactive state mà không cần wrapper như Provider.
- Dễ dàng mở rộng cho trạng thái toàn cục hoặc module-specific.

59. Tích hợp AI Chatbot với GPT API trong React Native

Câu hỏi: Làm thế nào để tích hợp GPT-3/4 API trong ứng dụng React Native?

Cài đặt GPT API:

npm install axios

Sử dụng GPT API:

import React, { useState } from 'react'; import { View, TextInput, Button, Text, StyleSheet } from 'react-native'; import axios from 'axios'; export default function App() { const [input, setInput] = useState(''); const [response, setResponse] = useState(''); const callGPT = async () => { try { const result = await axios.post( 'https://api.openai.com/v1/completions', { model: 'text-davinci-003', prompt: input, max_tokens: 100, }, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer YOUR_API_KEY`, }, } ); setResponse(result.data.choices[0].text); } catch (error) { console.error('Error calling GPT API:', error); } }; return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="Ask something..." value={input} onChangeText={setInput} /> <Button title="Send" onPress={callGPT} /> <Text style={styles.response}>{response}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, input: { borderWidth: 1, borderColor: '#ccc', marginBottom: 10, padding: 10, }, response: { marginTop: 20, fontSize: 16, }, });

Giải thích:

GPT API:
- Tích hợp sức mạnh AI của OpenAI để xây dựng chatbot hoặc các ứng dụng hỗ trợ người dùng.
Ưu điểm:
- Xử lý ngôn ngữ tự nhiên mạnh mẽ.
- Dễ dàng tích hợp vào React Native thông qua REST API.

60. Tích hợp Real-Time Analytics với Firebase

Câu hỏi: Làm thế nào để theo dõi hành vi người dùng trong thời gian thực bằng Firebase Analytics?

Cài đặt Firebase Analytics:

npm install @react-native-firebase/app @react-native-firebase/analytics npx pod-install

Sử dụng Firebase Analytics:

import React from 'react'; import { View, Button } from 'react-native'; import analytics from '@react-native-firebase/analytics'; export default function App() { const logEvent = async () => { await analytics().logEvent('user_interaction', { item: 'button_click', value: 1, }); console.log('Event logged'); }; return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button title="Log Event" onPress={logEvent} /> </View> ); }

Giải thích:

Firebase Analytics:
- Theo dõi sự kiện và hành vi người dùng trong thời gian thực.
Ưu điểm:
- Cung cấp bảng điều khiển chi tiết về hiệu suất ứng dụng.
- Hỗ trợ tích hợp với các công cụ khác của Firebase như Remote Config hoặc A/B Testing.

61. Tích hợp Drag-and-Drop UI Components

Câu hỏi: Làm thế nào để triển khai Drag-and-Drop UI mượt mà trong React Native?

Sử dụng React Native Gesture Handler:

npm install react-native-gesture-handler react-native-reanimated

Ví dụ: Drag-and-Drop:

import React from 'react'; import { StyleSheet } from 'react-native'; import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated'; import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler'; export default function App() { const translateX = useSharedValue(0); const translateY = useSharedValue(0); const gestureHandler = useAnimatedGestureHandler({ onStart: (_, ctx) => { ctx.startX = translateX.value; ctx.startY = translateY.value; }, onActive: (event, ctx) => { translateX.value = ctx.startX + event.translationX; translateY.value = ctx.startY + event.translationY; }, }); const animatedStyle = useAnimatedStyle(() => ({ transform: [ { translateX: translateX.value }, { translateY: translateY.value }, ], })); return ( <GestureHandlerRootView style={styles.container}> <PanGestureHandler onGestureEvent={gestureHandler}> <Animated.View style={[styles.box, animatedStyle]} /> </PanGestureHandler> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 100, height: 100, backgroundColor: 'blue', }, });

Giải thích:

Drag-and-Drop:
- Tạo trải nghiệm tương tác cao cấp cho người dùng.
Tối ưu hóa:
- Sử dụng useSharedValue để xử lý trên UI thread và tránh lag.

62. Xử lý Video Processing trong React Native

Câu hỏi: Làm thế nào để xử lý và chỉnh sửa video trong ứng dụng React Native?

Sử dụng `react-native-video-processing`

Cài đặt thư viện:

npm install react-native-video-processing npx pod-install

Chỉnh sửa video:

import React from 'react'; import { View, Button } from 'react-native'; import VideoProcessing from 'react-native-video-processing'; export default function App() { const handleTrimVideo = async () => { const options = { startTime: 0, endTime: 10, // Cắt video từ giây 0 đến giây 10 quality: VideoProcessing.Constants.quality.QUALITY_1280x720, saveToCameraRoll: true, // Lưu video đã chỉnh sửa }; try { const trimmedVideo = await VideoProcessing.trim('path_to_video', options); console.log('Trimmed Video Path:', trimmedVideo); } catch (error) { console.error('Error trimming video:', error); } }; return ( <View> <Button title="Trim Video" onPress={handleTrimVideo} /> </View> ); }

Giải thích:

Video Processing:
- Cung cấp các chức năng như cắt, nén, và chỉnh sửa video.
Ứng dụng:
- Tạo ứng dụng chỉnh sửa video hoặc giảm dung lượng file trước khi tải lên server.

63. Triển khai A/B Testing với Firebase Remote Config

Câu hỏi: Làm thế nào để triển khai A/B Testing bằng Firebase Remote Config trong React Native?

Cài đặt Firebase Remote Config:

npm install @react-native-firebase/remote-config npx pod-install

Sử dụng Firebase Remote Config:

import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import remoteConfig from '@react-native-firebase/remote-config'; export default function App() { const [welcomeMessage, setWelcomeMessage] = useState('Loading...'); useEffect(() => { const fetchRemoteConfig = async () => { await remoteConfig().setDefaults({ welcome_message: 'Default Welcome Message', }); await remoteConfig().fetchAndActivate(); const message = remoteConfig().getValue('welcome_message').asString(); setWelcomeMessage(message); }; fetchRemoteConfig(); }, []); return ( <View style={styles.container}> <Text style={styles.text}>{welcomeMessage}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, }, });

Giải thích:

Firebase Remote Config:
- Cho phép thay đổi nội dung ứng dụng mà không cần phát hành bản cập nhật.
A/B Testing:
- Kết hợp Remote Config với Firebase A/B Testing để kiểm tra phiên bản UI/UX khác nhau.

64. Tối ưu hóa tốc độ tải ứng dụng với Hermes Bytecode Precompilation

Câu hỏi: Làm thế nào để sử dụng Hermes Bytecode để tăng tốc độ tải ứng dụng?

Bật Hermes Bytecode:

Mở android/app/build.gradle và thêm cấu hình:

project.ext.react = [ enableHermes: true, // Bật Hermes hermesCommand: "./gradlew :app:bundleReleaseJsAndAssets --variant release --useBytecode" ]

Tạo Bytecode Bundle:

cd android && ./gradlew :app:bundleReleaseJsAndAssets --variant release --useBytecode

Lợi ích:

Hermes Bytecode:
- Thay thế JavaScript bằng Bytecode, giảm thời gian phân tích cú pháp khi khởi động.
Tối ưu hóa thêm:
- Kết hợp Bytecode Precompilation với Proguard để giảm kích thước ứng dụng.

65. Xử lý Animation phức tạp với Lottie và Reanimated

Câu hỏi: Làm thế nào để tích hợp Lottie Animation với Reanimated cho hiệu ứng phức tạp?

Cài đặt Lottie:

npm install lottie-react-native npx pod-install

Sử dụng Lottie với Reanimated:

import React from 'react'; import { StyleSheet, View } from 'react-native'; import LottieView from 'lottie-react-native'; import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, } from 'react-native-reanimated'; export default function App() { const progress = useSharedValue(0); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ rotateZ: `${progress.value * 360}deg` }], })); React.useEffect(() => { progress.value = withRepeat(withTiming(1, { duration: 2000 }), -1, true); }, []); return ( <View style={styles.container}> <Animated.View style={[styles.lottieWrapper, animatedStyle]}> <LottieView source={require('./animation.json')} autoPlay loop style={styles.lottie} /> </Animated.View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, lottieWrapper: { width: 200, height: 200, }, lottie: { width: '100%', height: '100%', }, });

Giải thích:

Kết hợp Lottie và Reanimated:
- Tận dụng sức mạnh của Reanimated để tạo hiệu ứng mượt mà hơn.
Tối ưu hóa:
- Giảm kích thước file JSON của Lottie nếu cần tải nhanh hơn.

66. Xử lý đồng bộ dữ liệu phức tạp với WatermelonDB

Câu hỏi: Làm thế nào để quản lý cơ sở dữ liệu cục bộ với khả năng đồng bộ hóa tốt trong React Native?

Cài đặt WatermelonDB:

npm install @nozbe/watermelondb npx pod-install

Cấu hình Database:

import { Database } from '@nozbe/watermelondb'; import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite'; import schema from './schema'; import Post from './models/Post'; const adapter = new SQLiteAdapter({ schema, }); export const database = new Database({ adapter, modelClasses: [Post], });

Đồng bộ hóa dữ liệu:

import { synchronize } from '@nozbe/watermelondb/sync'; const syncData = async () => { await synchronize({ database, pullChanges: async ({ lastPulledAt }) => { const response = await fetch(`https://example.com/sync?since=${lastPulledAt}`); const { changes, timestamp } = await response.json(); return { changes, timestamp }; }, pushChanges: async ({ changes }) => { await fetch('https://example.com/sync', { method: 'POST', body: JSON.stringify(changes), }); }, }); };

Giải thích:

WatermelonDB:
- Tối ưu cho ứng dụng xử lý lượng dữ liệu lớn và cần đồng bộ hóa.
Ưu điểm:
- Hiệu năng cao với SQLite backend.
- Đồng bộ hai chiều (server ↔ client) mạnh mẽ.

67. Triển khai React Native Detox để kiểm thử tự động (E2E Testing)

Câu hỏi: Làm thế nào để tích hợp và sử dụng Detox cho kiểm thử tự động trên React Native?

Cài đặt Detox:

Cài đặt Detox CLI và các phụ thuộc:

npm install -g detox-cli npm install detox --save-dev

Cấu hình Detox:
- Tạo tệp detox.config.js:

module.exports = { testRunner: 'jest', runnerConfig: 'e2e/config.json', configurations: { android: { type: 'android.emulator', binaryPath: 'android/app/build/outputs/apk/release/app-release.apk', build: 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..', device: { avdName: 'Pixel_3_API_29', }, }, ios: { type: 'ios.simulator', binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/MyApp.app', build: 'xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Release -sdk iphonesimulator -derivedDataPath ios/build', device: { type: 'iPhone 11', }, }, }, };

Tạo kịch bản kiểm thử:
- Tạo thư mục e2e và tệp kiểm thử ví dụ e2e/firstTest.spec.js:

describe('Example Test', () => { beforeAll(async () => { await device.launchApp(); }); it('should display welcome message', async () => { await expect(element(by.id('welcome'))).toBeVisible(); }); it('should navigate to details screen', async () => { await element(by.id('navigate_button')).tap(); await expect(element(by.id('details_screen'))).toBeVisible(); }); });

Chạy kiểm thử:

detox test --configuration android detox test --configuration ios

Giải thích:

Detox:
- Công cụ kiểm thử E2E mạnh mẽ dành riêng cho React Native.
Ưu điểm:
- Tự động hóa kiểm thử giao diện người dùng trên các thiết bị thực hoặc giả lập.
- Hỗ trợ kiểm tra cả Android và iOS.

68. Tích hợp và quản lý môi trường đa cấp (Staging/Production)

Câu hỏi: Làm thế nào để quản lý nhiều môi trường (staging, production) trong React Native?

Sử dụng tệp `.env`:

Cài đặt thư viện:

npm install react-native-config

Tạo các tệp cấu hình:
- Tạo các tệp .env.staging và .env.production:

# .env.staging API_URL=https://staging.example.com/api APP_ENV=staging # .env.production API_URL=https://example.com/api APP_ENV=production

Sử dụng trong mã nguồn:

import Config from 'react-native-config'; console.log('API URL:', Config.API_URL); fetch(`${Config.API_URL}/users`) .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error));

Chạy ứng dụng với môi trường tương ứng:

ENVFILE=.env.staging react-native run-android ENVFILE=.env.production react-native run-ios

Giải thích:

react-native-config:
- Cho phép quản lý biến môi trường một cách dễ dàng.
Ưu điểm:
- Duy trì cấu hình riêng biệt cho staging và production mà không thay đổi mã nguồn.

69. Quản lý lỗi runtime với Sentry

Câu hỏi: Làm thế nào để theo dõi lỗi runtime trong ứng dụng React Native?

Cài đặt và cấu hình Sentry:

Cài đặt thư viện:

npm install @sentry/react-native npx sentry-wizard -i reactNative -p ios android

Tích hợp Sentry vào ứng dụng:

import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'https://your-dsn@o0.ingest.sentry.io/0', enableNative: true, // Kích hoạt theo dõi lỗi native }); try { throw new Error('This is a test error'); } catch (error) { Sentry.captureException(error); }

Xem lỗi trong Sentry Dashboard:
- Truy cập Sentry Dashboard để theo dõi lỗi chi tiết.

Giải thích:

Sentry:
- Công cụ theo dõi lỗi mạnh mẽ, hỗ trợ cả lỗi JavaScript và native.
Ưu điểm:
- Cung cấp thông tin chi tiết về lỗi, bao gồm stack trace, trạng thái ứng dụng.

70. Tích hợp Analytics với Mixpanel hoặc Amplitude

Câu hỏi: Làm thế nào để theo dõi hành vi người dùng với Mixpanel hoặc Amplitude?

Cài đặt Mixpanel:

Cài đặt thư viện:

npm install react-native-mixpanel

Tích hợp Mixpanel:

import Mixpanel from 'react-native-mixpanel'; Mixpanel.sharedInstanceWithToken('your-mixpanel-token'); Mixpanel.track('App Launched'); Mixpanel.identify('user-123'); Mixpanel.people.set({ $first_name: 'John', $last_name: 'Doe', $email: 'john.doe@example.com', });

Cài đặt Amplitude:

Cài đặt thư viện:

npm install @amplitude/react-native

Tích hợp Amplitude:

import { Amplitude } from '@amplitude/react-native'; const amplitude = Amplitude.getInstance(); amplitude.init('your-api-key'); amplitude.logEvent('App Opened'); amplitude.setUserId('user-123'); amplitude.setUserProperties({ firstName: 'Jane', lastName: 'Doe', });

Giải thích:

Mixpanel và Amplitude:
- Cung cấp khả năng theo dõi hành vi người dùng và phân tích dữ liệu ứng dụng.
Ưu điểm:
- Hỗ trợ phân đoạn người dùng, A/B Testing, và phân tích funnel.

71. Tích hợp Cloud Storage với AWS S3

Câu hỏi: Làm thế nào để tải lên và quản lý tệp trong AWS S3 từ React Native?

Cài đặt AWS SDK:

npm install aws-sdk

Tích hợp AWS S3:

import S3 from 'aws-sdk/clients/s3'; const s3 = new S3({ accessKeyId: 'your-access-key', secretAccessKey: 'your-secret-key', region: 'your-region', }); const uploadFile = async (filePath) => { const fileName = filePath.split('/').pop(); const params = { Bucket: 'your-bucket-name', Key: fileName, Body: filePath, }; try { const data = await s3.upload(params).promise(); console.log('File uploaded successfully:', data.Location); } catch (error) { console.error('Error uploading file:', error); } }; uploadFile('/path/to/your/file');

Giải thích:

AWS S3:
- Lưu trữ và quản lý tệp dễ dàng, hỗ trợ truy cập từ React Native.
Tối ưu hóa:
- Sử dụng Presigned URL để giảm tải trên client-side và tăng bảo mật.

72. Tích hợp WebRTC để thực hiện cuộc gọi video/audio

Câu hỏi: Làm thế nào để tích hợp WebRTC vào React Native để thực hiện cuộc gọi video hoặc âm thanh?

Cài đặt WebRTC:

npm install react-native-webrtc

Sử dụng WebRTC:

import React, { useState, useEffect } from 'react'; import { View, Button, StyleSheet } from 'react-native'; import { RTCPeerConnection, mediaDevices, RTCView } from 'react-native-webrtc'; export default function App() { const [localStream, setLocalStream] = useState(null); useEffect(() => { const getLocalStream = async () => { const stream = await mediaDevices.getUserMedia({ audio: true, video: true, }); setLocalStream(stream); }; getLocalStream(); }, []); return ( <View style={styles.container}> {localStream && ( <RTCView streamURL={localStream.toURL()} style={styles.video} /> )} <Button title="Start Call" onPress={() => console.log('Call started')} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, video: { width: 300, height: 400, }, });

Giải thích:

WebRTC:
- Cung cấp giao tiếp thời gian thực qua âm thanh, video, và dữ liệu.
Tối ưu hóa:
- Sử dụng ICE Servers (STUN/TURN) để đảm bảo kết nối ổn định.
- Tối ưu hóa băng thông bằng cách điều chỉnh bitrate và codec.

73. Xử lý Upload và Download tệp lớn bằng Background Tasks

Câu hỏi: Làm thế nào để tải lên và tải xuống các tệp lớn mà không ảnh hưởng đến UI chính?

Sử dụng `react-native-background-upload`:

npm install react-native-background-upload

Ví dụ tải tệp lên trong background:

import Upload from 'react-native-background-upload'; const uploadFile = async (filePath) => { const options = { url: 'https://example.com/upload', path: filePath, method: 'POST', field: 'file', type: 'multipart', headers: { Authorization: 'Bearer token', }, }; Upload.startUpload(options) .then((uploadId) => { console.log('Upload started with ID:', uploadId); Upload.addListener('progress', uploadId, (data) => { console.log(`Progress: ${data.progress}%`); }); Upload.addListener('completed', uploadId, () => { console.log('Upload completed!'); }); }) .catch((error) => { console.error('Upload error:', error); }); }; uploadFile('/path/to/your/file');

Giải thích:

Background Upload:
- Thực hiện tải tệp lên hoặc xuống mà không làm gián đoạn UI.
Tối ưu hóa:
- Sử dụng multipart uploads cho các tệp lớn để cải thiện độ tin cậy.

74. Tích hợp AI Image Processing với TensorFlow.js

Câu hỏi: Làm thế nào để xử lý ảnh với AI trong React Native?

Cài đặt TensorFlow.js:

npm install @tensorflow/tfjs @tensorflow/tfjs-react-native

Ví dụ: Phân loại ảnh:

import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, Button } from 'react-native'; import * as tf from '@tensorflow/tfjs'; import { bundleResourceIO } from '@tensorflow/tfjs-react-native'; export default function App() { const [result, setResult] = useState(''); useEffect(() => { const loadModel = async () => { await tf.ready(); const modelJson = require('./model/model.json'); const modelWeights = require('./model/weights.bin'); const model = await tf.loadLayersModel(bundleResourceIO(modelJson, modelWeights)); const inputTensor = tf.tensor2d([0, 1, 2, 3, 4], [1, 5]); // Ví dụ đầu vào const prediction = model.predict(inputTensor); setResult(prediction.toString()); }; loadModel(); }, []); return ( <View style={styles.container}> <Text style={styles.text}>Prediction: {result}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, }, });

Giải thích:

TensorFlow.js:
- Cho phép chạy mô hình AI trên thiết bị cục bộ.
Ứng dụng thực tế:
- Nhận diện khuôn mặt, phân loại ảnh, OCR.

75. Triển khai Geofencing với React Native

Câu hỏi: Làm thế nào để kích hoạt sự kiện khi người dùng vào hoặc ra khỏi một khu vực địa lý cụ thể?

Cài đặt Geofencing:

npm install react-native-geofencing

Sử dụng Geofencing:

import React, { useEffect } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import Geofence from 'react-native-geofencing'; export default function App() { const geofenceRegions = [ { id: '1', latitude: 37.78825, longitude: -122.4324, radius: 500, // Bán kính 500m }, ]; useEffect(() => { Geofence.addGeofences(geofenceRegions) .then(() => console.log('Geofences added')) .catch((error) => console.error('Error adding geofences:', error)); Geofence.onEnter((region) => { console.log('Entered region:', region); }); Geofence.onExit((region) => { console.log('Exited region:', region); }); return () => { Geofence.removeAllGeofences(); }; }, []); return ( <View style={styles.container}> <Text style={styles.text}>Geofencing Example</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, }, });

Giải thích:

Geofencing:
- Kích hoạt sự kiện khi người dùng vào hoặc ra khỏi một khu vực cụ thể.
Ứng dụng thực tế:
- Gửi thông báo khuyến mãi khi người dùng đến gần cửa hàng.

76. Tối ưu hóa hiệu năng bằng Offscreen Rendering

Câu hỏi: Làm thế nào để tối ưu hóa UI với Offscreen Rendering trong React Native?

Sử dụng Offscreen Rendering:

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default function OffscreenRenderingExample() { return ( <View style={styles.container}> <Text style={styles.text}>Visible Component</Text> <View style={[styles.box, { display: 'none' }]}> <Text>Offscreen Rendered Content</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 24, }, box: { width: 100, height: 100, backgroundColor: 'red', }, });

Giải thích:

Offscreen Rendering:
- Tránh render các thành phần không hiển thị, giúp cải thiện hiệu năng.
Tối ưu hóa thêm:
- Sử dụng removeClippedSubviews trong danh sách lớn.

77. Triển khai Push Notifications nâng cao với OneSignal

Câu hỏi: Làm thế nào để tích hợp và sử dụng OneSignal để gửi thông báo đẩy nâng cao trong React Native?

Cài đặt OneSignal:

Cài đặt thư viện:

npm install react-native-onesignal npx pod-install

Cấu hình OneSignal:

import React, { useEffect } from 'react'; import OneSignal from 'react-native-onesignal'; export default function App() { useEffect(() => { // Khởi tạo OneSignal OneSignal.setAppId('YOUR-ONESIGNAL-APP-ID'); // Lắng nghe sự kiện nhận thông báo OneSignal.setNotificationWillShowInForegroundHandler((notificationReceivedEvent) => { const notification = notificationReceivedEvent.getNotification(); console.log('Notification Received:', notification); notificationReceivedEvent.complete(notification); // Hiển thị thông báo }); OneSignal.setNotificationOpenedHandler((openedEvent) => { console.log('Notification Opened:', openedEvent); }); }, []); return null; }

Giải thích:

OneSignal:
- Hỗ trợ gửi thông báo cá nhân hóa dựa trên phân đoạn người dùng.
Ưu điểm:
- Giao diện quản lý mạnh mẽ với tính năng gửi lịch trình và A/B testing.

78. Tích hợp Dynamic Links với Firebase

Câu hỏi: Làm thế nào để sử dụng Firebase Dynamic Links để chia sẻ nội dung với các URL động?

Cài đặt Firebase Dynamic Links:

npm install @react-native-firebase/dynamic-links npx pod-install

Tạo Dynamic Links:

import React, { useEffect } from 'react'; import dynamicLinks from '@react-native-firebase/dynamic-links'; export default function App() { useEffect(() => { // Lắng nghe Dynamic Link const unsubscribe = dynamicLinks().onLink(handleDynamicLink); return () => unsubscribe(); }, []); const handleDynamicLink = (link) => { console.log('Dynamic Link:', link.url); // Xử lý điều hướng hoặc hành động tương ứng }; return null; }

Tạo URL động:

import dynamicLinks from '@react-native-firebase/dynamic-links'; const createDynamicLink = async () => { const link = await dynamicLinks().buildShortLink( { link: 'https://example.com/product/12345', domainUriPrefix: 'https://yourapp.page.link', android: { packageName: 'com.yourapp', }, ios: { bundleId: 'com.yourapp', }, }, 'SHORT' ); console.log('Generated Link:', link); };

Giải thích:

Dynamic Links:
- Liên kết thông minh giúp điều hướng người dùng đến nội dung cụ thể trong ứng dụng, kể cả khi ứng dụng chưa được cài đặt.
Ứng dụng thực tế:
- Chia sẻ sản phẩm, khuyến mãi, hoặc nội dung tùy chỉnh.

79. Tích hợp Deep Linking với React Navigation

Câu hỏi: Làm thế nào để cấu hình Deep Linking với React Navigation?

Cấu hình Deep Linking:

Cấu hình trong App.js:

import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { View, Text } from 'react-native'; const Stack = createStackNavigator(); const HomeScreen = () => ( <View> <Text>Home Screen</Text> </View> ); const ProductScreen = ({ route }) => ( <View> <Text>Product ID: {route.params?.id}</Text> </View> ); const linking = { prefixes: ['myapp://', 'https://myapp.com'], config: { screens: { Home: '', Product: 'product/:id', }, }, }; export default function App() { return ( <NavigationContainer linking={linking}> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Product" component={ProductScreen} /> </Stack.Navigator> </NavigationContainer> ); }

Giải thích:

Deep Linking:
- Kết nối giữa các liên kết bên ngoài (như email, website) với nội dung trong ứng dụng.
Tích hợp với React Navigation:
- Dễ dàng cấu hình và mở rộng cho các màn hình phức tạp.

80. Tích hợp CI/CD với GitHub Actions

Câu hỏi: Làm thế nào để tự động hóa quá trình build và deploy React Native với GitHub Actions?

Cấu hình GitHub Actions:

Tạo tệp .github/workflows/build.yml:

name: Build React Native App on: push: branches: - main jobs: build: name: Build Android and iOS runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '16' - name: Install Dependencies run: npm install - name: Build Android run: cd android && ./gradlew assembleRelease - name: Build iOS run: | cd ios xcodebuild -workspace YourApp.xcworkspace \ -scheme YourApp \ -sdk iphoneos \ -configuration Release \ -archivePath $PWD/build/YourApp.xcarchive archive

Tích hợp với Fastlane:

Thêm lệnh deploy vào Fastlane:

Tệp Fastfile:

lane :deploy_android do gradle(task: "assembleRelease") upload_to_play_store(track: "production", skip_upload_apk: false) end

Cập nhật Workflow để chạy deploy:

- name: Deploy Android to Play Store run: bundle exec fastlane deploy_android

Giải thích:

GitHub Actions:
- Tự động hóa quy trình build và deploy.
Fastlane:
- Hỗ trợ các công cụ phát hành mạnh mẽ cho cả Android và iOS.

81. Quản lý phiên người dùng với Secure Storage

Câu hỏi: Làm thế nào để lưu trữ thông tin phiên một cách an toàn trong React Native?

Cài đặt Secure Storage:

npm install react-native-keychain

Lưu và lấy thông tin:

import * as Keychain from 'react-native-keychain'; const saveSession = async (token) => { await Keychain.setGenericPassword('session', token); }; const getSession = async () => { const credentials = await Keychain.getGenericPassword(); if (credentials) { console.log('Session Token:', credentials.password); } else { console.log('No session found'); } };

Giải thích:

Secure Storage:
- Lưu trữ thông tin nhạy cảm như token hoặc khóa mã hóa.
Ưu điểm:
- Sử dụng Keychain (iOS) và Keystore (Android) để bảo mật tối đa.

82. Tích hợp Push Notifications với APNs (iOS)

Câu hỏi: Làm thế nào để tích hợp Apple Push Notification Service (APNs) vào ứng dụng React Native?

Cấu hình APNs:

Đăng ký App ID và Push Notifications trên Apple Developer:
- Tạo App ID trong Apple Developer.
- Kích hoạt Push Notifications trong App ID.
Tạo và tải tệp .p8 từ Apple Developer:
- Tải tệp .p8 chứa khóa API APNs.
Cài đặt Firebase Cloud Messaging (FCM):
- Firebase cung cấp wrapper để tương thích giữa APNs và FCM.

npm install @react-native-firebase/app @react-native-firebase/messaging npx pod-install

Cấu hình AppDelegate.m:

#import <Firebase.h> #import "AppDelegate.h" @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { if ([FIRApp defaultApp] == nil) { [FIRApp configure]; } return YES; } @end

Xử lý thông báo trong React Native:

import messaging from '@react-native-firebase/messaging'; async function requestUserPermission() { const authStatus = await messaging().requestPermission(); const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL; if (enabled) { console.log('Authorization status:', authStatus); } } messaging().onMessage(async (remoteMessage) => { console.log('Notification in foreground:', remoteMessage); });

Giải thích:

APNs:
- Dịch vụ thông báo đẩy dành riêng cho iOS.
Tích hợp FCM:
- Giúp quản lý thông báo dễ dàng hơn khi cần hỗ trợ đa nền tảng.

83. Triển khai Animation phức tạp với `react-native-reanimated`

Câu hỏi: Làm thế nào để sử dụng react-native-reanimated để tạo các hiệu ứng phức tạp?

Cài đặt Reanimated:

npm install react-native-reanimated

Ví dụ: Circular Progress Animation

import React from 'react'; import { View, StyleSheet } from 'react-native'; import Animated, { useSharedValue, useAnimatedProps, withTiming } from 'react-native-reanimated'; import Svg, { Circle } from 'react-native-svg'; const CircularProgress = ({ progress }) => { const animatedValue = useSharedValue(0); React.useEffect(() => { animatedValue.value = withTiming(progress, { duration: 1000 }); }, [progress]); const animatedProps = useAnimatedProps(() => ({ strokeDashoffset: 100 - animatedValue.value, })); return ( <Svg width={100} height={100}> <Circle cx="50" cy="50" r="40" stroke="blue" strokeWidth="10" fill="none" strokeDasharray="100" animatedProps={animatedProps} /> </Svg> ); }; export default function App() { return ( <View style={styles.container}> <CircularProgress progress={75} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Giải thích:

Reanimated:
- Cung cấp API animation mạnh mẽ, chạy trực tiếp trên UI thread.
Circular Progress:
- Sử dụng kết hợp react-native-svg và reanimated để tạo hiệu ứng mượt mà.

84. Tích hợp Real-Time Chat với WebSocket

Câu hỏi: Làm thế nào để xây dựng tính năng chat real-time trong React Native?

Sử dụng WebSocket:

import React, { useEffect, useState } from 'react'; import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native'; export default function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); let ws; useEffect(() => { ws = new WebSocket('wss://example.com/chat'); ws.onmessage = (event) => { setMessages((prev) => [...prev, JSON.parse(event.data)]); }; return () => ws.close(); // Đóng kết nối khi component unmount }, []); const sendMessage = () => { const message = { text: input, timestamp: new Date() }; ws.send(JSON.stringify(message)); setMessages((prev) => [...prev, message]); setInput(''); }; return ( <View style={styles.container}> <FlatList data={messages} renderItem={({ item }) => ( <Text style={styles.message}> {item.text} - {new Date(item.timestamp).toLocaleTimeString()} </Text> )} keyExtractor={(_, index) => index.toString()} /> <TextInput style={styles.input} placeholder="Type a message" value={input} onChangeText={setInput} /> <Button title="Send" onPress={sendMessage} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 10, }, message: { marginVertical: 5, padding: 10, backgroundColor: '#e4e4e4', borderRadius: 5, }, input: { borderWidth: 1, borderColor: '#ccc', marginVertical: 10, padding: 10, }, });

Giải thích:

WebSocket:
- Giao tiếp hai chiều hiệu quả, thích hợp cho ứng dụng real-time.
Ứng dụng thực tế:
- Hỗ trợ chat, thông báo, hoặc đồng bộ hóa dữ liệu.

85. Tích hợp Payments với Stripe

Câu hỏi: Làm thế nào để xử lý thanh toán qua Stripe trong React Native?

Cài đặt Stripe SDK:

npm install @stripe/stripe-react-native npx pod-install

Tích hợp Stripe:

import React, { useEffect } from 'react'; import { View, Button, Alert, StyleSheet } from 'react-native'; import { StripeProvider, useStripe } from '@stripe/stripe-react-native'; export default function App() { return ( <StripeProvider publishableKey="your-publishable-key"> <PaymentScreen /> </StripeProvider> ); } const PaymentScreen = () => { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const initializePayment = async () => { const response = await fetch('https://example.com/payment-intent', { method: 'POST', }); const { clientSecret } = await response.json(); const result = await initPaymentSheet({ paymentIntentClientSecret: clientSecret, }); if (result.error) { Alert.alert('Error', result.error.message); } }; const openPaymentSheet = async () => { const { error } = await presentPaymentSheet(); if (error) { Alert.alert('Error', error.message); } else { Alert.alert('Success', 'Payment completed'); } }; useEffect(() => { initializePayment(); }, []); return ( <View style={styles.container}> <Button title="Make Payment" onPress={openPaymentSheet} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Giải thích:

Stripe SDK:
- Cung cấp phương thức thanh toán bảo mật và đơn giản.
Tích hợp thực tế:
- Hỗ trợ thẻ tín dụng, Google Pay, Apple Pay.

86. Triển khai Auth bằng Social Login (Google, Facebook)

Câu hỏi: Làm thế nào để tích hợp đăng nhập qua tài khoản Google hoặc Facebook trong React Native?

Google Login với `@react-native-google-signin/google-signin`:

Cài đặt thư viện:

npm install @react-native-google-signin/google-signin npx pod-install

Cấu hình Google Sign-In:

import React, { useEffect } from 'react'; import { View, Button, Alert } from 'react-native'; import { GoogleSignin } from '@react-native-google-signin/google-signin'; GoogleSignin.configure({ webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', }); export default function App() { const signIn = async () => { try { await GoogleSignin.hasPlayServices(); const userInfo = await GoogleSignin.signIn(); console.log('User Info:', userInfo); } catch (error) { console.error(error); } }; return ( <View> <Button title="Sign in with Google" onPress={signIn} /> </View> ); }

Facebook Login với `react-native-fbsdk-next`:

Cài đặt thư viện:

npm install react-native-fbsdk-next npx pod-install

Sử dụng Facebook Login:

import React from 'react'; import { View, Button } from 'react-native'; import { LoginManager, AccessToken } from 'react-native-fbsdk-next'; export default function App() { const loginWithFacebook = async () => { try { const result = await LoginManager.logInWithPermissions(['public_profile', 'email']); if (result.isCancelled) { console.log('Login cancelled'); } else { const data = await AccessToken.getCurrentAccessToken(); console.log('Access Token:', data.accessToken.toString()); } } catch (error) { console.error(error); } }; return ( <View> <Button title="Login with Facebook" onPress={loginWithFacebook} /> </View> ); }

Giải thích:

Social Login:
- Đăng nhập nhanh chóng và tiện lợi với các tài khoản phổ biến.
Ưu điểm:
- Giảm thời gian tạo tài khoản mới.
- Tăng tỷ lệ chuyển đổi người dùng.

87. Tích hợp In-App Purchases với React Native

Câu hỏi: Làm thế nào để triển khai thanh toán trong ứng dụng qua Google Play hoặc App Store?

Cài đặt React Native In-App Purchases:

npm install react-native-iap

Sử dụng React Native IAP:

import React, { useEffect } from 'react'; import { View, Button, Alert } from 'react-native'; import * as RNIap from 'react-native-iap'; const itemSkus = ['com.example.product1', 'com.example.product2']; export default function App() { useEffect(() => { RNIap.initConnection() .then(() => { console.log('IAP Connected'); }) .catch((error) => { console.error('IAP Connection Error:', error); }); return () => RNIap.endConnection(); }, []); const purchaseItem = async (sku) => { try { const purchase = await RNIap.requestPurchase(sku); console.log('Purchase Success:', purchase); } catch (error) { console.error('Purchase Error:', error); } }; return ( <View> {itemSkus.map((sku) => ( <Button key={sku} title={`Buy ${sku}`} onPress={() => purchaseItem(sku)} /> ))} </View> ); }

Giải thích:

In-App Purchases:
- Tính năng quan trọng cho các ứng dụng freemium hoặc bán nội dung số.
Ưu điểm:
- Tích hợp chặt chẽ với Google Play và App Store.

88. Quản lý dữ liệu lớn với Realm Database

Câu hỏi: Làm thế nào để sử dụng Realm để quản lý cơ sở dữ liệu phức tạp?

Cài đặt Realm:

npm install realm

Sử dụng Realm:

import React, { useEffect } from 'react'; import { View, Text } from 'react-native'; import Realm from 'realm'; const CarSchema = { name: 'Car', properties: { make: 'string', model: 'string', year: 'int', }, }; export default function App() { useEffect(() => { const realm = new Realm({ schema: [CarSchema] }); realm.write(() => { realm.create('Car', { make: 'Toyota', model: 'Camry', year: 2021 }); }); const cars = realm.objects('Car'); console.log('Cars:', cars); realm.close(); }, []); return ( <View> <Text>Realm Database Example</Text> </View> ); }

Giải thích:

Realm:
- Cơ sở dữ liệu di động hiệu suất cao, hoạt động offline.
Ứng dụng thực tế:
- Lưu trữ dữ liệu cục bộ như danh bạ, nhật ký, hoặc bộ sưu tập.

89. Triển khai Dark Mode tự động

Câu hỏi: Làm thế nào để hỗ trợ Dark Mode dựa trên cài đặt hệ thống?

Cài đặt React Native Appearance:

npm install react-native-appearance

Sử dụng Dark Mode:

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { useColorScheme } from 'react-native'; export default function App() { const colorScheme = useColorScheme(); return ( <View style={[ styles.container, { backgroundColor: colorScheme === 'dark' ? '#000' : '#fff' }, ]} > <Text style={{ color: colorScheme === 'dark' ? '#fff' : '#000', }} > Current Mode: {colorScheme} </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

Giải thích:

Dark Mode:
- Cải thiện trải nghiệm người dùng, đặc biệt vào ban đêm.
Ưu điểm:
- Tự động thay đổi giao diện theo hệ thống.

90. Tích hợp Video Streaming với AWS IVS

Câu hỏi: Làm thế nào để sử dụng AWS Interactive Video Service (IVS) cho phát trực tiếp video?

Sử dụng AWS IVS Player:

Cài đặt AWS IVS Player:

npm install react-native-video

Phát Video Streaming:

import React from 'react'; import { View, StyleSheet } from 'react-native'; import Video from 'react-native-video'; export default function App() { return ( <View style={styles.container}> <Video source={{ uri: 'https://example.com/your-video-stream.m3u8' }} style={styles.video} controls resizeMode="contain" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, video: { width: '100%', height: 300, }, });

Giải thích:

AWS IVS:
- Dịch vụ phát trực tiếp với độ trễ thấp của AWS.
Ứng dụng thực tế:
- Tạo ứng dụng livestream hoặc hội thảo trực tuyến.

91. Tích hợp Augmented Reality (AR) với React Native

Câu hỏi: Làm thế nào để tích hợp Augmented Reality (AR) trong ứng dụng React Native?

Cài đặt AR với ViroReact:

Cài đặt ViroReact:

npm install react-viro

Cấu hình AR Scene:

import React from 'react'; import { ViroARScene, ViroText, ViroARSceneNavigator } from 'react-viro'; const ARScene = () => { return ( <ViroARScene> <ViroText text="Hello AR!" position={[0, 0, -1]} style={{ fontSize: 20, color: 'blue' }} /> </ViroARScene> ); }; export default function App() { return <ViroARSceneNavigator initialScene={{ scene: ARScene }} />; }

Giải thích:

ViroReact:
- Framework mạnh mẽ để phát triển AR và VR cho React Native.
Ứng dụng thực tế:
- AR cho thương mại điện tử, giáo dục, và giải trí.

92. Tích hợp Chatbot với Dialogflow

Câu hỏi: Làm thế nào để tích hợp chatbot Dialogflow vào React Native?

Cài đặt Dialogflow Client:

npm install react-native-dialogflow

Sử dụng Dialogflow:

import React, { useState } from 'react'; import { View, TextInput, Button, Text, StyleSheet } from 'react-native'; import { Dialogflow_V2 } from 'react-native-dialogflow'; Dialogflow_V2.setConfiguration( 'YOUR_CLIENT_EMAIL', 'YOUR_PRIVATE_KEY', Dialogflow_V2.LANG_ENGLISH, 'YOUR_PROJECT_ID' ); export default function App() { const [query, setQuery] = useState(''); const [response, setResponse] = useState(''); const sendQuery = () => { Dialogflow_V2.requestQuery( query, (result) => setResponse(result.queryResult.fulfillmentText), (error) => console.error(error) ); setQuery(''); }; return ( <View style={styles.container}> <TextInput style={styles.input} value={query} onChangeText={setQuery} placeholder="Type your query" /> <Button title="Send" onPress={sendQuery} /> <Text style={styles.response}>{response}</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, input: { borderWidth: 1, borderColor: '#ccc', marginBottom: 10, padding: 10, }, response: { marginTop: 20, fontSize: 16, }, });

Giải thích:

Dialogflow:
- API xử lý ngôn ngữ tự nhiên để tạo chatbot.
Ưu điểm:
- Hỗ trợ đa ngôn ngữ và tích hợp AI nâng cao.

93. Tích hợp Machine Learning với Core ML (iOS)

Câu hỏi: Làm thế nào để sử dụng Core ML để chạy mô hình Machine Learning trong React Native?

Tạo Native Module Core ML:

Tạo Native Module iOS:

RCTCoreMLModule.h:

#import <React/RCTBridgeModule.h> @interface RCTCoreMLModule : NSObject <RCTBridgeModule> @end

RCTCoreMLModule.m:

#import "RCTCoreMLModule.h" #import <CoreML/CoreML.h> @implementation RCTCoreMLModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(predict:(NSString *)input resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { @try { // Load model and perform prediction MLModel *model = [MLModel modelWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ModelName" withExtension:@"mlmodelc"] error:nil]; NSDictionary *inputDict = @{@"input": input}; MLModelPredictionOptions *options = [[MLModelPredictionOptions alloc] init]; MLFeatureValue *output = [model predictionFromFeatures:[MLDictionaryFeatureProvider dictionaryFeatureProviderWithDictionary:inputDict] options:options error:nil]; resolve(output); } @catch (NSException *exception) { reject(@"error", @"Prediction failed", nil); } } @end

Sử dụng Native Module trong React Native:

import { NativeModules } from 'react-native'; const { CoreMLModule } = NativeModules; CoreMLModule.predict('sample input') .then((result) => console.log('Prediction Result:', result)) .catch((error) => console.error('Prediction Error:', error));

Giải thích:

Core ML:
- Công cụ mạnh mẽ để chạy mô hình Machine Learning trực tiếp trên iOS.
Ưu điểm:
- Tăng hiệu năng nhờ chạy trên phần cứng native.

94. Tích hợp Lottie Animation nâng cao

Câu hỏi: Làm thế nào để tùy chỉnh Lottie Animation với React Native?

Cài đặt Lottie:

npm install lottie-react-native npx pod-install

Sử dụng Lottie:

import React, { useRef, useEffect } from 'react'; import { View, Button, StyleSheet } from 'react-native'; import LottieView from 'lottie-react-native'; export default function App() { const animation = useRef(null); useEffect(() => { animation.current.play(); }, []); const pauseAnimation = () => { animation.current.pause(); }; return ( <View style={styles.container}> <LottieView ref={animation} source={require('./animation.json')} style={styles.lottie} loop /> <Button title="Pause Animation" onPress={pauseAnimation} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, lottie: { width: 200, height: 200, }, });

Giải thích:

Lottie:
- Hiển thị animation JSON được tạo từ After Effects.
Tùy chỉnh:
- Điều khiển animation với API như play(), pause().

95. Tích hợp Haptics Feedback (Rung nhẹ)

Câu hỏi: Làm thế nào để cung cấp haptics feedback trong React Native?

Cài đặt React Native Haptic Feedback:

npm install react-native-haptic-feedback

Sử dụng Haptic Feedback:

import React from 'react'; import { View, Button } from 'react-native'; import HapticFeedback from 'react-native-haptic-feedback'; export default function App() { const triggerHaptic = () => { const options = { enableVibrateFallback: true, ignoreAndroidSystemSettings: false, }; HapticFeedback.trigger('impactMedium', options); }; return ( <View> <Button title="Trigger Haptic Feedback" onPress={triggerHaptic} /> </View> ); }

Giải thích:

Haptic Feedback:
- Tăng trải nghiệm người dùng với phản hồi rung nhẹ.
Ứng dụng thực tế:
- Phản hồi khi bấm nút, vuốt, hoặc hoàn thành tác vụ.

100 câu hỏi phỏng vấn kinh điển về Redux có lời giải chi tiết A-Z

35 min
1 năm ago
37

Dưới đây là danh sách các câu hỏi phỏng vấn về Redux, từ cơ bản đến chuyên sâu, kèm theo phân tích chi tiết từng dòng lệnh và giải thích. Những câu hỏi này phù hợp với vị trí React Native Developer. […]

Tagged #interview

Dưới đây là danh sách các câu hỏi phỏng vấn về Redux, từ cơ bản đến chuyên sâu, kèm theo phân tích chi tiết từng dòng lệnh và giải thích. Những câu hỏi này phù hợp với vị trí React Native Developer.

1. Redux là gì? Tại sao sử dụng Redux trong React Native?

Câu trả lời: Redux là một thư viện JavaScript quản lý state (trạng thái) của ứng dụng. Redux được sử dụng để đảm bảo state của ứng dụng được quản lý một cách nhất quán, dễ dàng kiểm soát và mở rộng. Redux rất hữu ích trong các ứng dụng lớn khi có nhiều component chia sẻ state.

2. Giải thích 3 nguyên tắc cơ bản của Redux

Câu trả lời:
1. Single Source of Truth: Toàn bộ state của ứng dụng được lưu trữ trong một store duy nhất.
2. State is Read-Only: State chỉ có thể thay đổi thông qua một action.
3. Changes are made with Pure Functions: Reducers là pure functions đảm bảo tính bất biến của state.

3. Câu hỏi thực hành: Tạo một Redux store và quản lý state cơ bản

Yêu cầu: Tạo một Redux store để quản lý counter với các action: tăng, giảm, và reset.
Code và phân tích:

// 1. Import các thư viện cần thiết import { createStore } from 'redux'; // 2. Định nghĩa state ban đầu const initialState = { count: 0, }; // 3. Tạo reducer const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; case 'RESET': return { ...state, count: 0 }; default: return state; } }; // 4. Tạo store const store = createStore(counterReducer); // 5. Lắng nghe thay đổi của state store.subscribe(() => { console.log('State Updated:', store.getState()); }); // 6. Dispatch các action store.dispatch({ type: 'INCREMENT' }); // +1 store.dispatch({ type: 'INCREMENT' }); // +1 store.dispatch({ type: 'DECREMENT' }); // -1 store.dispatch({ type: 'RESET' }); // Reset về 0

Giải thích từng dòng lệnh:

import { createStore } from 'redux';
- Import phương thức createStore để tạo Redux store.
const initialState = { count: 0 };
- Định nghĩa state ban đầu của ứng dụng.
const counterReducer = (state = initialState, action) => {...}
- Tạo reducer, là hàm nhận state và action, trả về state mới dựa trên action.
const store = createStore(counterReducer);
- Tạo store từ reducer.
store.subscribe(() => {...});
- Đăng ký một callback để lắng nghe mọi thay đổi state.
store.dispatch({ type: 'INCREMENT' });
- Gửi một action để yêu cầu thay đổi state. Action phải có type.

4. Middleware trong Redux là gì?

Câu trả lời: Middleware là các hàm trung gian được sử dụng trong Redux để can thiệp vào luồng xử lý action trước khi đến reducer.

5. Tích hợp Redux với React Native

Câu hỏi thực hành: Kết hợp Redux với React Native để quản lý counter.

Code và phân tích:

import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { createStore } from 'redux'; import { View, Text, Button } from 'react-native'; // Reducer const counterReducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; // Store const store = createStore(counterReducer); // Counter Component const Counter = () => { const dispatch = useDispatch(); const count = useSelector((state) => state.count); return ( <View style={{ padding: 20 }}> <Text style={{ fontSize: 20 }}>Count: {count}</Text> <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} /> <Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} /> </View> ); }; // App Component const App = () => { return ( <Provider store={store}> <Counter /> </Provider> ); }; export default App;

Giải thích từng phần:

Provider
- Kết nối Redux store với ứng dụng React Native.
useDispatch và useSelector
- useDispatch: Gửi action để thay đổi state.
- useSelector: Lấy state từ store.
Component Counter
- Hiển thị state count và cung cấp các nút để thay đổi state.

6. Câu hỏi chuyên sâu: Redux Toolkit

Redux Toolkit giúp đơn giản hóa việc sử dụng Redux. Hãy tạo store sử dụng Redux Toolkit.

import { configureStore, createSlice } from '@reduxjs/toolkit'; // Slice const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, reset: (state) => { state.count = 0; }, }, }); // Export actions export const { increment, decrement, reset } = counterSlice.actions; // Store const store = configureStore({ reducer: counterSlice.reducer, }); // Dispatch example store.dispatch(increment()); store.dispatch(decrement()); store.dispatch(reset()); console.log(store.getState());

Giải thích:

createSlice
- Tạo reducer và action trong cùng một nơi.
configureStore
- Tích hợp Redux Toolkit để tạo store dễ dàng hơn.

7. Redux Thunk và Redux Saga là gì? So sánh hai middleware này?

Redux Thunk

Khái niệm: Middleware cho phép bạn viết các action creator trả về một hàm thay vì một object. Thường được sử dụng để xử lý logic bất đồng bộ như gọi API.
Cách sử dụng cơ bản:

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; // Reducer const initialState = { data: [], loading: false, error: null }; const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_START': return { ...state, loading: true }; case 'FETCH_SUCCESS': return { ...state, loading: false, data: action.payload }; case 'FETCH_ERROR': return { ...state, loading: false, error: action.error }; default: return state; } }; // Async Action const fetchData = () => { return async (dispatch) => { dispatch({ type: 'FETCH_START' }); try { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const data = await response.json(); dispatch({ type: 'FETCH_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_ERROR', error: error.message }); } }; }; // Store const store = createStore(dataReducer, applyMiddleware(thunk)); // Trigger async action store.dispatch(fetchData());

Redux Saga

Khái niệm: Middleware sử dụng generator functions để quản lý các tác vụ bất đồng bộ. Redux Saga cung cấp cách tiếp cận declarative (khai báo) hơn.
Cách sử dụng cơ bản:

import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import { takeLatest, call, put } from 'redux-saga/effects'; // Reducer const initialState = { data: [], loading: false, error: null }; const dataReducer = (state = initialState, action) => { switch (action.type) { case 'FETCH_START': return { ...state, loading: true }; case 'FETCH_SUCCESS': return { ...state, loading: false, data: action.payload }; case 'FETCH_ERROR': return { ...state, loading: false, error: action.error }; default: return state; } }; // Saga worker function* fetchDataSaga() { yield put({ type: 'FETCH_START' }); try { const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/posts'); const data = yield response.json(); yield put({ type: 'FETCH_SUCCESS', payload: data }); } catch (error) { yield put({ type: 'FETCH_ERROR', error: error.message }); } } // Saga watcher function* watchFetchData() { yield takeLatest('FETCH_REQUEST', fetchDataSaga); } // Create saga middleware const sagaMiddleware = createSagaMiddleware(); // Store const store = createStore(dataReducer, applyMiddleware(sagaMiddleware)); // Run saga sagaMiddleware.run(watchFetchData); // Dispatch action store.dispatch({ type: 'FETCH_REQUEST' });

So sánh Redux Thunk và Redux Saga

Tiêu chí	Redux Thunk	Redux Saga
Cách tiếp cận	Imperative (mệnh lệnh)	Declarative (khai báo)
Dễ học	Dễ hơn	Khó hơn (cần hiểu generator)
Xử lý phức tạp	Khó mở rộng khi logic phức tạp	Tốt hơn cho các tác vụ phức tạp
API	Dựa vào async/await	Cung cấp hiệu năng mạnh qua `yield`
Cộng đồng	Phổ biến, dễ tiếp cận	Được sử dụng trong các dự án lớn

8. Câu hỏi chuyên sâu về Redux Toolkit: Tạo Slice nhiều reducer

Yêu cầu: Tạo Redux slice quản lý state cho sản phẩm và giỏ hàng.

Code và phân tích:

import { configureStore, createSlice } from '@reduxjs/toolkit'; // Product Slice const productSlice = createSlice({ name: 'products', initialState: [], reducers: { addProduct: (state, action) => { state.push(action.payload); }, removeProduct: (state, action) => { return state.filter(product => product.id !== action.payload); }, }, }); // Cart Slice const cartSlice = createSlice({ name: 'cart', initialState: [], reducers: { addToCart: (state, action) => { state.push(action.payload); }, removeFromCart: (state, action) => { return state.filter(item => item.id !== action.payload); }, }, }); // Store const store = configureStore({ reducer: { products: productSlice.reducer, cart: cartSlice.reducer, }, }); // Export actions export const { addProduct, removeProduct } = productSlice.actions; export const { addToCart, removeFromCart } = cartSlice.actions; // Dispatch example store.dispatch(addProduct({ id: 1, name: 'Laptop' })); store.dispatch(addToCart({ id: 1, name: 'Laptop' })); console.log(store.getState());

Phân tích:

createSlice
- Tạo slice cho từng feature (products, cart).
State nhiều reducer
- Sử dụng configureStore để tích hợp nhiều slice.
Quản lý logic
- Reducer trong slice xử lý logic liên quan đến từng feature cụ thể.

9. Câu hỏi nâng cao: Redux DevTools

Redux DevTools là công cụ mạnh mẽ giúp debug và kiểm tra các hành động (action) và trạng thái (state) trong ứng dụng Redux.

Cách tích hợp:

import { configureStore } from '@reduxjs/toolkit'; const store = configureStore({ reducer: yourReducer, devTools: process.env.NODE_ENV !== 'production', // Bật DevTools ở chế độ phát triển }); export default store;

Câu hỏi: Tại sao nên sử dụng Redux DevTools?
- Theo dõi state và các action được dispatch.
- Time-travel debugging: Quay lại trạng thái trước đó.
- Hiệu quả khi làm việc nhóm.

10. Câu hỏi về tối ưu hiệu năng Redux trong React Native

Cách tối ưu:
1. Sử dụng memoization: Sử dụng reselect để tối ưu việc lấy dữ liệu từ store.
2. Phân chia state hợp lý: Tránh lưu quá nhiều state toàn cục.
3. Sử dụng lazy loading: Tải dữ liệu khi cần thiết.

Code sử dụng Reselect:

import { createSelector } from 'reselect'; // Selector cơ bản const selectProducts = state => state.products; // Selector với memoization const selectExpensiveProducts = createSelector( [selectProducts], (products) => products.filter(product => product.price > 1000) ); const expensiveProducts = selectExpensiveProducts(store.getState()); console.log(expensiveProducts);

11. Redux Persist: Làm thế nào để lưu trữ state trong local storage hoặc AsyncStorage?

Redux Persist là gì?

Redux Persist là một thư viện giúp lưu trữ state của Redux vào storage (như local storage, AsyncStorage) và khôi phục state khi ứng dụng được khởi động lại.

Cách tích hợp Redux Persist trong React Native

Code ví dụ:

import React from 'react'; import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; import { persistStore, persistReducer } from 'redux-persist'; import { PersistGate } from 'redux-persist/integration/react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { View, Text, Button } from 'react-native'; import { createSlice } from '@reduxjs/toolkit'; // 1. Tạo slice const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; // 2. Cấu hình Redux Persist const persistConfig = { key: 'root', storage: AsyncStorage, // Sử dụng AsyncStorage }; const persistedReducer = persistReducer(persistConfig, counterSlice.reducer); // 3. Tạo store const store = configureStore({ reducer: persistedReducer, }); const persistor = persistStore(store); // 4. Component Counter const Counter = () => { const dispatch = store.dispatch; const count = store.getState().count; return ( <View style={{ padding: 20 }}> <Text style={{ fontSize: 20 }}>Count: {count}</Text> <Button title="Increment" onPress={() => dispatch(increment())} /> <Button title="Decrement" onPress={() => dispatch(decrement())} /> </View> ); }; // 5. App Component const App = () => { return ( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <Counter /> </PersistGate> </Provider> ); }; export default App;

Phân tích từng phần:

redux-persist
- Dùng persistReducer để cấu hình lưu trữ state.
- Dùng persistStore để tạo một persistor.
AsyncStorage
- Được sử dụng trong React Native để lưu trữ dữ liệu trên thiết bị.
PersistGate
- Đảm bảo rằng UI chỉ hiển thị sau khi state được khôi phục.

12. Redux Selector là gì? Làm thế nào để sử dụng Reselect hiệu quả?

Selector là gì?

Selector là một hàm được sử dụng để truy xuất dữ liệu từ Redux store. Reselect cung cấp khả năng memoization, giúp tránh tính toán lại dữ liệu không cần thiết.

Cách sử dụng Reselect

Code ví dụ:

import { createSelector } from 'reselect'; // State cơ bản const initialState = { products: [ { id: 1, name: 'Laptop', price: 1200 }, { id: 2, name: 'Phone', price: 800 }, ], }; // Reducer const productReducer = (state = initialState, action) => { return state; }; // Selector cơ bản const selectProducts = (state) => state.products; // Selector với memoization const selectExpensiveProducts = createSelector( [selectProducts], (products) => products.filter((product) => product.price > 1000) ); // Lấy dữ liệu từ state const expensiveProducts = selectExpensiveProducts({ products: initialState.products, }); console.log(expensiveProducts); // [{ id: 1, name: 'Laptop', price: 1200 }]

Phân tích:

selectProducts
- Hàm cơ bản trả về danh sách sản phẩm.
selectExpensiveProducts
- Memoized selector sử dụng createSelector để chỉ tính toán lại khi products thay đổi.

13. Cách tổ chức Redux trong dự án lớn?

Thách thức trong dự án lớn:

Quản lý state phức tạp.
Cấu trúc thư mục rõ ràng.
Tái sử dụng code hiệu quả.

Cấu trúc thư mục Redux gợi ý:

src/ ├── store/ │ ├── index.js // Cấu hình store │ ├── rootReducer.js // Kết hợp tất cả reducer ├── features/ │ ├── counter/ │ │ ├── counterSlice.js │ │ ├── Counter.js │ ├── products/ │ │ ├── productSlice.js │ │ ├── ProductList.js

Mô tả:

store/index.js
- Khởi tạo store và tích hợp middleware.
rootReducer.js
- Kết hợp nhiều reducer.
features/*
- Chia từng tính năng (feature) thành các thư mục riêng.

14. Hỏi nâng cao: Làm thế nào để kết hợp Redux với WebSocket?

Câu trả lời:

Redux có thể kết hợp với WebSocket để quản lý các sự kiện thời gian thực. Middleware là cách tốt nhất để tích hợp.

Code ví dụ:

import { createStore, applyMiddleware } from 'redux'; // Reducer const chatReducer = (state = { messages: [] }, action) => { switch (action.type) { case 'NEW_MESSAGE': return { ...state, messages: [...state.messages, action.payload] }; default: return state; } }; // WebSocket Middleware const socketMiddleware = (wsUrl) => { return (store) => { const socket = new WebSocket(wsUrl); socket.onmessage = (event) => { const message = JSON.parse(event.data); store.dispatch({ type: 'NEW_MESSAGE', payload: message }); }; return (next) => (action) => { if (action.type === 'SEND_MESSAGE') { socket.send(JSON.stringify(action.payload)); } return next(action); }; }; }; // Store const store = createStore(chatReducer, applyMiddleware(socketMiddleware('ws://example.com'))); // Dispatch example store.dispatch({ type: 'SEND_MESSAGE', payload: { content: 'Hello, World!' } });

Phân tích:

WebSocket
- Kết nối đến máy chủ WebSocket.
Middleware
- Xử lý giao tiếp giữa Redux và WebSocket.
Action SEND_MESSAGE
- Gửi dữ liệu từ client đến server.

15. Câu hỏi nâng cao: Làm thế nào để sử dụng Redux cho SSR (Server-Side Rendering)?

Câu trả lời:

Redux được sử dụng trong SSR để tạo trước state cho client.

Code cơ bản:

import { createStore } from 'redux'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import { Provider } from 'react-redux'; // Reducer const reducer = (state = { data: 'Server Side Data' }, action) => state; // Store const store = createStore(reducer); // App Component const App = () => ( <Provider store={store}> <div>Redux SSR Example</div> </Provider> ); // Render trên server const html = ReactDOMServer.renderToString(<App />); console.log(html);

Phân tích:

Redux Store
- Tạo store và truyền cho Provider.
ReactDOMServer
- Render ứng dụng React thành HTML trên server.

16. Câu hỏi: Làm thế nào để quản lý state không cần Redux? Khi nào không nên dùng Redux?

Câu trả lời:

Bạn có thể quản lý state mà không cần Redux trong các trường hợp sau:

Sử dụng Context API:
- Khi ứng dụng có state không quá phức tạp hoặc số lượng state cần chia sẻ hạn chế.

Ví dụ Context API thay Redux:

import React, { createContext, useContext, useReducer } from 'react'; // Tạo Context const CounterContext = createContext(); // Reducer const counterReducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } }; // Provider const CounterProvider = ({ children }) => { const [state, dispatch] = useReducer(counterReducer, { count: 0 }); return ( <CounterContext.Provider value={{ state, dispatch }}> {children} </CounterContext.Provider> ); }; // Custom hook const useCounter = () => useContext(CounterContext); // Component sử dụng Context const Counter = () => { const { state, dispatch } = useCounter(); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); }; // App Component const App = () => ( <CounterProvider> <Counter /> </CounterProvider> ); export default App;

Khi nào không nên dùng Redux?

Ứng dụng nhỏ với ít state cần chia sẻ.
Không có logic state phức tạp hoặc không cần quản lý bất đồng bộ.
Dùng Context API hoặc state cục bộ đủ để giải quyết vấn đề.

17. Câu hỏi: So sánh Redux với Context API?

Tiêu chí	Redux	Context API
Phạm vi sử dụng	Quản lý state phức tạp, bất đồng bộ	Quản lý state đơn giản, phạm vi nhỏ
Middleware	Có thể sử dụng middleware như Thunk, Saga	Không hỗ trợ middleware
Hiệu năng	Tốt hơn trong ứng dụng lớn, tránh re-render	Có thể gây re-render không cần thiết
Cách sử dụng	Cần cài đặt thêm thư viện	Tích hợp sẵn trong React
Học tập	Cần thời gian để học	Dễ học hơn

18. Câu hỏi thực hành: Sử dụng Redux để quản lý danh sách TODO

Yêu cầu:

Quản lý danh sách TODO với các tính năng thêm, xóa, hoàn thành.

Code ví dụ:

import { createSlice, configureStore } from '@reduxjs/toolkit'; import React from 'react'; import { Provider, useSelector, useDispatch } from 'react-redux'; // Slice const todoSlice = createSlice({ name: 'todos', initialState: [], reducers: { addTodo: (state, action) => { state.push({ id: Date.now(), text: action.payload, completed: false }); }, toggleTodo: (state, action) => { const todo = state.find((todo) => todo.id === action.payload); if (todo) todo.completed = !todo.completed; }, deleteTodo: (state, action) => { return state.filter((todo) => todo.id !== action.payload); }, }, }); export const { addTodo, toggleTodo, deleteTodo } = todoSlice.actions; // Store const store = configureStore({ reducer: { todos: todoSlice.reducer, }, }); // Component const TodoApp = () => { const todos = useSelector((state) => state.todos); const dispatch = useDispatch(); const [text, setText] = React.useState(''); const handleAddTodo = () => { if (text.trim()) { dispatch(addTodo(text)); setText(''); } }; return ( <div> <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Add a todo" /> <button onClick={handleAddTodo}>Add</button> <ul> {todos.map((todo) => ( <li key={todo.id}> <span onClick={() => dispatch(toggleTodo(todo.id))} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }} > {todo.text} </span> <button onClick={() => dispatch(deleteTodo(todo.id))}>Delete</button> </li> ))} </ul> </div> ); }; // App Component const App = () => ( <Provider store={store}> <TodoApp /> </Provider> ); export default App;

Phân tích:

addTodo
- Thêm một TODO mới với text và id.
toggleTodo
- Đổi trạng thái hoàn thành của TODO.
deleteTodo
- Xóa TODO khỏi danh sách.

19. Câu hỏi: Làm thế nào để quản lý nhiều slice với Redux Toolkit?

Câu trả lời:

Redux Toolkit hỗ trợ quản lý nhiều slice bằng cách kết hợp chúng trong configureStore.

Code ví dụ:

import { configureStore, createSlice } from '@reduxjs/toolkit'; // Slice 1: User const userSlice = createSlice({ name: 'user', initialState: { name: 'Guest', isLoggedIn: false }, reducers: { login: (state, action) => { state.name = action.payload; state.isLoggedIn = true; }, logout: (state) => { state.name = 'Guest'; state.isLoggedIn = false; }, }, }); // Slice 2: Cart const cartSlice = createSlice({ name: 'cart', initialState: [], reducers: { addToCart: (state, action) => { state.push(action.payload); }, removeFromCart: (state, action) => { return state.filter((item) => item.id !== action.payload); }, }, }); // Store const store = configureStore({ reducer: { user: userSlice.reducer, cart: cartSlice.reducer, }, }); // Export actions export const { login, logout } = userSlice.actions; export const { addToCart, removeFromCart } = cartSlice.actions; // Dispatch examples store.dispatch(login('John Doe')); store.dispatch(addToCart({ id: 1, name: 'Laptop' })); console.log(store.getState());

Phân tích:

Kết hợp nhiều slice
- Mỗi slice chịu trách nhiệm quản lý một phần state.
Tách biệt logic
- Dễ dàng bảo trì và mở rộng state.

20. Câu hỏi: Làm thế nào để kiểm tra (test) Redux?

Câu trả lời:

Sử dụng thư viện như Jest để kiểm tra reducers, actions, và selectors.

Kiểm tra reducer:

import { createSlice } from '@reduxjs/toolkit'; // Slice const counterSlice = createSlice({ name: 'counter', initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); const { reducer, actions } = counterSlice; test('increment action', () => { const initialState = { count: 0 }; const newState = reducer(initialState, actions.increment()); expect(newState.count).toBe(1); }); test('decrement action', () => { const initialState = { count: 1 }; const newState = reducer(initialState, actions.decrement()); expect(newState.count).toBe(0); });

Phân tích:

Sử dụng Jest để kiểm tra reducer hoạt động đúng.
Mỗi action được kiểm tra với state ban đầu.

21. Câu hỏi: Làm thế nào để tích hợp Redux với TypeScript trong React Native?

Câu trả lời:

TypeScript giúp tăng tính an toàn khi làm việc với Redux bằng cách thêm các kiểu dữ liệu cho state, action, và reducers.

Cách tích hợp Redux với TypeScript

Code ví dụ:

import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import React from 'react'; import { Provider, useSelector, useDispatch } from 'react-redux'; // Định nghĩa kiểu dữ liệu cho state interface CounterState { count: number; } // State ban đầu const initialState: CounterState = { count: 0, }; // Slice với TypeScript const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, incrementByAmount: (state, action: PayloadAction<number>) => { state.count += action.payload; }, }, }); // Xuất các action export const { increment, decrement, incrementByAmount } = counterSlice.actions; // Tạo store const store = configureStore({ reducer: { counter: counterSlice.reducer, }, }); // Định nghĩa RootState và AppDispatch type RootState = ReturnType<typeof store.getState>; type AppDispatch = typeof store.dispatch; // Custom hooks cho TypeScript const useAppDispatch = () => useDispatch<AppDispatch>(); const useAppSelector: <T>(selector: (state: RootState) => T) => T = useSelector; // Component const Counter: React.FC = () => { const count = useAppSelector((state) => state.counter.count); const dispatch = useAppDispatch(); return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> <button onClick={() => dispatch(incrementByAmount(5))}>Add 5</button> </div> ); }; // App Component const App: React.FC = () => ( <Provider store={store}> <Counter /> </Provider> ); export default App;

Phân tích:

Interface CounterState:
- Định nghĩa kiểu dữ liệu cho state.
PayloadAction:
- Xác định kiểu dữ liệu cho action khi truyền tham số (ở đây là number).
Custom hooks:
- useAppSelector: Tự động nhận biết kiểu của state.
- useAppDispatch: Xác định kiểu dữ liệu cho dispatch.

22. Câu hỏi: Làm thế nào để xử lý state bất đồng bộ với Redux Toolkit và TypeScript?

Cách triển khai bất đồng bộ với Redux Toolkit (Async Thunk)

Code ví dụ:

import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit'; import React from 'react'; import { Provider, useSelector, useDispatch } from 'react-redux'; // Kiểu dữ liệu cho state interface PostState { posts: string[]; loading: boolean; error: string | null; } // State ban đầu const initialState: PostState = { posts: [], loading: false, error: null, }; // Async Thunk export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const data = await response.json(); return data.map((post: any) => post.title); }); // Slice const postSlice = createSlice({ name: 'posts', initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(fetchPosts.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchPosts.fulfilled, (state, action) => { state.loading = false; state.posts = action.payload; }) .addCase(fetchPosts.rejected, (state, action) => { state.loading = false; state.error = action.error.message || 'Error fetching posts'; }); }, }); // Store const store = configureStore({ reducer: { posts: postSlice.reducer, }, }); // Component const PostList: React.FC = () => { const { posts, loading, error } = useSelector((state: any) => state.posts); const dispatch = useDispatch(); React.useEffect(() => { dispatch(fetchPosts()); }, [dispatch]); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error}</p>; return ( <ul> {posts.map((post, index) => ( <li key={index}>{post}</li> ))} </ul> ); }; // App Component const App: React.FC = () => ( <Provider store={store}> <PostList /> </Provider> ); export default App;

Phân tích:

createAsyncThunk:
- Tạo một hành động bất đồng bộ.
extraReducers:
- Lắng nghe các trạng thái của async thunk (pending, fulfilled, rejected).
TypeScript:
- Kiểm soát kiểu dữ liệu trả về từ API (string[] trong ví dụ này).

23. Câu hỏi: Làm thế nào để viết middleware tùy chỉnh trong Redux?

Cách viết middleware tùy chỉnh

Code ví dụ:

const loggerMiddleware = (store) => (next) => (action) => { console.log('Dispatching:', action); const result = next(action); // Gửi action đến reducer console.log('Next State:', store.getState()); return result; }; // Store với middleware const store = createStore( reducer, applyMiddleware(loggerMiddleware) ); // Dispatch action store.dispatch({ type: 'TEST_ACTION' });

Phân tích:

Middleware:
- Một hàm nhận store, next, và action.
- Có thể can thiệp vào luồng xử lý action trước khi đến reducer.
Logger Middleware:
- In log thông tin về action và state trước/sau khi dispatch.

24. Câu hỏi: Làm thế nào để kết hợp Redux với các thư viện khác (như React Query)?

Câu trả lời:

Redux có thể được kết hợp với các thư viện như React Query để quản lý các yêu cầu dữ liệu API phức tạp. React Query tập trung vào quản lý dữ liệu server-side, trong khi Redux chủ yếu dùng cho state client-side.

25. Câu hỏi: Làm thế nào để bảo trì và mở rộng state trong các dự án Redux lớn?

Câu trả lời:

Phân chia slice rõ ràng:
- Chia state thành các slice logic.
Sử dụng Redux Toolkit:
- Giảm boilerplate, tăng khả năng bảo trì.
Tối ưu hiệu năng:
- Sử dụng memoized selector (reselect).
Quy chuẩn thư mục:
- Giữ cấu trúc thư mục thống nhất.

26. Câu hỏi: Làm thế nào để quản lý phân quyền người dùng (authentication/authorization) với Redux?

Câu trả lời:

Bạn có thể sử dụng Redux để quản lý trạng thái đăng nhập, thông tin người dùng, và phân quyền. Thông thường, bạn sẽ có một slice quản lý thông tin người dùng và trạng thái đăng nhập.

Code ví dụ: Quản lý authentication với Redux

import { createSlice, configureStore } from '@reduxjs/toolkit'; import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; // Authentication Slice const authSlice = createSlice({ name: 'auth', initialState: { isLoggedIn: false, user: null }, reducers: { login: (state, action) => { state.isLoggedIn = true; state.user = action.payload; // Thông tin người dùng }, logout: (state) => { state.isLoggedIn = false; state.user = null; }, }, }); export const { login, logout } = authSlice.actions; // Store const store = configureStore({ reducer: { auth: authSlice.reducer, }, }); // Login Component const Login = () => { const dispatch = useDispatch(); const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); const handleLogin = () => { dispatch(login({ username: 'john_doe', role: 'admin' })); }; const handleLogout = () => { dispatch(logout()); }; return ( <div> {isLoggedIn ? ( <> <p>Welcome back!</p> <button onClick={handleLogout}>Logout</button> </> ) : ( <> <p>Please log in.</p> <button onClick={handleLogin}>Login</button> </> )} </div> ); }; // App Component const App = () => ( <Provider store={store}> <Login /> </Provider> ); export default App;

Phân tích:

Slice authSlice:
- Quản lý trạng thái isLoggedIn và thông tin người dùng.
Action login:
- Cập nhật trạng thái isLoggedIn và lưu thông tin người dùng.
Component Login:
- Hiển thị giao diện đăng nhập hoặc trạng thái chào mừng.

27. Câu hỏi: Làm thế nào để tích hợp Redux với các thư viện xử lý biểu đồ trạng thái (state machine) như XState?

Câu trả lời:

Bạn có thể sử dụng XState để quản lý các trạng thái phức tạp (như các bước trong quy trình) và tích hợp nó với Redux để chia sẻ state với các phần khác của ứng dụng.

Code ví dụ: Tích hợp Redux với XState

import { createMachine, interpret } from 'xstate'; import { createSlice, configureStore } from '@reduxjs/toolkit'; import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; // XState Machine const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active' }, }, active: { on: { TOGGLE: 'inactive' }, }, }, }); // XState Service const toggleService = interpret(toggleMachine).start(); // Slice const toggleSlice = createSlice({ name: 'toggle', initialState: toggleMachine.initialState.value, reducers: { toggle: (state) => { const nextState = toggleService.send('TOGGLE').value; return nextState; }, }, }); export const { toggle } = toggleSlice.actions; // Store const store = configureStore({ reducer: { toggle: toggleSlice.reducer, }, }); // Component const Toggle = () => { const state = useSelector((state) => state.toggle); const dispatch = useDispatch(); return ( <div> <p>Current State: {state}</p> <button onClick={() => dispatch(toggle())}>Toggle</button> </div> ); }; // App Component const App = () => ( <Provider store={store}> <Toggle /> </Provider> ); export default App;

Phân tích:

XState Machine:
- Quản lý trạng thái phức tạp với biểu đồ trạng thái.
Slice toggleSlice:
- Kết nối XState với Redux bằng cách lưu trạng thái hiện tại.
XState Service:
- Sử dụng send để chuyển đổi trạng thái trong biểu đồ.

28. Câu hỏi: Làm thế nào để xử lý side effects phức tạp với Redux Toolkit?

Câu trả lời:

Redux Toolkit hỗ trợ createAsyncThunk để xử lý các tác vụ bất đồng bộ như gọi API. Đối với các side effects phức tạp hơn, bạn có thể kết hợp với middleware như Redux Saga hoặc Redux Observable.

Code ví dụ: Sử dụng Redux Saga để xử lý side effects phức tạp

import { createSlice, configureStore } from '@reduxjs/toolkit'; import createSagaMiddleware from 'redux-saga'; import { takeLatest, put, call } from 'redux-saga/effects'; // Slice const userSlice = createSlice({ name: 'user', initialState: { loading: false, user: null, error: null }, reducers: { fetchUserStart: (state) => { state.loading = true; }, fetchUserSuccess: (state, action) => { state.loading = false; state.user = action.payload; }, fetchUserFailure: (state, action) => { state.loading = false; state.error = action.payload; }, }, }); export const { fetchUserStart, fetchUserSuccess, fetchUserFailure } = userSlice.actions; // Saga function* fetchUserSaga() { try { yield put(fetchUserStart()); const user = yield call(() => fetch('https://jsonplaceholder.typicode.com/users/1').then((res) => res.json()) ); yield put(fetchUserSuccess(user)); } catch (error) { yield put(fetchUserFailure(error.message)); } } function* watchFetchUser() { yield takeLatest('user/fetchUser', fetchUserSaga); } // Middleware const sagaMiddleware = createSagaMiddleware(); // Store const store = configureStore({ reducer: { user: userSlice.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware), }); sagaMiddleware.run(watchFetchUser); // Dispatch store.dispatch({ type: 'user/fetchUser' });

Phân tích:

Redux Saga:
- Sử dụng call để thực hiện yêu cầu bất đồng bộ.
- Lắng nghe action user/fetchUser với takeLatest.
Side Effects phức tạp:
- Xử lý các trạng thái như fetchUserStart, fetchUserSuccess, và fetchUserFailure.

100 câu hỏi phỏng vấn typescript kèm lời giải chi tiết từ A-Z

56 min
1 năm ago
99

1. TypeScript là gì? Tại sao chúng ta nên sử dụng TypeScript thay vì JavaScript? Câu trả lời: TypeScript là một ngôn ngữ lập trình dựa trên JavaScript, được Microsoft phát triển. Nó bổ sung các tính năng như kiểu tĩnh (static […]

Tagged #interview, #typescript

1. TypeScript là gì? Tại sao chúng ta nên sử dụng TypeScript thay vì JavaScript?

Câu trả lời: TypeScript là một ngôn ngữ lập trình dựa trên JavaScript, được Microsoft phát triển. Nó bổ sung các tính năng như kiểu tĩnh (static typing), interface, và hỗ trợ mạnh mẽ hơn khi làm việc với các dự án lớn.

Giải thích:

TypeScript giúp kiểm tra lỗi tại thời điểm biên dịch, giảm lỗi runtime.
TypeScript hỗ trợ các IDE tốt hơn, cung cấp tính năng như gợi ý code (intellisense) và tự động hoàn thành.
Nó giúp tổ chức mã tốt hơn với các tính năng như interface, namespace, và module.

2. TypeScript có bắt buộc kiểu tĩnh cho mọi biến không?

Ví dụ:

let a: number = 10; // Được khai báo kiểu number let b = "Hello"; // Kiểu được suy luận là string let c; // Kiểu là `any`

Phân tích:

let a: number = 10;: Cú pháp này định nghĩa rõ ràng biến a có kiểu number. Nếu gán giá trị khác kiểu số, TypeScript sẽ báo lỗi.
let b = "Hello";: TypeScript tự suy luận kiểu (type inference), xác định b có kiểu string.
let c;: Không gán kiểu và giá trị, TypeScript mặc định kiểu là any. Điều này làm mất lợi ích của kiểm tra kiểu, nên cần tránh.

3. Giải thích khái niệm `interface` trong TypeScript.

Ví dụ:

interface User { id: number; name: string; age?: number; // Thuộc tính tùy chọn } const user: User = { id: 1, name: "John Doe" };

Phân tích:

interface User: Định nghĩa cấu trúc của đối tượng User, yêu cầu các thuộc tính như id (number), name (string). age là tùy chọn vì có dấu ?.
const user: User: Biến user phải tuân theo cấu trúc của User.
Nếu bỏ qua id hoặc name, TypeScript sẽ báo lỗi.

4. So sánh `interface` và `type`. Khi nào nên sử dụng?

Ví dụ:

interface Point { x: number; y: number; } type PointAlias = { x: number; y: number; };

Phân tích:

Cả interface và type đều dùng để định nghĩa kiểu đối tượng.
interface hỗ trợ kế thừa (extends).
type linh hoạt hơn, có thể dùng với các kiểu khác như union hoặc intersection:

type Shape = Point & { radius: number }; // Intersection type StringOrNumber = string | number; // Union

Khi nào nên dùng:

Dùng interface nếu chỉ định nghĩa cấu trúc đối tượng.
Dùng type nếu cần tính linh hoạt cao hơn.

5. Generics là gì? Làm thế nào để sử dụng?

Ví dụ:

function identity<T>(arg: T): T { return arg; } const result = identity<number>(42); const text = identity<string>("Hello");

Phân tích:

T là một tham số kiểu (generic parameter), đại diện cho bất kỳ kiểu nào.
identity<number>: Gọi hàm với kiểu number, nên arg sẽ là number.
identity<string>: Gọi hàm với kiểu string.

6. Phân biệt `readonly` và `const` trong TypeScript.

Ví dụ:

const PI = 3.14; // Không thể thay đổi giá trị interface Circle { readonly radius: number; // Không thể thay đổi sau khi gán } const circle: Circle = { radius: 10 }; // circle.radius = 20; // Lỗi

Phân tích:

const: Dùng cho biến, không thể thay đổi tham chiếu sau khi khai báo.
readonly: Dùng trong interface/class để định nghĩa thuộc tính không thể thay đổi sau khi được khởi tạo.

7. Giải thích `type narrowing` và cách sử dụng trong TypeScript.

Ví dụ:

function printValue(value: string | number) { if (typeof value === "string") { console.log("String value:", value.toUpperCase()); } else { console.log("Number value:", value.toFixed(2)); } }

Phân tích:

value: string | number: Kiểu union (có thể là string hoặc number).
typeof value === "string": Hẹp phạm vi kiểu (narrowing) để TypeScript biết value là string.
Trong mỗi nhánh, IDE sẽ cung cấp gợi ý dựa trên kiểu cụ thể.

8. Giải thích `Decorators` trong TypeScript.

Ví dụ:

function Log(target: any, propertyKey: string) { console.log(`Property ${propertyKey} has been accessed`); } class Example { @Log value: string = "Hello"; }

Phân tích:

@Log: Một decorator áp dụng lên thuộc tính.
Khi truy cập value, decorator sẽ được thực thi.
Decorators hữu ích trong việc ghi log, kiểm tra quyền, hoặc xử lý metadata.

9. Khác biệt giữa `unknown` và `any`.

Ví dụ:

let a: any = 10; let b: unknown = 20; // Không lỗi a.toFixed(2); // Lỗi // b.toFixed(2); // Cần kiểm tra kiểu if (typeof b === "number") { b.toFixed(2); }

Phân tích:

any: Không có ràng buộc, mất kiểm tra kiểu.
unknown: Cần kiểm tra kiểu trước khi sử dụng, an toàn hơn.

10. Mô tả `Mapped Types` và ứng dụng.

Ví dụ:

type Readonly<T> = { readonly [P in keyof T]: T[P]; }; interface User { id: number; name: string; } type ReadonlyUser = Readonly<User>;

Phân tích:

[P in keyof T]: Lặp qua các thuộc tính của T.
readonly: Gán thuộc tính chỉ đọc.
Kết quả là ReadonlyUser có tất cả thuộc tính từ User, nhưng chỉ đọc.

11. Khái niệm `Union` và `Intersection` trong TypeScript là gì?

Union:

Cho phép một biến có thể thuộc nhiều kiểu dữ liệu.

Ví dụ:

type StringOrNumber = string | number; function print(value: StringOrNumber) { if (typeof value === "string") { console.log("String value:", value.toUpperCase()); } else { console.log("Number value:", value.toFixed(2)); } }

Phân tích:

type StringOrNumber = string | number: Đây là kiểu union, cho phép giá trị của value là string hoặc number.
Sử dụng typeof để phân biệt kiểu khi xử lý.

Intersection:

Kết hợp nhiều kiểu lại thành một kiểu duy nhất, yêu cầu một giá trị phải thỏa mãn tất cả các kiểu.

Ví dụ:

interface HasName { name: string; } interface HasAge { age: number; } type Person = HasName & HasAge; const person: Person = { name: "John", age: 30, };

Phân tích:

type Person = HasName & HasAge: Đây là kiểu intersection, yêu cầu giá trị phải có cả name và age.
person: Đối tượng phải thỏa mãn tất cả các thuộc tính từ HasName và HasAge.

12. Làm thế nào để sử dụng `Enums` trong TypeScript?

Ví dụ:

enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } function move(direction: Direction) { console.log("Moving:", direction); } move(Direction.Up);

Phân tích:

enum Direction: Định nghĩa các giá trị tĩnh, giúp mã dễ đọc và bảo trì.
Direction.Up: Truy cập giá trị của enum.
move(Direction.Up): Hàm chỉ nhận giá trị thuộc kiểu Direction.

13. Khái niệm `Type Guards` là gì?

Ví dụ:

interface Dog { bark: () => void; } interface Cat { meow: () => void; } function isDog(animal: Dog | Cat): animal is Dog { return (animal as Dog).bark !== undefined; } function makeSound(animal: Dog | Cat) { if (isDog(animal)) { animal.bark(); } else { animal.meow(); } }

Phân tích:

isDog: Đây là một type guard, xác định kiểu chính xác của đối tượng.
(animal as Dog).bark !== undefined: Kiểm tra nếu animal có phương thức bark.
if (isDog(animal)): Dựa trên kết quả của type guard để xử lý.

14. Sử dụng `Utility Types` trong TypeScript.

TypeScript cung cấp nhiều utility types để xử lý kiểu dễ dàng.

Partial:

Tạo một kiểu trong đó tất cả các thuộc tính đều là tùy chọn.

Ví dụ:

interface User { id: number; name: string; } type PartialUser = Partial<User>; const user: PartialUser = { id: 1 };

Pick:

Lấy một tập con các thuộc tính từ kiểu đã cho.

Ví dụ:

type UserName = Pick<User, "name">; const userName: UserName = { name: "Alice" };

Omit:

Bỏ một hoặc nhiều thuộc tính khỏi kiểu.

Ví dụ:

type UserWithoutId = Omit<User, "id">; const user: UserWithoutId = { name: "Bob" };

15. Giải thích `Optional Chaining` trong TypeScript.

Ví dụ:

const user = { profile: { name: "Alice", }, }; console.log(user?.profile?.name); // "Alice" console.log(user?.address?.city); // undefined

Phân tích:

?.: Kiểm tra xem thuộc tính có tồn tại không trước khi truy cập.
user?.address?.city: Nếu address không tồn tại, sẽ trả về undefined thay vì lỗi.

16. Sử dụng `Never` trong TypeScript.

Never đại diện cho một giá trị không bao giờ xảy ra.

Ví dụ:

function throwError(message: string): never { throw new Error(message); }

Phân tích:

Hàm throwError không trả về giá trị, do đó kiểu trả về là never.

17. Sử dụng `Tuple` trong TypeScript.

Ví dụ:

let tuple: [string, number]; tuple = ["John", 25]; // Hợp lệ // tuple = [25, "John"]; // Lỗi

Phân tích:

tuple: [string, number]: Kiểu của tuple xác định thứ tự và kiểu dữ liệu của từng phần tử.
Không thể thay đổi thứ tự hoặc kiểu dữ liệu trong tuple.

18. Phân biệt `Class` và `Interface`.

Class:

Định nghĩa một kiểu dữ liệu kèm theo logic.

Ví dụ:

class User { constructor(public name: string, public age: number) {} greet() { console.log(`Hello, ${this.name}`); } } const user = new User("Alice", 30); user.greet();

Interface:

Chỉ định nghĩa cấu trúc dữ liệu, không có logic.

Ví dụ:

interface User { name: string; age: number; } const user: User = { name: "Alice", age: 30 };

Phân tích:

Dùng class khi cần cả dữ liệu và logic.
Dùng interface nếu chỉ cần định nghĩa cấu trúc.

19. Phân biệt `Abstract Class` và `Interface`.

Abstract Class:

Cho phép định nghĩa một số logic chung và yêu cầu các class con phải triển khai các phương thức cụ thể.

Ví dụ:

abstract class Animal { abstract sound(): void; move() { console.log("Moving..."); } } class Dog extends Animal { sound() { console.log("Barking..."); } } const dog = new Dog(); dog.sound(); dog.move();

Interface:

Chỉ định nghĩa mà không cung cấp logic.

Ví dụ:

interface Animal { sound(): void; } class Cat implements Animal { sound() { console.log("Meowing..."); } } const cat = new Cat(); cat.sound();

Phân tích:

Dùng abstract class khi cần định nghĩa logic chung.
Dùng interface khi chỉ cần định nghĩa giao diện.

20. Type Assertion là gì?

Ví dụ:

let someValue: unknown = "Hello World"; let strLength: number = (someValue as string).length;

Phân tích:

someValue as string: Ép kiểu someValue thành string.
Hữu ích khi TypeScript không thể tự suy luận kiểu chính xác.

21. Sử dụng `Record` trong TypeScript

Record được sử dụng để tạo kiểu với các khóa và giá trị cụ thể.

Ví dụ:

type Roles = "admin" | "user" | "guest"; type Permissions = Record<Roles, string[]>; const rolePermissions: Permissions = { admin: ["read", "write", "delete"], user: ["read", "write"], guest: ["read"], };

Phân tích:

Record<Roles, string[]>: Mỗi khóa trong Roles được ánh xạ đến kiểu string[].
Hữu ích khi làm việc với các cấu trúc ánh xạ (mapping).

22. Giải thích `ReadonlyArray` trong TypeScript

Ví dụ:

const arr: ReadonlyArray<number> = [1, 2, 3]; // arr.push(4); // Lỗi // arr[0] = 10; // Lỗi const normalArray = arr as number[]; normalArray.push(4); // Hợp lệ vì chuyển đổi sang mảng thông thường

Phân tích:

ReadonlyArray: Đảm bảo mảng không thể thay đổi (immutable).
Không thể thêm, xóa, hoặc chỉnh sửa giá trị trong mảng.
Có thể sử dụng as để chuyển đổi nếu cần thao tác.

23. Khi nào sử dụng `keyof` trong TypeScript?

keyof dùng để lấy tất cả các khóa của một kiểu đối tượng.

Ví dụ:

interface User { id: number; name: string; } type UserKeys = keyof User; // "id" | "name" function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } const user: User = { id: 1, name: "Alice" }; console.log(getProperty(user, "id")); // 1

Phân tích:

keyof User: Trích xuất các khóa từ kiểu User, kết quả là "id" | "name".
Hàm getProperty: Ràng buộc key phải là một khóa hợp lệ của obj.

24. Sử dụng `Indexed Access Types` trong TypeScript

Cho phép truy cập kiểu của thuộc tính trong một đối tượng.

Ví dụ:

interface User { id: number; name: string; } type UserId = User["id"]; // number

Phân tích:

User["id"]: Truy cập kiểu của thuộc tính id trong User.
Hữu ích khi tái sử dụng kiểu của một thuộc tính cụ thể.

25. Làm thế nào để sử dụng `Template Literal Types`?

Template Literal Types cho phép kết hợp kiểu với chuỗi.

Ví dụ:

type Action = "read" | "write" | "delete"; type Role = "user" | "admin"; type Permission = `${Role}_${Action}`; // "user_read" | "user_write" | ... const permission: Permission = "admin_delete"; // Hợp lệ

Phân tích:

${Role}_${Action}: Kết hợp các kiểu Role và Action thành các chuỗi cụ thể.
Rất hữu ích khi làm việc với các chuỗi có mẫu định dạng (pattern).

26. Sử dụng `Conditional Types` trong TypeScript

Cho phép định nghĩa kiểu dựa trên điều kiện.

Ví dụ:

type IsString<T> = T extends string ? true : false; type Test1 = IsString<string>; // true type Test2 = IsString<number>; // false

Phân tích:

T extends string: Kiểm tra nếu T là string.
Kết quả là true hoặc false tùy thuộc vào điều kiện.

27. Giải thích `Infer` trong TypeScript

Infer được sử dụng trong Conditional Types để suy diễn kiểu.

Ví dụ:

type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never; type Test = GetReturnType<() => string>; // string

Phân tích:

infer R: Suy diễn kiểu trả về của hàm.
Nếu T là một hàm, kiểu trả về (R) sẽ được lấy.

28. Sử dụng `Namespace` trong TypeScript

Ví dụ:

namespace Utils { export const PI = 3.14; export function calculateCircumference(radius: number): number { return 2 * PI * radius; } } console.log(Utils.calculateCircumference(10)); // 62.8

Phân tích:

namespace Utils: Tạo không gian tên để tổ chức mã.
export: Cho phép sử dụng các thành phần bên ngoài namespace.

29. Phân biệt `Module` và `Namespace`

Module:

Dựa trên ES Modules (import/export).
Mỗi file là một module.
Dùng để quản lý mã hiện đại.

Ví dụ:

// math.ts export const add = (a: number, b: number) => a + b; // main.ts import { add } from "./math"; console.log(add(1, 2));

Namespace:

Không gian tên nội bộ, không yêu cầu tách file.
Ít được sử dụng trong các dự án hiện đại, nhưng vẫn hữu ích cho mã kế thừa.

30. Làm thế nào để khai báo và sử dụng `Function Overloads`?

Ví dụ:

function getLength(value: string): number; function getLength(value: any[]): number; function getLength(value: any): number { return value.length; } console.log(getLength("Hello")); // 5 console.log(getLength([1, 2, 3])); // 3

Phân tích:

Function Overloads: Định nghĩa nhiều kiểu cho hàm.
getLength(value: string) và getLength(value: any[]): Hai kiểu đầu vào hợp lệ.
Phần triển khai (function getLength(value: any): number) xử lý logic chung.

31. Giải thích `Declaration Merging` trong TypeScript

Cho phép kết hợp nhiều khai báo cùng tên.

Ví dụ:

interface User { name: string; } interface User { age: number; } const user: User = { name: "Alice", age: 30 };

Phân tích:

Hai khai báo User được gộp thành một.
Đối tượng user phải có cả name và age.

32. Làm thế nào để kiểm soát strictness trong TypeScript?

TypeScript cung cấp cài đặt strictness trong file tsconfig.json.

Ví dụ:

{ "compilerOptions": { "strict": true } }

Các tùy chọn liên quan:

noImplicitAny: Báo lỗi nếu TypeScript suy luận kiểu any.
strictNullChecks: Không cho phép sử dụng null hoặc undefined mà không kiểm tra.
strictPropertyInitialization: Đảm bảo các thuộc tính được khởi tạo trong class.

33. Phân biệt `Public`, `Private`, và `Protected` trong TypeScript

Ví dụ:

class Person { public name: string; private age: number; protected address: string; constructor(name: string, age: number, address: string) { this.name = name; this.age = age; this.address = address; } } class Employee extends Person { constructor(name: string, age: number, address: string) { super(name, age, address); } showAddress() { console.log(this.address); // Hợp lệ } }

Phân tích:

public: Truy cập ở bất cứ đâu.
private: Chỉ truy cập trong class khai báo.
protected: Truy cập trong class khai báo và class kế thừa.

34. Làm thế nào để xử lý `Module Resolution` trong TypeScript?

TypeScript hỗ trợ hai chiến lược:

Classic: Phù hợp với dự án không sử dụng module.
Node: Sử dụng theo chuẩn Node.js.

Cấu hình trong tsconfig.json:

{ "compilerOptions": { "moduleResolution": "node" } }

35. Sử dụng `Type Aliases` để định nghĩa kiểu phức tạp

Ví dụ:

type Point = { x: number; y: number }; type Line = { start: Point; end: Point }; const line: Line = { start: { x: 0, y: 0 }, end: { x: 10, y: 10 }, };

Phân tích:

type Point: Định nghĩa một kiểu dữ liệu phức tạp cho tọa độ.
type Line: Dùng kiểu Point để tạo kiểu mới cho một đoạn thẳng.
Giúp tái sử dụng kiểu và làm mã dễ đọc hơn.

36. Làm thế nào để định nghĩa `Union Type` trong hàm?

Ví dụ:

function formatValue(value: string | number): string { if (typeof value === "string") { return `String: ${value}`; } return `Number: ${value}`; } console.log(formatValue("Hello")); // String: Hello console.log(formatValue(42)); // Number: 42

Phân tích:

value: string | number: Chấp nhận đầu vào kiểu string hoặc number.
Kiểm tra kiểu bằng typeof để xử lý từng trường hợp cụ thể.

37. Làm thế nào để quản lý cấu trúc phức tạp với `Nested Types`?

Ví dụ:

type Address = { street: string; city: string; }; type User = { id: number; name: string; address: Address; }; const user: User = { id: 1, name: "Alice", address: { street: "123 Main St", city: "Wonderland", }, };

Phân tích:

type Address: Định nghĩa cấu trúc cho địa chỉ.
type User: Tích hợp kiểu Address để tạo cấu trúc dữ liệu phức tạp.
Dễ dàng mở rộng hoặc tái sử dụng kiểu.

38. Làm thế nào để tạo `Dynamic Keys` trong TypeScript?

Ví dụ:

type DynamicObject = { [key: string]: string | number; }; const data: DynamicObject = { name: "Alice", age: 30, };

Phân tích:

[key: string]: string | number: Định nghĩa các khóa động với kiểu dữ liệu cụ thể.
Hữu ích khi làm việc với đối tượng không cố định thuộc tính.

39. Làm thế nào để sử dụng `This` trong TypeScript?

Ví dụ:

class Counter { count: number = 0; increment(): this { this.count++; return this; } decrement(): this { this.count--; return this; } } const counter = new Counter(); counter.increment().increment().decrement(); console.log(counter.count); // 1

Phân tích:

this: Trả về chính đối tượng hiện tại, cho phép gọi liên tiếp các phương thức.
Phù hợp với pattern “method chaining” (chuỗi phương thức).

40. Sử dụng `Abstract Class` để định nghĩa logic chung

Ví dụ:

abstract class Shape { abstract getArea(): number; describe(): string { return "This is a shape."; } } class Circle extends Shape { constructor(public radius: number) { super(); } getArea(): number { return Math.PI * this.radius ** 2; } } const circle = new Circle(5); console.log(circle.getArea()); // 78.53981633974483 console.log(circle.describe()); // This is a shape.

Phân tích:

abstract class Shape: Định nghĩa logic chung và các phương thức trừu tượng.
getArea: Lớp con (Circle) phải triển khai phương thức này.
describe: Phương thức chung có thể dùng trực tiếp mà không cần ghi đè.

41. Sử dụng `Non-Nullable` Types trong TypeScript

Ví dụ:

type NonNullableString = NonNullable<string | null | undefined>; const validString: NonNullableString = "Hello"; // const invalidString: NonNullableString = null; // Lỗi

Phân tích:

NonNullable: Loại bỏ null và undefined khỏi kiểu.
Hữu ích khi muốn đảm bảo giá trị không bao giờ là null hoặc undefined.

42. Làm thế nào để sử dụng `Discriminated Union`?

Ví dụ:

interface Square { kind: "square"; size: number; } interface Rectangle { kind: "rectangle"; width: number; height: number; } type Shape = Square | Rectangle; function calculateArea(shape: Shape): number { if (shape.kind === "square") { return shape.size ** 2; } else if (shape.kind === "rectangle") { return shape.width * shape.height; } throw new Error("Unknown shape"); } const square: Square = { kind: "square", size: 10 }; console.log(calculateArea(square)); // 100

Phân tích:

kind: "square" và kind: "rectangle": Dùng thuộc tính chung để phân biệt kiểu.
if (shape.kind === "square"): Xác định kiểu cụ thể dựa trên giá trị của kind.

43. Làm thế nào để sử dụng `Optional Modifier` (`?`)?

Ví dụ:

interface User { id: number; name?: string; // Thuộc tính tùy chọn } const user1: User = { id: 1 }; const user2: User = { id: 2, name: "Alice" };

Phân tích:

name?: string: Thuộc tính name là tùy chọn.
Giúp linh hoạt trong việc định nghĩa đối tượng.

44. Sử dụng `Readonly` trong TypeScript

Ví dụ:

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: "Alice" }; // user.id = 2; // Lỗi user.name = "Bob"; // Hợp lệ

Phân tích:

readonly id: Thuộc tính id không thể thay đổi sau khi khởi tạo.
Phần còn lại của đối tượng vẫn có thể chỉnh sửa.

45. Làm thế nào để làm việc với `Tuple` và `Rest Parameters`?

Ví dụ:

function log(...args: [string, number]): void { console.log(`String: ${args[0]}, Number: ${args[1]}`); } log("Hello", 42); // String: Hello, Number: 42

Phân tích:

...args: [string, number]: Kết hợp tuple với rest parameters để giới hạn kiểu và số lượng tham số.
Đảm bảo log chỉ nhận hai tham số với kiểu cụ thể.

46. Làm thế nào để xử lý kiểu phức tạp với `Mapped Types`?

Ví dụ:

type Mutable<T> = { -readonly [P in keyof T]: T[P]; }; interface User { readonly id: number; readonly name: string; } type EditableUser = Mutable<User>; const user: EditableUser = { id: 1, name: "Alice" }; user.id = 2; // Hợp lệ

Phân tích:

-readonly: Loại bỏ modifier readonly khỏi các thuộc tính.
[P in keyof T]: Lặp qua các thuộc tính của kiểu T.

47. Sử dụng `Key Remapping in Mapped Types`

TypeScript 4.1 trở lên cho phép thay đổi tên thuộc tính trong Mapped Types.

Ví dụ:

type PrefixKeys<T> = { [K in keyof T as `prefix_${string & K}`]: T[K]; }; interface User { id: number; name: string; } type PrefixedUser = PrefixKeys<User>; // Kết quả: { prefix_id: number; prefix_name: string; } const user: PrefixedUser = { prefix_id: 1, prefix_name: "Alice", };

Phân tích:

[K in keyof T as \prefix_${string & K}`]: Thay đổi tên khóa bằng cách thêm tiền tốprefix_`.
Hữu ích khi cần tái cấu trúc đối tượng theo định dạng cụ thể.

48. Sử dụng `Conditional Types` để tạo kiểu linh hoạt

Ví dụ:

type ExtractArrayType<T> = T extends (infer U)[] ? U : never; type StringArray = string[]; type Result = ExtractArrayType<StringArray>; // string

Phân tích:

T extends (infer U)[]: Sử dụng infer để suy diễn kiểu phần tử trong mảng.
Kết quả là kiểu phần tử của mảng (ở đây là string).

49. Tích hợp `Type Guards` và `Exhaustive Check`

Ví dụ:

type Shape = | { kind: "circle"; radius: number } | { kind: "rectangle"; width: number; height: number }; function getArea(shape: Shape): number { switch (shape.kind) { case "circle": return Math.PI * shape.radius ** 2; case "rectangle": return shape.width * shape.height; default: const _exhaustiveCheck: never = shape; // Báo lỗi nếu có kiểu mới mà không xử lý throw new Error(`Unknown shape: ${_exhaustiveCheck}`); } }

Phân tích:

switch (shape.kind): Sử dụng kind làm type guard.
const _exhaustiveCheck: never: Đảm bảo tất cả các trường hợp đều được xử lý. Nếu kiểu mới được thêm vào mà không cập nhật logic, TypeScript sẽ báo lỗi.

50. Làm thế nào để sử dụng `String Literal Types` trong hàm?

Ví dụ:

function printColor(color: "red" | "green" | "blue"): void { console.log(`Color: ${color}`); } printColor("red"); // Hợp lệ // printColor("yellow"); // Lỗi

Phân tích:

"red" | "green" | "blue": Kiểu chuỗi cụ thể, giới hạn đầu vào.
Hữu ích khi muốn giới hạn giá trị cho các tham số hàm.

51. Kế thừa kiểu với `Extends` trong Generics

Ví dụ:

interface HasId { id: number; } function logWithId<T extends HasId>(item: T): void { console.log(`ID: ${item.id}`); } const user = { id: 1, name: "Alice" }; logWithId(user); // ID: 1

Phân tích:

T extends HasId: Đảm bảo T phải có thuộc tính id.
logWithId(user): Chỉ hợp lệ nếu đối tượng có kiểu HasId.

52. Xử lý các kiểu phức tạp với `Deep Readonly`

Ví dụ:

type DeepReadonly<T> = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]; }; interface User { id: number; profile: { name: string; address: { city: string; }; }; } const user: DeepReadonly<User> = { id: 1, profile: { name: "Alice", address: { city: "Wonderland", }, }, }; // user.profile.name = "Bob"; // Lỗi: Thuộc tính chỉ đọc

Phân tích:

T[P] extends object ? DeepReadonly<T[P]> : T[P]: Áp dụng readonly đệ quy cho các thuộc tính con.
Đảm bảo đối tượng và tất cả thuộc tính con không thể thay đổi.

53. Sử dụng `Utility Type: Exclude`

Exclude loại bỏ các kiểu cụ thể khỏi kiểu ban đầu.

Ví dụ:

type AllowedTypes = Exclude<string | number | boolean, boolean>; const value: AllowedTypes = 42; // Hợp lệ // const value2: AllowedTypes = true; // Lỗi

Phân tích:

Exclude<string | number | boolean, boolean>: Loại bỏ boolean khỏi kiểu ban đầu.
Kết quả là string | number.

54. Sử dụng `Utility Type: Extract`

Extract chọn ra các kiểu chung giữa hai kiểu.

Ví dụ:

type CommonTypes = Extract<string | number | boolean, string | boolean>; const value: CommonTypes = "hello"; // Hợp lệ // const value2: CommonTypes = 42; // Lỗi

Phân tích:

Extract<string | number | boolean, string | boolean>: Chỉ giữ lại các kiểu chung (string | boolean).

55. Làm thế nào để sử dụng `Union to Intersection` với TypeScript?

Ví dụ:

type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never; type Result = UnionToIntersection<{ a: string } | { b: number }>; // Kết quả: { a: string } & { b: number }

Phân tích:

UnionToIntersection: Chuyển kiểu union thành intersection.
Áp dụng cho các trường hợp cần kết hợp nhiều kiểu thành một kiểu duy nhất.

56. Làm thế nào để kiểm soát `Index Signature` trong TypeScript?

Ví dụ:

interface Dictionary<T> { [key: string]: T; } const dict: Dictionary<number> = { a: 1, b: 2, };

Phân tích:

[key: string]: T: Khóa là chuỗi, giá trị là kiểu T.
Hữu ích khi làm việc với các cấu trúc ánh xạ (mapping) linh hoạt.

57. Làm thế nào để tạo kiểu cho các thuộc tính tùy chọn nâng cao?

Ví dụ:

type OptionalProperties<T> = { [K in keyof T]?: T[K]; }; interface User { id: number; name: string; } type OptionalUser = OptionalProperties<User>; const user: OptionalUser = { id: 1 }; // Hợp lệ

Phân tích:

[K in keyof T]?: T[K]: Biến tất cả thuộc tính của T thành tùy chọn.

58. Làm thế nào để tạo kiểu `Recursive` trong TypeScript?

Ví dụ:

type NestedArray<T> = T | NestedArray<T>[]; const array: NestedArray<number> = [1, [2, [3, 4]], 5];

Phân tích:

T | NestedArray<T>[]: Cho phép mảng lồng nhau với các phần tử kiểu T.

59. Làm thế nào để sử dụng `Asserts` trong TypeScript?

Ví dụ:

function assertIsString(value: any): asserts value is string { if (typeof value !== "string") { throw new Error("Value is not a string"); } } function printString(value: any) { assertIsString(value); console.log(value.toUpperCase()); // An toàn vì đã kiểm tra kiểu } printString("Hello"); // printString(42); // Lỗi

Phân tích:

asserts value is string: Khẳng định kiểu của value là string sau khi kiểm tra.
Hữu ích khi làm việc với các kiểu không chắc chắn.

60. Làm thế nào để sử dụng `Module Augmentation` trong TypeScript?

Ví dụ:

// math.d.ts declare module "math" { export function multiply(a: number, b: number): number; } // main.ts import { multiply } from "math"; console.log(multiply(2, 3));

Phân tích:

declare module: Mở rộng module hiện có mà không sửa đổi mã nguồn gốc.
Hữu ích khi thêm tính năng hoặc định nghĩa kiểu cho module bên ngoài.

61. Sử dụng `ReadonlyMap` và `ReadonlySet`

TypeScript hỗ trợ ReadonlyMap và ReadonlySet để đảm bảo không thể thay đổi dữ liệu.

Ví dụ:

const map: ReadonlyMap<string, number> = new Map([ ["one", 1], ["two", 2], ]); // map.set("three", 3); // Lỗi: Không thể thay đổi ReadonlyMap const set: ReadonlySet<number> = new Set([1, 2, 3]); // set.add(4); // Lỗi: Không thể thay đổi ReadonlySet

Phân tích:

ReadonlyMap và ReadonlySet: Ngăn chặn mọi thay đổi đối với dữ liệu.
Sử dụng trong trường hợp cần bảo vệ cấu trúc dữ liệu gốc.

62. Làm thế nào để xử lý `Readonly` và `Mutable` một cách linh hoạt?

Ví dụ:

type Mutable<T> = { -readonly [P in keyof T]: T[P]; }; type Readonly<T> = { readonly [P in keyof T]: T[P]; }; interface User { id: number; name: string; } const user: Readonly<User> = { id: 1, name: "Alice" }; // user.id = 2; // Lỗi const mutableUser: Mutable<User> = { id: 1, name: "Alice" }; mutableUser.id = 2; // Hợp lệ

Phân tích:

-readonly: Loại bỏ thuộc tính readonly.
readonly: Thêm thuộc tính readonly vào tất cả các thuộc tính.

63. Làm thế nào để kiểm soát `Default Type Parameters`?

Ví dụ:

interface Box<T = string> { content: T; } const stringBox: Box = { content: "Hello" }; // T mặc định là string const numberBox: Box<number> = { content: 42 }; // Ghi đè kiểu T

Phân tích:

T = string: Gán giá trị mặc định cho T nếu không được cung cấp.
Giúp đơn giản hóa khai báo và sử dụng các kiểu generic.

64. Kết hợp `Union` và `Mapped Types`

Ví dụ:

type Roles = "admin" | "user" | "guest"; type RolePermissions = { [K in Roles]: K extends "admin" ? "all" : K extends "user" ? "read-write" : "read-only"; }; const permissions: RolePermissions = { admin: "all", user: "read-write", guest: "read-only", };

Phân tích:

[K in Roles]: Tạo cấu trúc dữ liệu từ Roles.
Sử dụng Conditional Types để gán giá trị dựa trên từng vai trò.

65. Sử dụng `Key Remapping` với `Conditional Types`

Ví dụ:

type RemoveId<T> = { [K in keyof T as K extends "id" ? never : K]: T[K]; }; interface User { id: number; name: string; age: number; } type UserWithoutId = RemoveId<User>; const user: UserWithoutId = { name: "Alice", age: 30 }; // Hợp lệ

Phân tích:

K extends "id" ? never : K: Loại bỏ thuộc tính id khỏi kiểu ban đầu.
as: Đổi tên hoặc loại bỏ khóa trong Mapped Types.

66. Sử dụng `Index Signature` linh hoạt hơn

Ví dụ:

interface FlexibleObject<T> { [key: string]: T | undefined; } const data: FlexibleObject<number> = { a: 1, b: 2, }; console.log(data["a"]); // 1 console.log(data["z"]); // undefined

Phân tích:

[key: string]: T | undefined: Cho phép giá trị không tồn tại trả về undefined.
Hữu ích khi làm việc với các đối tượng động.

67. Tự động chuyển `CamelCase` trong TypeScript

Ví dụ:

type CamelCase<S extends string> = S extends `${infer P}_${infer R}` ? `${P}${Capitalize<CamelCase<R>>}` : S; type Result = CamelCase<"hello_world_type">; // "helloWorldType"

Phân tích:

Sử dụng Template Literal Types để chuyển đổi tên kiểu.
Capitalize: Chuyển ký tự đầu tiên thành chữ in hoa.

68. Sử dụng `Tagged Template Literal Types`

Ví dụ:

type Color = `#${string}`; const red: Color = "#FF0000"; // Hợp lệ // const invalidColor: Color = "FF0000"; // Lỗi

Phân tích:

#${string}: Định nghĩa kiểu chuỗi có mẫu bắt đầu bằng #.
Hữu ích khi làm việc với các giá trị cần định dạng cụ thể.

69. Kết hợp `Generic` với `Interface`

Ví dụ:

interface ApiResponse<T> { data: T; status: number; } const response: ApiResponse<string> = { data: "Success", status: 200, };

Phân tích:

ApiResponse<T>: Tùy chỉnh kiểu của data dựa trên T.
Cho phép tái sử dụng cấu trúc chung cho nhiều loại dữ liệu khác nhau.

70. Sử dụng `Dynamic Return Types` với `Generics`

Ví dụ:

function createArray<T>(length: number, value: T): T[] { return Array(length).fill(value); } const numbers = createArray(3, 42); // number[] const strings = createArray(2, "hello"); // string[]

Phân tích:

T: Tham số kiểu xác định kiểu phần tử trong mảng.
Hàm createArray trả về mảng có kiểu động dựa trên T.

71. Đảm bảo `Strictly Typed Object` với `Record`

Ví dụ:

type Config = Record<"host" | "port", string>; const serverConfig: Config = { host: "localhost", port: "8080", };

Phân tích:

Record<"host" | "port", string>: Yêu cầu đối tượng có hai thuộc tính host và port với kiểu string.
Giúp đảm bảo cấu trúc đối tượng chính xác.

72. Làm thế nào để xử lý `Intersection Types` với kiểu động?

Ví dụ:

type A = { id: number; name: string }; type B = { age: number }; type AB = A & B; const user: AB = { id: 1, name: "Alice", age: 30 }; // Hợp lệ

Phân tích:

A & B: Kết hợp các thuộc tính của cả hai kiểu A và B.
Giá trị phải thỏa mãn tất cả các thuộc tính trong cả hai kiểu.

73. Tạo `Custom Utility Types`

Ví dụ:

type Nullable<T> = T | null; type User = { id: number; name: string; }; type NullableUser = Nullable<User>; const user: NullableUser = null; // Hợp lệ

Phân tích:

T | null: Mở rộng kiểu T để bao gồm null.
Hữu ích khi làm việc với các giá trị tùy chọn.

74. Làm thế nào để kiểm soát `Deep Partial` trong TypeScript?

Ví dụ:

type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]; }; interface User { id: number; profile: { name: string; address: { city: string; zip: number; }; }; } const partialUser: DeepPartial<User> = { profile: { address: { city: "Wonderland", }, }, };

Phân tích:

T[P] extends object ? DeepPartial<T[P]> : T[P]: Tạo kiểu tùy chọn đệ quy cho tất cả các thuộc tính, bao gồm cả thuộc tính lồng nhau.
Hữu ích khi cần làm việc với dữ liệu chưa đầy đủ.

75. Làm thế nào để sử dụng `Typeof` trong TypeScript để tái sử dụng kiểu?

Ví dụ:

const config = { apiUrl: "https://api.example.com", timeout: 3000, }; type Config = typeof config; const appConfig: Config = { apiUrl: "https://api.new-example.com", timeout: 5000, };

Phân tích:

typeof config: Trích xuất kiểu từ đối tượng config.
Hữu ích để đảm bảo rằng các cấu hình mới tuân theo kiểu của cấu hình gốc.

76. Sử dụng `Type Guards` với `In` Operator

Ví dụ:

type Dog = { bark: () => void }; type Cat = { meow: () => void }; function isDog(pet: Dog | Cat): pet is Dog { return "bark" in pet; } function makeSound(pet: Dog | Cat) { if (isDog(pet)) { pet.bark(); } else { pet.meow(); } }

Phân tích:

"bark" in pet: Kiểm tra nếu thuộc tính bark tồn tại trong đối tượng pet.
Dùng để phân biệt kiểu trong Union Type.

77. Sử dụng `Template Literal Types` để định nghĩa API cụ thể

Ví dụ:

type Endpoint = "users" | "posts" | "comments"; type HttpMethod = "GET" | "POST"; type ApiPath = `${HttpMethod} /${Endpoint}`; const apiPath: ApiPath = "GET /users"; // Hợp lệ // const invalidPath: ApiPath = "DELETE /users"; // Lỗi

Phân tích:

${HttpMethod} /${Endpoint}: Kết hợp kiểu chuỗi để tạo các đường dẫn API cụ thể.
Dùng để xác thực các giá trị đầu vào có cấu trúc cụ thể.

78. Sử dụng `Tuple Types` với độ dài cố định

Ví dụ:

type ThreeNumbers = [number, number, number]; const numbers: ThreeNumbers = [1, 2, 3]; // Hợp lệ // const invalidNumbers: ThreeNumbers = [1, 2]; // Lỗi

Phân tích:

[number, number, number]: Yêu cầu mảng có đúng ba phần tử kiểu number.
Hữu ích khi làm việc với các mảng có kích thước cố định.

79. Sử dụng `Parameters` và `ReturnType` để trích xuất kiểu từ hàm

Ví dụ:

function add(a: number, b: number): number { return a + b; } type AddParams = Parameters<typeof add>; // [number, number] type AddReturn = ReturnType<typeof add>; // number const params: AddParams = [2, 3]; const result: AddReturn = add(...params);

Phân tích:

Parameters<typeof add>: Lấy kiểu tham số của hàm add.
ReturnType<typeof add>: Lấy kiểu trả về của hàm add.

80. Sử dụng `Infer` trong `Mapped Types` để xử lý kiểu phức tạp

Ví dụ:

type ExtractPromiseType<T> = T extends Promise<infer U> ? U : never; type Result = ExtractPromiseType<Promise<number>>; // number

Phân tích:

infer U: Suy diễn kiểu bên trong Promise.
Hữu ích khi làm việc với kiểu phức tạp như Promise hoặc Observable.

81. Làm thế nào để sử dụng `Awaited` trong TypeScript?

Ví dụ:

type AsyncResult<T> = T extends Promise<infer U> ? U : T; type Result = AsyncResult<Promise<string>>; // string type DirectValue = AsyncResult<number>; // number

Phân tích:

Awaited<T> (hoặc AsyncResult<T> tự tạo): Trích xuất kiểu giá trị mà Promise trả về.
Giúp làm việc với các hàm không đồng bộ dễ dàng hơn.

82. Làm thế nào để bảo vệ dữ liệu bằng `Branding` trong TypeScript?

Ví dụ:

type UserId = string & { readonly brand: unique symbol }; function createUserId(id: string): UserId { return id as UserId; } const userId = createUserId("12345"); // userId = "67890"; // Lỗi: Không thể gán trực tiếp

Phân tích:

readonly brand: unique symbol: Tạo kiểu riêng biệt dựa trên string.
Hữu ích khi cần phân biệt các giá trị tương tự nhưng không thể hoán đổi.

83. Sử dụng `ReadonlyTuple` để ngăn chặn thay đổi

Ví dụ:

type ReadonlyTuple = readonly [number, string]; const tuple: ReadonlyTuple = [1, "hello"]; // tuple[0] = 2; // Lỗi: Tuple là readonly

Phân tích:

readonly [number, string]: Đảm bảo tuple không thể bị thay đổi sau khi khởi tạo.

84. Làm thế nào để xử lý kiểu động với `Record` và `Union`?

Ví dụ:

type Actions = "start" | "stop" | "pause"; type ActionHandlers = Record<Actions, () => void>; const handlers: ActionHandlers = { start: () => console.log("Starting"), stop: () => console.log("Stopping"), pause: () => console.log("Pausing"), };

Phân tích:

Record<Actions, () => void>: Đảm bảo mọi giá trị trong Actions đều có handler.
Hữu ích khi cần ánh xạ hành động và logic.

85. Làm thế nào để tạo kiểu `Exhaustive Check` với `never`?

Ví dụ:

type Shape = | { kind: "circle"; radius: number } | { kind: "rectangle"; width: number; height: number }; function getArea(shape: Shape): number { switch (shape.kind) { case "circle": return Math.PI * shape.radius ** 2; case "rectangle": return shape.width * shape.height; default: const exhaustiveCheck: never = shape; // Lỗi nếu có trường hợp không xử lý throw new Error(`Unhandled shape: ${exhaustiveCheck}`); } }

Phân tích:

const exhaustiveCheck: never: Đảm bảo tất cả các trường hợp trong Shape đều được xử lý.
Hữu ích khi mở rộng Union Type và tránh lỗi quên xử lý trường hợp mới.

86. Sử dụng `Mapped Types` để biến đổi thuộc tính thành tùy chọn (`Optional`)

Ví dụ:

type Optional<T> = { [P in keyof T]?: T[P]; }; interface User { id: number; name: string; email: string; } type OptionalUser = Optional<User>; const user: OptionalUser = { name: "Alice", // Các thuộc tính khác có thể bị bỏ qua };

Phân tích:

[P in keyof T]?: T[P]: Biến tất cả các thuộc tính của T thành tùy chọn.
Hữu ích khi làm việc với các đối tượng chưa đầy đủ thông tin hoặc trong các biểu mẫu.

87. Sử dụng `Pick` để lấy một phần thuộc tính từ kiểu

Ví dụ:

interface User { id: number; name: string; email: string; } type UserBasicInfo = Pick<User, "id" | "name">; const user: UserBasicInfo = { id: 1, name: "Alice", };

Phân tích:

Pick<User, "id" | "name">: Chỉ giữ lại các thuộc tính id và name từ User.
Dùng để tạo kiểu nhỏ gọn từ một kiểu lớn.

88. Sử dụng `Omit` để loại bỏ một số thuộc tính

Ví dụ:

interface User { id: number; name: string; email: string; } type UserWithoutEmail = Omit<User, "email">; const user: UserWithoutEmail = { id: 1, name: "Alice", };

Phân tích:

Omit<User, "email">: Loại bỏ thuộc tính email khỏi kiểu User.
Hữu ích khi cần tránh các thuộc tính không cần thiết trong một ngữ cảnh cụ thể.

89. Sử dụng `Partial` để làm tất cả thuộc tính thành tùy chọn

Ví dụ:

interface User { id: number; name: string; email: string; } type PartialUser = Partial<User>; const user: PartialUser = { name: "Alice", };

Phân tích:

Partial<User>: Biến tất cả các thuộc tính trong kiểu User thành tùy chọn.
Tương tự như tự tạo Mapped Type nhưng có sẵn trong TypeScript.

90. Sử dụng `Required` để làm tất cả thuộc tính bắt buộc

Ví dụ:

interface User { id?: number; name?: string; } type CompleteUser = Required<User>; const user: CompleteUser = { id: 1, name: "Alice", // Tất cả thuộc tính giờ đều bắt buộc };

Phân tích:

Required<User>: Biến tất cả các thuộc tính tùy chọn trong kiểu User thành bắt buộc.
Hữu ích khi cần đảm bảo mọi thuộc tính đều phải được khởi tạo.

91. Sử dụng `Readonly` để làm tất cả thuộc tính chỉ đọc

Ví dụ:

interface User { id: number; name: string; } type ReadonlyUser = Readonly<User>; const user: ReadonlyUser = { id: 1, name: "Alice", }; // user.id = 2; // Lỗi: Thuộc tính chỉ đọc

Phân tích:

Readonly<User>: Biến tất cả các thuộc tính trong kiểu User thành readonly.
Dùng để bảo vệ dữ liệu không bị thay đổi.

92. Tạo kiểu `Conditional Types` cho tham số

Ví dụ:

type IsString<T> = T extends string ? "Yes" : "No"; type Test1 = IsString<string>; // "Yes" type Test2 = IsString<number>; // "No"

Phân tích:

T extends string ? "Yes" : "No": Kiểm tra kiểu T có phải là string hay không.
Conditional Types hữu ích khi cần xử lý logic kiểu.

93. Sử dụng `Index Access Types` để trích xuất kiểu của thuộc tính

Ví dụ:

interface User { id: number; name: string; } type UserIdType = User["id"]; // number

Phân tích:

User["id"]: Trích xuất kiểu của thuộc tính id trong User.
Hữu ích khi cần tái sử dụng kiểu của một thuộc tính cụ thể.

94. Làm thế nào để sử dụng `Union` với `Index Signatures`?

Ví dụ:

interface Config { [key: string]: string | number; } const config: Config = { host: "localhost", port: 8080, };

Phân tích:

[key: string]: string | number: Cho phép đối tượng có các thuộc tính động với kiểu string hoặc number.
Dùng trong các trường hợp cần cấu hình linh hoạt.

95. Sử dụng `Union` để tạo kiểu kết hợp

Ví dụ:

type UserRole = "admin" | "user" | "guest"; function getRole(role: UserRole) { console.log(`Role: ${role}`); } getRole("admin"); // Hợp lệ // getRole("manager"); // Lỗi: Không nằm trong Union

Phân tích:

"admin" | "user" | "guest": Định nghĩa kiểu Union.
Đảm bảo giá trị chỉ nằm trong các giá trị hợp lệ được chỉ định.

96. Tạo kiểu `Intersection` để kết hợp thuộc tính

Ví dụ:

type WithTimestamp = { createdAt: Date; updatedAt: Date }; type User = { id: number; name: string }; type UserWithTimestamp = User & WithTimestamp; const user: UserWithTimestamp = { id: 1, name: "Alice", createdAt: new Date(), updatedAt: new Date(), };

Phân tích:

User & WithTimestamp: Kết hợp hai kiểu để tạo một kiểu mới.
Hữu ích khi cần mở rộng kiểu cho các đối tượng phức tạp.

97. Sử dụng `NonNullable` để loại bỏ `null` và `undefined`

Ví dụ:

type StrictString = NonNullable<string | null | undefined>; const value: StrictString = "Hello"; // Hợp lệ // const invalidValue: StrictString = null; // Lỗi

Phân tích:

NonNullable<T>: Loại bỏ null và undefined khỏi kiểu T.
Hữu ích khi cần đảm bảo giá trị luôn tồn tại.

98. Làm thế nào để tạo kiểu `Deep Required`?

Ví dụ:

type DeepRequired<T> = { [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P]; }; interface User { id?: number; profile?: { name?: string; address?: { city?: string; }; }; } type StrictUser = DeepRequired<User>; const user: StrictUser = { id: 1, profile: { name: "Alice", address: { city: "Wonderland", }, }, };

Phân tích:

[P in keyof T]-?: Loại bỏ optional modifier (?) từ tất cả các thuộc tính.
Đệ quy để áp dụng cho các thuộc tính lồng nhau.

150 câu hỏi phỏng vấn javascript kèm lời giải chi tiết từ A-Z

117 min
1 năm ago
151

Câu hỏi 1: Khác biệt giữa var, let, và const là gì? Phân tích chi tiết: Câu hỏi 2: Giải thích cách hoạt động của this trong JavaScript. Phân tích chi tiết: Câu hỏi 3: Sự khác biệt giữa == và ===? […]

Tagged #javascript

Phân tích chi tiết:

// Ví dụ 1: var function testVar() { var x = 10; if (true) { var x = 20; // Re-declare trong cùng scope console.log(x); // Output: 20 } console.log(x); // Output: 20 } testVar();

var có scope là function hoặc toàn cục, không bị ràng buộc trong block {}.
Có thể khai báo lại biến (re-declare) mà không bị lỗi.

// Ví dụ 2: let function testLet() { let x = 10; if (true) { let x = 20; // Scope riêng trong block console.log(x); // Output: 20 } console.log(x); // Output: 10 } testLet();

let có scope là block {}.
Không cho phép khai báo lại biến trong cùng một scope.

// Ví dụ 3: const function testConst() { const x = 10; x = 20; // Error: Assignment to constant variable } testConst();

const dùng để khai báo hằng số.
Không thể thay đổi giá trị sau khi đã gán.

Câu hỏi 2: Giải thích cách hoạt động của `this` trong JavaScript.

Phân tích chi tiết:

Trong hàm bình thường: function showThis() { console.log(this); } showThis(); // Output: global object (trong trình duyệt là window, trong Node.js là global)
- Khi gọi hàm thông thường, this tham chiếu đến global object.
Trong phương thức của object: const obj = { value: 42, showThis() { console.log(this.value); }, }; obj.showThis(); // Output: 42
- Trong phương thức của object, this tham chiếu đến chính object đó.
Arrow function: const obj = { value: 42, showThis: () => { console.log(this); }, }; obj.showThis(); // Output: global object
- Trong arrow function, this không tham chiếu đến object chứa nó mà thừa hưởng giá trị this từ scope bao ngoài.
Bind, Call, Apply: function showThis(param) { console.log(this.name, param); } const obj = { name: "Alice" }; showThis.call(obj, "test"); // Output: Alice test showThis.apply(obj, ["test"]); // Output: Alice test const boundFunc = showThis.bind(obj, "test"); boundFunc(); // Output: Alice test
- call và apply thay đổi this của hàm và thực thi ngay.
- bind trả về một hàm mới với this cố định.

Câu hỏi 3: Sự khác biệt giữa `==` và `===`?

Phân tích chi tiết:

console.log(5 == "5"); // Output: true console.log(5 === "5"); // Output: false

== so sánh giá trị sau khi thực hiện ép kiểu ngầm định (type coercion).
=== so sánh cả giá trị và kiểu dữ liệu.

Ví dụ chi tiết về ép kiểu:

console.log(true == 1); // Output: true (true được chuyển thành 1) console.log(null == undefined); // Output: true console.log([] == 0); // Output: true (mảng rỗng chuyển thành số 0)

Câu hỏi 4: Giải thích về `Promise` và cách sử dụng.

Phân tích chi tiết:

const promise = new Promise((resolve, reject) => { const success = true; if (success) { resolve("Operation successful"); } else { reject("Operation failed"); } }); promise .then((result) => { console.log(result); // Output: Operation successful }) .catch((error) => { console.error(error); });

Promise đại diện cho một giá trị sẽ có trong tương lai.
Trạng thái của Promise:
- Pending: Đang xử lý.
- Fulfilled: Xử lý thành công (resolve).
- Rejected: Xử lý thất bại (reject).
Các phương thức chính:
- then: Xử lý khi thành công.
- catch: Xử lý khi thất bại.
- finally: Luôn được gọi, dù thành công hay thất bại.

Câu hỏi 5: Sử dụng `async/await` để làm việc với async code.

Phân tích chi tiết:

function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function asyncExample() { console.log("Start"); await delay(1000); // Tạm dừng 1 giây console.log("After 1 second"); } asyncExample();

async biến một hàm thành bất đồng bộ.
await tạm dừng việc thực thi cho đến khi Promise được resolve.
Lợi ích:
- Code rõ ràng hơn so với then/catch.
- Dễ đọc và gỡ lỗi.

Câu hỏi 6: Hoisting trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm: Hoisting là cơ chế trong JavaScript, nơi khai báo biến, hàm hoặc class được “nâng lên” (hoisted) lên đầu phạm vi trước khi thực thi code.

console.log(x); // Output: undefined var x = 10;

Biến x được “hoisted” nhưng chỉ phần khai báo (var x), không phải giá trị gán.
Thực chất, đoạn trên được hiểu như sau: var x; console.log(x); // undefined x = 10;

Hoisting hoạt động khác nhau với var, let, và const:

console.log(a); // undefined var a = 5; console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 10; console.log(c); // ReferenceError: Cannot access 'c' before initialization const c = 15;

var: Được hoisted và khởi tạo với giá trị undefined.
let & const: Được hoisted nhưng không khởi tạo giá trị. Truy cập trước khi khai báo gây lỗi ReferenceError.

Hoisting cũng áp dụng cho hàm:

sayHello(); // Output: Hello, world! function sayHello() { console.log("Hello, world!"); }

Hàm khai báo (function declaration) được hoisted toàn bộ.
Tuy nhiên, hàm biểu thức (function expression) không được hoisted: greet(); // TypeError: greet is not a function var greet = function () { console.log("Hi!"); };

Câu hỏi 7: Event Loop trong JavaScript là gì?

Phân tích chi tiết:

Event Loop là cơ chế xử lý các tác vụ bất đồng bộ trong JavaScript, như setTimeout, Promise, và các event.

Call Stack: Nơi các hàm được thực thi tuần tự.
Task Queue: Hàng đợi chứa các callback từ setTimeout hoặc event.
Microtask Queue: Hàng đợi chứa các callback từ Promise hoặc MutationObserver.

Ví dụ minh họa:

console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End");

Kết quả:

Start End Promise Timeout

console.log("Start") và console.log("End") được thực thi đầu tiên vì chúng nằm trong Call Stack.
Callback từ Promise được đặt vào Microtask Queue và ưu tiên thực thi trước Task Queue (callback từ setTimeout).

Câu hỏi 8: Giải thích `closure` trong JavaScript.

Phân tích chi tiết:

Khái niệm: Closure là hàm “ghi nhớ” phạm vi nơi nó được tạo ra, ngay cả khi phạm vi đó không còn tồn tại.

Ví dụ:

function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // Output: 1 counter(); // Output: 2 counter(); // Output: 3

Hàm inner là một closure, vì nó truy cập được biến count từ phạm vi của outer ngay cả khi outer đã kết thúc.
Mỗi lần gọi counter, biến count vẫn được lưu trữ trong bộ nhớ.

Câu hỏi 9: Sự khác biệt giữa `null` và `undefined`?

Phân tích chi tiết:

null: Đại diện cho giá trị “trống rỗng” do lập trình viên chỉ định.
undefined: Đại diện cho biến chưa được gán giá trị.

Ví dụ:

let a; console.log(a); // undefined let b = null; console.log(b); // null

So sánh:

console.log(null == undefined); // true (vì so sánh giá trị) console.log(null === undefined); // false (vì khác kiểu dữ liệu)

Câu hỏi 10: Sự khác biệt giữa `spread` và `rest` operators (`...`)?

Phân tích chi tiết:

Spread operator: Dùng để tách các phần tử của mảng hoặc object. const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 }
Rest operator: Dùng để gom nhóm các tham số hoặc phần tử còn lại. function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // Output: 6 const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4]

Câu hỏi 11: Khác biệt giữa `map`, `filter`, và `reduce`?

Phân tích chi tiết:

map: Duyệt qua mảng và trả về mảng mới với kết quả đã được biến đổi. const nums = [1, 2, 3]; const doubled = nums.map((num) => num * 2); console.log(doubled); // [2, 4, 6]
filter: Lọc mảng dựa trên điều kiện, trả về mảng mới. const nums = [1, 2, 3, 4]; const evens = nums.filter((num) => num % 2 === 0); console.log(evens); // [2, 4]
reduce: Tính toán một giá trị duy nhất dựa trên mảng. const nums = [1, 2, 3]; const sum = nums.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 6

Câu hỏi 12: Giải thích về `Prototype` trong JavaScript.

Phân tích chi tiết:

function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const alice = new Person("Alice"); alice.greet(); // Output: Hello, my name is Alice

Prototype: Là một object được liên kết với mọi function và object trong JavaScript.
Hàm Person có một thuộc tính prototype, nơi chứa các phương thức và thuộc tính dùng chung.
Các object được tạo từ hàm Person sẽ kế thừa các phương thức từ Person.prototype.

Câu hỏi 13: Khác biệt giữa `Object.create()` và `new` trong JavaScript?

Phân tích chi tiết:

Object.create():
- Dùng để tạo một object mới, với prototype được chỉ định.
- Không gọi hàm khởi tạo (constructor).
const person = { greet() { console.log(`Hello, my name is ${this.name}`); }, }; const alice = Object.create(person); alice.name = "Alice"; alice.greet(); // Output: Hello, my name is Alice
- alice là một object kế thừa từ person.
new:
- Dùng để tạo một object mới dựa trên một constructor function.
- Gọi hàm khởi tạo.
function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const bob = new Person("Bob"); bob.greet(); // Output: Hello, my name is Bob

So sánh:

Object.create(): Linh hoạt hơn vì cho phép tạo object mà không cần hàm khởi tạo.
new: Sử dụng phổ biến hơn khi muốn tạo object từ constructor function hoặc class.

Câu hỏi 14: Khác biệt giữa `forEach`, `for...of`, và `for...in`?

Phân tích chi tiết:

forEach:
- Dùng để duyệt qua mảng.
- Không thể dừng (break) hoặc thoát sớm.
const arr = [1, 2, 3]; arr.forEach((num) => console.log(num)); // Output: 1, 2, 3
for...of:
- Duyệt qua các iterable objects như mảng, chuỗi, Set, Map.
- Có thể dừng bằng break hoặc continue.
const arr = [1, 2, 3]; for (const num of arr) { console.log(num); } // Output: 1, 2, 3
for...in:
- Duyệt qua các thuộc tính liệt kê của một object (bao gồm cả thuộc tính kế thừa).
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key, obj[key]); } // Output: a 1, b 2

Lưu ý: Không dùng for...in để duyệt mảng vì nó sẽ duyệt cả chỉ số mảng.

Câu hỏi 15: Sự khác biệt giữa `setTimeout` và `setInterval`?

Phân tích chi tiết:

setTimeout:
- Chạy một hàm sau khoảng thời gian nhất định.
- Chỉ chạy một lần.
setTimeout(() => { console.log("This runs after 1 second"); }, 1000);
setInterval:
- Chạy một hàm sau khoảng thời gian nhất định và lặp lại.
- Cần dừng thủ công bằng clearInterval.
const interval = setInterval(() => { console.log("This runs every 1 second"); }, 1000); setTimeout(() => { clearInterval(interval); // Dừng sau 5 giây }, 5000);

Lưu ý:

Nếu sử dụng không cẩn thận, setInterval có thể gây lỗi hiệu suất do chạy vô hạn.

Câu hỏi 16: Giải thích về `Destructuring Assignment` trong JavaScript.

Phân tích chi tiết:

Với mảng: const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // Output: 1 2 3
- Dùng để gán các phần tử của mảng vào biến.
Với object: const obj = { x: 10, y: 20 }; const { x, y } = obj; console.log(x, y); // Output: 10 20
- Dùng để gán các thuộc tính của object vào biến.
- Có thể đổi tên biến: const { x: a, y: b } = obj; console.log(a, b); // Output: 10 20
Giá trị mặc định: const [a = 5, b = 10] = [1]; console.log(a, b); // Output: 1 10

Câu hỏi 17: `Debounce` và `Throttle` là gì?

Phân tích chi tiết:

Debounce:
- Trì hoãn việc thực hiện hàm cho đến khi không còn sự kiện nào xảy ra trong một khoảng thời gian.
- Phù hợp cho các tác vụ tốn kém tài nguyên như tìm kiếm, resize.
function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func(...args), delay); }; } const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);
Throttle:
- Đảm bảo hàm chỉ được gọi một lần trong một khoảng thời gian cụ thể.
- Phù hợp cho các tác vụ như scroll, resize.
function throttle(func, limit) { let lastFunc; let lastRan; return function (...args) { const now = Date.now(); if (!lastRan || now - lastRan >= limit) { func(...args); lastRan = now; } }; } const log = throttle(() => console.log("Throttled!"), 1000); window.addEventListener("scroll", log);

Câu hỏi 18: JSON là gì? Cách parse và stringify JSON trong JavaScript?

Phân tích chi tiết:

JSON:
- Viết tắt của JavaScript Object Notation.
- Dùng để biểu diễn dữ liệu dưới dạng chuỗi.
Parse JSON: const jsonString = '{"name": "Alice", "age": 25}'; const obj = JSON.parse(jsonString); console.log(obj.name); // Output: Alice
Stringify JSON: const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: {"name":"Alice","age":25}
Lưu ý:
- JSON chỉ hỗ trợ các kiểu: chuỗi, số, object, mảng, boolean, null.
- Không hỗ trợ undefined, hàm, hoặc symbol.

Câu hỏi 19: `typeof`, `instanceof`, và `Object.prototype.toString.call` khác nhau thế nào?

Phân tích chi tiết:

typeof:
- Trả về kiểu dữ liệu của giá trị.
console.log(typeof 42); // "number" console.log(typeof "Hello"); // "string" console.log(typeof null); // "object" (lỗi trong JavaScript)
instanceof:
- Kiểm tra xem một object có phải là instance của một constructor.
console.log([] instanceof Array); // true console.log([] instanceof Object); // true
Object.prototype.toString.call:
- Trả về chính xác kiểu dữ liệu.
console.log(Object.prototype.toString.call([])); // "[object Array]" console.log(Object.prototype.toString.call(null)); // "[object Null]"

Câu hỏi 20: Sự khác biệt giữa `call`, `apply`, và `bind` trong JavaScript?

Phân tích chi tiết:

call:
- Gọi hàm và cho phép xác định this, đồng thời truyền tham số trực tiếp.
function greet(greeting) { console.log(`${greeting}, my name is ${this.name}`); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, my name is Alice
apply:
- Tương tự call, nhưng truyền tham số dưới dạng mảng.
greet.apply(person, ["Hi"]); // Output: Hi, my name is Alice
bind:
- Trả về một hàm mới với this được cố định, nhưng không thực thi ngay.
const boundGreet = greet.bind(person, "Hey"); boundGreet(); // Output: Hey, my name is Alice

So sánh:

call và apply: Gọi hàm ngay lập tức.
bind: Trả về một hàm mới.

Câu hỏi 21: Sự khác biệt giữa `async` và `defer` trong thẻ `<script>`?

Phân tích chi tiết:

async:
- Tải script song song với HTML, nhưng thực thi ngay khi script tải xong.
- Có thể gây ra lỗi nếu script phụ thuộc vào DOM hoặc các script khác.
<script src="script.js" async></script>
defer:
- Tải script song song với HTML, nhưng chỉ thực thi sau khi toàn bộ HTML đã được phân tích xong.
- Đảm bảo thứ tự thực thi nếu có nhiều script.
<script src="script.js" defer></script>

So sánh:

async: Nhanh hơn nhưng không đảm bảo thứ tự.
defer: Đảm bảo thứ tự, phù hợp với script phụ thuộc vào DOM.

Câu hỏi 22: Khái niệm `Immutable` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Immutable (bất biến) nghĩa là không thể thay đổi giá trị sau khi được tạo.
- Một số kiểu dữ liệu nguyên thủy như string, number, và boolean là bất biến.
const str = "hello"; const newStr = str.toUpperCase(); console.log(str); // Output: hello (không thay đổi) console.log(newStr); // Output: HELLO
Làm việc với object/mảng bất biến:
- Sử dụng Object.freeze để ngăn object bị sửa đổi.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi console.log(obj.a); // Output: 1
- Với mảng:
const arr = [1, 2, 3]; const newArr = [...arr, 4]; console.log(newArr); // Output: [1, 2, 3, 4]

Câu hỏi 23: Khác biệt giữa `deep copy` và `shallow copy`?

Phân tích chi tiết:

Shallow copy:
- Sao chép cấp đầu tiên, các tham chiếu bên trong vẫn trỏ về cùng object.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { ...obj1 }; obj2.b.c = 3; console.log(obj1.b.c); // Output: 3 (tham chiếu chung)
Deep copy:
- Sao chép toàn bộ, không chia sẻ tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = JSON.parse(JSON.stringify(obj1)); obj2.b.c = 3; console.log(obj1.b.c); // Output: 2 (không ảnh hưởng)Lưu ý: Cách trên không hỗ trợ function hoặc undefined.
- Deep copy bằng thư viện: const lodash = require("lodash"); const obj2 = lodash.cloneDeep(obj1);

Câu hỏi 24: Giải thích về `Event Delegation`.

Phân tích chi tiết:

Khái niệm: Event Delegation là kỹ thuật xử lý sự kiện ở cấp độ cha, thay vì gắn trực tiếp vào từng phần tử con.

Ví dụ:

document.getElementById("parent").addEventListener("click", (event) => { if (event.target && event.target.matches("button.className")) { console.log("Button clicked!"); } });

Lợi ích:
- Giảm số lượng event listeners.
- Dễ dàng quản lý các phần tử được thêm mới sau này.
Cách hoạt động:
- Event “bubbling” (sự kiện nổi lên): Sự kiện lan truyền từ phần tử con đến cha.
- Kiểm tra event.target để biết phần tử nào kích hoạt sự kiện.

Câu hỏi 25: Temporal Dead Zone (TDZ) là gì?

Phân tích chi tiết:

Khái niệm:

TDZ là khoảng thời gian từ lúc biến được hoisted đến khi biến được khởi tạo.

Ví dụ:

console.log(a); // ReferenceError: Cannot access 'a' before initialization let a = 5;

Biến a được hoisted, nhưng không khởi tạo giá trị.
Khi truy cập a trước khi gán giá trị, sẽ xảy ra lỗi ReferenceError.

Câu hỏi 26: Custom Events trong JavaScript là gì?

Phân tích chi tiết:

Tạo và sử dụng sự kiện tùy chỉnh:

const customEvent = new Event("customEvent"); document.addEventListener("customEvent", () => { console.log("Custom event triggered!"); }); document.dispatchEvent(customEvent); // Output: Custom event triggered!

Sử dụng dữ liệu trong sự kiện:

const customEvent = new CustomEvent("customEvent", { detail: { key: "value" }, }); document.addEventListener("customEvent", (event) => { console.log(event.detail); // Output: { key: "value" } }); document.dispatchEvent(customEvent);

Event: Sử dụng cho sự kiện đơn giản.
CustomEvent: Hỗ trợ truyền dữ liệu.

Câu hỏi 27: WeakMap và WeakSet là gì?

Phân tích chi tiết:

WeakMap:
- Key phải là object.
- Không ngăn chặn thu gom rác (garbage collection).
const wm = new WeakMap(); let obj = { key: "value" }; wm.set(obj, "data"); console.log(wm.get(obj)); // Output: "data" obj = null; // Object bị xóa khỏi WeakMap
WeakSet:
- Chỉ chứa các object.
- Không có .size hoặc .forEach.
const ws = new WeakSet(); let obj = { key: "value" }; ws.add(obj); console.log(ws.has(obj)); // Output: true obj = null; // Object bị xóa khỏi WeakSet

Lợi ích:

Tăng hiệu quả bộ nhớ, tự động xóa object không còn tham chiếu.

Câu hỏi 28: `Symbol` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Symbol là một kiểu dữ liệu nguyên thủy, được dùng để tạo ra các giá trị duy nhất.
- Phù hợp để sử dụng làm key của object, tránh xung đột với các key khác.
const sym1 = Symbol("description"); const sym2 = Symbol("description"); console.log(sym1 === sym2); // Output: false (mỗi Symbol là duy nhất)
Sử dụng Symbol làm key: const obj = {}; const sym = Symbol("key"); obj[sym] = "value"; console.log(obj[sym]); // Output: "value" console.log(obj); // Object không hiển thị key Symbol khi console
Symbol và thuộc tính đặc biệt: const obj = { [Symbol.toPrimitive](hint) { return hint === "number" ? 42 : "default"; }, }; console.log(+obj); // Output: 42 console.log(`${obj}`); // Output: default

Lợi ích:

Đảm bảo tính duy nhất, tránh ghi đè trong object.
Tạo các thuộc tính không thể truy cập qua vòng lặp for...in.

Câu hỏi 29: Sự khác biệt giữa ES5 và ES6?

Phân tích chi tiết:

Một số điểm khác biệt quan trọng:

Khai báo biến:
- ES5: Chỉ có var.
- ES6: Thêm let và const.
Template literals: // ES5 var greeting = "Hello, " + name + "!"; // ES6 const greeting = `Hello, ${name}!`;
Arrow function: // ES5 var add = function (a, b) { return a + b; }; // ES6 const add = (a, b) => a + b;
Destructuring: // ES5 var x = obj.x; var y = obj.y; // ES6 const { x, y } = obj;
Modules:
- ES5: Sử dụng require và module.exports.
- ES6: Sử dụng import và export.
Class: // ES5 function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; // ES6 class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}`); } }

Câu hỏi 30: Sự khác biệt giữa `Function Declaration` và `Function Expression`?

Phân tích chi tiết:

Function Declaration:
- Được hoisted, có thể gọi trước khi khai báo.
sayHello(); function sayHello() { console.log("Hello!"); }
Function Expression:
- Không được hoisted, chỉ có thể gọi sau khi khai báo.
const sayHello = function () { console.log("Hello!"); }; sayHello(); // Output: Hello!
Arrow Function (một dạng Function Expression):
- Không có this, arguments, hoặc prototype.
const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5

Câu hỏi 31: Sự khác biệt giữa `setTimeout` và `Promise` trong xử lý bất đồng bộ?

Phân tích chi tiết:

setTimeout:
- Đưa callback vào Task Queue và được xử lý sau khi Call Stack trống.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Kết quả: Start End Timeout
Promise:
- Đưa callback vào Microtask Queue, được ưu tiên xử lý trước Task Queue.
console.log("Start"); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Kết quả: Start End Promise

So sánh:

Promise được ưu tiên hơn setTimeout.
Sử dụng Promise để làm việc với các tác vụ phức tạp hơn.

Câu hỏi 32: Khác biệt giữa `Array` và `Set`?

Phân tích chi tiết:

Array:
- Lưu trữ các giá trị theo thứ tự.
- Cho phép phần tử trùng lặp.
const arr = [1, 2, 2, 3]; console.log(arr); // Output: [1, 2, 2, 3]
Set:
- Lưu trữ các giá trị duy nhất.
- Không cho phép phần tử trùng lặp.
const set = new Set([1, 2, 2, 3]); console.log(set); // Output: Set {1, 2, 3}
Các phương thức của Set: const set = new Set(); set.add(1); set.add(2); set.delete(1); console.log(set.has(2)); // Output: true
Chuyển đổi giữa Array và Set: const arr = [1, 2, 2, 3]; const unique = [...new Set(arr)]; console.log(unique); // Output: [1, 2, 3]

Câu hỏi 33: Event Bubbling và Event Capturing là gì?

Phân tích chi tiết:

Event Bubbling:
- Sự kiện bắt đầu từ phần tử được kích hoạt, rồi “nổi lên” cha của nó.
document.getElementById("child").addEventListener("click", () => { console.log("Child clicked"); }); document.getElementById("parent").addEventListener("click", () => { console.log("Parent clicked"); }); Kết quả: Child clicked Parent clicked
Event Capturing:
- Sự kiện được xử lý từ cha đến con.
- Sử dụng { capture: true }.
document.getElementById("child").addEventListener( "click", () => { console.log("Child clicked"); }, { capture: true } ); document.getElementById("parent").addEventListener( "click", () => { console.log("Parent clicked"); }, { capture: true } ); Kết quả: Parent clicked Child clicked

Câu hỏi 34: Giải thích về `Proxy` trong JavaScript.

Phân tích chi tiết:

Khái niệm:
- Proxy cho phép tạo một object đại diện với khả năng can thiệp vào các thao tác (get, set, delete, v.v.).
Ví dụ: const obj = { a: 1 }; const proxy = new Proxy(obj, { get(target, prop) { console.log(`Getting ${prop}`); return target[prop]; }, set(target, prop, value) { console.log(`Setting ${prop} to ${value}`); target[prop] = value; return true; }, }); console.log(proxy.a); // Output: Getting a, 1 proxy.b = 2; // Output: Setting b to 2

Lợi ích:

Giám sát và tùy chỉnh hành vi của object.
Áp dụng các ràng buộc hoặc kiểm tra dữ liệu.

Câu hỏi 35: Sự khác biệt giữa `window` và `document` trong JavaScript?

Phân tích chi tiết:

window:
- Đại diện cho toàn bộ cửa sổ trình duyệt.
- Là object toàn cục (global object) trong JavaScript.
- Cung cấp các phương thức, thuộc tính, và sự kiện để tương tác với trình duyệt.
console.log(window.innerWidth); // Độ rộng của cửa sổ trình duyệt alert("Hello!"); // Gọi phương thức alert của window
document:
- Đại diện cho cấu trúc DOM của trang HTML.
- Là một phần của window.
- Cung cấp các phương thức và thuộc tính để truy cập và thao tác các phần tử trong DOM.
console.log(document.title); // Tiêu đề của trang const element = document.getElementById("myElement");

So sánh:

window bao trùm document.
document chỉ tương tác với nội dung của trang web.

Câu hỏi 36: Sự khác biệt giữa `LocalStorage`, `SessionStorage`, và `Cookies`?

Phân tích chi tiết:

LocalStorage:
- Lưu trữ dữ liệu lâu dài (ngay cả khi đóng trình duyệt).
- Dung lượng: Lớn hơn cookies (~5-10 MB).
- Không gửi dữ liệu tự động đến server.
localStorage.setItem("key", "value"); console.log(localStorage.getItem("key")); // Output: value
SessionStorage:
- Lưu trữ dữ liệu trong phiên (session).
- Dữ liệu bị xóa khi đóng trình duyệt.
sessionStorage.setItem("key", "value"); console.log(sessionStorage.getItem("key")); // Output: value
Cookies:
- Dung lượng nhỏ (~4 KB).
- Dùng để lưu trữ thông tin gửi đến server trong mỗi yêu cầu HTTP.
- Hỗ trợ thiết lập thời gian hết hạn.
document.cookie = "key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT"; console.log(document.cookie); // Output: key=value

So sánh:

Đặc điểm	LocalStorage	SessionStorage	Cookies
Lưu trữ lâu dài	Có	Không	Có (tùy chọn)
Kích thước	~5-10 MB	~5 MB	~4 KB
Gửi đến server	Không	Không	Có

Câu hỏi 37: Sự khác biệt giữa `null` và `undefined` là gì?

Phân tích chi tiết:

undefined:
- Biến đã được khai báo nhưng chưa được gán giá trị.
let a; console.log(a); // Output: undefined
null:
- Đại diện cho “không có giá trị”.
- Lập trình viên gán null khi muốn biểu thị “trống”.
let b = null; console.log(b); // Output: null

So sánh:

undefined: Hệ thống tự động gán.
null: Do lập trình viên gán.

console.log(typeof undefined); // Output: undefined console.log(typeof null); // Output: object (lỗi trong JavaScript)

Câu hỏi 38: `Object.seal` và `Object.freeze` khác nhau thế nào?

Phân tích chi tiết:

Object.freeze:
- Không cho phép thêm, xóa, hoặc sửa đổi thuộc tính của object.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi obj.b = 3; // Không thêm được console.log(obj); // Output: { a: 1 }
Object.seal:
- Không cho phép thêm hoặc xóa thuộc tính.
- Nhưng vẫn cho phép sửa đổi giá trị thuộc tính hiện tại.
const obj = Object.seal({ a: 1 }); obj.a = 2; // Thay đổi được delete obj.a; // Không xóa được obj.b = 3; // Không thêm được console.log(obj); // Output: { a: 2 }

So sánh:

freeze: Toàn bộ object bất biến.
seal: Giới hạn thay đổi cấu trúc object, nhưng vẫn thay đổi giá trị.

Câu hỏi 39: Khác biệt giữa `==` và `===`?

Phân tích chi tiết:

== (Equality Operator):
- So sánh giá trị sau khi thực hiện ép kiểu (type coercion).
console.log(5 == "5"); // Output: true console.log(null == undefined); // Output: true
=== (Strict Equality Operator):
- So sánh cả giá trị và kiểu dữ liệu, không ép kiểu.
console.log(5 === "5"); // Output: false console.log(null === undefined); // Output: false

Nên sử dụng:

Luôn ưu tiên === để tránh các lỗi khó phát hiện.

Câu hỏi 40: Cách kiểm tra một giá trị có phải là mảng trong JavaScript?

Phân tích chi tiết:

Sử dụng Array.isArray: console.log(Array.isArray([1, 2, 3])); // Output: true console.log(Array.isArray("string")); // Output: false
Sử dụng instanceof: console.log([] instanceof Array); // Output: true console.log({} instanceof Array); // Output: false
Sử dụng Object.prototype.toString: console.log(Object.prototype.toString.call([])); // Output: [object Array] console.log(Object.prototype.toString.call({})); // Output: [object Object]

Nên sử dụng:

Array.isArray là cách kiểm tra tốt nhất vì rõ ràng và chính xác.

Câu hỏi 41: Sự khác biệt giữa `Object.keys`, `Object.values`, và `Object.entries`?

Phân tích chi tiết:

Object.keys:
- Trả về một mảng chứa các key của object.
const obj = { a: 1, b: 2 }; console.log(Object.keys(obj)); // Output: ["a", "b"]
Object.values:
- Trả về một mảng chứa các giá trị của object.
console.log(Object.values(obj)); // Output: [1, 2]
Object.entries:
- Trả về một mảng các cặp [key, value].
console.log(Object.entries(obj)); // Output: [["a", 1], ["b", 2]]

Ứng dụng:

Dễ dàng duyệt qua object bằng for...of. for (const [key, value] of Object.entries(obj)) { console.log(key, value); }

Câu hỏi 42: Sự khác biệt giữa `Object.assign` và `spread operator`?

Phân tích chi tiết:

Object.assign:
- Sao chép một hoặc nhiều object vào object mục tiêu.
const target = { a: 1 }; const source = { b: 2 }; const result = Object.assign(target, source); console.log(result); // Output: { a: 1, b: 2 }
Spread operator (...):
- Sao chép tương tự, nhưng ngắn gọn hơn.
const result = { ...target, ...source }; console.log(result); // Output: { a: 1, b: 2 }

So sánh:

Object.assign: Thay đổi object mục tiêu (mutate).
Spread operator: Không thay đổi object ban đầu, tạo object mới.

Câu hỏi 43: `Event.preventDefault` và `Event.stopPropagation` khác nhau như thế nào?

Phân tích chi tiết:

Event.preventDefault:
- Ngăn hành vi mặc định của một sự kiện.
- Ví dụ: Ngăn việc gửi form khi nhấn nút submit.
document.querySelector("a").addEventListener("click", (event) => { event.preventDefault(); console.log("Link click prevented"); }); Kết quả: Link không được chuyển hướng khi click.
Event.stopPropagation:
- Ngăn sự kiện lan truyền đến các phần tử cha.
- Có thể dùng để chặn “bubbling” hoặc “capturing”.
document.querySelector(".child").addEventListener("click", (event) => { event.stopPropagation(); console.log("Child clicked"); }); document.querySelector(".parent").addEventListener("click", () => { console.log("Parent clicked"); }); Kết quả: Chỉ hiển thị “Child clicked”, sự kiện không lan tới phần tử cha.

So sánh:

preventDefault: Ngăn hành vi mặc định của sự kiện.
stopPropagation: Ngăn sự kiện lan truyền.

Câu hỏi 44: Các cách chuyển đổi một giá trị sang số trong JavaScript?

Phân tích chi tiết:

Dùng Number(): console.log(Number("123")); // Output: 123 console.log(Number("abc")); // Output: NaN
Dùng dấu cộng +: console.log(+"123"); // Output: 123 console.log(+"abc"); // Output: NaN
Dùng parseInt hoặc parseFloat:
- parseInt: Chuyển đổi sang số nguyên.
- parseFloat: Chuyển đổi sang số thực.
console.log(parseInt("123.45")); // Output: 123 console.log(parseFloat("123.45")); // Output: 123.45
Dùng Math.floor, Math.ceil, hoặc Math.round:
- Tự động ép kiểu.
console.log(Math.floor("123.45")); // Output: 123
Dùng * 1 hoặc / 1: console.log("123" * 1); // Output: 123 console.log("abc" * 1); // Output: NaN

Lưu ý:

Kiểm tra kết quả bằng isNaN() để tránh lỗi.
Number chính xác hơn parseInt vì không bỏ qua các ký tự không phải số.

Câu hỏi 45: Giải thích về `eval` và tại sao nên tránh sử dụng nó?

Phân tích chi tiết:

eval:
- Thực thi một chuỗi như mã JavaScript.
const x = 10; eval("console.log(x + 5)"); // Output: 15
Lý do nên tránh:
- Bảo mật: Có thể thực thi mã độc.
eval("alert('Hacked!')");
- Hiệu suất: Chậm hơn do trình thông dịch phải phân tích và biên dịch mã trong runtime.
- Khó kiểm tra lỗi: Mã không rõ ràng, gây khó khăn cho việc debug.

Thay thế eval:

Dùng JSON.parse hoặc hàm tùy chỉnh.

Câu hỏi 46: Sự khác biệt giữa `prototype` và `proto`?

Phân tích chi tiết:

prototype:
- Thuộc tính của hàm khởi tạo (constructor).
- Dùng để định nghĩa các phương thức và thuộc tính chia sẻ giữa các object.
function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const alice = new Person("Alice"); alice.greet(); // Output: Hello, my name is Alice
__proto__:
- Thuộc tính của một object cụ thể.
- Tham chiếu đến prototype của constructor đã tạo ra object đó.
const obj = {}; console.log(obj.__proto__ === Object.prototype); // Output: true

So sánh:

prototype: Liên quan đến constructor function.
__proto__: Liên quan đến instance của object.

Câu hỏi 47: Cách kiểm tra một object có phải là rỗng?

Phân tích chi tiết:

Dùng Object.keys: const obj = {}; console.log(Object.keys(obj).length === 0); // Output: true
Dùng vòng lặp for...in: const obj = {}; let isEmpty = true; for (const key in obj) { isEmpty = false; } console.log(isEmpty); // Output: true
Dùng JSON.stringify: const obj = {}; console.log(JSON.stringify(obj) === "{}"); // Output: true

Câu hỏi 48: Khi nào nên sử dụng `Promise.all` và `Promise.race`?

Phân tích chi tiết:

Promise.all:
- Chờ tất cả các promise được hoàn thành.
- Nếu bất kỳ promise nào bị lỗi, nó sẽ trả về lỗi ngay lập tức.
const p1 = Promise.resolve(1); const p2 = Promise.resolve(2); const p3 = Promise.reject("Error"); Promise.all([p1, p2, p3]) .then((values) => console.log(values)) .catch((error) => console.log(error)); // Output: Error
Promise.race:
- Trả về kết quả của promise được hoàn thành đầu tiên (thành công hoặc thất bại).
const p1 = new Promise((resolve) => setTimeout(() => resolve("P1"), 1000)); const p2 = new Promise((resolve) => setTimeout(() => resolve("P2"), 500)); Promise.race([p1, p2]).then((value) => console.log(value)); // Output: P2

Ứng dụng:

Promise.all: Khi cần đợi tất cả các tác vụ hoàn thành.
Promise.race: Khi cần kết quả nhanh nhất từ các tác vụ.

Câu hỏi 49: Thế nào là một “pure function”?

Phân tích chi tiết:

Định nghĩa:
- Hàm không có tác dụng phụ (side effect).
- Đầu vào giống nhau luôn trả về đầu ra giống nhau.
function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5
Không phải pure function:
- Gây thay đổi ngoài hàm.
let x = 0; function increment() { x++; } increment(); console.log(x); // Output: 1

Lợi ích:

Code dễ kiểm tra, tái sử dụng, và bảo trì hơn.

Câu hỏi 50: Sự khác biệt giữa `call stack` và `event loop`?

Phân tích chi tiết:

Call Stack:
- Nơi chứa các hàm đang thực thi.
- Hàm được thêm vào stack khi gọi và bị xóa khi hoàn thành.
function first() { second(); } function second() { console.log("Second"); } first(); // Call stack: // 1. first() // 2. second()
Event Loop:
- Theo dõi Call Stack và Task Queue.
- Khi Call Stack trống, Event Loop đẩy các nhiệm vụ từ Task Queue hoặc Microtask Queue vào Call Stack.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End");Kết quả: Start End Timeout
- setTimeout được xử lý sau cùng bởi Event Loop.

Câu hỏi 51: Sự khác biệt giữa `shallow copy` và `deep copy` với ví dụ?

Phân tích chi tiết:

Shallow Copy:
- Sao chép các giá trị cấp đầu tiên của object hoặc array.
- Các object con vẫn trỏ đến cùng tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { ...obj1 }; obj2.b.c = 42; console.log(obj1.b.c); // Output: 42 (tham chiếu chung)Cách tạo shallow copy:
- Dùng Object.assign.
- Dùng spread operator (...).
Deep Copy:
- Sao chép toàn bộ cấu trúc object, bao gồm các object con.
- Không chia sẻ tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = JSON.parse(JSON.stringify(obj1)); obj2.b.c = 42; console.log(obj1.b.c); // Output: 2 (không ảnh hưởng)Lưu ý:
- JSON không sao chép được các giá trị như function hoặc undefined.
- Thư viện như lodash có thể tạo deep copy tốt hơn: const _ = require("lodash"); const obj2 = _.cloneDeep(obj1);

Câu hỏi 52: Sự khác biệt giữa `for...in` và `for...of`?

Phân tích chi tiết:

for...in:
- Duyệt qua các key trong object (bao gồm cả key kế thừa).
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key); // Output: "a", "b" }
- Không nên dùng cho mảng, vì sẽ duyệt cả các chỉ số.
const arr = [10, 20]; for (const key in arr) { console.log(key); // Output: 0, 1 }
for...of:
- Duyệt qua các giá trị của iterable objects (mảng, chuỗi, Set, Map).
const arr = [10, 20]; for (const value of arr) { console.log(value); // Output: 10, 20 }
- Không thể dùng cho object (trừ khi sử dụng Object.entries).

So sánh:

for...in: Duyệt qua key của object.
for...of: Duyệt qua giá trị của iterable objects.

Câu hỏi 53: Khác biệt giữa `try...catch` và `throw`?

Phân tích chi tiết:

try...catch:
- Dùng để xử lý lỗi trong runtime mà không làm gián đoạn chương trình.
try { const result = JSON.parse("{ invalid json }"); } catch (error) { console.log("Caught an error:", error.message); }
throw:
- Dùng để tạo lỗi tùy chỉnh hoặc phát sinh lỗi thủ công.
function validateAge(age) { if (age < 18) { throw new Error("Age must be 18 or older"); } } try { validateAge(15); } catch (error) { console.log(error.message); // Output: Age must be 18 or older }

So sánh:

try...catch: Bao bọc đoạn code có khả năng gây lỗi.
throw: Chủ động phát sinh lỗi.

Câu hỏi 54: Sự khác biệt giữa `DOMContentLoaded` và `load` event?

Phân tích chi tiết:

DOMContentLoaded:
- Được kích hoạt khi HTML đã được tải và phân tích xong, không cần đợi tài nguyên như ảnh hoặc script.
document.addEventListener("DOMContentLoaded", () => { console.log("DOM fully loaded and parsed"); });
load:
- Được kích hoạt khi toàn bộ trang, bao gồm các tài nguyên như ảnh, script, đã tải xong.
window.addEventListener("load", () => { console.log("Page fully loaded"); });

So sánh:

DOMContentLoaded: Nhanh hơn, chỉ cần DOM hoàn tất.
load: Chậm hơn, chờ toàn bộ tài nguyên.

Câu hỏi 55: Làm thế nào để debounce một hàm trong JavaScript?

Phân tích chi tiết:

Khái niệm:

Debounce là kỹ thuật hạn chế việc thực thi một hàm nhiều lần liên tiếp trong một khoảng thời gian ngắn.

function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } // Ví dụ const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);

Khi sự kiện resize liên tục được gọi, log chỉ được thực thi sau 1 giây kể từ lần gọi cuối.

Câu hỏi 56: Giải thích về `Promise.finally` và cách hoạt động của nó?

Phân tích chi tiết:

finally:
- Luôn được gọi sau khi Promise được giải quyết (fulfilled hoặc rejected).
const promise = new Promise((resolve, reject) => { setTimeout(() => reject("Error"), 1000); }); promise .catch((error) => console.log(error)) // Output: Error .finally(() => console.log("Cleanup")); // Output: Cleanup
Ứng dụng:
- Dùng để dọn dẹp tài nguyên hoặc thực hiện hành động bất kể Promise thành công hay thất bại.

Câu hỏi 57: Sự khác biệt giữa `apply`, `call`, và `bind`?

Phân tích chi tiết:

call:
- Gọi hàm với this và các tham số truyền riêng lẻ.
function greet(greeting) { console.log(`${greeting}, my name is ${this.name}`); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, my name is Alice
apply:
- Tương tự call, nhưng tham số được truyền dưới dạng mảng.
greet.apply(person, ["Hi"]); // Output: Hi, my name is Alice
bind:
- Trả về một hàm mới với this cố định, không thực thi ngay.
const boundGreet = greet.bind(person, "Hey"); boundGreet(); // Output: Hey, my name is Alice

So sánh:

call và apply: Gọi hàm ngay lập tức.
bind: Trả về một hàm mới.

Câu hỏi 58: Làm thế nào để kiểm tra xem một object có phải là “plain object”?

Phân tích chi tiết:

Khái niệm: “Plain object” là object được tạo bởi {} hoặc new Object().

Dùng Object.prototype.toString: function isPlainObject(obj) { return Object.prototype.toString.call(obj) === "[object Object]"; } console.log(isPlainObject({})); // Output: true console.log(isPlainObject(new Date())); // Output: false
Dùng Object.getPrototypeOf: function isPlainObject(obj) { return Object.getPrototypeOf(obj) === Object.prototype; } console.log(isPlainObject({})); // Output: true console.log(isPlainObject(Object.create(null))); // Output: false

Câu hỏi 59: Sự khác biệt giữa `Object.defineProperty` và gán trực tiếp thuộc tính?

Phân tích chi tiết:

Gán trực tiếp thuộc tính:
- Dễ sử dụng nhưng không kiểm soát được cấu hình thuộc tính.
const obj = {}; obj.name = "Alice"; console.log(obj.name); // Output: Alice
Object.defineProperty:
- Cho phép kiểm soát chi tiết thuộc tính (writable, enumerable, configurable).
const obj = {}; Object.defineProperty(obj, "name", { value: "Alice", writable: false, // Không cho phép thay đổi giá trị enumerable: true, // Hiển thị trong vòng lặp configurable: false, // Không thể xóa hoặc thay đổi thuộc tính }); console.log(obj.name); // Output: Alice obj.name = "Bob"; // Không thay đổi được console.log(obj.name); // Output: Alice

Ứng dụng:

Định nghĩa thuộc tính không thể thay đổi hoặc có quyền truy cập đặc biệt.

Câu hỏi 60: Làm thế nào để lấy tất cả các key của một object, bao gồm cả key từ prototype?

Phân tích chi tiết:

Dùng for...in:
- Duyệt qua cả key của object và prototype.
const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; for (const key in obj) { console.log(key); // Output: "inheritedKey", "ownKey" }
Dùng Object.keys và Object.getPrototypeOf:
- Kết hợp để lấy cả key của object và prototype.
function getAllKeys(obj) { const keys = []; for (const key in obj) { keys.push(key); } return keys; } const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; console.log(getAllKeys(obj)); // Output: ["inheritedKey", "ownKey"]

Câu hỏi 61: `new.target` là gì và khi nào sử dụng?

Phân tích chi tiết:

Khái niệm:
- new.target cho biết một hàm hoặc class có được gọi bằng từ khóa new hay không.
Ví dụ: function MyClass() { if (!new.target) { throw new Error("Must use 'new' with MyClass"); } this.name = "MyClass instance"; } new MyClass(); // Không lỗi MyClass(); // Lỗi: Must use 'new' with MyClass
Ứng dụng:
- Đảm bảo constructor được gọi đúng cách.

Câu hỏi 62: Làm thế nào để kiểm tra một giá trị là kiểu nguyên thủy?

Phân tích chi tiết:

Khái niệm:
- Kiểu nguyên thủy: string, number, boolean, null, undefined, symbol, và bigint.
Cách kiểm tra: function isPrimitive(value) { return value !== Object(value); } console.log(isPrimitive(42)); // Output: true console.log(isPrimitive({})); // Output: false console.log(isPrimitive("Hello")); // Output: true

Câu hỏi 63: Sự khác biệt giữa `function` và `class` trong JavaScript?

Phân tích chi tiết:

function:
- Hàm có thể được sử dụng làm constructor.
- Không bắt buộc phải gọi bằng new.
function Person(name) { this.name = name; } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice
class:
- Cú pháp rõ ràng hơn cho constructor và phương thức.
- Phải gọi bằng new.
class Person { constructor(name) { this.name = name; } } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice

So sánh:

function: Linh hoạt hơn, nhưng cú pháp phức tạp.
class: Rõ ràng, dễ đọc hơn cho lập trình hướng đối tượng.

Câu hỏi 64: Tại sao vòng lặp `forEach` không thể sử dụng `break` hoặc `continue`?

Phân tích chi tiết:

Hạn chế của forEach:
- forEach không có cơ chế để thoát khỏi vòng lặp.
- Không hỗ trợ từ khóa break hoặc continue.
[1, 2, 3].forEach((num) => { if (num === 2) continue; // Lỗi: SyntaxError console.log(num); });
Giải pháp thay thế:
- Sử dụng for hoặc for...of:
for (const num of [1, 2, 3]) { if (num === 2) continue; console.log(num); // Output: 1, 3 }

Câu hỏi 65: `WeakMap` và `WeakSet` khác biệt gì so với `Map` và `Set`?

Phân tích chi tiết:

Điểm chung:
- WeakMap và WeakSet lưu trữ các object như Map và Set.
Khác biệt:
- WeakMap:
  - Key phải là object.
  - Không ngăn thu gom rác (garbage collection).
  let obj = {}; const wm = new WeakMap(); wm.set(obj, "value"); obj = null; // Object bị thu gom rác
- WeakSet:
  - Chỉ chứa các object.
  - Không hỗ trợ lặp (iteration).
  let obj = {}; const ws = new WeakSet(); ws.add(obj); obj = null; // Object bị thu gom rác

Câu hỏi 66: `Reflect` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Reflect cung cấp các phương thức để thao tác với object tương tự như Object.
Ví dụ: const obj = { a: 1 }; Reflect.set(obj, "b", 2); console.log(obj); // Output: { a: 1, b: 2 } const result = Reflect.has(obj, "a"); console.log(result); // Output: true
Ứng dụng:
- Xử lý Proxy.
- Thay thế các phương thức truyền thống của Object.

Câu hỏi 67: Tại sao `typeof null` lại trả về `"object"`?

Phân tích chi tiết:

Lý do:
- Do lỗi trong việc triển khai JavaScript ban đầu, null được gán giá trị là 0 trong internal representation.
- typeof kiểm tra internal type tag và thấy 0, tương ứng với "object".
Cách xử lý:
- Kiểm tra giá trị null một cách chính xác:
console.log(value === null); // Đúng cách kiểm tra

Câu hỏi 68: Làm thế nào để tạo một phương thức getter và setter?

Phân tích chi tiết:

Khái niệm:
- Getter: Truy xuất giá trị.
- Setter: Cập nhật giá trị.
Cách sử dụng: const obj = { _name: "Alice", get name() { return this._name; }, set name(value) { this._name = value.toUpperCase(); }, }; console.log(obj.name); // Output: Alice obj.name = "bob"; console.log(obj.name); // Output: BOB

Câu hỏi 69: Khác biệt giữa `Object.freeze` và `Object.seal` với ví dụ?

Phân tích chi tiết:

Object.freeze:
- Ngăn mọi thay đổi: không thêm, xóa, hoặc sửa giá trị.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi console.log(obj.a); // Output: 1
Object.seal:
- Ngăn thêm hoặc xóa thuộc tính, nhưng vẫn thay đổi giá trị hiện tại.
const obj = Object.seal({ a: 1 }); obj.a = 2; // Thay đổi được delete obj.a; // Không xóa được console.log(obj); // Output: { a: 2 }

Câu hỏi 70: Sự khác biệt giữa `Array.prototype.map` và `Array.prototype.forEach`?

Phân tích chi tiết:

map:
- Tạo một mảng mới từ kết quả của hàm callback được gọi trên từng phần tử.
- Không thay đổi mảng ban đầu.
const arr = [1, 2, 3]; const newArr = arr.map((num) => num * 2); console.log(newArr); // Output: [2, 4, 6] console.log(arr); // Output: [1, 2, 3]
forEach:
- Chạy hàm callback trên từng phần tử của mảng.
- Không trả về giá trị, dùng để thực hiện thao tác phụ (side effects).
const arr = [1, 2, 3]; arr.forEach((num) => console.log(num * 2)); // Output: 2, 4, 6

So sánh:

map: Trả về mảng mới.
forEach: Không trả về giá trị.

Câu hỏi 71: Làm thế nào để kiểm tra một giá trị là số hợp lệ trong JavaScript?

Phân tích chi tiết:

Dùng isNaN:
- Kiểm tra xem giá trị có phải là số không hợp lệ.
console.log(isNaN("123")); // Output: false console.log(isNaN("abc")); // Output: true
Dùng Number.isNaN:
- Chính xác hơn vì không ép kiểu.
console.log(Number.isNaN(NaN)); // Output: true console.log(Number.isNaN("123")); // Output: false
Kiểm tra số hợp lệ: function isValidNumber(value) { return typeof value === "number" && !isNaN(value); } console.log(isValidNumber(123)); // Output: true console.log(isValidNumber("123")); // Output: false

Câu hỏi 72: Sự khác biệt giữa `SetTimeout` và `RequestAnimationFrame`?

Phân tích chi tiết:

setTimeout:
- Chạy một hàm sau một khoảng thời gian cụ thể.
setTimeout(() => console.log("Run after 1 second"), 1000);
requestAnimationFrame:
- Dùng để tối ưu hóa việc vẽ trên màn hình (animation).
- Chạy hàm callback ngay trước lần vẽ tiếp theo của trình duyệt (~16ms với 60FPS).
function animate() { console.log("Frame rendered"); requestAnimationFrame(animate); } requestAnimationFrame(animate);

So sánh:

setTimeout: Chạy sau một khoảng thời gian cố định.
requestAnimationFrame: Chạy theo tốc độ vẽ của trình duyệt, tối ưu hơn cho animation.

Câu hỏi 73: Sự khác biệt giữa `Object.create` và `{}` để tạo object?

Phân tích chi tiết:

Object.create:
- Tạo một object mới với prototype cụ thể.
const proto = { greet: () => console.log("Hello!") }; const obj = Object.create(proto); obj.greet(); // Output: Hello!
{}:
- Tạo một object mới với prototype mặc định (Object.prototype).
const obj = {}; console.log(obj.__proto__ === Object.prototype); // Output: true

So sánh:

Object.create: Cho phép tùy chỉnh prototype.
{}: Prototype mặc định là Object.prototype.

Câu hỏi 74: Làm thế nào để chuyển một `NodeList` thành mảng?

Phân tích chi tiết:

Dùng Array.from: const nodeList = document.querySelectorAll("div"); const array = Array.from(nodeList); console.log(array);
Dùng spread operator (...): const array = [...document.querySelectorAll("div")]; console.log(array);
Dùng Array.prototype.slice: const array = Array.prototype.slice.call(document.querySelectorAll("div")); console.log(array);

So sánh:

Array.from và spread operator là cách phổ biến và dễ đọc hơn.

Câu hỏi 75: Tại sao `setTimeout` với 0ms vẫn có độ trễ?

Phân tích chi tiết:

Lý do:
- setTimeout không thực thi ngay lập tức vì nó đưa callback vào Task Queue.
- Nếu Call Stack không trống, trình duyệt sẽ đợi cho đến khi stack trống để thực thi callback.
Ví dụ: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Kết quả: Start End Timeout

Lưu ý:

Độ trễ tối thiểu của setTimeout trong trình duyệt thường là 4ms (theo chuẩn HTML5).

Câu hỏi 76: Khác biệt giữa `undefined` và `not defined` trong JavaScript?

Phân tích chi tiết:

undefined:
- Biến đã được khai báo nhưng chưa gán giá trị.
let x; console.log(x); // Output: undefined
not defined:
- Biến chưa được khai báo.
console.log(y); // ReferenceError: y is not defined

Câu hỏi 77: Làm thế nào để clone một object trong JavaScript?

Phân tích chi tiết:

Dùng spread operator (...): const obj = { a: 1, b: 2 }; const clone = { ...obj }; console.log(clone); // Output: { a: 1, b: 2 }
Dùng Object.assign: const clone = Object.assign({}, obj); console.log(clone); // Output: { a: 1, b: 2 }
Dùng JSON (Deep clone): const deepClone = JSON.parse(JSON.stringify(obj));

Lưu ý:

Spread operator và Object.assign tạo shallow copy.
JSON không sao chép được các giá trị không hợp lệ như undefined hoặc function.

Câu hỏi 78: Làm thế nào để kiểm tra một object là một mảng?

Phân tích chi tiết:

Dùng Array.isArray: console.log(Array.isArray([1, 2, 3])); // Output: true
Dùng instanceof: console.log([] instanceof Array); // Output: true
Dùng Object.prototype.toString: console.log(Object.prototype.toString.call([])); // Output: [object Array]

Nên sử dụng:

Array.isArray là cách chính xác và dễ đọc nhất.

Câu hỏi 79: Sự khác biệt giữa `delete` và `Object.keys().splice` khi xóa thuộc tính?

Phân tích chi tiết:

delete:
- Xóa một thuộc tính khỏi object.
const obj = { a: 1, b: 2 }; delete obj.a; console.log(obj); // Output: { b: 2 }
Object.keys().splice:
- Chỉ thao tác trên mảng của các key, không thay đổi object gốc.
const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); keys.splice(0, 1); console.log(keys); // Output: ["b"] console.log(obj); // Output: { a: 1, b: 2 }

Câu hỏi 80: Khác biệt giữa `Promise.allSettled` và `Promise.all`?

Phân tích chi tiết:

Promise.all:
- Chỉ thành công nếu tất cả promise đều hoàn thành.
- Nếu một promise bị reject, toàn bộ bị reject.
const p1 = Promise.resolve(1); const p2 = Promise.reject("Error"); Promise.all([p1, p2]) .then((results) => console.log(results)) .catch((error) => console.log(error)); // Output: Error
Promise.allSettled:
- Luôn hoàn thành, bất kể promise thành công hay thất bại.
Promise.allSettled([p1, p2]).then((results) => console.log(results)); // Output: [{ status: "fulfilled", value: 1 }, { status: "rejected", reason: "Error" }]

Ứng dụng:

Promise.all: Khi cần tất cả thành công.
Promise.allSettled: Khi cần xử lý kết quả từng promise, dù thành công hay thất bại.

Câu hỏi 81: Sự khác biệt giữa `Function.prototype.apply`, `Function.prototype.call`, và `Function.prototype.bind`?

Phân tích chi tiết:

apply:
- Gọi hàm ngay lập tức và truyền tham số dưới dạng mảng.
function greet(greeting, name) { console.log(`${greeting}, ${name}`); } greet.apply(null, ["Hello", "Alice"]); // Output: Hello, Alice
call:
- Gọi hàm ngay lập tức và truyền tham số lần lượt.
greet.call(null, "Hi", "Bob"); // Output: Hi, Bob
bind:
- Trả về một hàm mới với this và các tham số cố định, không thực thi ngay.
const greetBob = greet.bind(null, "Hey", "Bob"); greetBob(); // Output: Hey, Bob

So sánh:

apply: Tham số dưới dạng mảng.
call: Tham số lần lượt.
bind: Tạo hàm mới.

Câu hỏi 82: Sự khác biệt giữa `null` và `undefined` trong JavaScript?

Phân tích chi tiết:

undefined:
- Biến được khai báo nhưng chưa gán giá trị.
let a; console.log(a); // Output: undefined
null:
- Biến được gán giá trị null, biểu thị “không có giá trị”.
let b = null; console.log(b); // Output: null
So sánh: console.log(null == undefined); // Output: true (so sánh lỏng lẻo) console.log(null === undefined); // Output: false (so sánh nghiêm ngặt)

Câu hỏi 83: Khác biệt giữa `Object.hasOwnProperty` và `in`?

Phân tích chi tiết:

hasOwnProperty:
- Kiểm tra xem một object có sở hữu một thuộc tính (không kiểm tra prototype).
const obj = { a: 1 }; console.log(obj.hasOwnProperty("a")); // Output: true console.log(obj.hasOwnProperty("b")); // Output: false
in:
- Kiểm tra xem thuộc tính có tồn tại trong object (bao gồm cả từ prototype).
console.log("a" in obj); // Output: true console.log("toString" in obj); // Output: true (từ prototype)

So sánh:

hasOwnProperty: Chỉ kiểm tra thuộc tính riêng.
in: Kiểm tra cả thuộc tính kế thừa.

Câu hỏi 84: Tại sao sử dụng `use strict`?

Phân tích chi tiết:

Mục đích:
- Áp dụng chế độ nghiêm ngặt, giúp tránh lỗi tiềm ẩn.
Ví dụ:
- Không cho phép gán giá trị cho biến chưa khai báo.
"use strict"; x = 10; // Error: x is not defined
- Ngăn sử dụng từ khóa dành riêng.
"use strict"; const private = 10; // Error: Unexpected strict mode reserved word
Ứng dụng:
- Giúp phát hiện lỗi sớm.
- Nâng cao hiệu suất bằng cách cho trình thông dịch tối ưu hóa tốt hơn.

Câu hỏi 85: Làm thế nào để hợp nhất hai object trong JavaScript?

Phân tích chi tiết:

Dùng spread operator (...): const obj1 = { a: 1 }; const obj2 = { b: 2 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // Output: { a: 1, b: 2 }
Dùng Object.assign: const merged = Object.assign({}, obj1, obj2); console.log(merged); // Output: { a: 1, b: 2 }

So sánh:

Spread operator: Cú pháp ngắn gọn hơn.
Object.assign: Phù hợp khi cần hỗ trợ trình duyệt cũ.

Câu hỏi 86: Khác biệt giữa `arguments` và rest parameter (`...args`)?

Phân tích chi tiết:

arguments:
- Đối tượng giả mảng, chứa tất cả tham số được truyền vào hàm.
- Không tồn tại trong arrow function.
function sum() { console.log(arguments); } sum(1, 2, 3); // Output: [1, 2, 3]
Rest parameter (...args):
- Mảng thực sự, chứa các tham số còn lại.
- Hoạt động trong cả function thường và arrow function.
function sum(...args) { console.log(args); } sum(1, 2, 3); // Output: [1, 2, 3]

So sánh:

arguments: Giả mảng, không hỗ trợ các phương thức của mảng.
...args: Mảng thực sự, linh hoạt hơn.

Câu hỏi 87: Khác biệt giữa `console.log`, `console.dir`, và `console.table`?

Phân tích chi tiết:

console.log:
- In giá trị ra console.
console.log({ a: 1, b: 2 });
console.dir:
- Hiển thị cây DOM hoặc cấu trúc object.
console.dir(document.body);
console.table:
- Hiển thị dữ liệu dạng bảng.
const data = [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]; console.table(data);

Ứng dụng:

console.log: Debug thông thường.
console.dir: Debug DOM hoặc object.
console.table: Debug dữ liệu dạng bảng.

Câu hỏi 88: Sự khác biệt giữa `JSON.stringify` và `JSON.parse`?

Phân tích chi tiết:

JSON.stringify:
- Chuyển object/mảng thành chuỗi JSON.
const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: '{"name":"Alice","age":25}'
JSON.parse:
- Chuyển chuỗi JSON thành object/mảng.
const json = '{"name":"Alice","age":25}'; const obj = JSON.parse(json); console.log(obj); // Output: { name: "Alice", age: 25 }

Câu hỏi 89: `Object.entries`, `Object.keys`, và `Object.values` khác nhau thế nào?

Phân tích chi tiết:

Object.entries:
- Trả về mảng các cặp [key, value].
const obj = { a: 1, b: 2 }; console.log(Object.entries(obj)); // Output: [["a", 1], ["b", 2]]
Object.keys:
- Trả về mảng các key.
console.log(Object.keys(obj)); // Output: ["a", "b"]
Object.values:
- Trả về mảng các value.
console.log(Object.values(obj)); // Output: [1, 2]

Câu hỏi 90: Làm thế nào để kiểm tra xem một object có phải là prototype của object khác?

Phân tích chi tiết:

Dùng isPrototypeOf: const proto = {}; const obj = Object.create(proto); console.log(proto.isPrototypeOf(obj)); // Output: true
Dùng Object.getPrototypeOf: console.log(Object.getPrototypeOf(obj) === proto); // Output: true

Câu hỏi 91: Sự khác biệt giữa `eval` và `Function` constructor trong JavaScript?

Phân tích chi tiết:

eval:
- Thực thi một chuỗi như mã JavaScript.
- Nguy hiểm và không an toàn.
const x = 10; eval("console.log(x + 5)"); // Output: 15
Function constructor:
- Tạo một hàm mới từ chuỗi mã.
- An toàn hơn vì chạy trong phạm vi cục bộ.
const add = new Function("a", "b", "return a + b"); console.log(add(2, 3)); // Output: 5

So sánh:

eval: Chạy mã trong phạm vi hiện tại, dễ gây lỗi bảo mật.
Function: Chạy mã trong phạm vi riêng, an toàn hơn.

Câu hỏi 92: Sự khác biệt giữa `break` và `return` trong vòng lặp?

Phân tích chi tiết:

break:
- Thoát khỏi vòng lặp hiện tại.
for (let i = 0; i < 5; i++) { if (i === 3) break; console.log(i); } // Output: 0, 1, 2
return:
- Thoát khỏi vòng lặp và cả hàm chứa vòng lặp.
function loop() { for (let i = 0; i < 5; i++) { if (i === 3) return; console.log(i); } console.log("This will not execute"); } loop(); // Output: 0, 1, 2

Câu hỏi 93: Sự khác biệt giữa `Object.assign` và spread operator (`...`)?

Phân tích chi tiết:

Object.assign:
- Sao chép một hoặc nhiều object vào object mục tiêu.
- Thay đổi object mục tiêu nếu không tạo một bản sao rỗng.
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const result = Object.assign({}, obj1, obj2); console.log(result); // Output: { a: 1, b: 2 }
Spread operator (...):
- Ngắn gọn hơn và thường được sử dụng để sao chép object hoặc mảng.
const result = { ...obj1, ...obj2 }; console.log(result); // Output: { a: 1, b: 2 }

So sánh:

Spread operator ngắn gọn hơn.
Object.assign cần thiết khi hỗ trợ trình duyệt cũ.

Câu hỏi 94: Khác biệt giữa `const`, `let`, và `var`?

Phân tích chi tiết:

var:
- Có phạm vi toàn cục hoặc function.
- Có thể khai báo lại và không bị ràng buộc bởi block.
if (true) { var x = 10; } console.log(x); // Output: 10
let:
- Có phạm vi block ({}).
- Không thể khai báo lại trong cùng phạm vi.
if (true) { let y = 20; console.log(y); // Output: 20 } console.log(y); // Error: y is not defined
const:
- Giống let, nhưng giá trị không thể thay đổi (đối với kiểu nguyên thủy).
const z = 30; z = 40; // Error: Assignment to constant variable

Câu hỏi 95: Làm thế nào để kiểm tra xem một object có phải là instance của một class?

Phân tích chi tiết:

Dùng instanceof: class Person {} const alice = new Person(); console.log(alice instanceof Person); // Output: true
Dùng constructor: console.log(alice.constructor === Person); // Output: true

Câu hỏi 96: Sự khác biệt giữa `typeof` và `instanceof`?

Phân tích chi tiết:

typeof:
- Trả về kiểu dữ liệu của một giá trị.
- Hoạt động tốt với kiểu nguyên thủy, nhưng không chính xác với object.
console.log(typeof 42); // Output: "number" console.log(typeof null); // Output: "object" (lỗi)
instanceof:
- Kiểm tra xem một object có phải là instance của một class hoặc constructor.
console.log([] instanceof Array); // Output: true console.log([] instanceof Object); // Output: true

So sánh:

typeof: Kiểm tra kiểu dữ liệu.
instanceof: Kiểm tra nguồn gốc object.

Câu hỏi 97: Làm thế nào để làm tròn số trong JavaScript?

Phân tích chi tiết:

Dùng Math.floor:
- Làm tròn xuống.
console.log(Math.floor(4.7)); // Output: 4
Dùng Math.ceil:
- Làm tròn lên.
console.log(Math.ceil(4.3)); // Output: 5
Dùng Math.round:
- Làm tròn tới số gần nhất.
console.log(Math.round(4.5)); // Output: 5

Câu hỏi 98: Sự khác biệt giữa `==` và `===`?

Phân tích chi tiết:

==:
- So sánh giá trị sau khi thực hiện ép kiểu (type coercion).
console.log(5 == "5"); // Output: true
===:
- So sánh cả giá trị và kiểu dữ liệu (strict equality).
console.log(5 === "5"); // Output: false

Nên sử dụng:

Luôn ưu tiên === để tránh lỗi không mong muốn.

Câu hỏi 99: Làm thế nào để kiểm tra một giá trị là `NaN` trong JavaScript?

Phân tích chi tiết:

Dùng isNaN:
- Kiểm tra xem giá trị có phải là “Not-a-Number”.
console.log(isNaN("abc")); // Output: true console.log(isNaN(123)); // Output: false
Dùng Number.isNaN:
- Chính xác hơn vì không thực hiện ép kiểu.
console.log(Number.isNaN("abc")); // Output: false console.log(Number.isNaN(NaN)); // Output: true

Câu hỏi 100: Khác biệt giữa `forEach`, `map`, và `reduce`?

Phân tích chi tiết:

forEach:
- Duyệt qua mảng, không trả về giá trị.
[1, 2, 3].forEach((num) => console.log(num));
map:
- Duyệt qua mảng và trả về mảng mới.
const doubled = [1, 2, 3].map((num) => num * 2); console.log(doubled); // Output: [2, 4, 6]
reduce:
- Duyệt qua mảng và tích lũy giá trị thành một kết quả.
const sum = [1, 2, 3].reduce((total, num) => total + num, 0); console.log(sum); // Output: 6

So sánh:

forEach: Thực hiện tác vụ, không trả về.
map: Tạo mảng mới.
reduce: Tích lũy kết quả.

Câu hỏi 101: Khác biệt giữa `setTimeout` và `setImmediate` trong Node.js?

Phân tích chi tiết:

setTimeout:
- Chạy một callback sau khoảng thời gian nhất định.
- Đưa vào Timer Phase của Event Loop.
setTimeout(() => console.log("setTimeout"), 0);
setImmediate:
- Chạy một callback ngay sau khi I/O Phase hoàn thành.
- Đưa vào Check Phase của Event Loop.
setImmediate(() => console.log("setImmediate"));
So sánh:
- Nếu cả hai được gọi đồng thời, thứ tự thực thi phụ thuộc vào ngữ cảnh Event Loop.
setTimeout(() => console.log("setTimeout"), 0); setImmediate(() => console.log("setImmediate")); Kết quả: Thứ tự không đảm bảo, phụ thuộc vào cách Node.js quản lý Event Loop.

Câu hỏi 102: Khác biệt giữa `globalThis`, `window`, và `global`?

Phân tích chi tiết:

globalThis:
- Đối tượng toàn cục chuẩn hóa, hoạt động trên mọi môi trường.
console.log(globalThis); // Output: global (Node.js) hoặc window (trình duyệt)
window:
- Đối tượng toàn cục trong trình duyệt.
console.log(window); // Output: Window {...}
global:
- Đối tượng toàn cục trong Node.js.
console.log(global); // Output: [object global]

So sánh:

Sử dụng globalThis để đảm bảo tính tương thích trên cả trình duyệt và Node.js.

Câu hỏi 103: `Proxy` trong JavaScript là gì và cách sử dụng?

Phân tích chi tiết:

Khái niệm:
- Proxy cho phép kiểm soát hành vi của object thông qua các handler.
Ví dụ: const target = { a: 1 }; const proxy = new Proxy(target, { get(obj, prop) { return prop in obj ? obj[prop] : "Property not found"; }, set(obj, prop, value) { obj[prop] = value * 2; return true; }, }); console.log(proxy.a); // Output: 1 console.log(proxy.b); // Output: Property not found proxy.c = 5; console.log(proxy.c); // Output: 10
Ứng dụng:
- Theo dõi truy cập thuộc tính.
- Kiểm tra hoặc thay đổi dữ liệu trước khi lưu.

Câu hỏi 104: Khác biệt giữa `Object.freeze` và `Object.preventExtensions`?

Phân tích chi tiết:

Object.freeze:
- Không cho phép thêm, xóa hoặc sửa đổi thuộc tính.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi obj.b = 3; // Không thêm được
Object.preventExtensions:
- Không cho phép thêm thuộc tính mới, nhưng có thể sửa đổi hoặc xóa thuộc tính hiện tại.
const obj = Object.preventExtensions({ a: 1 }); obj.a = 2; // Thay đổi được obj.b = 3; // Không thêm được delete obj.a; // Xóa được

So sánh:

Object.freeze: Toàn bộ object bất biến.
Object.preventExtensions: Chỉ ngăn thêm thuộc tính mới.

Câu hỏi 105: Sự khác biệt giữa synchronous và asynchronous?

Phân tích chi tiết:

Synchronous:
- Thực thi các tác vụ theo tuần tự, tác vụ sau phải đợi tác vụ trước hoàn thành.
console.log("Start"); console.log("End"); // Output: Start, End
Asynchronous:
- Cho phép các tác vụ không đồng bộ thực thi mà không chặn chương trình.
console.log("Start"); setTimeout(() => { console.log("Asynchronous task"); }, 1000); console.log("End"); // Output: Start, End, Asynchronous task

So sánh:

Đồng bộ phù hợp với tác vụ đơn giản.
Bất đồng bộ tối ưu hóa hiệu suất khi xử lý tác vụ tốn thời gian.

Câu hỏi 106: Khác biệt giữa `setTimeout` và `setInterval`?

Phân tích chi tiết:

setTimeout:
- Chạy hàm callback sau một khoảng thời gian và chỉ chạy một lần.
setTimeout(() => console.log("Run once"), 1000);
setInterval:
- Lặp lại hàm callback sau mỗi khoảng thời gian cố định.
setInterval(() => console.log("Repeat"), 1000);

So sánh:

setTimeout: Chỉ chạy một lần.
setInterval: Lặp lại liên tục.

Câu hỏi 107: Làm thế nào để dừng `setInterval`?

Phân tích chi tiết:

Dùng clearInterval:
- Lưu ID trả về từ setInterval và truyền vào clearInterval.
const intervalId = setInterval(() => console.log("Running"), 1000); setTimeout(() => { clearInterval(intervalId); console.log("Stopped"); }, 5000);
Kết quả:
- In “Running” mỗi giây, sau 5 giây in “Stopped”.

Câu hỏi 108: Làm thế nào để thêm thuộc tính getter và setter vào object?

Phân tích chi tiết:

Dùng Object.defineProperty: const obj = {}; Object.defineProperty(obj, "value", { get() { return this._value; }, set(newValue) { this._value = newValue * 2; }, }); obj.value = 5; console.log(obj.value); // Output: 10
Ứng dụng:
- Kiểm soát quyền truy cập hoặc tính toán giá trị động.

Câu hỏi 109: `Promise.any` là gì và cách sử dụng?

Phân tích chi tiết:

Khái niệm:
- Promise.any trả về kết quả của promise đầu tiên được giải quyết (fulfilled).
- Nếu tất cả promise đều bị từ chối, trả về lỗi AggregateError.
Ví dụ: const p1 = Promise.reject("Error"); const p2 = Promise.resolve("Success"); const p3 = Promise.resolve("Another success"); Promise.any([p1, p2, p3]).then((result) => console.log(result)); // Output: Success

Câu hỏi 110: Khác biệt giữa `new Function` và khai báo hàm truyền thống?

Phân tích chi tiết:

new Function:
- Tạo hàm từ chuỗi.
- Chạy trong phạm vi toàn cục.
const add = new Function("a", "b", "return a + b"); console.log(add(2, 3)); // Output: 5
Khai báo hàm truyền thống:
- Chạy trong phạm vi hiện tại.
function add(a, b) { return a + b; }

So sánh:

new Function: Không an toàn và khó kiểm tra lỗi.
Khai báo hàm truyền thống: Ưu tiên sử dụng.

Câu hỏi 111: Sự khác biệt giữa `Array.prototype.reduce` và `Array.prototype.reduceRight`?

Phân tích chi tiết:

reduce:
- Duyệt mảng từ trái sang phải và tích lũy giá trị.
const arr = [1, 2, 3, 4]; const sum = arr.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 10
reduceRight:
- Duyệt mảng từ phải sang trái và tích lũy giá trị.
const arr = ["a", "b", "c"]; const result = arr.reduceRight((acc, curr) => acc + curr, ""); console.log(result); // Output: "cba"

So sánh:

reduce: Bắt đầu từ phần tử đầu tiên.
reduceRight: Bắt đầu từ phần tử cuối cùng.

Câu hỏi 112: Sự khác biệt giữa `Object.prototype.hasOwnProperty` và `in`?

Phân tích chi tiết:

hasOwnProperty:
- Kiểm tra xem object có sở hữu một thuộc tính hay không (không kiểm tra prototype).
const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; console.log(obj.hasOwnProperty("inheritedKey")); // Output: false console.log(obj.hasOwnProperty("ownKey")); // Output: true
in:
- Kiểm tra xem một thuộc tính có tồn tại trong object hoặc prototype.
console.log("inheritedKey" in obj); // Output: true console.log("ownKey" in obj); // Output: true

So sánh:

hasOwnProperty: Chỉ kiểm tra các thuộc tính riêng.
in: Kiểm tra cả thuộc tính kế thừa.

Câu hỏi 113: Làm thế nào để chuyển một `arguments` thành mảng?

Phân tích chi tiết:

Dùng Array.from: function example() { const args = Array.from(arguments); console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]
Dùng spread operator (...): function example() { const args = [...arguments]; console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]
Dùng Array.prototype.slice: function example() { const args = Array.prototype.slice.call(arguments); console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]

Câu hỏi 114: Sự khác biệt giữa `==` và `Object.is`?

Phân tích chi tiết:

==:
- So sánh lỏng lẻo (ép kiểu).
console.log(5 == "5"); // Output: true console.log(null == undefined); // Output: true
Object.is:
- So sánh chính xác hơn, không thực hiện ép kiểu.
console.log(Object.is(5, "5")); // Output: false console.log(Object.is(NaN, NaN)); // Output: true

So sánh:

==: Có thể gây lỗi do ép kiểu.
Object.is: Phù hợp khi cần so sánh chính xác.

Câu hỏi 115: Làm thế nào để kiểm tra xem một hàm có phải là async function?

Phân tích chi tiết:

Kiểm tra constructor: async function asyncFunc() {} function regularFunc() {} console.log(asyncFunc.constructor.name === "AsyncFunction"); // Output: true console.log(regularFunc.constructor.name === "AsyncFunction"); // Output: false
Dùng Object.prototype.toString: console.log(Object.prototype.toString.call(asyncFunc)); // Output: [object AsyncFunction]

Câu hỏi 116: Sự khác biệt giữa `JSON.stringify` và `JSON.parse`?

Phân tích chi tiết:

JSON.stringify:
- Chuyển object/mảng thành chuỗi JSON.
const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: '{"name":"Alice","age":25}'
JSON.parse:
- Chuyển chuỗi JSON thành object/mảng.
const json = '{"name":"Alice","age":25}'; const obj = JSON.parse(json); console.log(obj); // Output: { name: "Alice", age: 25 }

Câu hỏi 117: Làm thế nào để làm tròn số thập phân?

Phân tích chi tiết:

Dùng toFixed:
- Làm tròn số và trả về chuỗi.
const num = 1.2345; console.log(num.toFixed(2)); // Output: "1.23"
Dùng Math.round với số mũ:
- Làm tròn và trả về số.
const num = 1.2345; const rounded = Math.round(num * 100) / 100; console.log(rounded); // Output: 1.23

Câu hỏi 118: Khác biệt giữa `delete` và `Reflect.deleteProperty`?

Phân tích chi tiết:

delete:
- Xóa một thuộc tính khỏi object.
const obj = { a: 1 }; delete obj.a; console.log(obj); // Output: {}
Reflect.deleteProperty:
- Hành vi tương tự delete, nhưng trả về boolean.
const obj = { a: 1 }; console.log(Reflect.deleteProperty(obj, "a")); // Output: true console.log(obj); // Output: {}

Ưu điểm của Reflect.deleteProperty:

Dễ kiểm tra kết quả thành công hoặc thất bại.

Câu hỏi 119: Làm thế nào để clone một object?

Phân tích chi tiết:

Dùng spread operator (...):
- Shallow copy (sao chép nông).
const obj = { a: 1, b: { c: 2 } }; const clone = { ...obj }; console.log(clone); // Output: { a: 1, b: { c: 2 } }
Dùng Object.assign:
- Tương tự spread operator.
const clone = Object.assign({}, obj);
Dùng JSON.parse(JSON.stringify()):
- Deep copy (sao chép sâu).
const deepClone = JSON.parse(JSON.stringify(obj));
Dùng thư viện lodash: const cloneDeep = require("lodash").cloneDeep; const deepClone = cloneDeep(obj);

Câu hỏi 120: Sự khác biệt giữa `call stack` và `event loop`?

Phân tích chi tiết:

Call Stack:
- Nơi lưu trữ các hàm đang thực thi.
function first() { second(); } function second() { console.log("Second"); } first();
Event Loop:
- Theo dõi Call Stack và Task Queue, đảm bảo các tác vụ bất đồng bộ được thực thi khi Call Stack trống.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); // Output: Start, End, Timeout

So sánh:

Call Stack: Xử lý các tác vụ đồng bộ.
Event Loop: Điều phối các tác vụ bất đồng bộ.

Câu hỏi 121: Sự khác biệt giữa `static` và instance methods trong JavaScript?

Phân tích chi tiết:

Static methods:
- Được định nghĩa trên chính class, không trên instance.
- Gọi trực tiếp từ class, không cần khởi tạo object.
class MathUtil { static add(a, b) { return a + b; } } console.log(MathUtil.add(2, 3)); // Output: 5
Instance methods:
- Được định nghĩa trong class và sử dụng trên các object instance.
class Person { constructor(name) { this.name = name; } greet() { return `Hello, my name is ${this.name}`; } } const alice = new Person("Alice"); console.log(alice.greet()); // Output: Hello, my name is Alice

So sánh:

Static methods: Liên kết với class.
Instance methods: Liên kết với instance của class.

Câu hỏi 122: Làm thế nào để tạo một `Singleton` trong JavaScript?

Phân tích chi tiết:

Singleton là mẫu thiết kế đảm bảo một class chỉ có một instance duy nhất.

Dùng IIFE (Immediately Invoked Function Expression): const Singleton = (function () { let instance; function createInstance() { return { name: "Singleton Instance" }; } return { getInstance() { if (!instance) { instance = createInstance(); } return instance; }, }; })(); const instance1 = Singleton.getInstance(); const instance2 = Singleton.getInstance(); console.log(instance1 === instance2); // Output: true
Dùng class: class Singleton { constructor() { if (Singleton.instance) { return Singleton.instance; } Singleton.instance = this; } } const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // Output: true

Câu hỏi 123: Làm thế nào để đảo ngược một chuỗi trong JavaScript?

Phân tích chi tiết:

Dùng split, reverse, và join: const reverseString = (str) => str.split("").reverse().join(""); console.log(reverseString("hello")); // Output: "olleh"
Dùng vòng lặp: const reverseString = (str) => { let reversed = ""; for (let char of str) { reversed = char + reversed; } return reversed; }; console.log(reverseString("hello")); // Output: "olleh"

Câu hỏi 124: Làm thế nào để tạo một debounce function?

Phân tích chi tiết:

Khái niệm:
- Debounce là kỹ thuật trì hoãn việc thực thi hàm cho đến khi không còn sự kiện nào xảy ra trong một khoảng thời gian nhất định.
Ví dụ debounce function: function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);

Câu hỏi 125: Làm thế nào để tạo một throttle function?

Phân tích chi tiết:

Khái niệm:
- Throttle là kỹ thuật đảm bảo một hàm chỉ được gọi tối đa một lần trong một khoảng thời gian nhất định.
Ví dụ throttle function: function throttle(func, limit) { let lastFunc; let lastRan; return function (...args) { const now = Date.now(); if (!lastRan || now - lastRan >= limit) { func.apply(this, args); lastRan = now; } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if (now - lastRan >= limit) { func.apply(this, args); lastRan = now; } }, limit - (now - lastRan)); } }; } const log = throttle(() => console.log("Throttled!"), 1000); window.addEventListener("scroll", log);

Câu hỏi 126: Sự khác biệt giữa `async/await` và `.then/.catch`?

Phân tích chi tiết:

.then/.catch:
- Xử lý bất đồng bộ dựa trên callback.
fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error));
async/await:
- Cú pháp rõ ràng, dễ đọc hơn.
async function fetchData() { try { const response = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData();

So sánh:

async/await: Dễ đọc hơn, giống mã đồng bộ.
.then/.catch: Cú pháp cũ, dễ dẫn đến callback hell.

Câu hỏi 127: Sự khác biệt giữa `WeakMap` và `Map`?

Phân tích chi tiết:

WeakMap:
- Chỉ chấp nhận object làm key.
- Không ngăn thu gom rác (garbage collection).
let obj = {}; const wm = new WeakMap(); wm.set(obj, "value"); obj = null; // Object bị thu gom rác
Map:
- Chấp nhận mọi kiểu dữ liệu làm key.
- Key tồn tại cho đến khi bị xóa rõ ràng.
const map = new Map(); map.set("key", "value"); console.log(map.get("key")); // Output: "value"

Câu hỏi 128: Làm thế nào để kiểm tra xem một object là iterable?

Phân tích chi tiết:

Kiểm tra Symbol.iterator: const isIterable = (obj) => obj != null && typeof obj[Symbol.iterator] === "function"; console.log(isIterable([])); // Output: true console.log(isIterable({})); // Output: false
Ví dụ:
- Chuỗi, mảng, Set, Map đều là iterable.
console.log(isIterable("hello")); // Output: true console.log(isIterable(new Set())); // Output: true console.log(isIterable({ key: "value" })); // Output: false

Câu hỏi 129: Sự khác biệt giữa `toString` và `valueOf`?

Phân tích chi tiết:

toString:
- Trả về chuỗi đại diện cho object.
const obj = { toString: () => "Custom String" }; console.log(obj.toString()); // Output: "Custom String"
valueOf:
- Trả về giá trị nguyên thủy của object.
const obj = { valueOf: () => 42 }; console.log(obj + 10); // Output: 52

So sánh:

toString: Ưu tiên khi chuyển sang chuỗi.
valueOf: Ưu tiên khi thực hiện các phép toán.

Câu hỏi 130: Làm thế nào để phát hiện vòng lặp vô hạn trong `Promise`?

Phân tích chi tiết:

Ví dụ vòng lặp vô hạn: const loop = () => Promise.resolve().then(loop); loop();
Phát hiện:
- Dùng trình duyệt hoặc Node.js để phát hiện stack overflow.
- Sử dụng cơ chế giới hạn số lần lặp:
let counter = 0; const safeLoop = () => { if (counter++ > 1000) throw new Error("Infinite loop detected"); return Promise.resolve().then(safeLoop); }; safeLoop();

Câu hỏi 131: Sự khác biệt giữa `try...catch` và `finally` trong JavaScript?

Phân tích chi tiết:

try...catch:
- Bắt và xử lý lỗi trong một đoạn mã.
try { const result = JSON.parse("invalid json"); } catch (error) { console.error("Error caught:", error.message); // Output: Error caught: Unexpected token i }
finally:
- Luôn được thực thi, bất kể lỗi có xảy ra hay không.
try { console.log("Executing try block"); } finally { console.log("Finally block always runs"); }
Kết hợp try...catch...finally: try { throw new Error("An error occurred"); } catch (error) { console.error("Caught:", error.message); } finally { console.log("Cleanup actions here"); }

Ứng dụng:

catch: Xử lý lỗi.
finally: Dọn dẹp tài nguyên hoặc thực hiện các tác vụ luôn cần chạy.

Câu hỏi 132: Sự khác biệt giữa `for...of` và `for...in`?

Phân tích chi tiết:

for...of:
- Duyệt qua các giá trị của iterable objects (mảng, chuỗi, Set, Map).
const arr = [10, 20, 30]; for (const value of arr) { console.log(value); // Output: 10, 20, 30 }
for...in:
- Duyệt qua các key của object, bao gồm cả các thuộc tính kế thừa.
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key, obj[key]); // Output: a 1, b 2 }

So sánh:

for...of: Hoạt động với iterable objects.
for...in: Hoạt động với các key của object.

Câu hỏi 133: Sự khác biệt giữa `get` và `set` trong object?

Phân tích chi tiết:

get:
- Được sử dụng để định nghĩa phương thức lấy giá trị thuộc tính.
const obj = { _value: 10, get value() { return this._value; }, }; console.log(obj.value); // Output: 10
set:
- Được sử dụng để định nghĩa phương thức gán giá trị thuộc tính.
const obj = { _value: 10, set value(val) { this._value = val * 2; }, }; obj.value = 5; console.log(obj._value); // Output: 10

Ứng dụng:

Kiểm soát hoặc xử lý logic trước khi gán/lấy giá trị thuộc tính.

Câu hỏi 134: Làm thế nào để kiểm tra xem một object là empty (rỗng)?

Phân tích chi tiết:

Dùng Object.keys: const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // Output: true console.log(isEmpty({ a: 1 })); // Output: false
Dùng vòng lặp for...in: const isEmpty = (obj) => { for (const key in obj) { return false; } return true; };
Dùng JSON: const isEmpty = (obj) => JSON.stringify(obj) === "{}";

Câu hỏi 135: Làm thế nào để chuyển đổi một `NodeList` thành mảng?

Phân tích chi tiết:

Dùng Array.from: const nodeList = document.querySelectorAll("div"); const array = Array.from(nodeList); console.log(array);
Dùng spread operator (...): const array = [...document.querySelectorAll("div")]; console.log(array);
Dùng Array.prototype.slice: const array = Array.prototype.slice.call(document.querySelectorAll("div")); console.log(array);

Câu hỏi 136: Sự khác biệt giữa `Object.create` và `new` trong JavaScript?

Phân tích chi tiết:

Object.create:
- Tạo một object mới với prototype được chỉ định.
const proto = { greet() { return "Hello"; } }; const obj = Object.create(proto); console.log(obj.greet()); // Output: Hello
new:
- Tạo một instance mới dựa trên constructor function.
function Person(name) { this.name = name; } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice

So sánh:

Object.create: Chỉ định prototype trực tiếp.
new: Gọi constructor để tạo object.

Câu hỏi 137: Sự khác biệt giữa `apply`, `call`, và `bind`?

Phân tích chi tiết:

apply:
- Gọi hàm với this và tham số dưới dạng mảng.
function greet(greeting, name) { console.log(`${greeting}, ${name}`); } greet.apply(null, ["Hello", "Alice"]); // Output: Hello, Alice
call:
- Gọi hàm với this và tham số truyền trực tiếp.
greet.call(null, "Hi", "Bob"); // Output: Hi, Bob
bind:
- Tạo một hàm mới với this cố định và không thực thi ngay.
const greetAlice = greet.bind(null, "Hey", "Alice"); greetAlice(); // Output: Hey, Alice

Câu hỏi 138: Sự khác biệt giữa `WeakSet` và `Set`?

Phân tích chi tiết:

Set:
- Lưu trữ mọi giá trị duy nhất, bao gồm cả primitive và object.
const set = new Set(); set.add(1); set.add({ key: "value" }); console.log(set.size); // Output: 2
WeakSet:
- Chỉ lưu trữ object và không ngăn chặn thu gom rác (garbage collection).
let obj = {}; const ws = new WeakSet(); ws.add(obj); obj = null; // Object bị thu gom rác

So sánh:

Set: Lưu mọi giá trị, hỗ trợ iteration.
WeakSet: Chỉ lưu object, không hỗ trợ iteration.

Câu hỏi 139: Làm thế nào để kiểm tra xem một object có phải là prototype của object khác?

Phân tích chi tiết:

Dùng isPrototypeOf: const proto = {}; const obj = Object.create(proto); console.log(proto.isPrototypeOf(obj)); // Output: true
Dùng Object.getPrototypeOf: console.log(Object.getPrototypeOf(obj) === proto); // Output: true

Câu hỏi 140: Làm thế nào để kiểm tra xem một giá trị là iterable?

Phân tích chi tiết:

Kiểm tra Symbol.iterator: const isIterable = (value) => value != null && typeof value[Symbol.iterator] === "function"; console.log(isIterable([])); // Output: true console.log(isIterable({})); // Output: false console.log(isIterable("hello")); // Output: true

Câu hỏi 141: Sự khác biệt giữa `Function Declaration` và `Function Expression`?

Phân tích chi tiết:

Function Declaration:
- Được hoisted, có thể gọi trước khi khai báo.
greet(); function greet() { console.log("Hello!"); }
Function Expression:
- Không được hoisted, chỉ có thể gọi sau khi khai báo.
const greet = function () { console.log("Hello!"); }; greet(); // Output: Hello!
So sánh:
- Declaration: Có thể gọi trước khi khai báo.
- Expression: Cần khai báo trước khi gọi.

Câu hỏi 142: Sự khác biệt giữa `Map` và `Object` trong JavaScript?

Phân tích chi tiết:

Map:
- Lưu trữ key-value, key có thể là bất kỳ giá trị nào.
- Duy trì thứ tự các mục.
const map = new Map(); map.set("key", "value"); map.set(1, "number"); console.log(map.get("key")); // Output: value console.log(map.get(1)); // Output: number
Object:
- Lưu trữ key-value, key chỉ có thể là chuỗi hoặc symbol.
const obj = {}; obj.key = "value"; console.log(obj.key); // Output: value

So sánh:

Map: Hiệu quả hơn khi làm việc với số lượng lớn các mục.
Object: Phù hợp khi làm việc với cấu trúc dữ liệu đơn giản.

Câu hỏi 143: Khác biệt giữa `parseInt` và `Number` trong JavaScript?

Phân tích chi tiết:

parseInt:
- Phân tích một chuỗi và trả về số nguyên.
- Bỏ qua các ký tự không phải số sau số đầu tiên.
console.log(parseInt("42abc")); // Output: 42 console.log(parseInt("abc42")); // Output: NaN
Number:
- Chuyển đổi toàn bộ chuỗi thành số.
- Trả về NaN nếu chuỗi không hợp lệ.
console.log(Number("42")); // Output: 42 console.log(Number("42abc")); // Output: NaN

Câu hỏi 144: Làm thế nào để kiểm tra xem một object là một plain object?

Phân tích chi tiết:

Dùng Object.prototype.toString: const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]"; console.log(isPlainObject({})); // Output: true console.log(isPlainObject([])); // Output: false
Dùng Object.getPrototypeOf: const isPlainObject = (obj) => Object.getPrototypeOf(obj) === Object.prototype; console.log(isPlainObject({})); // Output: true console.log(isPlainObject(Object.create(null))); // Output: false

Câu hỏi 145: Sự khác biệt giữa `null` và `undefined`?

Phân tích chi tiết:

null:
- Đại diện cho “không có giá trị”.
- Lập trình viên gán giá trị null cho biến.
const a = null; console.log(a); // Output: null
undefined:
- Đại diện cho biến đã được khai báo nhưng chưa gán giá trị.
let b; console.log(b); // Output: undefined

So sánh:

null: Giá trị được gán.
undefined: Giá trị chưa được gán.

Câu hỏi 146: Làm thế nào để kiểm tra kiểu dữ liệu của một biến?

Phân tích chi tiết:

Dùng typeof:
- Kiểm tra kiểu dữ liệu cơ bản.
console.log(typeof 42); // Output: "number" console.log(typeof "Hello"); // Output: "string" console.log(typeof null); // Output: "object" (lỗi trong JavaScript)
Dùng Array.isArray:
- Kiểm tra kiểu mảng.
console.log(Array.isArray([1, 2, 3])); // Output: true
Dùng Object.prototype.toString:
- Phân biệt chính xác kiểu dữ liệu.
console.log(Object.prototype.toString.call(null)); // Output: "[object Null]" console.log(Object.prototype.toString.call([])); // Output: "[object Array]"

Câu hỏi 147: Sự khác biệt giữa `strict mode` và non-strict mode?

Phân tích chi tiết:

Strict Mode:
- Giúp ngăn ngừa các lỗi phổ biến.
- Kích hoạt bằng "use strict".
"use strict"; x = 10; // Error: x is not defined
Non-strict mode:
- JavaScript tự động xử lý một số lỗi, không cảnh báo.
x = 10; // Không lỗi, x trở thành biến toàn cục

Câu hỏi 148: Sự khác biệt giữa `==` và `Object.is` trong JavaScript?

Phân tích chi tiết:

==:
- So sánh lỏng lẻo, thực hiện ép kiểu.
console.log(0 == false); // Output: true console.log(null == undefined); // Output: true
Object.is:
- So sánh chính xác hơn, không thực hiện ép kiểu.
console.log(Object.is(0, false)); // Output: false console.log(Object.is(NaN, NaN)); // Output: true

So sánh:

==: Dễ gây lỗi do ép kiểu.
Object.is: Phù hợp khi cần so sánh chính xác.

Câu hỏi 149: Sự khác biệt giữa `document.readyState` và `DOMContentLoaded`?

Phân tích chi tiết:

document.readyState:
- Trả về trạng thái hiện tại của tài liệu: "loading", "interactive", hoặc "complete".
console.log(document.readyState); // Output: "loading", "interactive", hoặc "complete"
DOMContentLoaded:
- Sự kiện được kích hoạt khi HTML đã được tải và phân tích xong.
document.addEventListener("DOMContentLoaded", () => { console.log("DOM fully loaded and parsed"); });

Câu hỏi 150: Sự khác biệt giữa `innerHTML`, `textContent`, và `innerText`?

Phân tích chi tiết:

innerHTML:
- Trả về hoặc thiết lập HTML của phần tử.
const div = document.createElement("div"); div.innerHTML = "<b>Hello</b>"; console.log(div.innerHTML); // Output: "<b>Hello</b>"
textContent:
- Trả về hoặc thiết lập văn bản của phần tử (không bao gồm HTML).
div.textContent = "<b>Hello</b>"; console.log(div.textContent); // Output: "<b>Hello</b>"
innerText:
- Trả về văn bản hiển thị của phần tử (ảnh hưởng bởi CSS).
div.innerText = "<b>Hello</b>"; console.log(div.innerText); // Output: "<b>Hello</b>"

100 câu hỏi phỏng vấn kinh điển về giải thuật và cấu trúc dữ liệu có lời giải chi tiết A-Z

132 min
1 năm ago
199

Câu hỏi 1: Kiểm tra chuỗi đối xứng (Palindrome) Viết hàm kiểm tra xem một chuỗi có phải là chuỗi đối xứng hay không. Giải pháp javascriptSao chép mãfunction isPalindrome(str) { // Bước 1: Chuẩn hóa chuỗi (loại bỏ khoảng trắng và […]

Tagged #ctdl&gt, #interview

Câu hỏi 1: Kiểm tra chuỗi đối xứng (Palindrome)

Viết hàm kiểm tra xem một chuỗi có phải là chuỗi đối xứng hay không.

Giải pháp

javascriptSao chép mãfunction isPalindrome(str) { // Bước 1: Chuẩn hóa chuỗi (loại bỏ khoảng trắng và chuyển về chữ thường) const normalizedStr = str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase(); // Bước 2: So sánh chuỗi đã chuẩn hóa với chuỗi đảo ngược của nó return normalizedStr === normalizedStr.split('').reverse().join(''); }

Phân tích chi tiết

Chuẩn hóa chuỗi:
- str.replace(/[^a-zA-Z0-9]/g, ''): Loại bỏ các ký tự không phải chữ cái và số.
  - Biểu thức chính quy /[^a-zA-Z0-9]/g tìm tất cả các ký tự không thuộc khoảng a-z, A-Z, hoặc 0-9.
  - '' thay thế các ký tự không mong muốn bằng chuỗi rỗng.
- .toLowerCase(): Chuyển toàn bộ chuỗi về chữ thường để so sánh không phân biệt hoa/thường.
Đảo ngược chuỗi:
- .split(''): Chuyển chuỗi thành mảng các ký tự.
- .reverse(): Đảo ngược mảng.
- .join(''): Ghép các phần tử trong mảng lại thành chuỗi.
So sánh:
- normalizedStr === normalizedStr.split('').reverse().join(''): So sánh chuỗi đã chuẩn hóa với chuỗi đảo ngược.

Ví dụ

javascriptSao chép mãconsole.log(isPalindrome("A man, a plan, a canal: Panama")); // true console.log(isPalindrome("race a car")); // false

Câu hỏi 2: Tìm phần tử xuất hiện lẻ lần trong mảng

Viết hàm nhận vào một mảng số nguyên, trả về phần tử xuất hiện lẻ số lần.

Giải pháp

javascriptSao chép mãfunction findOdd(arr) { return arr.reduce((acc, num) => acc ^ num, 0); }

Phân tích chi tiết

Tìm hiểu toán tử XOR (^):
- Toán tử XOR trả về 1 nếu hai bit khác nhau, 0 nếu hai bit giống nhau.
- Tính chất:
  - a ^ a = 0 (một số XOR với chính nó bằng 0).
  - a ^ 0 = a (một số XOR với 0 vẫn là chính nó).
  - XOR có tính giao hoán và kết hợp.
Ứng dụng XOR:
- Khi XOR tất cả các phần tử trong mảng, các phần tử xuất hiện chẵn lần sẽ bị triệt tiêu (vì a ^ a = 0).
- Chỉ phần tử xuất hiện lẻ lần còn lại.
Sử dụng reduce:
- .reduce((acc, num) => acc ^ num, 0):
  - acc: Giá trị tích lũy (ban đầu là 0).
  - num: Phần tử hiện tại trong mảng.
  - acc ^ num: Thực hiện XOR giữa giá trị tích lũy và phần tử hiện tại.

Ví dụ

javascriptSao chép mãconsole.log(findOdd([1, 2, 3, 2, 3, 1, 1])); // 1 console.log(findOdd([4, 3, 4, 4, 4, 5, 5])); // 3

Câu hỏi 3: Sắp xếp mảng theo tần suất

Sắp xếp mảng theo tần suất xuất hiện, tần suất cao hơn sẽ đứng trước, nếu bằng nhau thì sắp xếp theo giá trị tăng dần.

Giải pháp

javascriptSao chép mãfunction frequencySort(arr) { const freqMap = {}; // Bước 1: Tính tần suất xuất hiện của từng phần tử arr.forEach(num => { freqMap[num] = (freqMap[num] || 0) + 1; }); // Bước 2: Sắp xếp mảng dựa trên tần suất và giá trị return arr.sort((a, b) => { if (freqMap[b] === freqMap[a]) { return a - b; // Nếu tần suất bằng nhau, sắp xếp theo giá trị } return freqMap[b] - freqMap[a]; // Sắp xếp theo tần suất giảm dần }); }

Phân tích chi tiết

Tạo bảng tần suất (freqMap):
- arr.forEach(num => { freqMap[num] = (freqMap[num] || 0) + 1; }):
  - Duyệt qua từng phần tử trong mảng.
  - Nếu phần tử chưa có trong freqMap, gán giá trị ban đầu là 0.
  - Cộng thêm 1 mỗi lần gặp phần tử.
Sắp xếp mảng:
- arr.sort((a, b) => { ... }):
  - freqMap[b] - freqMap[a]: Sắp xếp giảm dần theo tần suất.
  - a - b: Nếu tần suất bằng nhau, sắp xếp tăng dần theo giá trị.

Ví dụ

javascriptSao chép mãconsole.log(frequencySort([1, 1, 2, 2, 2, 3])); // [2, 2, 2, 1, 1, 3] console.log(frequencySort([4, 5, 6, 5, 4, 3])); // [4, 4, 5, 5, 3, 6]

Câu hỏi 4: Tìm tổng hai số có trong mảng bằng một số mục tiêu (Two Sum)

Viết một hàm nhận vào mảng số nguyên và một số mục tiêu, trả về chỉ số của hai số trong mảng sao cho tổng của chúng bằng số mục tiêu.

Giải pháp 1: Sử dụng vòng lặp lồng nhau (Brute Force)

function twoSum(nums, target) { for (let i = 0; i < nums.length; i++) { for (let j = i + 1; j < nums.length; j++) { if (nums[i] + nums[j] === target) { return [i, j]; } } } return []; }

Phân tích chi tiết

Duyệt qua các cặp phần tử:
- for (let i = 0; i < nums.length; i++): Vòng lặp ngoài duyệt từng phần tử.
- for (let j = i + 1; j < nums.length; j++): Vòng lặp trong duyệt các phần tử còn lại để tránh kiểm tra lặp lại.
Kiểm tra điều kiện:
- if (nums[i] + nums[j] === target): Nếu tổng hai phần tử bằng target, trả về chỉ số của chúng.
Độ phức tạp:
- Thời gian: O(n2)O(n^2) do có hai vòng lặp lồng nhau.
- Bộ nhớ: O(1)O(1) vì không sử dụng cấu trúc lưu trữ bổ sung.

Giải pháp 2: Sử dụng Hash Map (Hiệu quả hơn)

function twoSum(nums, target) { const numMap = new Map(); for (let i = 0; i < nums.length; i++) { const complement = target - nums[i]; if (numMap.has(complement)) { return [numMap.get(complement), i]; } numMap.set(nums[i], i); } return []; }

Phân tích chi tiết

Hash Map (numMap):
- new Map(): Tạo một cấu trúc lưu trữ giá trị và chỉ số của phần tử.
Tính giá trị cần tìm (complement):
- const complement = target - nums[i]: Tìm giá trị cần để tổng bằng target.
Kiểm tra trong Hash Map:
- if (numMap.has(complement)): Nếu giá trị cần tìm đã tồn tại, trả về chỉ số.
Lưu giá trị vào Hash Map:
- numMap.set(nums[i], i): Lưu giá trị hiện tại và chỉ số của nó.
Độ phức tạp:
- Thời gian: O(n)O(n) do chỉ cần duyệt qua mảng một lần.
- Bộ nhớ: O(n)O(n) để lưu các giá trị vào Hash Map.

Ví dụ

console.log(twoSum([2, 7, 11, 15], 9)); // [0, 1] console.log(twoSum([3, 2, 4], 6)); // [1, 2]

Câu hỏi 5: Tìm độ dài của chuỗi con dài nhất không chứa ký tự lặp

Giải pháp

function lengthOfLongestSubstring(s) { let set = new Set(); let maxLength = 0; let left = 0; for (let right = 0; right < s.length; right++) { while (set.has(s[right])) { set.delete(s[left]); left++; } set.add(s[right]); maxLength = Math.max(maxLength, right - left + 1); } return maxLength; }

Phân tích chi tiết

Sử dụng cửa sổ trượt (Sliding Window):
- left và right: Hai con trỏ đại diện cho ranh giới của cửa sổ.
- set: Một tập hợp để lưu các ký tự duy nhất trong cửa sổ.
Kiểm tra ký tự lặp:
- while (set.has(s[right])): Nếu ký tự tại right đã xuất hiện trong cửa sổ, xóa các ký tự từ left đến khi ký tự đó không còn.
Thêm ký tự mới:
- set.add(s[right]): Thêm ký tự hiện tại vào cửa sổ.
Cập nhật độ dài lớn nhất:
- maxLength = Math.max(maxLength, right - left + 1): Cập nhật độ dài chuỗi con không lặp dài nhất.
Độ phức tạp:
- Thời gian: O(n)O(n) do mỗi ký tự được duyệt tối đa 2 lần (thêm vào và xóa khỏi tập hợp).
- Bộ nhớ: O(k)O(k) với kk là số lượng ký tự duy nhất trong chuỗi.

Ví dụ

console.log(lengthOfLongestSubstring("abcabcbb")); // 3 ("abc") console.log(lengthOfLongestSubstring("bbbbb")); // 1 ("b") console.log(lengthOfLongestSubstring("pwwkew")); // 3 ("wke")

Câu hỏi 6: Tìm giá trị lớn thứ hai trong mảng

Giải pháp

function secondLargest(nums) { let first = -Infinity, second = -Infinity; for (let num of nums) { if (num > first) { second = first; first = num; } else if (num > second && num !== first) { second = num; } } return second === -Infinity ? null : second; }

Phân tích chi tiết

Biến theo dõi giá trị lớn nhất và lớn thứ hai:
- first: Giá trị lớn nhất.
- second: Giá trị lớn thứ hai.
Cập nhật giá trị lớn nhất và lớn thứ hai:
- if (num > first): Nếu num lớn hơn giá trị lớn nhất hiện tại, cập nhật first và second.
- else if (num > second && num !== first): Nếu num lớn hơn second và khác first, cập nhật second.
Xử lý trường hợp không có giá trị lớn thứ hai:
- return second === -Infinity ? null : second: Nếu không tồn tại giá trị lớn thứ hai, trả về null.
Độ phức tạp:
- Thời gian: O(n)O(n) do chỉ duyệt qua mảng một lần.
- Bộ nhớ: O(1)O(1) do không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

console.log(secondLargest([3, 2, 1])); // 2 console.log(secondLargest([10, 10, 10])); // null console.log(secondLargest([5])); // null

Câu hỏi 7: Tìm tất cả các dãy con không trùng lặp (Subsets)

Viết hàm nhận vào một mảng số nguyên và trả về tất cả các dãy con (subsets) không trùng lặp.

Giải pháp

function subsets(nums) { const result = []; function backtrack(start, current) { result.push([...current]); for (let i = start; i < nums.length; i++) { current.push(nums[i]); // Thêm phần tử vào dãy con hiện tại backtrack(i + 1, current); // Đệ quy với phần tử tiếp theo current.pop(); // Loại bỏ phần tử vừa thêm để quay lại trạng thái trước } } backtrack(0, []); return result; }

Phân tích chi tiết

Hàm backtrack:
- start: Chỉ số bắt đầu để duyệt các phần tử tiếp theo.
- current: Dãy con hiện tại đang xây dựng.
Thêm dãy con vào kết quả:
- result.push([...current]): Sao chép current và thêm vào danh sách kết quả.
Duyệt từng phần tử từ chỉ số start:
- for (let i = start; i < nums.length; i++): Duyệt qua các phần tử từ chỉ số start trở đi.
- current.push(nums[i]): Thêm phần tử hiện tại vào dãy con.
- backtrack(i + 1, current): Đệ quy với chỉ số tiếp theo.
Loại bỏ phần tử khi quay lại:
- current.pop(): Sau khi hoàn thành một nhánh, loại bỏ phần tử cuối để thử các nhánh khác.
Độ phức tạp:
- Thời gian: O(2n)O(2^n) với nn là độ dài của mảng (mỗi phần tử có 2 trạng thái: chọn hoặc không chọn).
- Bộ nhớ: O(n)O(n) cho dãy con hiện tại.

Ví dụ

console.log(subsets([1, 2, 3])); // [[], [1], [1, 2], [1, 2, 3], [1, 3], [2], [2, 3], [3]]

Câu hỏi 8: Tìm phần tử lớn nhất trong mảng xoay

Cho một mảng đã được sắp xếp nhưng sau đó bị xoay một số lần. Hãy tìm phần tử lớn nhất trong mảng.

Giải pháp

function findMaxInRotatedArray(nums) { let left = 0, right = nums.length - 1; while (left < right) { let mid = Math.floor((left + right) / 2); if (nums[mid] > nums[right]) { left = mid + 1; } else { right = mid; } } return nums[right]; }

Phân tích chi tiết

Binary Search:
- Chia mảng thành hai nửa để tìm kiếm.
- mid: Chỉ số giữa của mảng được tính bằng (left + right) / 2.
Điều kiện so sánh:
- if (nums[mid] > nums[right]): Nếu phần tử giữa lớn hơn phần tử cuối, giá trị lớn nhất nằm ở bên phải (left = mid + 1).
- else: Nếu không, giá trị lớn nhất nằm ở bên trái hoặc tại mid (right = mid).
Kết quả:
- Khi vòng lặp dừng (left === right), phần tử tại right là lớn nhất.
Độ phức tạp:
- Thời gian: O(log⁡n)O(\log n) nhờ giảm kích thước tìm kiếm theo cấp số nhân.
- Bộ nhớ: O(1)O(1) không sử dụng bộ nhớ bổ sung.

Ví dụ

console.log(findMaxInRotatedArray([4, 5, 6, 7, 0, 1, 2])); // 7 console.log(findMaxInRotatedArray([2, 3, 4, 5, 1])); // 5

Câu hỏi 9: Sắp xếp các mảng con theo tổng

Cho một mảng chứa các mảng con, sắp xếp các mảng con này theo tổng của chúng.

Giải pháp

function sortSubarraysBySum(arr) { return arr.sort((a, b) => { const sumA = a.reduce((acc, num) => acc + num, 0); const sumB = b.reduce((acc, num) => acc + num, 0); return sumA - sumB; }); }

Phân tích chi tiết

Tính tổng các mảng con:
- a.reduce((acc, num) => acc + num, 0): Tính tổng của mảng con a.
Sắp xếp mảng:
- .sort((a, b) => sumA - sumB): So sánh tổng của hai mảng con và sắp xếp tăng dần.
Độ phức tạp:
- Thời gian: O(n⋅m⋅log⁡n)O(n \cdot m \cdot \log n), với nn là số mảng con và mm là độ dài trung bình của mảng con.
- Bộ nhớ: O(1)O(1) không sử dụng bộ nhớ bổ sung.

Ví dụ

console.log(sortSubarraysBySum([[3, 2], [1, 1, 1], [4], [2, 2]])); // [[1, 1, 1], [4], [2, 2], [3, 2]]

Câu hỏi 10: Sinh chuỗi ngoặc hợp lệ

Cho một số nn, sinh tất cả các chuỗi ngoặc hợp lệ có nn cặp ngoặc.

Giải pháp

function generateParentheses(n) { const result = []; function backtrack(current, open, close) { if (current.length === n * 2) { result.push(current); return; } if (open < n) { backtrack(current + '(', open + 1, close); } if (close < open) { backtrack(current + ')', open, close + 1); } } backtrack('', 0, 0); return result; }

Phân tích chi tiết

Hàm backtrack:
- current: Chuỗi hiện tại.
- open: Số ngoặc mở đã sử dụng.
- close: Số ngoặc đóng đã sử dụng.
Điều kiện kết thúc:
- if (current.length === n * 2): Khi chuỗi đạt đủ 2n2n ký tự, thêm vào kết quả.
Sinh chuỗi ngoặc:
- if (open < n): Nếu số ngoặc mở chưa đủ nn, thêm ngoặc mở.
- if (close < open): Nếu số ngoặc đóng ít hơn số ngoặc mở, thêm ngoặc đóng.
Độ phức tạp:
- Thời gian: O(4n/n)O(4^n / \sqrt{n}) với nn là số cặp ngoặc.
- Bộ nhớ: O(n)O(n) cho mỗi nhánh đệ quy.

Ví dụ

console.log(generateParentheses(3)); // ["((()))", "(()())", "(())()", "()(())", "()()()"]

Câu hỏi 11: Tìm số nguyên dương nhỏ nhất không xuất hiện trong mảng

Cho một mảng số nguyên numsnums, tìm số nguyên dương nhỏ nhất không xuất hiện trong mảng.

Giải pháp 1: Sử dụng Set

function firstMissingPositive(nums) { const numSet = new Set(nums); let smallest = 1; while (numSet.has(smallest)) { smallest++; } return smallest; }

Phân tích chi tiết

Tạo Set để lưu các phần tử:
- const numSet = new Set(nums): Sử dụng Set để dễ dàng kiểm tra sự tồn tại của phần tử trong O(1)O(1).
Tìm số nguyên dương nhỏ nhất:
- while (numSet.has(smallest)): Kiểm tra từ số nguyên dương 11 trở đi.
- Nếu smallestsmallest không nằm trong Set, trả về giá trị đó.
Độ phức tạp:
- Thời gian: O(n)O(n) để duyệt qua mảng và kiểm tra Set.
- Bộ nhớ: O(n)O(n) để lưu các phần tử vào Set.

Ví dụ

console.log(firstMissingPositive([1, 2, 0])); // 3 console.log(firstMissingPositive([3, 4, -1, 1])); // 2

Giải pháp 2: Sắp xếp và kiểm tra

function firstMissingPositive(nums) { nums.sort((a, b) => a - b); // Sắp xếp mảng let smallest = 1; for (const num of nums) { if (num === smallest) { smallest++; } } return smallest; }

Phân tích chi tiết

Sắp xếp mảng:
- nums.sort((a, b) => a - b): Sắp xếp tăng dần các phần tử.
Duyệt qua mảng:
- if (num === smallest): Nếu gặp giá trị bằng smallest, tăng giá trị cần tìm.
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n) do sắp xếp mảng.
- Bộ nhớ: O(1)O(1) nếu không tính bộ nhớ cho sắp xếp.

Ví dụ

console.log(firstMissingPositive([1, 2, 0])); // 3 console.log(firstMissingPositive([3, 4, -1, 1])); // 2

Câu hỏi 12: Số Fibonacci ở vị trí thứ nn

Viết hàm tính số Fibonacci tại vị trí nn.

Giải pháp 1: Đệ quy (Chậm)

function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }

Phân tích chi tiết

Định nghĩa Fibonacci:
- F(0)=0,F(1)=1F(0) = 0, F(1) = 1.
- F(n)=F(n−1)+F(n−2)F(n) = F(n-1) + F(n-2) với n≥2n \geq 2.
Đệ quy:
- Nếu n≤1n \leq 1, trả về nn.
- Ngược lại, trả về tổng của F(n−1)F(n-1) và F(n−2)F(n-2).
Độ phức tạp:
- Thời gian: O(2n)O(2^n) do tính lặp lại.
- Bộ nhớ: O(n)O(n) cho stack đệ quy.

Giải pháp 2: Lặp (Tối ưu)

function fibonacci(n) { if (n <= 1) return n; let prev = 0, curr = 1; for (let i = 2; i <= n; i++) { const next = prev + curr; prev = curr; curr = next; } return curr; }

Phân tích chi tiết

Biến theo dõi:
- prev: Số Fibonacci thứ n−2n-2.
- curr: Số Fibonacci thứ n−1n-1.
Lặp để tính Fibonacci:
- Từ i=2i = 2 đến nn, tính số Fibonacci tiếp theo bằng prev + curr.
- Cập nhật prev và curr cho vòng lặp tiếp theo.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(fibonacci(10)); // 55 console.log(fibonacci(20)); // 6765

Câu hỏi 13: Đếm số lượng đảo trong lưới

Cho một lưới 2D chứa các phần tử '1' (đất) và '0' (nước). Đếm số lượng đảo (một nhóm các ô '1' được nối liền nhau theo chiều ngang hoặc dọc).

Giải pháp

function numIslands(grid) { if (!grid || grid.length === 0) return 0; const rows = grid.length; const cols = grid[0].length; let count = 0; function dfs(row, col) { if (row < 0 || col < 0 || row >= rows || col >= cols || grid[row][col] === '0') { return; } grid[row][col] = '0'; // Đánh dấu ô đã thăm // Duyệt 4 hướng dfs(row + 1, col); dfs(row - 1, col); dfs(row, col + 1); dfs(row, col - 1); } for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { if (grid[row][col] === '1') { count++; dfs(row, col); } } } return count; }

Phân tích chi tiết

Duyệt qua lưới:
- for (let row = 0; row < rows; row++) và for (let col = 0; col < cols; col++): Duyệt qua từng ô trong lưới.
Tìm đảo mới:
- Nếu gặp '1', tăng biến đếm count và gọi hàm DFS để đánh dấu toàn bộ ô thuộc đảo đó.
DFS (Đệ quy):
- dfs(row, col): Nếu vượt ra ngoài lưới hoặc gặp '0', thoát.
- Nếu gặp '1', đánh dấu ô đó là đã thăm (grid[row][col] = '0') và tiếp tục DFS trên 4 hướng.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n) với m,nm, n là kích thước lưới.
- Bộ nhớ: O(m×n)O(m \times n) cho stack đệ quy.

Ví dụ

console.log(numIslands([ ['1', '1', '0', '0', '0'], ['1', '1', '0', '0', '0'], ['0', '0', '1', '0', '0'], ['0', '0', '0', '1', '1'] ])); // 3

Câu hỏi 14: Tìm tổng lớn nhất của chuỗi con liên tục (Maximum Subarray)

Cho một mảng số nguyên, tìm tổng lớn nhất của một chuỗi con liên tục.

Giải pháp: Thuật toán Kadane

function maxSubArray(nums) { let currentSum = nums[0]; let maxSum = nums[0]; for (let i = 1; i < nums.length; i++) { currentSum = Math.max(nums[i], currentSum + nums[i]); maxSum = Math.max(maxSum, currentSum); } return maxSum; }

Phân tích chi tiết

Biến khởi tạo:
- currentSum: Tổng của chuỗi con hiện tại (bắt đầu với phần tử đầu tiên).
- maxSum: Tổng lớn nhất đã gặp (khởi tạo bằng giá trị đầu tiên).
Cập nhật giá trị:
- currentSum = Math.max(nums[i], currentSum + nums[i]): Tại mỗi phần tử, quyết định có nên bắt đầu chuỗi con mới từ nums[i] hoặc tiếp tục chuỗi con hiện tại.
- maxSum = Math.max(maxSum, currentSum): Cập nhật tổng lớn nhất.
Độ phức tạp:
- Thời gian: O(n)O(n) (duyệt qua mảng một lần).
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(maxSubArray([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // 6 ([4, -1, 2, 1]) console.log(maxSubArray([1])); // 1 console.log(maxSubArray([-1, -2, -3])); // -1

Câu hỏi 15: Tìm phần tử duy nhất trong mảng

Cho một mảng số nguyên, trong đó tất cả các phần tử xuất hiện hai lần ngoại trừ một phần tử duy nhất. Tìm phần tử đó.

Giải pháp: XOR

function singleNumber(nums) { return nums.reduce((acc, num) => acc ^ num, 0); }

Phân tích chi tiết

Toán tử XOR (^):
- Tính chất:
  - a ^ a = 0: Một số XOR với chính nó bằng 0.
  - a ^ 0 = a: Một số XOR với 0 vẫn là chính nó.
- XOR có tính giao hoán và kết hợp, cho phép loại bỏ tất cả các số xuất hiện hai lần.
Sử dụng reduce:
- .reduce((acc, num) => acc ^ num, 0): XOR tất cả các phần tử trong mảng. Kết quả là phần tử duy nhất.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(singleNumber([4, 1, 2, 1, 2])); // 4 console.log(singleNumber([2, 2, 3])); // 3

Câu hỏi 16: Đếm số bước để giảm một số xuống 0

Viết hàm đếm số bước cần thiết để giảm một số nn về 0. Nếu nn là số chẵn, chia nó cho 2. Nếu nn là số lẻ, trừ 1.

Giải pháp

function numberOfSteps(n) { let steps = 0; while (n > 0) { if (n % 2 === 0) { n /= 2; } else { n -= 1; } steps++; } return steps; }

Phân tích chi tiết

Kiểm tra số chẵn/lẻ:
- if (n % 2 === 0): Nếu nn chia hết cho 2, chia nó cho 2.
- else: Nếu không, giảm nn đi 1.
Đếm số bước:
- steps++: Tăng số bước sau mỗi lần thay đổi nn.
Độ phức tạp:
- Thời gian: O(log⁡n)O(\log n), mỗi bước giảm nn theo cấp số nhân.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(numberOfSteps(14)); // 6 console.log(numberOfSteps(8)); // 4 console.log(numberOfSteps(123)); // 12

Câu hỏi 17: Kiểm tra hai chuỗi là hoán vị (Anagrams)

Viết hàm kiểm tra hai chuỗi có phải là hoán vị của nhau không. Chuỗi là hoán vị nếu chúng chứa các ký tự giống nhau với số lần xuất hiện giống nhau.

Giải pháp

function isAnagram(s, t) { if (s.length !== t.length) return false; const count = {}; for (let char of s) { count[char] = (count[char] || 0) + 1; } for (let char of t) { if (!count[char]) return false; count[char]--; } return true; }

Phân tích chi tiết

Tạo bảng đếm ký tự:
- count[char] = (count[char] || 0) + 1: Đếm số lần xuất hiện của mỗi ký tự trong chuỗi s.
Kiểm tra chuỗi t:
- if (!count[char]) return false: Nếu ký tự trong t không tồn tại hoặc số lượng không khớp, trả về false.
- count[char]--: Giảm số lượng ký tự khi thấy ký tự trong t.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài của chuỗi.
- Bộ nhớ: O(1)O(1) cho bảng đếm.

Ví dụ

console.log(isAnagram("anagram", "nagaram")); // true console.log(isAnagram("rat", "car")); // false

Câu hỏi 18: Đếm số nguyên tố nhỏ hơn nn

Viết hàm đếm số nguyên tố nhỏ hơn nn.

Giải pháp: Sàng Eratosthenes

function countPrimes(n) { if (n <= 2) return 0; const isPrime = new Array(n).fill(true); isPrime[0] = isPrime[1] = false; for (let i = 2; i * i < n; i++) { if (isPrime[i]) { for (let j = i * i; j < n; j += i) { isPrime[j] = false; } } } return isPrime.filter(val => val).length; }

Phân tích chi tiết

Khởi tạo mảng:
- new Array(n).fill(true): Mảng isPrime biểu thị số nguyên nào là số nguyên tố.
- isPrime[0] = isPrime[1] = false: 0 và 1 không phải là số nguyên tố.
Loại bỏ bội số:
- for (let j = i * i; j < n; j += i): Đánh dấu tất cả bội số của ii là không phải số nguyên tố.
Đếm số nguyên tố:
- isPrime.filter(val => val).length: Đếm các giá trị true.
Độ phức tạp:
- Thời gian: O(nlog⁡log⁡n)O(n \log \log n).
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(countPrimes(10)); // 4 (2, 3, 5, 7) console.log(countPrimes(0)); // 0 console.log(countPrimes(1)); // 0

Câu hỏi 19: Tìm chỉ số điểm cân bằng (Pivot Index)

Viết hàm nhận vào một mảng số nguyên và trả về chỉ số “điểm cân bằng” nơi tổng các phần tử bên trái bằng tổng các phần tử bên phải. Nếu không có điểm cân bằng, trả về −1-1.

Giải pháp

function pivotIndex(nums) { const totalSum = nums.reduce((acc, num) => acc + num, 0); let leftSum = 0; for (let i = 0; i < nums.length; i++) { if (leftSum === totalSum - leftSum - nums[i]) { return i; } leftSum += nums[i]; } return -1; }

Phân tích chi tiết

Tính tổng toàn bộ mảng:
- const totalSum = nums.reduce((acc, num) => acc + num, 0): Tính tổng tất cả các phần tử trong mảng.
Duyệt qua mảng:
- if (leftSum === totalSum - leftSum - nums[i]): Nếu tổng bên trái == tổng bên phải, trả về chỉ số hiện tại.
- leftSum += nums[i]: Cập nhật tổng bên trái.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài mảng.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(pivotIndex([1, 7, 3, 6, 5, 6])); // 3 console.log(pivotIndex([1, 2, 3])); // -1 console.log(pivotIndex([2, 1, -1])); // 0

Câu hỏi 20: Tìm sản phẩm của mảng ngoại trừ chính nó (Product of Array Except Self)

Viết hàm nhận vào một mảng số nguyên và trả về một mảng mà mỗi phần tử là tích của tất cả các phần tử khác ngoại trừ chính nó.

Giải pháp

function productExceptSelf(nums) { const n = nums.length; const result = new Array(n).fill(1); let prefix = 1; for (let i = 0; i < n; i++) { result[i] *= prefix; prefix *= nums[i]; } let suffix = 1; for (let i = n - 1; i >= 0; i--) { result[i] *= suffix; suffix *= nums[i]; } return result; }

Phân tích chi tiết

Mảng kết quả (result):
- new Array(n).fill(1): Tạo mảng kết quả với giá trị ban đầu là 11.
Duyệt từ trái sang phải (prefix):
- prefix *= nums[i]: Tích các phần tử từ đầu đến trước ii.
- result[i] *= prefix: Gán tích này vào phần tử kết quả.
Duyệt từ phải sang trái (suffix):
- suffix *= nums[i]: Tích các phần tử từ cuối đến sau ii.
- result[i] *= suffix: Nhân thêm tích này vào phần tử kết quả.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1) nếu không tính mảng kết quả.

Ví dụ

console.log(productExceptSelf([1, 2, 3, 4])); // [24, 12, 8, 6] console.log(productExceptSelf([0, 1, 2, 3])); // [6, 0, 0, 0]

Câu hỏi 21: Đếm số đảo ngược trong mảng (Inversion Count)

Số đảo ngược là các cặp phần tử trong mảng mà phần tử đứng trước lớn hơn phần tử đứng sau.

Giải pháp 1: Brute Force

function countInversions(nums) { let count = 0; for (let i = 0; i < nums.length; i++) { for (let j = i + 1; j < nums.length; j++) { if (nums[i] > nums[j]) count++; } } return count; }

Phân tích chi tiết

Duyệt qua tất cả các cặp phần tử:
- for (let i = 0; i < nums.length; i++) và for (let j = i + 1; j < nums.length; j++): Kiểm tra mọi cặp phần tử.
Kiểm tra điều kiện đảo ngược:
- if (nums[i] > nums[j]): Nếu phần tử đứng trước lớn hơn phần tử đứng sau, tăng biến đếm.
Độ phức tạp:
- Thời gian: O(n2)O(n^2), với nn là độ dài mảng.

Ví dụ

console.log(countInversions([8, 4, 2, 1])); // 6 console.log(countInversions([3, 1, 2])); // 2

Giải pháp 2: Merge Sort (Tối ưu)

function countInversions(nums) { function mergeSort(arr) { if (arr.length < 2) return [arr, 0]; const mid = Math.floor(arr.length / 2); const [left, leftCount] = mergeSort(arr.slice(0, mid)); const [right, rightCount] = mergeSort(arr.slice(mid)); const [merged, splitCount] = merge(left, right); return [merged, leftCount + rightCount + splitCount]; } function merge(left, right) { let result = []; let count = 0; let i = 0, j = 0; while (i < left.length && j < right.length) { if (left[i] <= right[j]) { result.push(left[i++]); } else { result.push(right[j++]); count += left.length - i; // Các phần tử còn lại trong `left` đều lớn hơn `right[j]`. } } return [result.concat(left.slice(i)).concat(right.slice(j)), count]; } const [, inversionCount] = mergeSort(nums); return inversionCount; }

Phân tích chi tiết

Merge Sort:
- Chia nhỏ mảng đến khi mỗi mảng chỉ chứa một phần tử.
- Gọi đệ quy hàm mergeSort trên từng nửa mảng.
Merge và đếm đảo ngược:
- So sánh các phần tử trong hai nửa:
  - Nếu left[i] > right[j], các phần tử còn lại trong left đều lớn hơn right[j].
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n).
- Bộ nhớ: O(n)O(n) cho mảng tạm.

Ví dụ

console.log(countInversions([8, 4, 2, 1])); // 6 console.log(countInversions([3, 1, 2])); // 2

Câu hỏi 22: Tìm chiều dài dãy con tăng dần dài nhất (Longest Increasing Subsequence – LIS)

Viết hàm nhận vào một mảng số nguyên và trả về chiều dài dãy con tăng dần dài nhất.

Giải pháp 1: Dynamic Programming (DP)

function lengthOfLIS(nums) { if (nums.length === 0) return 0; const dp = new Array(nums.length).fill(1); for (let i = 1; i < nums.length; i++) { for (let j = 0; j < i; j++) { if (nums[i] > nums[j]) { dp[i] = Math.max(dp[i], dp[j] + 1); } } } return Math.max(...dp); }

Phân tích chi tiết

Khởi tạo mảng DP:
- dp[i]: Chiều dài dãy con tăng dần dài nhất kết thúc tại chỉ số ii.
- Ban đầu, tất cả các phần tử đều có giá trị 11, vì mỗi phần tử tự nó là một dãy con tăng dần.
Duyệt qua các cặp phần tử:
- Với mỗi phần tử nums[i]nums[i], kiểm tra tất cả các phần tử trước đó nums[j]nums[j]:
  - Nếu nums[i]>nums[j]nums[i] > nums[j]: Cập nhật dp[i] để lấy chiều dài tối đa của dãy con tăng dần.
Kết quả:
- Tìm giá trị lớn nhất trong mảng dp bằng Math.max(...dp).
Độ phức tạp:
- Thời gian: O(n2)O(n^2) do hai vòng lặp lồng nhau.
- Bộ nhớ: O(n)O(n) để lưu mảng dp.

Ví dụ

console.log(lengthOfLIS([10, 9, 2, 5, 3, 7, 101, 18])); // 4 ([2, 3, 7, 101]) console.log(lengthOfLIS([0, 1, 0, 3, 2, 3])); // 4 ([0, 1, 2, 3])

Giải pháp 2: Tối ưu bằng Binary Search

function lengthOfLIS(nums) { const subsequence = []; for (let num of nums) { let left = 0, right = subsequence.length; while (left < right) { let mid = Math.floor((left + right) / 2); if (subsequence[mid] < num) { left = mid + 1; } else { right = mid; } } if (left < subsequence.length) { subsequence[left] = num; } else { subsequence.push(num); } } return subsequence.length; }

Phân tích chi tiết

Mảng subsequence:
- Lưu các phần tử đại diện cho dãy con tăng dần hiện tại.
Binary Search:
- Với mỗi phần tử numnum, tìm vị trí trong subsequence mà numnum nên được chèn vào (hoặc thay thế).
- Nếu numnum lớn hơn tất cả, thêm nó vào cuối subsequence.
Kết quả:
- Chiều dài của subsequence là chiều dài của dãy con tăng dần dài nhất.
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n), nhờ sử dụng Binary Search.
- Bộ nhớ: O(n)O(n) cho mảng subsequence.

Ví dụ

console.log(lengthOfLIS([10, 9, 2, 5, 3, 7, 101, 18])); // 4 ([2, 3, 7, 101]) console.log(lengthOfLIS([0, 1, 0, 3, 2, 3])); // 4 ([0, 1, 2, 3])

Câu hỏi 23: Tìm chuỗi con chung dài nhất (Longest Common Subsequence – LCS)

Viết hàm nhận vào hai chuỗi s1s1 và s2s2 và trả về độ dài của chuỗi con chung dài nhất.

Giải pháp: Dynamic Programming

function longestCommonSubsequence(s1, s2) { const m = s1.length, n = s2.length; const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0)); for (let i = 1; i <= m; i++) { for (let j = 1; j <= n; j++) { if (s1[i - 1] === s2[j - 1]) { dp[i][j] = dp[i - 1][j - 1] + 1; } else { dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]); } } } return dp[m][n]; }

Phân tích chi tiết

Khởi tạo mảng DP:
- dp[i][j]: Độ dài của LCS giữa s1[0…i−1]s1[0 \ldots i-1] và s2[0…j−1]s2[0 \ldots j-1].
- Ban đầu, dp[0][j]=0dp[0][j] = 0 và dp[i][0]=0dp[i][0] = 0, vì không có chuỗi nào để so sánh.
So sánh từng ký tự:
- Nếu s1[i−1]===s2[j−1]s1[i-1] === s2[j-1]: Tăng độ dài LCS lên 1.
- Nếu không, lấy giá trị lớn nhất giữa dp[i-1][j] và dp[i][j-1].
Kết quả:
- dp[m][n]dp[m][n] là độ dài của LCS.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là độ dài của hai chuỗi.
- Bộ nhớ: O(m×n)O(m \times n).

Ví dụ

console.log(longestCommonSubsequence("abcde", "ace")); // 3 ("ace") console.log(longestCommonSubsequence("abc", "def")); // 0

Câu hỏi 24: Đếm số đường đi trong lưới (Unique Paths)

Cho một lưới m×nm \times n, tìm số cách để đi từ góc trên trái đến góc dưới phải, chỉ di chuyển xuống hoặc sang phải.

Giải pháp: Dynamic Programming

function uniquePaths(m, n) { const dp = Array.from({ length: m }, () => Array(n).fill(1)); for (let i = 1; i < m; i++) { for (let j = 1; j < n; j++) { dp[i][j] = dp[i - 1][j] + dp[i][j - 1]; } } return dp[m - 1][n - 1]; }

Phân tích chi tiết

Khởi tạo mảng DP:
- dp[i][j]: Số cách để đi đến ô (i,j)(i, j).
- Ô đầu tiên dp[0][0]=1dp[0][0] = 1, vì chỉ có một cách để bắt đầu.
Cập nhật số cách:
- Mỗi ô dp[i][j]dp[i][j] là tổng số cách từ ô trên dp[i−1][j]dp[i-1][j] và ô bên trái dp[i][j−1]dp[i][j-1].
Kết quả:
- dp[m−1][n−1]dp[m-1][n-1] là số đường đi đến góc dưới phải.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n).
- Bộ nhớ: O(m×n)O(m \times n).

Ví dụ

console.log(uniquePaths(3, 7)); // 28 console.log(uniquePaths(3, 2)); // 3

Câu hỏi 25: Tìm các tổ hợp có tổng bằng mục tiêu (Combination Sum)

Viết hàm nhận vào một mảng số nguyên không âm và một số mục tiêu targettarget. Trả về tất cả các tổ hợp của các số trong mảng sao cho tổng bằng targettarget. Một số có thể được sử dụng nhiều lần.

Giải pháp: Backtracking

function combinationSum(candidates, target) { const result = []; function backtrack(start, combination, total) { if (total === target) { result.push([...combination]); return; } if (total > target) return; for (let i = start; i < candidates.length; i++) { combination.push(candidates[i]); backtrack(i, combination, total + candidates[i]); // Cho phép sử dụng lại `candidates[i]` combination.pop(); } } backtrack(0, [], 0); return result; }

Phân tích chi tiết

Backtracking:
- combination: Dãy hiện tại đang xét.
- total: Tổng của dãy hiện tại.
Điều kiện dừng:
- if (total === target): Nếu tổng bằng targettarget, thêm tổ hợp vào kết quả.
- if (total > target): Nếu tổng vượt targettarget, kết thúc nhánh.
Duyệt qua các phần tử:
- for (let i = start; i < candidates.length; i++): Bắt đầu từ chỉ số hiện tại để tránh lặp lại tổ hợp.
Độ phức tạp:
- Thời gian: O(2n)O(2^n) trong trường hợp xấu nhất.
- Bộ nhớ: O(target/min(candidates))O(target / min(candidates)), với min(candidates)min(candidates) là số nhỏ nhất.

Ví dụ

console.log(combinationSum([2, 3, 6, 7], 7)); // [[7], [2, 2, 3]] console.log(combinationSum([2, 3, 5], 8)); // [[2, 2, 2, 2], [2, 3, 3], [3, 5]]

Câu hỏi 26: Tìm khoảng thời gian không trùng nhau

Cho một danh sách các khoảng thời gian [start,end][start, end]. Viết hàm hợp nhất các khoảng thời gian trùng nhau.

Giải pháp: Sắp xếp và duyệt

function mergeIntervals(intervals) { if (!intervals.length) return []; intervals.sort((a, b) => a[0] - b[0]); // Sắp xếp theo thời gian bắt đầu const result = [intervals[0]]; for (let i = 1; i < intervals.length; i++) { const prev = result[result.length - 1]; const current = intervals[i]; if (current[0] <= prev[1]) { prev[1] = Math.max(prev[1], current[1]); // Gộp khoảng thời gian } else { result.push(current); } } return result; }

Phân tích chi tiết

Sắp xếp khoảng thời gian:
- Sắp xếp theo thời gian bắt đầu để dễ dàng xử lý các khoảng thời gian trùng nhau.
Hợp nhất khoảng thời gian:
- if (current[0] <= prev[1]): Nếu khoảng hiện tại chồng lên khoảng trước, gộp chúng lại.
- else: Thêm khoảng hiện tại vào kết quả.
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n) để sắp xếp và O(n)O(n) để duyệt.
- Bộ nhớ: O(n)O(n) cho mảng kết quả.

Ví dụ

console.log(mergeIntervals([[1, 3], [2, 6], [8, 10], [15, 18]])); // [[1, 6], [8, 10], [15, 18]] console.log(mergeIntervals([[1, 4], [4, 5]])); // [[1, 5]]

Câu hỏi 27: Đảo ngược từ trong chuỗi

Cho một chuỗi, đảo ngược thứ tự các từ trong chuỗi nhưng giữ nguyên thứ tự các ký tự trong mỗi từ.

Giải pháp

function reverseWords(s) { return s.trim().split(/\s+/).reverse().join(' '); }

Phân tích chi tiết

Loại bỏ khoảng trắng thừa:
- trim(): Loại bỏ khoảng trắng ở đầu và cuối chuỗi.
- split(/\s+/): Chia chuỗi thành mảng các từ dựa trên khoảng trắng (bao gồm nhiều khoảng trắng liên tiếp).
Đảo ngược và ghép lại:
- reverse(): Đảo ngược thứ tự các từ trong mảng.
- join(' '): Ghép các từ lại thành chuỗi với khoảng trắng giữa chúng.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n) cho mảng từ.

Ví dụ

console.log(reverseWords(" the sky is blue ")); // "blue is sky the" console.log(reverseWords("hello world!")); // "world! hello"

Câu hỏi 28: Tìm chuỗi con dài nhất chứa tối đa kk ký tự khác nhau

Viết hàm nhận vào một chuỗi ss và một số kk, trả về độ dài của chuỗi con dài nhất chứa tối đa kk ký tự khác nhau.

Giải pháp: Sliding Window

function lengthOfLongestSubstringKDistinct(s, k) { const charMap = new Map(); let left = 0, maxLength = 0; for (let right = 0; right < s.length; right++) { charMap.set(s[right], (charMap.get(s[right]) || 0) + 1); while (charMap.size > k) { charMap.set(s[left], charMap.get(s[left]) - 1); if (charMap.get(s[left]) === 0) { charMap.delete(s[left]); } left++; } maxLength = Math.max(maxLength, right - left + 1); } return maxLength; }

Phân tích chi tiết

Cửa sổ trượt (Sliding Window):
- left và right: Đại diện cho hai đầu của cửa sổ.
Quản lý số lượng ký tự:
- charMap: Lưu số lần xuất hiện của mỗi ký tự trong cửa sổ.
- Nếu charMap.size > k, di chuyển left để giảm số lượng ký tự khác nhau trong cửa sổ.
Cập nhật độ dài lớn nhất:
- maxLength = Math.max(maxLength, right - left + 1).
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau tối đa.

Ví dụ

console.log(lengthOfLongestSubstringKDistinct("eceba", 2)); // 3 ("ece") console.log(lengthOfLongestSubstringKDistinct("aa", 1)); // 2 ("aa")

Câu hỏi 29: Tìm số nguyên tố lớn nhất nhỏ hơn nn

Viết hàm tìm số nguyên tố lớn nhất nhỏ hơn một số nguyên nn.

Giải pháp: Sàng Eratosthenes

function largestPrimeLessThan(n) { if (n <= 2) return -1; const isPrime = new Array(n).fill(true); isPrime[0] = isPrime[1] = false; for (let i = 2; i * i < n; i++) { if (isPrime[i]) { for (let j = i * i; j < n; j += i) { isPrime[j] = false; } } } for (let i = n - 1; i >= 2; i--) { if (isPrime[i]) return i; } return -1; }

Phân tích chi tiết

Sàng Eratosthenes:
- Tạo mảng isPrime với tất cả giá trị ban đầu là true.
- Đánh dấu các số không phải nguyên tố (bội số của các số nguyên tố).
Tìm số nguyên tố lớn nhất nhỏ hơn nn:
- Duyệt ngược từ n−1n-1 đến 22 và trả về số nguyên tố đầu tiên.
Độ phức tạp:
- Thời gian: O(nlog⁡log⁡n)O(n \log \log n).
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(largestPrimeLessThan(10)); // 7 console.log(largestPrimeLessThan(20)); // 19 console.log(largestPrimeLessThan(2)); // -1

Câu hỏi 30: Xóa phần tử trùng lặp trong mảng đã sắp xếp

Cho một mảng đã được sắp xếp tăng dần, xóa các phần tử trùng lặp sao cho mỗi phần tử chỉ xuất hiện một lần.

Giải pháp

function removeDuplicates(nums) { if (nums.length === 0) return 0; let index = 1; for (let i = 1; i < nums.length; i++) { if (nums[i] !== nums[i - 1]) { nums[index] = nums[i]; index++; } } return index; }

Phân tích chi tiết

Biến index:
- Dùng để đánh dấu vị trí tiếp theo để ghi phần tử không trùng lặp.
Duyệt qua mảng:
- Nếu phần tử hiện tại khác phần tử trước đó, ghi nó vào vị trí index.
Trả về kết quả:
- Giá trị trả về là số lượng phần tử không trùng lặp trong mảng.
Độ phức tạp:
- Thời gian: O(n)O(n), duyệt qua mảng một lần.
- Bộ nhớ: O(1)O(1), không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

const nums = [1, 1, 2]; console.log(removeDuplicates(nums)); // 2 console.log(nums.slice(0, 2)); // [1, 2] const nums2 = [0, 0, 1, 1, 1, 2, 2, 3, 3, 4]; console.log(removeDuplicates(nums2)); // 5 console.log(nums2.slice(0, 5)); // [0, 1, 2, 3, 4]

Câu hỏi 31: Tìm nước trong cột (Trapping Rain Water)

Cho một mảng số nguyên đại diện cho chiều cao các cột, tính lượng nước có thể giữ lại giữa các cột.

Giải pháp: Hai con trỏ

function trap(height) { if (height.length === 0) return 0; let left = 0, right = height.length - 1; let leftMax = 0, rightMax = 0, water = 0; while (left < right) { if (height[left] < height[right]) { if (height[left] >= leftMax) { leftMax = height[left]; } else { water += leftMax - height[left]; } left++; } else { if (height[right] >= rightMax) { rightMax = height[right]; } else { water += rightMax - height[right]; } right--; } } return water; }

Phân tích chi tiết

Hai con trỏ:
- left và right: Đầu và cuối mảng.
- leftMax và rightMax: Chiều cao cột lớn nhất bên trái và bên phải.
Tính nước tích lũy:
- Nếu chiều cao cột nhỏ hơn max bên trái hoặc bên phải, nước có thể được giữ lại bằng hiệu số giữa max và chiều cao cột hiện tại.
Độ phức tạp:
- Thời gian: O(n)O(n), chỉ duyệt qua mảng một lần.
- Bộ nhớ: O(1)O(1), không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

console.log(trap([0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1])); // 6 console.log(trap([4, 2, 0, 3, 2, 5])); // 9

Câu hỏi 32: Sắp xếp mảng 0, 1, 2 (Dutch National Flag Problem)

Sắp xếp mảng chứa các số 00, 11, và 22 sao cho các số 00 nằm trước, 11 ở giữa và 22 ở cuối.

Giải pháp: Ba con trỏ

function sortColors(nums) { let low = 0, mid = 0, high = nums.length - 1; while (mid <= high) { if (nums[mid] === 0) { [nums[low], nums[mid]] = [nums[mid], nums[low]]; low++; mid++; } else if (nums[mid] === 1) { mid++; } else { [nums[mid], nums[high]] = [nums[high], nums[mid]]; high--; } } }

Phân tích chi tiết

Ba con trỏ:
- low: Chỉ số cho các phần tử 00.
- mid: Chỉ số hiện tại đang xử lý.
- high: Chỉ số cho các phần tử 22.
Hoán đổi giá trị:
- Nếu phần tử là 00, hoán đổi với low và tăng cả low và mid.
- Nếu phần tử là 22, hoán đổi với high và giảm high.
Độ phức tạp:
- Thời gian: O(n)O(n), mỗi phần tử được xử lý một lần.
- Bộ nhớ: O(1)O(1), không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

const nums = [2, 0, 2, 1, 1, 0]; sortColors(nums); console.log(nums); // [0, 0, 1, 1, 2, 2] const nums2 = [2, 0, 1]; sortColors(nums2); console.log(nums2); // [0, 1, 2]

Câu hỏi 33: Tìm số lần đảo ngược để mảng tăng dần (Minimum Swaps to Sort)

Viết hàm nhận vào một mảng số nguyên và trả về số lần hoán đổi tối thiểu để sắp xếp mảng tăng dần.

Giải pháp

function minSwapsToSort(arr) { const n = arr.length; const arrWithIndex = arr.map((value, index) => ({ value, index })); arrWithIndex.sort((a, b) => a.value - b.value); const visited = new Array(n).fill(false); let swaps = 0; for (let i = 0; i < n; i++) { if (visited[i] || arrWithIndex[i].index === i) { continue; } let cycleSize = 0; let j = i; while (!visited[j]) { visited[j] = true; j = arrWithIndex[j].index; cycleSize++; } if (cycleSize > 1) { swaps += cycleSize - 1; } } return swaps; }

Phân tích chi tiết

Tạo mảng với chỉ số ban đầu:
- arr.map((value, index) => ({ value, index })): Tạo mảng chứa giá trị và chỉ số gốc.
- sort((a, b) => a.value - b.value): Sắp xếp mảng theo giá trị.
Tìm chu trình hoán đổi:
- Nếu một phần tử đã được sắp xếp đúng vị trí hoặc đã thăm, bỏ qua (visited[i]).
- Duyệt qua chu trình để tính kích thước chu trình (cycleSize).
Tính số lần hoán đổi:
- Với chu trình kích thước kk, cần k−1k – 1 lần hoán đổi để sắp xếp.
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n) cho sắp xếp và O(n)O(n) cho duyệt chu trình.
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(minSwapsToSort([4, 3, 2, 1])); // 2 console.log(minSwapsToSort([1, 5, 4, 3, 2])); // 2

Câu hỏi 34: Tìm tổng dãy con liên tục chia hết cho kk (Subarray Sum Divisible by kk)

Viết hàm nhận vào một mảng số nguyên và một số kk, trả về số lượng dãy con liên tục có tổng chia hết cho kk.

Giải pháp

function subarraysDivByK(nums, k) { const remainderMap = new Map(); remainderMap.set(0, 1); let sum = 0, count = 0; for (let num of nums) { sum += num; let remainder = ((sum % k) + k) % k; if (remainderMap.has(remainder)) { count += remainderMap.get(remainder); } remainderMap.set(remainder, (remainderMap.get(remainder) || 0) + 1); } return count; }

Phân tích chi tiết

Tính tổng và dư:
- sum += num: Tính tổng dãy con hiện tại.
- remainder = ((sum % k) + k) % k: Đảm bảo dư không âm.
Đếm số dãy con:
- Nếu dư đã tồn tại trong remainderMap, số dãy con có tổng chia hết cho kk tăng thêm giá trị lưu trong remainderMap.
Cập nhật bản đồ dư:
- Tăng số lần xuất hiện của dư hiện tại trong remainderMap.
Độ phức tạp:
- Thời gian: O(n)O(n), duyệt qua mảng một lần.
- Bộ nhớ: O(k)O(k), với kk là số dư tối đa.

Ví dụ

console.log(subarraysDivByK([4, 5, 0, -2, -3, 1], 5)); // 7 console.log(subarraysDivByK([5, 10, 11], 5)); // 5

Câu hỏi 35: Kiểm tra mảng con với tổng kk (Subarray Sum Equals kk)

Viết hàm nhận vào một mảng số nguyên và một số kk, kiểm tra xem có tồn tại dãy con liên tục với tổng bằng kk.

Giải pháp

function subarraySum(nums, k) { const sumMap = new Map(); sumMap.set(0, 1); let sum = 0, count = 0; for (let num of nums) { sum += num; if (sumMap.has(sum - k)) { count += sumMap.get(sum - k); } sumMap.set(sum, (sumMap.get(sum) || 0) + 1); } return count; }

Phân tích chi tiết

Tính tổng dãy con:
- sum += num: Cộng giá trị phần tử hiện tại vào tổng.
Kiểm tra tổng kk:
- if (sumMap.has(sum - k)): Nếu tổng hiện tại trừ kk tồn tại trong sumMap, tăng biến đếm.
Cập nhật bản đồ tổng:
- Tăng số lần xuất hiện của tổng hiện tại trong sumMap.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(subarraySum([1, 1, 1], 2)); // 2 console.log(subarraySum([1, 2, 3], 3)); // 2

Câu hỏi 36: Kiểm tra chuỗi có thể được sắp xếp thành Palindrome

Viết hàm kiểm tra xem một chuỗi có thể được sắp xếp thành một Palindrome không.

Giải pháp

function canPermutePalindrome(s) { const charCount = new Map(); for (let char of s) { charCount.set(char, (charCount.get(char) || 0) + 1); } let oddCount = 0; for (let count of charCount.values()) { if (count % 2 !== 0) oddCount++; if (oddCount > 1) return false; } return true; }

Phân tích chi tiết

Đếm ký tự:
- charCount: Lưu số lần xuất hiện của mỗi ký tự.
Kiểm tra số ký tự lẻ:
- Một chuỗi có thể sắp xếp thành Palindrome nếu tối đa chỉ có một ký tự xuất hiện lẻ.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau.

Ví dụ

console.log(canPermutePalindrome("civic")); // true console.log(canPermutePalindrome("ivicc")); // true console.log(canPermutePalindrome("hello")); // false

Câu hỏi 37: Đếm số hình chữ nhật chứa toàn số 1 trong ma trận

Viết hàm nhận vào một ma trận nhị phân (chỉ chứa 00 và 11) và trả về số lượng hình chữ nhật chứa toàn số 11.

Giải pháp

function countSubmatricesWithAllOnes(matrix) { const m = matrix.length; const n = matrix[0].length; const heights = new Array(n).fill(0); let count = 0; for (let i = 0; i < m; i++) { for (let j = 0; j < n; j++) { heights[j] = matrix[i][j] === 0 ? 0 : heights[j] + 1; } count += countSubmatricesWithHeights(heights); } return count; } function countSubmatricesWithHeights(heights) { const stack = []; const n = heights.length; const count = new Array(n).fill(0); let result = 0; for (let i = 0; i < n; i++) { while (stack.length && heights[stack[stack.length - 1]] >= heights[i]) { stack.pop(); } const prevIndex = stack.length === 0 ? -1 : stack[stack.length - 1]; count[i] = (i - prevIndex) * heights[i] + (prevIndex === -1 ? 0 : count[prevIndex]); result += count[i]; stack.push(i); } return result; }

Phân tích chi tiết

Tính chiều cao của các cột:
- Với mỗi hàng, tính heights[j], là chiều cao của cột tính đến hàng hiện tại.
Đếm số hình chữ nhật chứa toàn 11:
- Sử dụng countSubmatricesWithHeights để đếm số hình chữ nhật trong hàng hiện tại dựa trên chiều cao.
Xử lý stack để tìm chiều cao tối ưu:
- Với mỗi cột, xác định số hình chữ nhật có thể tạo dựa trên chiều cao liên tiếp.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là số hàng và cột của ma trận.
- Bộ nhớ: O(n)O(n) cho chiều cao và stack.

Ví dụ

console.log(countSubmatricesWithAllOnes([ [1, 0, 1], [1, 1, 0], [1, 1, 0] ])); // 5 console.log(countSubmatricesWithAllOnes([ [0, 1, 1], [1, 1, 1], [1, 1, 1] ])); // 15

Câu hỏi 38: Tìm số lượng đảo đơn lẻ trong ma trận

Cho một ma trận nhị phân (chỉ chứa 00 và 11), tìm số lượng các đảo (khu vực chứa 11 liền kề nhau theo chiều ngang, dọc).

Giải pháp: DFS

function numIslands(grid) { if (!grid || grid.length === 0) return 0; const m = grid.length; const n = grid[0].length; let count = 0; function dfs(x, y) { if (x < 0 || y < 0 || x >= m || y >= n || grid[x][y] === '0') return; grid[x][y] = '0'; // Đánh dấu đã thăm dfs(x + 1, y); // Xuống dfs(x - 1, y); // Lên dfs(x, y + 1); // Phải dfs(x, y - 1); // Trái } for (let i = 0; i < m; i++) { for (let j = 0; j < n; j++) { if (grid[i][j] === '1') { count++; dfs(i, j); } } } return count; }

Phân tích chi tiết

Duyệt qua ma trận:
- Với mỗi ô chứa 11, gọi hàm DFS để đánh dấu tất cả các ô trong cùng một đảo.
DFS để đánh dấu:
- Đánh dấu ô hiện tại là đã thăm bằng cách đổi giá trị 11 thành 00.
- Đệ quy tìm tất cả các ô liên kề theo 4 hướng.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là kích thước ma trận.
- Bộ nhớ: O(m×n)O(m \times n) cho stack đệ quy.

Ví dụ

console.log(numIslands([ ['1', '1', '0', '0', '0'], ['1', '1', '0', '0', '0'], ['0', '0', '1', '0', '0'], ['0', '0', '0', '1', '1'] ])); // 3 console.log(numIslands([ ['1', '0', '1', '0', '1'] ])); // 3

Câu hỏi 39: Tìm từ trong bảng (Word Search)

Viết hàm kiểm tra xem một từ có thể được tạo ra từ các ký tự liên tiếp trong bảng (theo chiều ngang hoặc dọc).

Giải pháp: Backtracking

function exist(board, word) { const m = board.length; const n = board[0].length; function backtrack(x, y, index) { if (index === word.length) return true; if (x < 0 || y < 0 || x >= m || y >= n || board[x][y] !== word[index]) return false; const temp = board[x][y]; board[x][y] = '#'; // Đánh dấu đã thăm const found = backtrack(x + 1, y, index + 1) || backtrack(x - 1, y, index + 1) || backtrack(x, y + 1, index + 1) || backtrack(x, y - 1, index + 1); board[x][y] = temp; // Hoàn nguyên return found; } for (let i = 0; i < m; i++) { for (let j = 0; j < n; j++) { if (backtrack(i, j, 0)) return true; } } return false; }

Phân tích chi tiết

Backtracking:
- Với mỗi ô, kiểm tra xem ký tự tại ô đó có khớp với ký tự hiện tại trong từ không.
- Di chuyển đến các ô lân cận nếu ký tự khớp.
Đánh dấu và hoàn nguyên:
- Đánh dấu ô hiện tại là đã thăm bằng cách gán giá trị đặc biệt '#'.
- Sau khi hoàn thành nhánh, hoàn nguyên lại giá trị ban đầu.
Độ phức tạp:
- Thời gian: O(m×n×4l)O(m \times n \times 4^l), với m,nm, n là kích thước bảng và ll là độ dài từ.
- Bộ nhớ: O(l)O(l) cho stack đệ quy.

Ví dụ

console.log(exist([ ['A', 'B', 'C', 'E'], ['S', 'F', 'C', 'S'], ['A', 'D', 'E', 'E'] ], 'ABCCED')); // true console.log(exist([ ['A', 'B', 'C', 'E'], ['S', 'F', 'C', 'S'], ['A', 'D', 'E', 'E'] ], 'SEE')); // true console.log(exist([ ['A', 'B', 'C', 'E'], ['S', 'F', 'C', 'S'], ['A', 'D', 'E', 'E'] ], 'ABCB')); // false

Câu hỏi 40: Kiểm tra đường tròn con trong danh sách liên kết (Linked List Cycle)

Viết hàm kiểm tra xem danh sách liên kết có chứa đường tròn (vòng lặp) hay không.

Giải pháp: Floyd’s Cycle Detection Algorithm

function hasCycle(head) { if (!head || !head.next) return false; let slow = head; let fast = head; while (fast && fast.next) { slow = slow.next; fast = fast.next.next; if (slow === fast) return true; } return false; }

Phân tích chi tiết

Hai con trỏ:
- slow: Di chuyển một bước mỗi lần.
- fast: Di chuyển hai bước mỗi lần.
Kiểm tra vòng lặp:
- Nếu slow và fast gặp nhau, danh sách liên kết có vòng lặp.
- Nếu fast hoặc fast.next là null, không có vòng lặp.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số lượng node trong danh sách liên kết.
- Bộ nhớ: O(1)O(1), không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

class ListNode { constructor(value) { this.value = value; this.next = null; } } const head = new ListNode(3); head.next = new ListNode(2); head.next.next = new ListNode(0); head.next.next.next = new ListNode(-4); head.next.next.next.next = head.next; console.log(hasCycle(head)); // true const noCycleHead = new ListNode(1); noCycleHead.next = new ListNode(2); console.log(hasCycle(noCycleHead)); // false

Câu hỏi 41: Tìm điểm bắt đầu của đường tròn trong danh sách liên kết

Viết hàm trả về node bắt đầu của đường tròn trong danh sách liên kết. Nếu không có vòng lặp, trả về null.

Giải pháp

function detectCycle(head) { if (!head || !head.next) return null; let slow = head; let fast = head; while (fast && fast.next) { slow = slow.next; fast = fast.next.next; if (slow === fast) { let entry = head; while (entry !== slow) { entry = entry.next; slow = slow.next; } return entry; } } return null; }

Phân tích chi tiết

Phát hiện vòng lặp:
- Sử dụng hai con trỏ (slow và fast) để tìm điểm gặp nhau nếu có vòng lặp.
Tìm điểm bắt đầu:
- Đặt một con trỏ từ head và con trỏ khác từ điểm gặp nhau.
- Di chuyển cả hai con trỏ một bước mỗi lần, chúng sẽ gặp nhau tại điểm bắt đầu vòng lặp.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(3); head.next = new ListNode(2); head.next.next = new ListNode(0); head.next.next.next = new ListNode(-4); head.next.next.next.next = head.next; console.log(detectCycle(head)); // ListNode { value: 2, next: ListNode { ... } } const noCycleHead = new ListNode(1); noCycleHead.next = new ListNode(2); console.log(detectCycle(noCycleHead)); // null

Câu hỏi 42: Tìm phần tử giao nhau của hai danh sách liên kết

Viết hàm nhận vào hai danh sách liên kết đơn và trả về node đầu tiên nơi hai danh sách giao nhau. Nếu không có giao điểm, trả về null.

Giải pháp

function getIntersectionNode(headA, headB) { if (!headA || !headB) return null; let pointerA = headA; let pointerB = headB; while (pointerA !== pointerB) { pointerA = pointerA ? pointerA.next : headB; pointerB = pointerB ? pointerB.next : headA; } return pointerA; }

Phân tích chi tiết

Chuyển đổi danh sách:
- Khi một con trỏ đến cuối danh sách của nó, chuyển nó sang đầu danh sách kia.
- Điều này đảm bảo hai con trỏ sẽ gặp nhau tại node giao nhau hoặc nullnull nếu không có giao điểm.
Độ phức tạp:
- Thời gian: O(m+n)O(m + n), với m,nm, n là độ dài hai danh sách.
- Bộ nhớ: O(1)O(1).

Ví dụ

const intersectNode = new ListNode(8); intersectNode.next = new ListNode(4); intersectNode.next.next = new ListNode(5); const headA = new ListNode(4); headA.next = new ListNode(1); headA.next.next = intersectNode; const headB = new ListNode(5); headB.next = new ListNode(0); headB.next.next = new ListNode(1); headB.next.next.next = intersectNode; console.log(getIntersectionNode(headA, headB)); // ListNode { value: 8, next: ListNode { ... } } const noIntersectionA = new ListNode(1); const noIntersectionB = new ListNode(2); console.log(getIntersectionNode(noIntersectionA, noIntersectionB)); // null

Câu hỏi 43: Xóa node giữa trong danh sách liên kết

Viết hàm nhận vào một node trong danh sách liên kết, xóa node đó mà không cần truy cập vào đầu danh sách.

Giải pháp

function deleteNode(node) { if (!node || !node.next) return; node.value = node.next.value; node.next = node.next.next; }

Phân tích chi tiết

Xóa node:
- Thay thế giá trị của node hiện tại bằng giá trị của node tiếp theo.
- Kết nối node hiện tại tới node sau của node tiếp theo.
Độ phức tạp:
- Thời gian: O(1)O(1).
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(4); head.next = new ListNode(5); head.next.next = new ListNode(1); head.next.next.next = new ListNode(9); deleteNode(head.next); console.log(head); // ListNode { value: 4, next: ListNode { value: 1, next: ListNode { value: 9, next: null } } }

Câu hỏi 44: Đảo ngược một danh sách liên kết

Viết hàm đảo ngược một danh sách liên kết đơn.

Giải pháp

function reverseList(head) { let prev = null; let current = head; while (current) { let nextNode = current.next; current.next = prev; prev = current; current = nextNode; } return prev; }

Phân tích chi tiết

Biến khởi tạo:
- prev: Node trước đó, bắt đầu là null.
- current: Node hiện tại, bắt đầu từ head.
Duyệt qua danh sách:
- Lưu current.next vào nextNode để không mất liên kết.
- Gán current.next trỏ về prev.
- Cập nhật prev và current để chuyển sang node tiếp theo.
**Trả về node cuối cùng (bây giờ là prev) làm đầu danh sách đảo ngược.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số node trong danh sách.
- Bộ nhớ: O(1)O(1), không sử dụng cấu trúc dữ liệu bổ sung.

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(3); head.next.next.next = new ListNode(4); const reversedHead = reverseList(head); // ListNode { value: 4, next: ListNode { value: 3, next: ListNode { value: 2, next: ListNode { value: 1, next: null } } } }

Câu hỏi 45: Kiểm tra danh sách liên kết có đối xứng không (Palindrome)

Viết hàm kiểm tra xem danh sách liên kết có phải là một Palindrome không.

Giải pháp

function isPalindrome(head) { if (!head || !head.next) return true; let slow = head, fast = head; // Tìm điểm giữa của danh sách while (fast && fast.next) { slow = slow.next; fast = fast.next.next; } // Đảo ngược nửa sau của danh sách let prev = null; while (slow) { let nextNode = slow.next; slow.next = prev; prev = slow; slow = nextNode; } // So sánh hai nửa danh sách let left = head, right = prev; while (right) { if (left.value !== right.value) return false; left = left.next; right = right.next; } return true; }

Phân tích chi tiết

Tìm điểm giữa:
- Sử dụng hai con trỏ slow và fast để tìm điểm giữa danh sách.
Đảo ngược nửa sau:
- Đảo ngược danh sách bắt đầu từ điểm giữa.
So sánh hai nửa:
- So sánh từng node của hai nửa danh sách.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số node trong danh sách.
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(2); head.next.next.next = new ListNode(1); console.log(isPalindrome(head)); // true const nonPalindromeHead = new ListNode(1); nonPalindromeHead.next = new ListNode(2); nonPalindromeHead.next.next = new ListNode(3); console.log(isPalindrome(nonPalindromeHead)); // false

Câu hỏi 46: Xóa node thứ nn từ cuối danh sách

Viết hàm xóa node thứ nn từ cuối danh sách liên kết.

Giải pháp

function removeNthFromEnd(head, n) { const dummy = new ListNode(0); dummy.next = head; let first = dummy; let second = dummy; // Di chuyển `first` cách `n + 1` bước for (let i = 0; i <= n; i++) { first = first.next; } // Di chuyển cả `first` và `second` cho đến khi `first` đến cuối while (first) { first = first.next; second = second.next; } // Xóa node thứ n second.next = second.next.next; return dummy.next; }

Phân tích chi tiết

Dummy Node:
- Thêm một node giả ở đầu danh sách để xử lý trường hợp đặc biệt (xóa node đầu).
Di chuyển con trỏ:
- first di chuyển cách n + 1 bước để tạo khoảng cách với second.
- Di chuyển cả hai con trỏ cho đến khi first đạt cuối danh sách.
Xóa node:
- second.next = second.next.next: Bỏ qua node thứ nn.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(3); head.next.next.next = new ListNode(4); head.next.next.next.next = new ListNode(5); const updatedHead = removeNthFromEnd(head, 2); // ListNode { value: 1, next: ListNode { value: 2, next: ListNode { value: 3, next: ListNode { value: 5, next: null } } } }

Câu hỏi 47: Thêm hai số dưới dạng danh sách liên kết

Viết hàm nhận vào hai danh sách liên kết biểu diễn hai số nguyên, trả về danh sách liên kết biểu diễn tổng của hai số đó.

Giải pháp

function addTwoNumbers(l1, l2) { const dummy = new ListNode(0); let current = dummy; let carry = 0; while (l1 || l2 || carry) { const sum = (l1 ? l1.value : 0) + (l2 ? l2.value : 0) + carry; carry = Math.floor(sum / 10); current.next = new ListNode(sum % 10); current = current.next; if (l1) l1 = l1.next; if (l2) l2 = l2.next; } return dummy.next; }

Phân tích chi tiết

Tính tổng node hiện tại:
- Tổng bao gồm giá trị của node hiện tại từ hai danh sách và số dư carry.
Tính số dư và phần còn lại:
- carry = Math.floor(sum / 10): Số dư cho bước tiếp theo.
- sum % 10: Phần còn lại để thêm vào danh sách.
Duyệt qua danh sách:
- Di chuyển đến node tiếp theo trong cả hai danh sách.
Độ phức tạp:
- Thời gian: O(max⁡(m,n))O(\max(m, n)), với m,nm, n là số node của hai danh sách.
- Bộ nhớ: O(max⁡(m,n))O(\max(m, n)).

Ví dụ

const l1 = new ListNode(2); l1.next = new ListNode(4); l1.next.next = new ListNode(3); const l2 = new ListNode(5); l2.next = new ListNode(6); l2.next.next = new ListNode(4); const result = addTwoNumbers(l1, l2); // ListNode { value: 7, next: ListNode { value: 0, next: ListNode { value: 8, next: null } } }

Câu hỏi 48: Hợp nhất kk danh sách liên kết đã sắp xếp

Viết hàm hợp nhất kk danh sách liên kết đã sắp xếp thành một danh sách liên kết duy nhất cũng được sắp xếp.

Giải pháp: Sử dụng Min-Heap

class MinHeap { constructor() { this.heap = []; } insert(node) { this.heap.push(node); this.bubbleUp(this.heap.length - 1); } bubbleUp(index) { while (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.heap[parentIndex].value > this.heap[index].value) { [this.heap[parentIndex], this.heap[index]] = [this.heap[index], this.heap[parentIndex]]; index = parentIndex; } else break; } } remove() { if (this.heap.length === 0) return null; if (this.heap.length === 1) return this.heap.pop(); const top = this.heap[0]; this.heap[0] = this.heap.pop(); this.bubbleDown(0); return top; } bubbleDown(index) { const length = this.heap.length; while (true) { let smallest = index; const left = 2 * index + 1; const right = 2 * index + 2; if (left < length && this.heap[left].value < this.heap[smallest].value) { smallest = left; } if (right < length && this.heap[right].value < this.heap[smallest].value) { smallest = right; } if (smallest === index) break; [this.heap[smallest], this.heap[index]] = [this.heap[index], this.heap[smallest]]; index = smallest; } } size() { return this.heap.length; } } function mergeKLists(lists) { const heap = new MinHeap(); const dummy = new ListNode(0); let current = dummy; for (const list of lists) { if (list) heap.insert(list); } while (heap.size() > 0) { const smallest = heap.remove(); current.next = smallest; current = current.next; if (smallest.next) { heap.insert(smallest.next); } } return dummy.next; }

Phân tích chi tiết

Min-Heap:
- Min-Heap được sử dụng để luôn lấy node nhỏ nhất trong số các danh sách liên kết.
Thêm vào Heap:
- Ban đầu, thêm node đầu tiên của mỗi danh sách vào heap.
Hợp nhất danh sách:
- Lấy node nhỏ nhất từ heap, thêm vào danh sách kết quả.
- Nếu node này có next, thêm next vào heap.
Độ phức tạp:
- Thời gian: O(Nlog⁡k)O(N \log k), với NN là tổng số node và kk là số danh sách.
- Bộ nhớ: O(k)O(k) cho heap.

Ví dụ

const l1 = new ListNode(1); l1.next = new ListNode(4); l1.next.next = new ListNode(5); const l2 = new ListNode(1); l2.next = new ListNode(3); l2.next.next = new ListNode(4); const l3 = new ListNode(2); l3.next = new ListNode(6); const merged = mergeKLists([l1, l2, l3]); // ListNode { value: 1, next: ListNode { value: 1, next: ListNode { value: 2, next: ListNode { value: 3, next: ... } } } }

Câu hỏi 49: Tìm node giữa trong danh sách liên kết

Viết hàm trả về node giữa của danh sách liên kết. Nếu danh sách có số lượng node chẵn, trả về node thứ hai trong hai node giữa.

Giải pháp: Hai con trỏ

function middleNode(head) { let slow = head; let fast = head; while (fast && fast.next) { slow = slow.next; fast = fast.next.next; } return slow; }

Phân tích chi tiết

Hai con trỏ:
- slow: Di chuyển một bước mỗi lần.
- fast: Di chuyển hai bước mỗi lần.
Tìm node giữa:
- Khi fast đạt cuối danh sách, slow sẽ ở node giữa.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số node.
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(3); head.next.next.next = new ListNode(4); head.next.next.next.next = new ListNode(5); console.log(middleNode(head)); // ListNode { value: 3, next: ListNode { value: 4, next: ListNode { value: 5, next: null } } }

Câu hỏi 50: Chia danh sách liên kết thành hai phần theo giá trị xx

Viết hàm chia danh sách liên kết thành hai phần: các node nhỏ hơn xx ở trước và các node lớn hơn hoặc bằng xx ở sau.

Giải pháp

function partition(head, x) { const beforeDummy = new ListNode(0); const afterDummy = new ListNode(0); let before = beforeDummy; let after = afterDummy; while (head) { if (head.value < x) { before.next = head; before = before.next; } else { after.next = head; after = after.next; } head = head.next; } after.next = null; // Kết thúc danh sách sau before.next = afterDummy.next; // Nối danh sách trước và sau return beforeDummy.next; }

Phân tích chi tiết

Hai danh sách:
- beforeDummy: Lưu các node nhỏ hơn xx.
- afterDummy: Lưu các node lớn hơn hoặc bằng xx.
Duyệt danh sách:
- Thêm node vào danh sách before hoặc after dựa trên giá trị.
Nối hai danh sách:
- Kết nối danh sách before với after.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(4); head.next.next = new ListNode(3); head.next.next.next = new ListNode(2); head.next.next.next.next = new ListNode(5); head.next.next.next.next.next = new ListNode(2); const partitioned = partition(head, 3); // ListNode { value: 1, next: ListNode { value: 2, next: ListNode { value: 2, next: ListNode { value: 4, next: ... } } } }

Câu hỏi 51: Hợp nhất hai danh sách liên kết đã sắp xếp

Viết hàm hợp nhất hai danh sách liên kết đã sắp xếp thành một danh sách liên kết duy nhất cũng được sắp xếp.

Giải pháp

function mergeTwoLists(l1, l2) { const dummy = new ListNode(0); let current = dummy; while (l1 && l2) { if (l1.value <= l2.value) { current.next = l1; l1 = l1.next; } else { current.next = l2; l2 = l2.next; } current = current.next; } current.next = l1 || l2; return dummy.next; }

Phân tích chi tiết

Dummy Node:
- Sử dụng một node giả dummy để dễ dàng xây dựng danh sách kết quả.
So sánh các phần tử:
- So sánh giá trị node hiện tại của l1 và l2, thêm node có giá trị nhỏ hơn vào danh sách kết quả.
Xử lý phần còn lại:
- Nếu một trong hai danh sách còn node chưa được xử lý, gán toàn bộ phần còn lại vào danh sách kết quả.
Độ phức tạp:
- Thời gian: O(m+n)O(m + n), với m,nm, n là số node trong hai danh sách.
- Bộ nhớ: O(1)O(1), không sử dụng thêm bộ nhớ ngoài.

Ví dụ

const l1 = new ListNode(1); l1.next = new ListNode(2); l1.next.next = new ListNode(4); const l2 = new ListNode(1); l2.next = new ListNode(3); l2.next.next = new ListNode(4); const merged = mergeTwoLists(l1, l2); // ListNode { value: 1, next: ListNode { value: 1, next: ListNode { value: 2, next: ListNode { value: 3, next: ... } } } }

Câu hỏi 52: Xoay danh sách liên kết sang phải

Viết hàm xoay danh sách liên kết sang phải kk lần.

Giải pháp

function rotateRight(head, k) { if (!head || !head.next || k === 0) return head; let length = 1; let tail = head; // Tính độ dài danh sách và tìm node cuối while (tail.next) { tail = tail.next; length++; } k = k % length; if (k === 0) return head; // Nối đuôi danh sách với đầu danh sách tail.next = head; // Tìm node mới để cắt let stepsToNewHead = length - k; let newTail = tail; while (stepsToNewHead--) { newTail = newTail.next; } const newHead = newTail.next; newTail.next = null; return newHead; }

Phân tích chi tiết

Tính độ dài danh sách:
- Xác định số node trong danh sách và node cuối cùng.
Điều chỉnh kk:
- k=k%lengthk = k \% length: Đảm bảo số lần xoay không vượt quá độ dài danh sách.
Xoay danh sách:
- Nối đuôi danh sách với đầu danh sách.
- Duyệt đến vị trí cần cắt, xác định newHead và ngắt liên kết tại newTail.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số node.
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(3); head.next.next.next = new ListNode(4); head.next.next.next.next = new ListNode(5); const rotated = rotateRight(head, 2); // ListNode { value: 4, next: ListNode { value: 5, next: ListNode { value: 1, next: ListNode { value: 2, next: ... } } } }

Câu hỏi 53: Tách danh sách liên kết thành kk phần

Viết hàm tách danh sách liên kết thành kk phần gần bằng nhau.

Giải pháp

function splitListToParts(head, k) { let length = 0; let current = head; // Tính độ dài danh sách while (current) { length++; current = current.next; } const partSize = Math.floor(length / k); let extra = length % k; const result = []; current = head; for (let i = 0; i < k; i++) { const dummy = new ListNode(0); let partTail = dummy; for (let j = 0; j < partSize + (extra > 0 ? 1 : 0); j++) { partTail.next = current; partTail = partTail.next; if (current) current = current.next; } if (partTail) partTail.next = null; result.push(dummy.next); if (extra > 0) extra--; } return result; }

Phân tích chi tiết

Tính kích thước mỗi phần:
- partSize = Math.floor(length / k): Kích thước cơ bản mỗi phần.
- extra = length % k: Số phần cần được thêm 1 node.
Tạo các phần:
- Mỗi phần có partSize node, thêm 1 node cho đến khi extra bằng 0.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số node.
- Bộ nhớ: O(k)O(k), cho mảng kết quả.

Ví dụ

const head = new ListNode(1); head.next = new ListNode(2); head.next.next = new ListNode(3); head.next.next.next = new ListNode(4); head.next.next.next.next = new ListNode(5); head.next.next.next.next.next = new ListNode(6); const parts = splitListToParts(head, 3); // [ // ListNode { value: 1, next: ListNode { value: 2, next: null } }, // ListNode { value: 3, next: ListNode { value: 4, next: null } }, // ListNode { value: 5, next: ListNode { value: 6, next: null } } // ]

Câu hỏi 54: Xóa các phần tử trùng lặp trong danh sách liên kết đã sắp xếp

Viết hàm xóa tất cả các phần tử trùng lặp trong danh sách liên kết đã sắp xếp.

Giải pháp

function deleteDuplicates(head) { let current = head; while (current && current.next) { if (current.value === current.next.value) { current.next = current.next.next; } else { current = current.next; } } return head; }

Phân tích chi tiết

Duyệt qua danh sách:
- Nếu giá trị của current và current.next giống nhau, bỏ qua current.next.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

const head = new ListNode(1); head.next = new ListNode(1); head.next.next = new ListNode(2); head.next.next.next = new ListNode(3); head.next.next.next.next = new ListNode(3); const updatedHead = deleteDuplicates(head); // ListNode { value: 1, next: ListNode { value: 2, next: ListNode { value: 3, next: null } } }

Câu hỏi 55: Nhân hai số nguyên lớn được biểu diễn dưới dạng chuỗi

Viết hàm nhận vào hai chuỗi biểu diễn các số nguyên lớn và trả về tích của chúng dưới dạng chuỗi.

Giải pháp

function multiplyStrings(num1, num2) { if (num1 === "0" || num2 === "0") return "0"; const result = new Array(num1.length + num2.length).fill(0); for (let i = num1.length - 1; i >= 0; i--) { for (let j = num2.length - 1; j >= 0; j--) { const mul = (num1[i] - '0') * (num2[j] - '0'); const sum = mul + result[i + j + 1]; result[i + j + 1] = sum % 10; result[i + j] += Math.floor(sum / 10); } } while (result[0] === 0) { result.shift(); } return result.join(''); }

Phân tích chi tiết

Khởi tạo mảng kết quả:
- Mảng result có độ dài bằng tổng độ dài của hai chuỗi đầu vào để đảm bảo lưu đủ giá trị.
Nhân từng chữ số:
- Nhân các chữ số từ cuối đến đầu của cả hai chuỗi.
- Cộng kết quả vào vị trí tương ứng trong mảng result, bao gồm cả phần dư.
Loại bỏ số 00 thừa:
- Xóa các số 00 ở đầu mảng kết quả (nếu có).
Chuyển đổi mảng kết quả thành chuỗi:
- Dùng join('') để nối các phần tử của mảng thành chuỗi kết quả.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là độ dài của hai chuỗi.
- Bộ nhớ: O(m+n)O(m + n).

Ví dụ

console.log(multiplyStrings("123", "456")); // "56088" console.log(multiplyStrings("0", "123")); // "0" console.log(multiplyStrings("999", "999")); // "998001"

Câu hỏi 56: Tìm chuỗi con lặp lại dài nhất (Longest Repeating Substring)

Viết hàm nhận vào một chuỗi và trả về chuỗi con lặp lại dài nhất.

Giải pháp: Sử dụng Binary Search + Hashing

function longestRepeatingSubstring(s) { const n = s.length; function search(length) { const seen = new Set(); for (let i = 0; i <= n - length; i++) { const substring = s.substring(i, i + length); if (seen.has(substring)) return substring; seen.add(substring); } return null; } let left = 1, right = n; let result = ""; while (left <= right) { const mid = Math.floor((left + right) / 2); const found = search(mid); if (found) { result = found; left = mid + 1; } else { right = mid - 1; } } return result; }

Phân tích chi tiết

Binary Search trên độ dài:
- Tìm kiếm chuỗi con lặp lại dài nhất bằng cách thử các độ dài từ nhỏ đến lớn.
Kiểm tra lặp lại:
- Hàm search(length) kiểm tra xem có chuỗi con nào có độ dài length lặp lại hay không.
Cập nhật kết quả:
- Nếu tìm thấy chuỗi con lặp lại, tăng giá trị left để thử độ dài lớn hơn.
- Nếu không, giảm giá trị right.
Độ phức tạp:
- Thời gian: O(n2log⁡n)O(n^2 \log n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n) cho tập hợp các chuỗi con.

Ví dụ

console.log(longestRepeatingSubstring("banana")); // "ana" console.log(longestRepeatingSubstring("abcdef")); // "" console.log(longestRepeatingSubstring("aabcaabdaab")); // "aab"

Câu hỏi 57: Tìm chuỗi con chung dài nhất (Longest Common Substring)

Viết hàm nhận vào hai chuỗi và trả về chuỗi con chung dài nhất.

Giải pháp: Dynamic Programming

function longestCommonSubstring(s1, s2) { const m = s1.length; const n = s2.length; const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0)); let maxLength = 0; let endIndex = 0; for (let i = 1; i <= m; i++) { for (let j = 1; j <= n; j++) { if (s1[i - 1] === s2[j - 1]) { dp[i][j] = dp[i - 1][j - 1] + 1; if (dp[i][j] > maxLength) { maxLength = dp[i][j]; endIndex = i - 1; } } } } return s1.substring(endIndex - maxLength + 1, endIndex + 1); }

Phân tích chi tiết

Mảng DP:
- dp[i][j]: Độ dài chuỗi con chung kết thúc tại s1[i−1]s1[i-1] và s2[j−1]s2[j-1].
Cập nhật giá trị:
- Nếu ký tự s1[i−1]s1[i-1] và s2[j−1]s2[j-1] khớp nhau, tăng giá trị của dp[i][j] bằng dp[i-1][j-1] + 1.
Theo dõi chuỗi con dài nhất:
- Lưu độ dài tối đa và chỉ số kết thúc để trích xuất chuỗi con.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là độ dài hai chuỗi.
- Bộ nhớ: O(m×n)O(m \times n).

Ví dụ

console.log(longestCommonSubstring("abcdef", "zcdemf")); // "cde" console.log(longestCommonSubstring("xyz", "abcd")); // "" console.log(longestCommonSubstring("abcde", "cdeab")); // "cde"

Câu hỏi 58: Sắp xếp chuỗi theo tần suất xuất hiện

Viết hàm nhận vào một chuỗi và trả về chuỗi đã được sắp xếp theo tần suất xuất hiện của các ký tự (tần suất giảm dần).

Giải pháp

function frequencySort(s) { const freqMap = new Map(); for (let char of s) { freqMap.set(char, (freqMap.get(char) || 0) + 1); } return Array.from(freqMap) .sort((a, b) => b[1] - a[1]) .map(([char, freq]) => char.repeat(freq)) .join(''); }

Phân tích chi tiết

Đếm tần suất:
- Sử dụng Map để lưu số lần xuất hiện của mỗi ký tự.
Sắp xếp:
- Chuyển Map thành mảng và sắp xếp theo tần suất giảm dần.
Tạo chuỗi mới:
- Lặp qua mảng đã sắp xếp, nhân ký tự với tần suất và ghép chúng lại.
Độ phức tạp:
- Thời gian: O(n+klog⁡k)O(n + k \log k), với nn là độ dài chuỗi và kk là số lượng ký tự khác nhau.
- Bộ nhớ: O(k)O(k).

Ví dụ

console.log(frequencySort("tree")); // "eert" console.log(frequencySort("cccaaa")); // "cccaaa" console.log(frequencySort("Aabb")); // "bbAa"

Câu hỏi 59: Sinh tất cả các chuỗi ngoặc hợp lệ (Generate Parentheses)

Viết hàm nhận vào một số nguyên nn, trả về tất cả các chuỗi ngoặc hợp lệ có nn cặp ngoặc.

Giải pháp: Backtracking

function generateParentheses(n) { const result = []; function backtrack(current, open, close) { if (current.length === 2 * n) { result.push(current); return; } if (open < n) { backtrack(current + "(", open + 1, close); } if (close < open) { backtrack(current + ")", open, close + 1); } } backtrack("", 0, 0); return result; }

Phân tích chi tiết

Hàm backtrack:
- current: Chuỗi ngoặc hiện tại.
- open: Số lượng ngoặc mở đã sử dụng.
- close: Số lượng ngoặc đóng đã sử dụng.
Điều kiện dừng:
- Nếu độ dài chuỗi bằng 2n2n, thêm chuỗi vào danh sách kết quả.
Ràng buộc:
- open<nopen < n: Chỉ thêm ngoặc mở nếu số ngoặc mở chưa đạt nn.
- close<openclose < open: Chỉ thêm ngoặc đóng nếu số ngoặc đóng ít hơn số ngoặc mở.
Độ phức tạp:
- Thời gian: O(4n/n)O(4^n / \sqrt{n}), do số lượng chuỗi hợp lệ là số Catalan.
- Bộ nhớ: O(n)O(n) cho stack đệ quy.

Ví dụ

console.log(generateParentheses(3)); // ["((()))", "(()())", "(())()", "()(())", "()()()"] console.log(generateParentheses(1)); // ["()"]

Câu hỏi 60: Tìm phần tử xuất hiện nhiều hơn một nửa (Majority Element)

Viết hàm nhận vào một mảng số nguyên và trả về phần tử xuất hiện nhiều hơn một nửa độ dài mảng.

Giải pháp: Boyer-Moore Voting Algorithm

function majorityElement(nums) { let candidate = null; let count = 0; for (let num of nums) { if (count === 0) { candidate = num; } count += (num === candidate) ? 1 : -1; } return candidate; }

Phân tích chi tiết

Thuật toán Boyer-Moore:
- Sử dụng một biến candidate để lưu trữ phần tử có khả năng là kết quả.
- Biến count được sử dụng để theo dõi số lần xuất hiện của candidate.
Cách hoạt động:
- Nếu count === 0, chọn candidate mới.
- Nếu phần tử hiện tại khớp với candidate, tăng count. Ngược lại, giảm count.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số phần tử trong mảng.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(majorityElement([3, 2, 3])); // 3 console.log(majorityElement([2, 2, 1, 1, 1, 2, 2])); // 2

Câu hỏi 61: Sắp xếp mảng theo một thứ tự đã cho

Viết hàm sắp xếp mảng arr theo thứ tự của mảng order.

Giải pháp

function sortArrayByOrder(arr, order) { const orderMap = new Map(); for (let i = 0; i < order.length; i++) { orderMap.set(order[i], i); } return arr.sort((a, b) => { const indexA = orderMap.has(a) ? orderMap.get(a) : Infinity; const indexB = orderMap.has(b) ? orderMap.get(b) : Infinity; return indexA - indexB; }); }

Phân tích chi tiết

Tạo bản đồ thứ tự:
- orderMap lưu vị trí của từng phần tử trong order để so sánh.
Sắp xếp:
- Dùng sort để sắp xếp arr.
- Nếu phần tử không có trong order, đặt ở cuối (dùng giá trị Infinity).
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n), với nn là số phần tử trong arr.
- Bộ nhớ: O(m)O(m), với mm là số phần tử trong order.

Ví dụ

console.log(sortArrayByOrder([2, 3, 1, 4], [3, 1, 4])); // [3, 1, 4, 2] console.log(sortArrayByOrder([5, 6, 7, 8], [8, 7])); // [8, 7, 5, 6]

Câu hỏi 62: Tìm kk số lớn nhất trong mảng

Viết hàm nhận vào một mảng số nguyên và một số kk, trả về kk số lớn nhất trong mảng.

Giải pháp: Heap (Min-Heap)

function findKLargest(nums, k) { const minHeap = []; for (let num of nums) { minHeap.push(num); minHeap.sort((a, b) => a - b); // Sắp xếp heap if (minHeap.length > k) { minHeap.shift(); // Loại bỏ phần tử nhỏ nhất } } return minHeap; }

Phân tích chi tiết

Min-Heap:
- Duy trì một heap có kích thước tối đa kk.
- Chỉ giữ lại kk phần tử lớn nhất.
Loại bỏ phần tử nhỏ nhất:
- Nếu kích thước heap vượt quá kk, loại bỏ phần tử nhỏ nhất (shift).
Độ phức tạp:
- Thời gian: O(nlog⁡k)O(n \log k), với nn là số phần tử trong mảng.
- Bộ nhớ: O(k)O(k).

Ví dụ

console.log(findKLargest([3, 2, 1, 5, 6, 4], 2)); // [5, 6] console.log(findKLargest([1, 9, 8, 7, 2, 3], 3)); // [7, 8, 9]

Câu hỏi 63: Tìm kk phần tử gần nhất với một giá trị xx trong mảng

Viết hàm nhận vào một mảng số nguyên arr, một số nguyên kk, và một giá trị xx. Trả về kk phần tử gần nhất với xx, được sắp xếp theo thứ tự tăng dần.

Giải pháp

function findClosestElements(arr, k, x) { return arr .sort((a, b) => Math.abs(a - x) - Math.abs(b - x) || a - b) .slice(0, k) .sort((a, b) => a - b); }

Phân tích chi tiết

Sắp xếp theo độ gần:
- Math.abs(a - x) - Math.abs(b - x): Sắp xếp mảng theo khoảng cách của mỗi phần tử đến xx.
- a - b: Trong trường hợp hai phần tử có khoảng cách bằng nhau, sắp xếp theo giá trị.
Chọn kk phần tử đầu tiên:
- Sử dụng slice(0, k) để lấy kk phần tử gần nhất.
Sắp xếp kết quả theo thứ tự tăng dần:
- Sắp xếp kk phần tử đã chọn theo giá trị thực.
Độ phức tạp:
- Thời gian: O(nlog⁡n)O(n \log n), với nn là số phần tử trong arr.
- Bộ nhớ: O(k)O(k), với kk là số phần tử gần nhất.

Ví dụ

console.log(findClosestElements([1, 2, 3, 4, 5], 4, 3)); // [1, 2, 3, 4] console.log(findClosestElements([1, 3, 5, 7], 2, 6)); // [5, 7]

Câu hỏi 64: Tìm độ dài chuỗi con liên tục với tổng bằng kk

Viết hàm nhận vào một mảng số nguyên và một số nguyên kk, trả về độ dài chuỗi con liên tục dài nhất có tổng bằng kk.

Giải pháp: Hash Map

function maxSubArrayLen(nums, k) { const sumMap = new Map(); let sum = 0; let maxLength = 0; sumMap.set(0, -1); for (let i = 0; i < nums.length; i++) { sum += nums[i]; if (sumMap.has(sum - k)) { maxLength = Math.max(maxLength, i - sumMap.get(sum - k)); } if (!sumMap.has(sum)) { sumMap.set(sum, i); } } return maxLength; }

Phân tích chi tiết

Duyệt qua mảng:
- Tính tổng hiện tại sum khi duyệt qua từng phần tử.
Kiểm tra tổng trừ kk:
- Nếu sum−ksum – k tồn tại trong sumMap, xác định độ dài chuỗi con.
Cập nhật bản đồ:
- Lưu sum cùng với chỉ số của nó nếu chưa tồn tại.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số phần tử trong mảng.
- Bộ nhớ: O(n)O(n), cho sumMap.

Ví dụ

console.log(maxSubArrayLen([1, -1, 5, -2, 3], 3)); // 4 console.log(maxSubArrayLen([-2, -1, 2, 1], 1)); // 2

Câu hỏi 65: Tìm tổng nhỏ nhất của chuỗi con có độ dài ít nhất kk

Viết hàm nhận vào một mảng số nguyên và một số nguyên kk, trả về tổng nhỏ nhất của chuỗi con liên tục có độ dài ít nhất kk.

Giải pháp: Sliding Window

function minSubArrayLen(target, nums) { let left = 0; let sum = 0; let minLength = Infinity; for (let right = 0; right < nums.length; right++) { sum += nums[right]; while (sum >= target) { minLength = Math.min(minLength, right - left + 1); sum -= nums[left]; left++; } } return minLength === Infinity ? 0 : minLength; }

Phân tích chi tiết

Cửa sổ trượt:
- left và right đại diện cho hai đầu của cửa sổ.
Thu hẹp cửa sổ:
- Khi tổng sum≥targetsum \geq target, tính độ dài cửa sổ và thu hẹp cửa sổ từ trái.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số phần tử trong mảng.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(minSubArrayLen(7, [2, 3, 1, 2, 4, 3])); // 2 console.log(minSubArrayLen(4, [1, 4, 4])); // 1 console.log(minSubArrayLen(11, [1, 1, 1, 1, 1, 1, 1, 1])); // 0

Câu hỏi 66: Kiểm tra chuỗi con của chuỗi khác

Viết hàm kiểm tra xem một chuỗi có phải là chuỗi con của chuỗi khác hay không.

Giải pháp: Hai con trỏ

function isSubsequence(s, t) { let i = 0; let j = 0; while (i < s.length && j < t.length) { if (s[i] === t[j]) { i++; } j++; } return i === s.length; }

Phân tích chi tiết

Hai con trỏ:
- i duyệt qua chuỗi s, j duyệt qua chuỗi t.
Kiểm tra ký tự:
- Nếu ký tự tại s[i] và t[j] khớp nhau, tăng i.
- Duyệt tiếp t[j] bất kể khớp hay không.
Độ phức tạp:
- Thời gian: O(n+m)O(n + m), với n,mn, m là độ dài của s và t.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(isSubsequence("abc", "ahbgdc")); // true console.log(isSubsequence("axc", "ahbgdc")); // false console.log(isSubsequence("", "ahbgdc")); // true

Câu hỏi 67: Tìm hoán vị của chuỗi (Permutations)

Viết hàm trả về tất cả các hoán vị của một chuỗi hoặc một mảng.

Giải pháp: Backtracking

function permute(nums) { const result = []; function backtrack(path, remaining) { if (remaining.length === 0) { result.push([...path]); return; } for (let i = 0; i < remaining.length; i++) { path.push(remaining[i]); backtrack(path, remaining.slice(0, i).concat(remaining.slice(i + 1))); path.pop(); } } backtrack([], nums); return result; }

Phân tích chi tiết

Hàm backtrack:
- path: Dãy hiện tại đang xây dựng.
- remaining: Các phần tử chưa được sử dụng.
Điều kiện dừng:
- Khi remaining rỗng, thêm path vào danh sách kết quả.
Lặp qua các phần tử:
- Thêm phần tử vào path.
- Đệ quy để tạo hoán vị từ các phần tử còn lại.
- Loại bỏ phần tử đã thêm sau khi quay lại.
Độ phức tạp:
- Thời gian: O(n!)O(n!), với nn là độ dài của mảng.
- Bộ nhớ: O(n!)O(n!) để lưu kết quả.

Ví dụ

console.log(permute([1, 2, 3])); // [[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]]

Câu hỏi 68: Tìm tổ hợp của các phần tử (Combinations)

Viết hàm trả về tất cả các tổ hợp của kk phần tử từ nn phần tử.

Giải pháp: Backtracking

function combine(n, k) { const result = []; function backtrack(start, path) { if (path.length === k) { result.push([...path]); return; } for (let i = start; i <= n; i++) { path.push(i); backtrack(i + 1, path); path.pop(); } } backtrack(1, []); return result; }

Phân tích chi tiết

Hàm backtrack:
- start: Điểm bắt đầu để duyệt qua các phần tử.
- path: Dãy hiện tại đang xây dựng.
Điều kiện dừng:
- Khi path.length === k, thêm tổ hợp vào danh sách kết quả.
Lặp qua các phần tử:
- Thêm phần tử vào path.
- Đệ quy để tìm tổ hợp tiếp theo.
- Loại bỏ phần tử đã thêm sau khi quay lại.
Độ phức tạp:
- Thời gian: O(C(n,k))O(C(n, k)), với C(n,k)C(n, k) là số tổ hợp.
- Bộ nhớ: O(C(n,k))O(C(n, k)) để lưu kết quả.

Ví dụ

console.log(combine(4, 2)); // [[1, 2], [1, 3], [1, 4], [2, 3], [2, 4], [3, 4]]

Câu hỏi 69: Tìm tập hợp con (Subsets)

Viết hàm trả về tất cả các tập hợp con của một mảng.

Giải pháp: Backtracking

function subsets(nums) { const result = []; function backtrack(start, path) { result.push([...path]); for (let i = start; i < nums.length; i++) { path.push(nums[i]); backtrack(i + 1, path); path.pop(); } } backtrack(0, []); return result; }

Phân tích chi tiết

Hàm backtrack:
- start: Điểm bắt đầu để duyệt qua các phần tử.
- path: Dãy hiện tại đang xây dựng.
Thêm vào kết quả:
- Mỗi lần gọi backtrack, thêm path hiện tại vào danh sách kết quả.
Lặp qua các phần tử:
- Thêm phần tử vào path.
- Đệ quy để tạo tập hợp con từ các phần tử còn lại.
- Loại bỏ phần tử đã thêm sau khi quay lại.
Độ phức tạp:
- Thời gian: O(2n)O(2^n), với nn là số phần tử trong mảng.
- Bộ nhớ: O(2n)O(2^n) để lưu kết quả.

Ví dụ

console.log(subsets([1, 2, 3])); // [[], [1], [2], [1, 2], [3], [1, 3], [2, 3], [1, 2, 3]]

Câu hỏi 70: Tìm hoán vị có chứa phần tử trùng lặp

Viết hàm trả về tất cả các hoán vị của một mảng có thể chứa các phần tử trùng lặp.

Giải pháp: Backtracking với kiểm tra trùng lặp

function permuteUnique(nums) { const result = []; nums.sort((a, b) => a - b); function backtrack(path, used) { if (path.length === nums.length) { result.push([...path]); return; } for (let i = 0; i < nums.length; i++) { if (used[i]) continue; if (i > 0 && nums[i] === nums[i - 1] && !used[i - 1]) continue; path.push(nums[i]); used[i] = true; backtrack(path, used); used[i] = false; path.pop(); } } backtrack([], Array(nums.length).fill(false)); return result; }

Phân tích chi tiết

Sắp xếp mảng:
- Sắp xếp mảng ban đầu để dễ dàng loại bỏ hoán vị trùng lặp.
Kiểm tra trùng lặp:
- Bỏ qua phần tử trùng lặp nếu phần tử trước đó đã bị bỏ qua.
Quản lý trạng thái:
- Mảng used lưu trạng thái đã sử dụng của từng phần tử.
Độ phức tạp:
- Thời gian: O(n×n!)O(n \times n!), với nn là độ dài của mảng.
- Bộ nhớ: O(n!)O(n!) để lưu kết quả.

Ví dụ

console.log(permuteUnique([1, 1, 2])); // [[1, 1, 2], [1, 2, 1], [2, 1, 1]]

Câu hỏi 71: Tìm chuỗi con Palindrome dài nhất (Longest Palindromic Substring)

Viết hàm nhận vào một chuỗi và trả về chuỗi con Palindrome dài nhất.

Giải pháp: Expand Around Center

function longestPalindrome(s) { if (s.length < 1) return ""; let start = 0, end = 0; function expandAroundCenter(left, right) { while (left >= 0 && right < s.length && s[left] === s[right]) { left--; right++; } return right - left - 1; } for (let i = 0; i < s.length; i++) { const len1 = expandAroundCenter(i, i); // Palindrome lẻ const len2 = expandAroundCenter(i, i + 1); // Palindrome chẵn const len = Math.max(len1, len2); if (len > end - start) { start = i - Math.floor((len - 1) / 2); end = i + Math.floor(len / 2); } } return s.substring(start, end + 1); }

Phân tích chi tiết

Hàm mở rộng từ trung tâm:
- Kiểm tra chuỗi con là Palindrome bằng cách mở rộng từ trung tâm.
Kiểm tra Palindrome chẵn và lẻ:
- Xét cả hai trường hợp: chuỗi có độ dài chẵn và lẻ.
Cập nhật chuỗi con dài nhất:
- Nếu độ dài chuỗi Palindrome hiện tại lớn hơn chuỗi đã lưu, cập nhật vị trí bắt đầu và kết thúc.
Độ phức tạp:
- Thời gian: O(n2)O(n^2), với nn là độ dài chuỗi.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(longestPalindrome("babad")); // "bab" hoặc "aba" console.log(longestPalindrome("cbbd")); // "bb"

Câu hỏi 72: Kiểm tra chuỗi là Palindrome sau khi xóa tối đa một ký tự

Viết hàm kiểm tra xem một chuỗi có thể trở thành Palindrome sau khi xóa tối đa một ký tự.

Giải pháp: Hai con trỏ

function validPalindrome(s) { function isPalindrome(left, right) { while (left < right) { if (s[left] !== s[right]) return false; left++; right--; } return true; } let left = 0, right = s.length - 1; while (left < right) { if (s[left] !== s[right]) { return isPalindrome(left + 1, right) || isPalindrome(left, right - 1); } left++; right--; } return true; }

Phân tích chi tiết

Hàm kiểm tra Palindrome:
- Kiểm tra xem chuỗi từ chỉ số left đến right có phải là Palindrome hay không.
Hai con trỏ:
- Duyệt từ đầu và cuối chuỗi. Khi phát hiện ký tự không khớp, kiểm tra bằng cách bỏ một trong hai ký tự.
Độ phức tạp:
- Thời gian: O(n)O(n).
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(validPalindrome("abca")); // true (bỏ 'c') console.log(validPalindrome("racecar")); // true console.log(validPalindrome("hello")); // false

Câu hỏi 73: Tìm chuỗi con có tổng độ dài kk lớn nhất

Viết hàm nhận vào một chuỗi và một số kk, trả về chuỗi con có tổng các ký tự lớn nhất với độ dài kk.

Giải pháp: Sliding Window

function maxSubstringSum(s, k) { let maxSum = 0, currentSum = 0, start = 0, result = ""; for (let end = 0; end < s.length; end++) { currentSum += s.charCodeAt(end); if (end - start + 1 === k) { if (currentSum > maxSum) { maxSum = currentSum; result = s.substring(start, end + 1); } currentSum -= s.charCodeAt(start); start++; } } return result; }

Phân tích chi tiết

Cửa sổ trượt:
- Duyệt chuỗi bằng một cửa sổ có kích thước kk.
Cập nhật tổng lớn nhất:
- Tính tổng ASCII của các ký tự trong cửa sổ hiện tại.
- Nếu tổng lớn hơn maxSum, cập nhật chuỗi con.
Duyệt và trượt cửa sổ:
- Trượt cửa sổ bằng cách loại bỏ ký tự đầu và thêm ký tự cuối.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(maxSubstringSum("abcde", 2)); // "de" (tổng ASCII lớn nhất: 201) console.log(maxSubstringSum("xyz", 2)); // "yz"

Câu hỏi 74: Tìm chuỗi con duy nhất dài nhất

Viết hàm trả về chuỗi con duy nhất dài nhất từ một chuỗi.

Giải pháp: Sliding Window + HashMap

function lengthOfLongestSubstring(s) { const charMap = new Map(); let maxLength = 0, start = 0; for (let end = 0; end < s.length; end++) { if (charMap.has(s[end])) { start = Math.max(start, charMap.get(s[end]) + 1); } charMap.set(s[end], end); maxLength = Math.max(maxLength, end - start + 1); } return maxLength; }

Phân tích chi tiết

HashMap:
- Lưu vị trí xuất hiện cuối cùng của mỗi ký tự.
Cửa sổ trượt:
- Nếu ký tự trùng lặp được tìm thấy, cập nhật start đến vị trí sau ký tự trùng lặp.
Cập nhật độ dài lớn nhất:
- Cập nhật maxLength bằng khoảng cách giữa start và end.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau.

Ví dụ

console.log(lengthOfLongestSubstring("abcabcbb")); // 3 ("abc") console.log(lengthOfLongestSubstring("bbbbb")); // 1 ("b") console.log(lengthOfLongestSubstring("pwwkew")); // 3 ("wke")

Câu hỏi 75: Tìm từ khóa xuất hiện nhiều nhất trong chuỗi

Viết hàm nhận vào một chuỗi và trả về từ khóa xuất hiện nhiều nhất trong chuỗi.

Giải pháp

function mostFrequentWord(s) { const words = s.toLowerCase().match(/\b[a-z]+\b/g); // Tách từ const freqMap = new Map(); for (let word of words) { freqMap.set(word, (freqMap.get(word) || 0) + 1); } let maxFreq = 0; let result = ""; for (let [word, freq] of freqMap.entries()) { if (freq > maxFreq || (freq === maxFreq && word < result)) { maxFreq = freq; result = word; } } return result; }

Phân tích chi tiết

Tách từ:
- Sử dụng biểu thức chính quy \b[a-z]+\b để tách từ.
Đếm tần suất:
- Lưu tần suất xuất hiện của mỗi từ vào Map.
Tìm từ xuất hiện nhiều nhất:
- So sánh tần suất và cập nhật từ có tần suất cao nhất.
- Nếu tần suất bằng nhau, chọn từ nhỏ hơn về mặt từ điển.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là số từ trong chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số từ khác nhau.

Ví dụ

console.log(mostFrequentWord("The cat and the hat.")); // "the" console.log(mostFrequentWord("hello world hello")); // "hello" console.log(mostFrequentWord("a b c a b a")); // "a"

Câu hỏi 76: Đếm số lần xuất hiện của một mẫu trong chuỗi

Viết hàm đếm số lần xuất hiện của một chuỗi con patternpattern trong chuỗi ss.

Giải pháp

function countOccurrences(s, pattern) { let count = 0; let index = s.indexOf(pattern); while (index !== -1) { count++; index = s.indexOf(pattern, index + 1); } return count; }

Phân tích chi tiết

Tìm vị trí xuất hiện:
- Sử dụng indexOf để tìm vị trí của chuỗi con.
Lặp lại tìm kiếm:
- Sau khi tìm thấy, tiếp tục tìm kiếm từ vị trí tiếp theo.
Độ phức tạp:
- Thời gian: O(n×m)O(n \times m), với nn là độ dài chuỗi và mm là độ dài mẫu.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(countOccurrences("ababab", "ab")); // 3 console.log(countOccurrences("aaaaa", "aa")); // 4 console.log(countOccurrences("hello world", "world")); // 1

Câu hỏi 77: Tìm ký tự đầu tiên không lặp lại

Viết hàm nhận vào một chuỗi và trả về ký tự đầu tiên không lặp lại. Nếu không có, trả về null.

Giải pháp

function firstNonRepeatingCharacter(s) { const freqMap = new Map(); for (let char of s) { freqMap.set(char, (freqMap.get(char) || 0) + 1); } for (let char of s) { if (freqMap.get(char) === 1) { return char; } } return null; }

Phân tích chi tiết

Đếm tần suất:
- Sử dụng Map để đếm số lần xuất hiện của mỗi ký tự.
Tìm ký tự không lặp lại:
- Duyệt qua chuỗi ban đầu, trả về ký tự có tần suất bằng 11.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau.

Ví dụ

console.log(firstNonRepeatingCharacter("leetcode")); // "l" console.log(firstNonRepeatingCharacter("aabbcc")); // null console.log(firstNonRepeatingCharacter("swiss")); // "w"

Câu hỏi 78: Tìm chuỗi con có tần suất xuất hiện lớn nhất

Viết hàm nhận vào một chuỗi và trả về chuỗi con có tần suất xuất hiện lớn nhất với độ dài cố định kk.

Giải pháp

function mostFrequentSubstring(s, k) { const freqMap = new Map(); for (let i = 0; i <= s.length - k; i++) { const substring = s.substring(i, i + k); freqMap.set(substring, (freqMap.get(substring) || 0) + 1); } let maxFreq = 0; let result = ""; for (let [substring, freq] of freqMap.entries()) { if (freq > maxFreq || (freq === maxFreq && substring < result)) { maxFreq = freq; result = substring; } } return result; }

Phân tích chi tiết

Tạo chuỗi con:
- Lấy tất cả chuỗi con có độ dài kk từ chuỗi đầu vào.
Đếm tần suất:
- Sử dụng Map để lưu số lần xuất hiện của mỗi chuỗi con.
Tìm chuỗi con có tần suất lớn nhất:
- So sánh tần suất và chọn chuỗi con có tần suất lớn nhất.
- Nếu tần suất bằng nhau, chọn chuỗi con nhỏ hơn về mặt từ điển.
Độ phức tạp:
- Thời gian: O(n×k)O(n \times k), với nn là độ dài chuỗi và kk là độ dài chuỗi con.
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(mostFrequentSubstring("ababab", 2)); // "ab" console.log(mostFrequentSubstring("abcabc", 3)); // "abc" console.log(mostFrequentSubstring("aaaa", 2)); // "aa"

Câu hỏi 79: Kiểm tra chuỗi có chứa tất cả các ký tự từ aa đến zz (Pangram)

Viết hàm kiểm tra xem một chuỗi có phải là Pangram không (chứa tất cả các ký tự từ aa đến zz).

Giải pháp

function isPangram(s) { const set = new Set(); for (let char of s.toLowerCase()) { if (char >= 'a' && char <= 'z') { set.add(char); } } return set.size === 26; }

Phân tích chi tiết

Lưu ký tự duy nhất:
- Sử dụng Set để lưu các ký tự trong khoảng aa đến zz.
Kiểm tra Pangram:
- Nếu Set có đủ 26 ký tự, chuỗi là Pangram.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(1)O(1), vì Set có tối đa 26 ký tự.

Ví dụ

console.log(isPangram("The quick brown fox jumps over the lazy dog")); // true console.log(isPangram("Hello World")); // false console.log(isPangram("Pack my box with five dozen liquor jugs")); // true

Câu hỏi 80: Kiểm tra xem hai chuỗi có phải là hoán vị của nhau (Anagram)

Viết hàm kiểm tra xem hai chuỗi có phải là hoán vị của nhau hay không.

Giải pháp: Sử dụng HashMap

function isAnagram(s, t) { if (s.length !== t.length) return false; const charCount = new Map(); for (let char of s) { charCount.set(char, (charCount.get(char) || 0) + 1); } for (let char of t) { if (!charCount.has(char)) return false; charCount.set(char, charCount.get(char) - 1); if (charCount.get(char) === 0) charCount.delete(char); } return charCount.size === 0; }

Phân tích chi tiết

Đếm tần suất ký tự trong chuỗi ss:
- Sử dụng Map để lưu số lần xuất hiện của mỗi ký tự.
Kiểm tra chuỗi tt:
- Nếu ký tự trong tt không tồn tại trong Map hoặc tần suất không khớp, trả về false.
Kiểm tra kết quả:
- Nếu Map rỗng, hai chuỗi là hoán vị của nhau.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau.

Ví dụ

console.log(isAnagram("anagram", "nagaram")); // true console.log(isAnagram("rat", "car")); // false console.log(isAnagram("aacc", "ccac")); // false

Câu hỏi 81: Tìm từ có độ dài lớn nhất có thể hình thành từ chuỗi ký tự cho trước

Viết hàm nhận vào một danh sách từ và một chuỗi ký tự, trả về từ dài nhất có thể hình thành bằng cách sử dụng các ký tự trong chuỗi.

Giải pháp

function longestWord(words, chars) { const charCount = new Map(); for (let char of chars) { charCount.set(char, (charCount.get(char) || 0) + 1); } let maxLength = 0; for (let word of words) { const wordCount = new Map(); for (let char of word) { wordCount.set(char, (wordCount.get(char) || 0) + 1); } let canForm = true; for (let [char, count] of wordCount) { if (!charCount.has(char) || charCount.get(char) < count) { canForm = false; break; } } if (canForm) { maxLength = Math.max(maxLength, word.length); } } return maxLength; }

Phân tích chi tiết

Đếm ký tự khả dụng:
- Sử dụng Map để đếm số lần xuất hiện của mỗi ký tự trong charschars.
Kiểm tra từng từ:
- Đếm số lần xuất hiện của mỗi ký tự trong từ.
- So sánh với các ký tự khả dụng, nếu từ không thể hình thành, bỏ qua.
Cập nhật độ dài lớn nhất:
- Nếu từ có thể hình thành, so sánh độ dài của từ với độ dài lớn nhất hiện tại.
Độ phức tạp:
- Thời gian: O(n×m)O(n \times m), với nn là số từ và mm là độ dài từ trung bình.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau.

Ví dụ

console.log(longestWord(["cat", "bt", "hat", "tree"], "atach")); // 3 ("cat" hoặc "hat") console.log(longestWord(["hello", "world", "leetcode"], "welldonehoneyr")); // 5 ("world")

Câu hỏi 82: Đảo ngược các từ trong một chuỗi

Viết hàm đảo ngược thứ tự các từ trong một chuỗi, loại bỏ khoảng trắng thừa.

Giải pháp

function reverseWords(s) { return s.trim().split(/\s+/).reverse().join(" "); }

Phân tích chi tiết

Loại bỏ khoảng trắng:
- trim() loại bỏ khoảng trắng ở đầu và cuối chuỗi.
- split(/\s+/) tách chuỗi thành các từ, bỏ qua khoảng trắng thừa.
Đảo ngược và ghép lại:
- reverse() đảo ngược thứ tự các từ.
- join(" ") ghép các từ lại với khoảng trắng giữa chúng.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n) cho mảng từ.

Ví dụ

console.log(reverseWords(" the sky is blue ")); // "blue is sky the" console.log(reverseWords("hello world!")); // "world! hello"

Câu hỏi 83: Tìm từ dài nhất trong chuỗi con của một chuỗi khác

Viết hàm nhận vào một danh sách từ và một chuỗi ss, trả về từ dài nhất có thể hình thành bằng cách sắp xếp chuỗi con của ss.

Giải pháp

function findLongestWord(s, dictionary) { dictionary.sort((a, b) => b.length - a.length || a.localeCompare(b)); function isSubsequence(word) { let i = 0, j = 0; while (i < word.length && j < s.length) { if (word[i] === s[j]) i++; j++; } return i === word.length; } for (let word of dictionary) { if (isSubsequence(word)) { return word; } } return ""; }

Phân tích chi tiết

Sắp xếp danh sách từ:
- Sắp xếp từ dài nhất đến ngắn nhất, nếu bằng nhau thì theo thứ tự từ điển.
Kiểm tra chuỗi con:
- Sử dụng hai con trỏ để kiểm tra xem từ có phải là chuỗi con của ss.
Trả về kết quả:
- Trả về từ đầu tiên thỏa mãn điều kiện.
Độ phức tạp:
- Thời gian: O(n×m)O(n \times m), với nn là số từ và mm là độ dài trung bình của từ.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(findLongestWord("abpcplea", ["ale", "apple", "monkey", "plea"])); // "apple" console.log(findLongestWord("abpcplea", ["a", "b", "c"])); // "a"

Câu hỏi 84: Tìm số lượng từ trong một chuỗi

Viết hàm đếm số lượng từ trong một chuỗi. Một từ được định nghĩa là chuỗi các ký tự không phải khoảng trắng.

Giải pháp

function countWords(s) { const words = s.trim().split(/\s+/); return words.length === 1 && words[0] === "" ? 0 : words.length; }

Phân tích chi tiết

Loại bỏ khoảng trắng thừa:
- trim() loại bỏ khoảng trắng ở đầu và cuối chuỗi.
- split(/\s+/) tách chuỗi thành các từ dựa trên khoảng trắng.
Xử lý trường hợp đặc biệt:
- Nếu chuỗi rỗng hoặc chỉ chứa khoảng trắng, trả về 0.
Đếm số từ:
- Số phần tử trong mảng words là số từ.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số từ trong chuỗi.

Ví dụ

console.log(countWords("Hello World")); // 2 console.log(countWords(" Leading and trailing spaces ")); // 4 console.log(countWords("")); // 0

Câu hỏi 85: Tìm độ dài từ cuối cùng trong chuỗi

Viết hàm trả về độ dài của từ cuối cùng trong chuỗi. Nếu không có từ, trả về 0.

Giải pháp

function lengthOfLastWord(s) { const words = s.trim().split(/\s+/); return words.length === 0 ? 0 : words[words.length - 1].length; }

Phân tích chi tiết

Loại bỏ khoảng trắng thừa:
- trim() loại bỏ khoảng trắng ở đầu và cuối chuỗi.
- split(/\s+/) tách chuỗi thành các từ dựa trên khoảng trắng.
Lấy từ cuối cùng:
- Lấy phần tử cuối cùng trong mảng words và trả về độ dài của nó.
Xử lý trường hợp đặc biệt:
- Nếu mảng không có phần tử, trả về 0.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số từ trong chuỗi.

Ví dụ

console.log(lengthOfLastWord("Hello World")); // 5 console.log(lengthOfLastWord(" fly me to the moon ")); // 4 console.log(lengthOfLastWord(" ")); // 0

Câu hỏi 86: Kiểm tra chuỗi là Palindrome, không phân biệt khoảng trắng và ký tự đặc biệt

Viết hàm kiểm tra xem một chuỗi có phải là Palindrome không, bỏ qua khoảng trắng, ký tự đặc biệt và không phân biệt chữ hoa, chữ thường.

Giải pháp

function isPalindromeIgnoreCase(s) { const cleaned = s.toLowerCase().replace(/[^a-z0-9]/g, ""); let left = 0, right = cleaned.length - 1; while (left < right) { if (cleaned[left] !== cleaned[right]) return false; left++; right--; } return true; }

Phân tích chi tiết

Làm sạch chuỗi:
- toLowerCase(): Chuyển toàn bộ ký tự về chữ thường.
- replace(/[^a-z0-9]/g, ""): Loại bỏ tất cả ký tự không phải chữ cái và số.
Kiểm tra Palindrome:
- Sử dụng hai con trỏ để so sánh ký tự đầu và cuối, di chuyển vào giữa.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi sau khi làm sạch.
- Bộ nhớ: O(n)O(n), cho chuỗi làm sạch.

Ví dụ

console.log(isPalindromeIgnoreCase("A man, a plan, a canal: Panama")); // true console.log(isPalindromeIgnoreCase("race a car")); // false console.log(isPalindromeIgnoreCase(" ")); // true

Câu hỏi 87: Loại bỏ các ký tự trùng lặp liền kề trong chuỗi

Viết hàm loại bỏ tất cả các ký tự trùng lặp liền kề trong chuỗi.

Giải pháp

function removeDuplicates(s) { const stack = []; for (let char of s) { if (stack.length > 0 && stack[stack.length - 1] === char) { stack.pop(); } else { stack.push(char); } } return stack.join(''); }

Phân tích chi tiết

Sử dụng Stack:
- Nếu ký tự hiện tại bằng với ký tự ở đỉnh stack, loại bỏ ký tự ở đỉnh stack.
- Ngược lại, thêm ký tự vào stack.
Ghép kết quả:
- Sau khi duyệt qua toàn bộ chuỗi, các ký tự trong stack là kết quả cuối cùng.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n), cho stack.

Ví dụ

console.log(removeDuplicates("abbaca")); // "ca" console.log(removeDuplicates("azxxzy")); // "ay" console.log(removeDuplicates("aaaa")); // ""

Câu hỏi 88: Xóa chuỗi con Palindrome dài nhất

Viết hàm trả về số lần xóa tối thiểu để chuỗi trở thành chuỗi rỗng bằng cách xóa các chuỗi con Palindrome.

Giải pháp

function removePalindromeSub(s) { if (s === "") return 0; return s === s.split('').reverse().join('') ? 1 : 2; }

Phân tích chi tiết

Trường hợp đặc biệt:
- Nếu chuỗi rỗng, không cần xóa, trả về 0.
Kiểm tra Palindrome:
- Nếu chuỗi là Palindrome, chỉ cần xóa một lần.
- Nếu không, cần tối đa 2 lần:
  - Xóa tất cả chữ cái ‘a’.
  - Xóa tất cả chữ cái ‘b’.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n), cho thao tác đảo chuỗi.

Ví dụ

console.log(removePalindromeSub("ababa")); // 1 console.log(removePalindromeSub("abb")); // 2 console.log(removePalindromeSub("")); // 0

Câu hỏi 89: Sắp xếp chuỗi theo tần suất ký tự giảm dần

Viết hàm nhận vào một chuỗi và trả về chuỗi đã được sắp xếp theo tần suất xuất hiện của các ký tự, giảm dần.

Giải pháp

function frequencySort(s) { const freqMap = new Map(); for (let char of s) { freqMap.set(char, (freqMap.get(char) || 0) + 1); } return Array.from(freqMap) .sort((a, b) => b[1] - a[1]) .map(([char, freq]) => char.repeat(freq)) .join(''); }

Phân tích chi tiết

Đếm tần suất ký tự:
- Sử dụng Map để lưu tần suất của mỗi ký tự trong chuỗi.
Sắp xếp theo tần suất:
- Chuyển Map thành mảng và sắp xếp các phần tử theo tần suất giảm dần.
Tạo chuỗi kết quả:
- Nhân ký tự với tần suất của nó và ghép các phần tử lại thành chuỗi.
Độ phức tạp:
- Thời gian: O(n+klog⁡k)O(n + k \log k), với nn là độ dài chuỗi và kk là số ký tự khác nhau.
- Bộ nhớ: O(k)O(k).

Ví dụ

console.log(frequencySort("tree")); // "eert" hoặc "eetr" console.log(frequencySort("cccaaa")); // "cccaaa" hoặc "aaaccc" console.log(frequencySort("Aabb")); // "bbAa" hoặc "bbaA"

Câu hỏi 90: Tìm từ dài nhất trong danh sách là chuỗi con của chuỗi ss

Viết hàm nhận vào một chuỗi ss và một danh sách từ, trả về từ dài nhất trong danh sách có thể là chuỗi con của ss. Nếu có nhiều từ cùng độ dài, trả về từ nhỏ nhất theo thứ tự từ điển.

Giải pháp

function findLongestWord(s, dictionary) { dictionary.sort((a, b) => b.length - a.length || a.localeCompare(b)); function isSubsequence(word) { let i = 0, j = 0; while (i < word.length && j < s.length) { if (word[i] === s[j]) i++; j++; } return i === word.length; } for (let word of dictionary) { if (isSubsequence(word)) { return word; } } return ""; }

Phân tích chi tiết

Sắp xếp danh sách từ:
- Sắp xếp từ dài nhất đến ngắn nhất, nếu cùng độ dài thì theo thứ tự từ điển.
Kiểm tra chuỗi con:
- Sử dụng hai con trỏ để kiểm tra xem từ có phải là chuỗi con của ss.
Trả về kết quả:
- Trả về từ đầu tiên thỏa mãn điều kiện là chuỗi con.
Độ phức tạp:
- Thời gian: O(n×m)O(n \times m), với nn là số từ và mm là độ dài trung bình của từ.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(findLongestWord("abpcplea", ["ale", "apple", "monkey", "plea"])); // "apple" console.log(findLongestWord("abpcplea", ["a", "b", "c"])); // "a"

Câu hỏi 91: Tìm chuỗi con lặp lại nhiều nhất trong chuỗi

Viết hàm nhận vào một chuỗi và độ dài kk, trả về chuỗi con có tần suất lặp lại nhiều nhất với độ dài kk.

Giải pháp

function mostFrequentSubstring(s, k) { const freqMap = new Map(); for (let i = 0; i <= s.length - k; i++) { const substring = s.substring(i, i + k); freqMap.set(substring, (freqMap.get(substring) || 0) + 1); } let maxFreq = 0; let result = ""; for (let [substring, freq] of freqMap.entries()) { if (freq > maxFreq || (freq === maxFreq && substring < result)) { maxFreq = freq; result = substring; } } return result; }

Phân tích chi tiết

Tạo chuỗi con:
- Lấy tất cả chuỗi con có độ dài kk từ chuỗi đầu vào.
Đếm tần suất:
- Sử dụng Map để lưu số lần xuất hiện của mỗi chuỗi con.
Tìm chuỗi con có tần suất lớn nhất:
- So sánh tần suất và chọn chuỗi con có tần suất lớn nhất.
- Nếu tần suất bằng nhau, chọn chuỗi con nhỏ hơn về mặt từ điển.
Độ phức tạp:
- Thời gian: O(n×k)O(n \times k), với nn là độ dài chuỗi và kk là độ dài chuỗi con.
- Bộ nhớ: O(n)O(n).

Ví dụ

console.log(mostFrequentSubstring("ababab", 2)); // "ab" console.log(mostFrequentSubstring("abcabc", 3)); // "abc" console.log(mostFrequentSubstring("aaaa", 2)); // "aa"

Câu hỏi 92: Tìm chuỗi con liên tục có tổng ASCII lớn nhất

Viết hàm nhận vào một chuỗi và trả về chuỗi con liên tục có tổng giá trị ASCII lớn nhất.

Giải pháp: Kadane’s Algorithm

function maxSubstringASCII(s) { let maxSum = -Infinity, currentSum = 0; let start = 0, tempStart = 0, end = 0; for (let i = 0; i < s.length; i++) { currentSum += s.charCodeAt(i); if (currentSum > maxSum) { maxSum = currentSum; start = tempStart; end = i; } if (currentSum < 0) { currentSum = 0; tempStart = i + 1; } } return s.substring(start, end + 1); }

Phân tích chi tiết

Duyệt qua chuỗi:
- Tính tổng giá trị ASCII của chuỗi con liên tục.
Cập nhật chuỗi con tối ưu:
- Nếu tổng hiện tại lớn hơn tổng lớn nhất, cập nhật chỉ số bắt đầu và kết thúc của chuỗi con.
Khởi động lại tổng:
- Nếu tổng hiện tại âm, bắt đầu lại từ vị trí kế tiếp.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(maxSubstringASCII("abcde")); // "abcde" (tổng ASCII: 495) console.log(maxSubstringASCII("abcxyz")); // "xyz" (tổng ASCII: 378) console.log(maxSubstringASCII("a")); // "a"

Câu hỏi 93: Tìm độ dài chuỗi con liên tục duy nhất dài nhất (Longest Substring Without Repeating Characters)

Viết hàm nhận vào một chuỗi và trả về độ dài của chuỗi con liên tục mà không chứa ký tự lặp lại.

Giải pháp: Sliding Window + HashMap

function lengthOfLongestSubstring(s) { const charMap = new Map(); let maxLength = 0, start = 0; for (let end = 0; end < s.length; end++) { if (charMap.has(s[end])) { start = Math.max(start, charMap.get(s[end]) + 1); } charMap.set(s[end], end); maxLength = Math.max(maxLength, end - start + 1); } return maxLength; }

Phân tích chi tiết

HashMap:
- Lưu trữ vị trí xuất hiện cuối cùng của mỗi ký tự.
Cửa sổ trượt:
- Khi phát hiện ký tự lặp lại, cập nhật start để loại bỏ ký tự trùng.
Cập nhật độ dài lớn nhất:
- Tính độ dài của cửa sổ hiện tại và cập nhật maxLength.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là số lượng ký tự khác nhau trong chuỗi.

Ví dụ

console.log(lengthOfLongestSubstring("abcabcbb")); // 3 ("abc") console.log(lengthOfLongestSubstring("bbbbb")); // 1 ("b") console.log(lengthOfLongestSubstring("pwwkew")); // 3 ("wke")

Câu hỏi 94: Tìm chuỗi con Palindrome nhiều lần lặp lại nhất

Viết hàm trả về chuỗi con Palindrome có tần suất xuất hiện nhiều nhất trong chuỗi.

Giải pháp

function mostFrequentPalindrome(s) { const freqMap = new Map(); function isPalindrome(str) { let left = 0, right = str.length - 1; while (left < right) { if (str[left] !== str[right]) return false; left++; right--; } return true; } for (let i = 0; i < s.length; i++) { for (let j = i + 1; j <= s.length; j++) { const substring = s.substring(i, j); if (isPalindrome(substring)) { freqMap.set(substring, (freqMap.get(substring) || 0) + 1); } } } let maxFreq = 0; let result = ""; for (let [substring, freq] of freqMap.entries()) { if (freq > maxFreq || (freq === maxFreq && substring.length > result.length)) { maxFreq = freq; result = substring; } } return result; }

Phân tích chi tiết

Kiểm tra Palindrome:
- Sử dụng hai con trỏ để kiểm tra nếu một chuỗi là Palindrome.
Tạo các chuỗi con:
- Duyệt qua tất cả các chuỗi con từ ii đến jj và kiểm tra nếu chúng là Palindrome.
Đếm tần suất:
- Lưu số lần xuất hiện của mỗi Palindrome vào Map.
Tìm chuỗi con tối ưu:
- Trả về chuỗi Palindrome có tần suất xuất hiện lớn nhất. Nếu tần suất bằng nhau, chọn chuỗi dài nhất.
Độ phức tạp:
- Thời gian: O(n3)O(n^3), với nn là độ dài chuỗi (bao gồm cả kiểm tra Palindrome).
- Bộ nhớ: O(k)O(k), với kk là số chuỗi con khác nhau.

Ví dụ

console.log(mostFrequentPalindrome("ababa")); // "aba" console.log(mostFrequentPalindrome("racecaracecar")); // "racecar" console.log(mostFrequentPalindrome("abcd")); // "a"

Câu hỏi 95: Tìm chuỗi con với độ dài kk chứa nhiều ký tự duy nhất nhất

Viết hàm nhận vào một chuỗi và một số kk, trả về chuỗi con có độ dài kk chứa nhiều ký tự duy nhất nhất.

Giải pháp: Sliding Window

function uniqueSubstringWithK(s, k) { const charMap = new Map(); let maxUnique = 0, start = 0, result = ""; for (let end = 0; end < s.length; end++) { charMap.set(s[end], (charMap.get(s[end]) || 0) + 1); if (end - start + 1 > k) { const leftChar = s[start]; charMap.set(leftChar, charMap.get(leftChar) - 1); if (charMap.get(leftChar) === 0) { charMap.delete(leftChar); } start++; } if (end - start + 1 === k) { if (charMap.size > maxUnique) { maxUnique = charMap.size; result = s.substring(start, end + 1); } } } return result; }

Phân tích chi tiết

Cửa sổ trượt:
- Duyệt qua chuỗi với một cửa sổ có kích thước kk.
Theo dõi tần suất ký tự:
- Sử dụng Map để lưu tần suất ký tự trong cửa sổ.
Tìm chuỗi con tối ưu:
- Nếu cửa sổ có kk ký tự và số lượng ký tự duy nhất lớn hơn, cập nhật chuỗi con tối ưu.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(k)O(k), với kk là kích thước cửa sổ.

Ví dụ

console.log(uniqueSubstringWithK("abcabcbb", 3)); // "abc" console.log(uniqueSubstringWithK("aaaaa", 2)); // "aa" console.log(uniqueSubstringWithK("abcdefg", 4)); // "abcd"

Câu hỏi 96: Xác định chuỗi có phải là chuỗi con sắp xếp của chuỗi khác

Viết hàm kiểm tra xem chuỗi s1s1 có phải là một chuỗi con sắp xếp của chuỗi s2s2 không.

Giải pháp: Sliding Window + HashMap

function checkInclusion(s1, s2) { const charCount = new Map(); for (let char of s1) { charCount.set(char, (charCount.get(char) || 0) + 1); } let start = 0, matched = 0; for (let end = 0; end < s2.length; end++) { const char = s2[end]; if (charCount.has(char)) { charCount.set(char, charCount.get(char) - 1); if (charCount.get(char) === 0) matched++; } if (matched === charCount.size) return true; if (end >= s1.length - 1) { const leftChar = s2[start]; if (charCount.has(leftChar)) { if (charCount.get(leftChar) === 0) matched--; charCount.set(leftChar, charCount.get(leftChar) + 1); } start++; } } return false; }

Phân tích chi tiết

Tạo bản đồ tần suất:
- Lưu tần suất ký tự của s1s1 vào Map.
Cửa sổ trượt:
- Duyệt qua s2s2 với một cửa sổ có kích thước bằng s1s1.
Kiểm tra hoán vị:
- Nếu tất cả ký tự trong cửa sổ khớp với s1s1, trả về true.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài của s2s2.
- Bộ nhớ: O(k)O(k), với kk là số ký tự trong s1s1.

Ví dụ

console.log(checkInclusion("ab", "eidbaooo")); // true ("ba" là hoán vị của "ab") console.log(checkInclusion("ab", "eidboaoo")); // false

Câu hỏi 97: Tìm chuỗi con ngắn nhất chứa tất cả các ký tự của một chuỗi

Viết hàm nhận vào hai chuỗi ss và tt, trả về chuỗi con ngắn nhất trong ss chứa tất cả các ký tự của tt. Nếu không tồn tại, trả về chuỗi rỗng.

Giải pháp: Sliding Window + HashMap

function minWindow(s, t) { const tMap = new Map(); for (let char of t) { tMap.set(char, (tMap.get(char) || 0) + 1); } let start = 0, matched = 0, minLen = Infinity, subStart = 0; const sMap = new Map(); for (let end = 0; end < s.length; end++) { const endChar = s[end]; if (tMap.has(endChar)) { sMap.set(endChar, (sMap.get(endChar) || 0) + 1); if (sMap.get(endChar) === tMap.get(endChar)) { matched++; } } while (matched === tMap.size) { if (end - start + 1 < minLen) { minLen = end - start + 1; subStart = start; } const startChar = s[start]; if (tMap.has(startChar)) { if (sMap.get(startChar) === tMap.get(startChar)) { matched--; } sMap.set(startChar, sMap.get(startChar) - 1); } start++; } } return minLen === Infinity ? "" : s.substring(subStart, subStart + minLen); }

Phân tích chi tiết

Tạo bản đồ tần suất:
- Lưu tần suất của các ký tự trong tt vào Map.
Cửa sổ trượt:
- Sử dụng một cửa sổ để theo dõi các ký tự trong ss.
Thu hẹp cửa sổ:
- Khi cửa sổ chứa đủ tất cả các ký tự của tt, cố gắng thu hẹp để tìm chuỗi ngắn nhất.
Độ phức tạp:
- Thời gian: O(n+m)O(n + m), với nn là độ dài ss và mm là độ dài tt.
- Bộ nhớ: O(k)O(k), với kk là số ký tự khác nhau trong tt.

Ví dụ

console.log(minWindow("ADOBECODEBANC", "ABC")); // "BANC" console.log(minWindow("a", "a")); // "a" console.log(minWindow("a", "aa")); // ""

Câu hỏi 98: Tìm chuỗi con lớn nhất là chuỗi con chung của hai chuỗi

Viết hàm nhận vào hai chuỗi s1s1 và s2s2, trả về chuỗi con lớn nhất là chuỗi con chung của cả hai.

Giải pháp: Dynamic Programming

function longestCommonSubstring(s1, s2) { const m = s1.length, n = s2.length; const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0)); let maxLength = 0; let endIndex = 0; for (let i = 1; i <= m; i++) { for (let j = 1; j <= n; j++) { if (s1[i - 1] === s2[j - 1]) { dp[i][j] = dp[i - 1][j - 1] + 1; if (dp[i][j] > maxLength) { maxLength = dp[i][j]; endIndex = i - 1; } } } } return s1.substring(endIndex - maxLength + 1, endIndex + 1); }

Phân tích chi tiết

Mảng DP:
- dp[i][j]: Độ dài chuỗi con chung kết thúc tại s1[i−1]s1[i-1] và s2[j−1]s2[j-1].
Cập nhật DP:
- Nếu s1[i−1]===s2[j−1]s1[i-1] === s2[j-1], tăng giá trị DP từ phần tử trước.
Theo dõi chuỗi con dài nhất:
- Lưu độ dài lớn nhất và vị trí kết thúc của chuỗi con.
Độ phức tạp:
- Thời gian: O(m×n)O(m \times n), với m,nm, n là độ dài của s1s1 và s2s2.
- Bộ nhớ: O(m×n)O(m \times n).

Ví dụ

console.log(longestCommonSubstring("abcdef", "zcdemf")); // "cde" console.log(longestCommonSubstring("abc", "def")); // "" console.log(longestCommonSubstring("xyzabcd", "abcdxyz")); // "abcd"

Câu hỏi 99: Tìm chuỗi con có tổng ASCII lớn nhất

Viết hàm nhận vào một chuỗi và trả về chuỗi con liên tục có tổng giá trị ASCII lớn nhất.

Giải pháp: Kadane’s Algorithm

function maxASCIISubstring(s) { let maxSum = -Infinity, currentSum = 0; let start = 0, tempStart = 0, end = 0; for (let i = 0; i < s.length; i++) { currentSum += s.charCodeAt(i); if (currentSum > maxSum) { maxSum = currentSum; start = tempStart; end = i; } if (currentSum < 0) { currentSum = 0; tempStart = i + 1; } } return s.substring(start, end + 1); }

Phân tích chi tiết

Duyệt qua chuỗi:
- Tính tổng giá trị ASCII của chuỗi con liên tục.
Cập nhật chuỗi con tối ưu:
- Nếu tổng hiện tại lớn hơn tổng lớn nhất, cập nhật chỉ số bắt đầu và kết thúc của chuỗi con.
Khởi động lại tổng:
- Nếu tổng hiện tại âm, bắt đầu lại từ vị trí kế tiếp.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(1)O(1).

Ví dụ

console.log(maxASCIISubstring("abcde")); // "abcde" (tổng ASCII: 495) console.log(maxASCIISubstring("abcxyz")); // "abcxyz" (tổng ASCII: 726) console.log(maxASCIISubstring("a")); // "a"

Câu hỏi 100: Xoay chuỗi để kiểm tra tính đồng dạng

Viết hàm kiểm tra xem chuỗi s2s2 có thể là chuỗi s1s1 xoay một số lần không.

Giải pháp

function isRotation(s1, s2) { if (s1.length !== s2.length) return false; return (s1 + s1).includes(s2); }

Phân tích chi tiết

Kiểm tra độ dài:
- Nếu s1s1 và s2s2 không cùng độ dài, trả về false.
Tạo chuỗi mở rộng:
- Nối s1s1 với chính nó để kiểm tra mọi trường hợp xoay.
Kiểm tra sự tồn tại:
- Sử dụng includes để kiểm tra xem s2s2 có nằm trong chuỗi mở rộng không.
Độ phức tạp:
- Thời gian: O(n)O(n), với nn là độ dài chuỗi.
- Bộ nhớ: O(n)O(n), cho chuỗi mở rộng.

Ví dụ

console.log(isRotation("waterbottle", "erbottlewat")); // true console.log(isRotation("abc", "cab")); // true console.log(isRotation("abc", "bac")); // false

LeetCode Bài 11. Container With Most Water Thùng chứa nhiều nước nhất

23 min
1 năm ago
1

Mô tả vấn đề Bạn được trình bày với một mảng số nguyên gọi là height biểu thị chiều cao của các đường thẳng đứng được đặt tại các vị trí được lập chỉ mục từ 1 đến n (được lập chỉ mục 0 […]

Tagged #ctdl&gt, #seriesLeetCode

Mô tả vấn đề

Bạn được trình bày với một mảng số nguyên gọi là height biểu thị chiều cao của các đường thẳng đứng được đặt tại các vị trí được lập chỉ mục từ 1 đến n (được lập chỉ mục 0 trong mảng). Hãy tưởng tượng rằng mỗi height[i] được liên kết với một đường trên biểu đồ kéo dài lên từ trục x đến một điểm (i, height[i]). Nhiệm vụ của bạn là tìm hai đường cùng với trục x bao quanh diện tích lớn nhất có thể, biểu thị lượng nước tối đa có thể bị giữ lại giữa chúng mà không để nước tràn ra các cạnh của đường (thùng chứa không được nghiêng) . Mục đích là tính toán và trả về diện tích nước bị bẫy tối đa này.

Trực giác

Để giải quyết vấn đề này một cách hiệu quả, chúng tôi sử dụng kỹ thuật hai con trỏ. Chúng tôi đặt một con trỏ ở đầu mảng và con trỏ kia ở cuối mảng và những con trỏ này biểu thị các ranh giới vùng chứa tiềm năng. Ở mỗi bước, lượng nước bị bẫy được xác định bằng khoảng cách giữa các con trỏ (là chiều rộng của thùng chứa) và chiều cao của đường nhỏ hơn (vì mực nước không thể cao hơn đường nhỏ hơn của hai ranh giới). Đây là khu vực có khả năng đạt mức tối đa.

Để tối đa hóa diện tích, sau khi tính toán lượng nước bị mắc kẹt ở mỗi bước và so sánh nó với mức tối đa mà chúng ta đã thấy cho đến nay, chúng ta di chuyển con trỏ ở đường ngắn hơn về phía con trỏ kia. Điều này là do việc giữ con trỏ ở đường cao hơn cố định và di chuyển con trỏ ngắn hơn có thể khiến chúng ta tìm thấy đường cao hơn và do đó có diện tích lớn hơn. Không có lợi ích gì khi di chuyển con trỏ cao hơn trước vì nó sẽ chỉ làm giảm độ rộng tiềm năng mà không đảm bảo đường cao hơn sẽ tăng chiều cao. Chúng tôi lặp lại quá trình tính toán này, cập nhật diện tích nước tối đa và di chuyển con trỏ dòng ngắn hơn về phía con trỏ khác cho đến khi Hai con trỏ gặp nhau, tại thời điểm đó chúng tôi đã xem xét mọi thùng chứa có thể và lượng nước dự trữ tối đa đã được tìm thấy.

Bằng cách tiếp cận vấn đề này với mỗi bước được tối ưu hóa để duy trì hoặc cải thiện diện tích tối đa tiềm năng, chúng tôi có thể đi đến giải pháp một cách hiệu quả, dẫn đến thuật toán chạy theo thời gian tuyến tính so với số lượng dòng.

Cách tiếp cận giải pháp

Việc thực hiện giải pháp tuân theo cách tiếp cận hai con trỏ. Dưới đây là hướng dẫn từng bước về cách hoạt động của giải pháp:

Khởi tạo Hai con trỏ: i được đặt ở đầu mảng (0), Và j được đặt ở cuối mảng (len(height) - 1).
Khởi tạo một biến ans để theo dõi diện tích tối đa được phát hiện cho đến nay. Ban đầu, ans được đặt thành 0.
Nhập một vòng lặp tiếp tục cho đến khi i ít hơn j. Vòng lặp này cho phép chúng ta khám phá tất cả các kết hợp có thể có của các dòng từ i ĐẾN j để tối đa hóa diện tích.
Bên trong vòng lặp, tính diện tích bị kẹt giữa các dòng tại con trỏ i Và j sử dụng công thức: area = (j - i) * min(height[i], height[j]). Điều này tính toán chiều rộng của container (j - i) và nhân nó với chiều cao, giá trị nhỏ hơn trong hai chiều cao tại height[i] Và height[j].
Cập nhật ans với giá trị lớn nhất hiện tại và diện tích tính toán. ans = max(ans, area) đảm bảo rằng ans giữ giá trị cao nhất của diện tích nước bị bẫy ở mỗi bước.
Xác định con trỏ nào sẽ di chuyển. Chúng ta cần di chuyển con trỏ tương ứng với dòng ngắn hơn vì đây là hệ số giới hạn chiều cao của phần nước bị mắc kẹt. Chúng tôi làm điều này bằng cách sử dụng một câu lệnh có điều kiện:
- Nếu như height[i] < height[j], sau đó chúng tôi tăng lên i (i += 1) để có khả năng tìm thấy một dòng cao hơn.
- Ngược lại thì giảm j (j -= 1) vì lý do tương tự từ đầu bên kia.
Tiếp tục lặp cho đến khi các con trỏ gặp nhau. Tại thời điểm này, ans sẽ có diện tích tối đa có thể bị mắc kẹt giữa hai dòng bất kỳ.

Giải pháp này sử dụng một cách tiếp cận này, và tính hiệu quả của nó bắt nguồn từ thực tế là ở mỗi giai đoạn, bước đi được thực hiện là bước đi tốt nhất có thể để tăng hoặc ít nhất là duy trì tiềm năng của diện tích tối đa. Bằng cách điều chỉnh tăng dần chiều rộng và chiều cao của vùng chứa đang xem xét, nó sẽ thu hẹp một cách hiệu quả để đạt được giải pháp tối ưu.

Thuật toán có độ phức tạp theo thời gian tuyến tính, O(n), vì mỗi phần tử được truy cập nhiều nhất một lần và có một lượng công việc không đổi được thực hiện trong vòng lặp.

Hướng dẫn ví dụ

Hãy minh họa cách tiếp cận giải pháp bằng một ví dụ nhỏ.

Xét mảng số nguyên height = [1, 8, 6, 2, 5, 4, 8, 3, 7].

Chúng tôi bắt đầu với hai con trỏ: i lúc bắt đầu (0), đại diện cho dòng đầu tiên, và j ở cuối (8), đại diện cho dòng cuối cùng. Như vậy, i chỉ vào height[0] đó là 1, Và j chỉ vào height[8] đó là 7.
Chúng tôi thiết lập ans = 0, vì chúng tôi chưa tính diện tích nào.
Bây giờ chúng ta bắt đầu vòng lặp của mình ở đâu i < j. Từ 0 < 8, chúng tôi bước vào vòng lặp.
Chúng tôi tính diện tích giữa các dòng tại con trỏ i Và j. Chiều rộng là j - i đó là 8 - 0 = 8, và chiều cao là giá trị nhỏ hơn trong hai độ cao tại height[i] Và height[j], Vì thế min(1, 7) = 1. Như vậy diện tích là 8 * 1 = 8.
Chúng tôi cập nhật ans là giá trị lớn nhất của giá trị hiện tại và diện tích tính toán. Vì thế, ans = max(0, 8) = 8.
Từ height[i] ít hơn height[j], chúng tôi di chuyển i con trỏ sang bên phải để có thể tìm thấy dòng cao hơn. Hiện nay i trở thành 1.
Hai con trỏ của chúng tôi hiện đang ở i = 1 Và j = 8. Chúng ta sẽ tiếp tục quá trình này cho đến khi i Và j gặp.
Lặp lại các bước 4-6:
- Vùng mới tại con trỏ i = 1 Và j = 8: area = (8 - 1) * min(8, 7) = 7 * 7 = 49.
- Cập nhật ans được max(8, 49) = 49.
- Từ height[1] lớn hơn height[8], chúng tôi di chuyển j bên trái (bây giờ j là 7).
Tiếp tục lặp lại:
- Vùng mới tại con trỏ i = 1 Và j = 7: area = (7 - 1) * min(8, 3) = 6 * 3 = 18.
- ans còn lại 49 Từ 49 > 18.
- height[1] lớn hơn height[7], vì vậy chúng tôi di chuyển j bên trái (bây giờ j là 6).
Quá trình tiếp tục theo cách này, luôn di chuyển con trỏ ở độ cao ngắn hơn cho đến khi i Và j đều bình đẳng.

Vào cuối những lần lặp lại này, ans giữ diện tích tối đa có thể bị mắc kẹt, trong ví dụ này là 49. Đây là lượng nước lớn nhất có thể bị giữ lại giữa hai dòng mà không bị đổ.

C++

#include <vector> 2#include <algorithm> // Include algorithm for std::min and std::max 3 4class Solution { 5public: 6 int maxArea(vector<int>& heights) { 7 int left = 0; // Starting from the leftmost index 8 int right = heights.size() - 1; // Starting from the rightmost index 9 int maxArea = 0; // Initialize the maximum area to 0 10 11 // Continue looping until the left and right pointers meet 12 while (left < right) { 13 // Calculate the current area with the minimum of the two heights 14 int currentArea = std::min(heights[left], heights[right]) * (right - left); 15 // Update the maximum area if the current area is larger 16 maxArea = std::max(maxArea, currentArea); 17 18 // Move the pointers inward. If left height is less than right height 19 // then we move the left pointer to right hoping to find a greater height 20 if (heights[left] < heights[right]) { 21 ++left; 22 } else { // Otherwise, move the right pointer to the left 23 --right; 24 } 25 } 26 27 return maxArea; // Return the maximum area found 28 } 29};

Độ phức tạp về thời gian và không gian

Mã Python đã cho triển khai kỹ thuật hai con trỏ để tìm diện tích nước tối đa có thể chứa giữa hai dòng, với một mảng chiều cao của dòng.

Độ phức tạp thời gian

Hàm khởi tạo hai con trỏ ở đầu và cuối mảng tương ứng và lặp vào bên trong cho đến khi chúng gặp nhau, thực hiện một số thao tác không đổi cho mỗi cặp chỉ mục. Vì các con trỏ bao phủ mỗi phần tử nhiều nhất một lần, phép lặp tuyến tính tương ứng với số phần tử n trong height Mảng.

Do đó, độ phức tạp về thời gian là O(n).

Độ phức tạp của không gian

Mã sử dụng một số biến số nguyên cố định (i, j, ans, Và t) và không phân bổ bất kỳ bộ nhớ bổ sung nào có tỷ lệ theo kích thước của mảng đầu vào.

Do đó, độ phức tạp của không gian là O(1).

Tổng Kết

Mô tả bài toán: Cho một mảng height[] đại diện cho chiều cao của các cột dọc theo trục hoành, bài toán yêu cầu tìm diện tích của vùng chứa nước lớn nhất mà hai cột có thể tạo ra. Diện tích được tính bằng công thức:

Trong đó, width là khoảng cách giữa hai chỉ số i và j, còn min(height[i], height[j]) là chiều cao của vùng chứa nước (vì nước không thể vượt qua chiều cao thấp hơn giữa hai cột).

Ví dụ:

Input: height = [1,8,6,2,5,4,8,3,7] Output: 49 Giải thích: Vùng chứa nước lớn nhất được tạo ra giữa chỉ số 1 và chỉ số 8, diện tích là (8 - 1) * min(8, 7) = 7 * 7 = 49.
Input: height = [1,1] Output: 1 Giải thích: Vùng chứa nước chỉ có thể là diện tích giữa hai cột, diện tích là 1 * 1 = 1.

Phân tích giải pháp:

Giải pháp sử dụng kỹ thuật hai con trỏ (two-pointer technique) để tối ưu hóa việc tìm diện tích lớn nhất.

Các bước thực hiện:

Khởi tạo hai con trỏ:
- Một con trỏ ở đầu mảng (left = 0).
- Một con trỏ ở cuối mảng (right = height.length - 1).
Tính diện tích:
- Tính diện tích của vùng chứa nước giữa hai con trỏ: Area=(right−left)×min⁡(height[left],height[right])\text{Area} = (\text{right} – \text{left}) \times \min(\text{height[left]}, \text{height[right]})
- Cập nhật diện tích lớn nhất nếu cần.
Di chuyển con trỏ:
- Nếu height[left] nhỏ hơn height[right], ta di chuyển con trỏ left sang phải để tăng chiều cao (giảm khả năng bị giới hạn bởi cột thấp bên trái).
- Nếu height[left] lớn hơn hoặc bằng height[right], ta di chuyển con trỏ right sang trái để tìm một cột có chiều cao cao hơn.
Dừng lại khi con trỏ gặp nhau.

Mã giải thuật trong JavaScript:

var maxArea = function(height) { let left = 0; // Con trỏ trái let right = height.length - 1; // Con trỏ phải let maxArea = 0; // Diện tích lớn nhất while (left < right) { // Tính diện tích const currentArea = (right - left) * Math.min(height[left], height[right]); // Cập nhật diện tích lớn nhất maxArea = Math.max(maxArea, currentArea); // Di chuyển con trỏ if (height[left] < height[right]) { left++; // Di chuyển con trỏ trái sang phải để tăng chiều cao } else { right--; // Di chuyển con trỏ phải sang trái để tăng chiều cao } } return maxArea; }; // Test ví dụ const height1 = [1, 8, 6, 2, 5, 4, 8, 3, 7]; console.log(maxArea(height1)); // Output: 49 const height2 = [1, 1]; console.log(maxArea(height2)); // Output: 1

Giải thích chi tiết:

Khởi tạo con trỏ:
- left = 0: Bắt đầu từ chỉ số đầu tiên của mảng.
- right = height.length - 1: Bắt đầu từ chỉ số cuối cùng của mảng.
Tính diện tích hiện tại: const currentArea = (right - left) * Math.min(height[left], height[right]);
- Diện tích giữa các cột được tính bằng công thức: chiều rộng là khoảng cách giữa hai chỉ số left và right, chiều cao là giá trị nhỏ hơn giữa height[left] và height[right].
Cập nhật diện tích lớn nhất: maxArea = Math.max(maxArea, currentArea);
- Cập nhật diện tích lớn nhất mỗi khi tìm được diện tích lớn hơn.
Di chuyển con trỏ:
- Nếu chiều cao của cột tại left nhỏ hơn chiều cao tại right, di chuyển con trỏ trái sang phải (mục tiêu là tăng chiều cao).
- Nếu chiều cao tại right nhỏ hơn hoặc bằng chiều cao tại left, di chuyển con trỏ phải sang trái.
Điều kiện dừng:
- Khi left gặp right, thuật toán dừng lại, vì lúc này không còn cặp cột nào để tính diện tích.

Độ phức tạp:

Thời gian: O(n), vì thuật toán chỉ duyệt qua mảng một lần với hai con trỏ di chuyển từ hai đầu về giữa.
Không gian: O(1), vì chỉ sử dụng một vài biến phụ để lưu trữ các con trỏ và diện tích lớn nhất.

Các tình huống đặc biệt:

Nếu mảng chỉ có một phần tử hoặc hai phần tử, không thể tạo ra một vùng chứa nước, trả về diện tích là 0.

LeetCode Bài 15. 3Sum (3 số tổng bằng 0 trong mảng)

19 min
1 năm ago

Mô tả vấn đề Bài toán này yêu cầu chúng ta tìm tất cả các bộ ba duy nhất trong một mảng có thể kết hợp để cho tổng bằng 0. Bộ ba trong ngữ cảnh này được định nghĩa là một […]

Tagged #ctdl&gt, #seriesLeetCode

Mô tả vấn đề

Bài toán này yêu cầu chúng ta tìm tất cả các bộ ba duy nhất trong một mảng có thể kết hợp để cho tổng bằng 0. Bộ ba trong ngữ cảnh này được định nghĩa là một bộ ba số [nums[i], nums[j], nums[k]] trong đó mỗi số đến từ một vị trí khác nhau trong mảng, được biểu thị bằng i, j, Và k. Điều quan trọng là chúng ta cần đảm bảo rằng:

Các chỉ số i, j, Và k tất cả đều khác nhau.
Tổng các số tại các chỉ số đó bằng 0 (nums[i] + nums[j] + nums[k] == 0).
Không có bộ ba nào được lặp lại trong kết quả.

Mục tiêu của chúng tôi là xác định tất cả các kết hợp như vậy, đảm bảo rằng mỗi kết hợp của ba số là duy nhất trong tập kết quả. Vấn đề này là một ví dụ kinh điển về một thách thức liên quan đến thao tác mảng và xác định các mẫu cụ thể trong một tập hợp số..

Trực giác

Để đi đến giải pháp cho vấn đề này, chúng ta sẽ thực hiện theo cách tiếp cận hai bước. Đầu tiên chúng ta sắp xếp mảng theo thứ tự không giảm. các sắp xếp giúp chúng ta theo hai cách: nó giúp chúng ta dễ dàng tránh thêm các bộ ba trùng lặp và cho phép chúng ta sử dụng kỹ thuật hai con trỏ một cách hiệu quả.

Sau đó sắp xếp, mảng được xử lý bằng một vòng lặp để thử từng số một cách hiệu quả như một ứng cử viên tiềm năng cho số đầu tiên của bộ ba. Ứng viên này được gọi là nums[i]. Bắt đầu từ i = 0, chúng tôi sẽ kiểm tra xem nums[i], khi được thêm vào bất kỳ hai số nào khác trong mảng ở bên phải của nó, tổng bằng 0.

Để đẩy nhanh quá trình và tránh việc kiểm tra các kết hợp được đảm bảo là không thành công hoặc dư thừa, chúng tôi sử dụng những thông tin chi tiết sau:

Nếu số hiện tại nums[i] lớn hơn 0, vì mảng đã được sắp xếp nên mọi kết hợp liên quan đến số này và các số tiếp theo sẽ lớn hơn 0. Vì không có tổng nào có tổng dương có thể bằng 0 nên chúng ta có thể thoát khỏi vòng lặp sớm.
Nếu như nums[i] giống với số trước đó nums[i-1], chúng tôi bỏ qua giá trị hiện tại để ngăn việc xử lý cùng một kịch bản bộ ba, điều này sẽ dẫn đến trùng lặp.

Một khi hợp lệ nums[i] được chọn, chúng tôi sử dụng vòng lặp while bằng cách sử dụng Hai con trỏ, j Và k, bắt đầu sau i (vì j) và ở cuối mảng (đối với k). Chúng tôi tính tổng của nums[i], nums[j], Và nums[k]. Nếu tổng là:

Nhỏ hơn 0, chúng tôi di chuyển j ở bên phải để tăng tổng (nums[j] sẽ lớn hơn).
Lớn hơn 0, chúng ta dịch chuyển k sang trái để giảm tổng (vì nums[k] sẽ nhỏ hơn).
Chính xác là không, chúng tôi đã tìm thấy một bộ ba hợp lệ và thêm nó vào bộ giải pháp của chúng tôi. Sau đó chúng tôi di chuyển cả hai j Và k con trỏ, bỏ qua bất kỳ bản sao nào để tìm kiếm các bộ ba bổ sung bắt đầu bằng nums[i].

Chúng tôi lặp lại quá trình này cho mọi chỉ mục i cho đến phần tử cuối cùng thứ hai và thu thập tất cả các bộ ba duy nhất mang lại cho chúng ta tổng bằng 0.

Cách tiếp cận giải pháp

Mã thực hiện chiến lược sắp xếp và hai con trỏ để tìm tất cả các bộ ba duy nhất có tổng bằng 0 trong nums mảng. Dưới đây là các bước chi tiết được thực hiện trong quá trình triển khai, tuân theo Phương pháp tiếp cận giải pháp tham khảo:

Sắp xếp mảng: Đầu tiên, chúng ta sắp xếp mảng bằng cách sử dụng nums.sort(). sắp xếp có lợi vì nó sắp xếp các phần tử, cho phép chúng ta sử dụng phương pháp hai con trỏ một cách hiệu quả và giúp tránh trùng lặp dễ dàng hơn vì các giá trị trùng lặp sẽ nằm liền kề trong một mảng được sắp xếp.
Lặp lại các phần tử đầu tiên có thể có của bộ ba: Chúng ta xét từng số trong nums mảng (cho đến phần tử thứ ba đến phần tử cuối cùng) là phần tử đầu tiên tiềm năng của bộ ba của chúng tôi. Điều này đạt được bằng vòng lặp for: for i in range(n - 2).
Nghỉ sớm và tiếp tục: Bên trong vòng lặp này, chúng ta có một số điều kiện giúp chúng ta loại bỏ những bước kiểm tra không cần thiết:
- Nếu số hiện tại nums[i] lớn hơn 0 thì chúng ta có thể thoát khỏi vòng lặp. Điều này là do bất kỳ bộ ba nào có số bắt đầu dương sẽ có tổng lớn hơn 0.
- Nếu số hiện tại giống với số trước đó (và i không phải là 0), chúng tôi sử dụng continue chuyển sang lần lặp tiếp theo để tránh kiểm tra trùng lặp.
Kỹ thuật hai con trỏ: Đối với mỗi i, chúng tôi sử dụng Hai con trỏ, j Và k, khởi tạo để i + 1 Và n - 1 (cuối mảng) tương ứng. Sau đó chúng ta bước vào một vòng lặp while, vòng lặp này sẽ tiếp tục cho đến khi j ít hơn k.
Tìm bộ ba: Trong vòng lặp while, chúng ta tính tổng x của nums[i], nums[j], Và nums[k] và so sánh nó với số không:
- Nếu như x nhỏ hơn 0, chúng ta tăng j vì chúng ta cần một số lớn hơn để tăng tổng.
- Nếu như x lớn hơn 0 thì chúng ta giảm k vì chúng ta cần một số nhỏ hơn để giảm tổng.
- Nếu như x bằng 0, chúng tôi đã tìm thấy một bộ ba hợp lệ và chúng tôi thêm [nums[i], nums[j], nums[k]] ĐẾN ans. Sau khi lưu trữ bộ ba, chúng tôi di chuyển cả hai j Và k vượt qua bất kỳ bản sao nào để đảm bảo chúng tôi không tìm thấy bản sao trong các lần lặp tiếp theo.
Trả kết quả: Khi tất cả các số đã được xem xét cho phần tử đầu tiên của bộ ba và tất cả đều hợp lệ j, k cặp đã được đánh giá, chúng tôi quay trở lại ans. Danh sách này chứa tất cả các bộ ba duy nhất có tổng bằng 0.

Giải pháp này có độ phức tạp về thời gian là O(n^2) và độ phức tạp về không gian là O(log n) do thao tác sắp xếp, giả sử rằng sort() phương thức được sử dụng chiếm không gian O(log n) cho ngăn xếp bên trong trong một sắp xếp thuật toán như quicksort hoặc mergesort. Tuy nhiên, nếu việc sắp xếp không chiếm thêm không gian thì độ phức tạp về không gian sẽ chỉ là O(1), đó là không gian được lấy bởi mảng đầu ra và các con trỏ được sử dụng.

Hướng dẫn ví dụ

Hãy cùng tìm hiểu cách tiếp cận giải pháp bằng một ví dụ nhỏ. Hãy xem xét mảng nums = [-1, 0, 1, 2, -1, -4].

Thực hiện theo các bước trong cách tiếp cận giải pháp:

Sắp xếp mảng: Chúng tôi bắt đầu bằng việc sắp xếp nums, dẫn đến [-4, -1, -1, 0, 1, 2].
Lặp lại các phần tử đầu tiên có thể có của bộ ba: Chúng tôi bắt đầu xem xét mảng để tìm các phần tử đầu tiên tiềm năng của bộ ba. Vòng lặp chạy từ đầu mảng đến n - 3, Ở đâu n là độ dài của mảng nums được sắp xếp.
Nghỉ sớm và tiếp tục: Khi lặp lại, nếu chúng ta tìm thấy một số lớn hơn 0 (nums[i] > 0), chúng ta có thể thoát ra khỏi vòng lặp. Trong ví dụ của chúng tôi, tất cả các số từ chỉ số 0 đến n - 3 sẽ được xem xét vì điều kiện ngắt không trở thành đúng.

Chúng ta cũng bỏ qua phần tử thứ hai, đó là -1, giống như lần đầu tiên, sử dụng continue để tránh trùng lặp.

Kỹ thuật hai con trỏ: Chúng tôi bắt đầu quá trình hai con trỏ với i, j, Và k như sau:
- i = 0: Chúng tôi chọn -4 là phần tử đầu tiên.
- j = i + 1: j bắt đầu lúc -1 (phần tử ngay sau -4).
- k = n - 1: k bắt đầu lúc 2 (phần tử cuối cùng).
Tìm bộ ba: Trong vòng lặp while, chúng ta tìm thấy tổng của nums[i] + nums[j] + nums[k] và điều chỉnh j Và k tương ứng:
- Tổng đầu tiên là -4 + -1 + 2 = -3, đó là ít hơn không. Chúng tôi tăng j để chuyển sang số lớn hơn tiếp theo, đó là một số khác -1.
- Bây giờ, tổng số tiền là -4 + -1 + 2 = -3, vẫn nhỏ hơn không. Chúng tôi tăng j một lần nữa và chuyển đến 0.
- với j TRÊN 0, tổng số tiền là -4 + 0 + 2 = -2, và chúng tôi tiếp tục tăng j di chuyển đến 1.
- Tổng số bây giờ là -4 + 1 + 2 = -1, vẫn nhỏ hơn 0, nên chúng ta di chuyển j một lần nữa, nhưng bây giờ chúng ta đã đi đến cuối và vòng lặp while kết thúc cho việc này i.

Tiếp theo, với i = 1, chúng tôi tìm thấy:

i = 1 (nhưng điều này bị bỏ qua vì nó giống như i = 0).
i = 2, chúng ta có phần tử đầu tiên là -1, j = 3 Và k = 5, vì vậy chúng tôi kiểm tra sự kết hợp -1 + 0 + 2, tổng cộng là 1. Tổng lớn hơn 0 nên giảm k.
Hiện nay, k là 4, Và j là 3, vì vậy chúng tôi kiểm tra -1 + 0 + 1, tổng cộng là 0. Chúng tôi đã tìm thấy một bộ ba hợp lệ [-1, 0, 1].

Mỗi lần chúng tôi tìm thấy một bộ ba, chúng tôi di chuyển cả hai j Và k trong khi chúng trỏ đến cùng một số để tránh trùng lặp. Trong trường hợp này, không có sự trùng lặp nào và chúng tôi đã hoàn thành việc lặp lại này.

Trả kết quả: Sau khi đánh giá tất cả các điểm bắt đầu tiềm năng, giải pháp trả về danh sách các bộ ba duy nhất được tìm thấy. Trong trường hợp này, [[-1, 0, 1]] là bộ ba duy nhất có tổng bằng 0.

Việc thực hiện sẽ trở lại [[−1, 0, 1]] như đầu ra.

Theo quy trình đã phác thảo, chúng ta có thể tìm thấy tất cả các bộ ba duy nhất có thể có trong mảng có thể kết hợp để tạo ra tổng bằng 0.

C++

#include <vector> 2#include <algorithm> 3 4class Solution { 5public: 6 std::vector<std::vector<int>> threeSum(std::vector<int>& nums) { 7 // First, we sort the numbers. 8 std::sort(nums.begin(), nums.end()); 9 10 // This will hold the unique triplets. 11 std::vector<std::vector<int>> result; 12 13 // Calculate the number of elements. 14 int numElements = nums.size(); 15 16 // Start the first pointer `i` from the beginning of the array 17 // and iterate over the numbers as long as there are at least 18 // two more elements after it and the current element is not positive. 19 for (int i = 0; i < numElements - 2 && nums[i] <= 0; ++i) { 20 // If this is not the first element and it's the same as the one before, 21 // we skip it to avoid duplicate solutions. 22 if (i > 0 && nums[i] == nums[i - 1]) { 23 continue; 24 } 25 26 // Pointers `j` and `k` initialize to elements after `i` and the last element respectively. 27 int j = i + 1, k = numElements - 1; 28 29 // While `j` is before `k` we look for valid triplets. 30 while (j < k) { 31 int sum = nums[i] + nums[j] + nums[k]; 32 33 // If current sum is less than zero, increment `j` to get closer to zero. 34 if (sum < 0) { 35 ++j; 36 } 37 // If current sum is greater than zero, decrement `k` to get closer to zero. 38 else if (sum > 0) { 39 --k; 40 } 41 // If the sum is zero, we found a triplet. 42 else { 43 // Add the current triplet to the result. 44 result.push_back({nums[i], nums[j], nums[k]}); 45 46 // Increment `j` and decrement `k` to find the next unique triplet. 47 ++j; 48 --k; 49 50 // Skip duplicate values from `j` and `k` for the unique triplet. 51 while (j < k && nums[j] == nums[j - 1]) { 52 ++j; 53 } 54 while (j < k && nums[k] == nums[k + 1]) { 55 --k; 56 } 57 } 58 } 59 } 60 61 // Return the set of triplets found. 62 return result; 63 } 64};

Độ phức tạp về thời gian và không gian

Độ phức tạp thời gian

Độ phức tạp về thời gian của mã đã cho là O(n^2). Điều này là do có một vòng lặp lồng nhau trong đó vòng lặp bên ngoài chạy cho n lần (giảm đi 2 để tránh các lần lặp cuối cùng không cần thiết do bộ ba) và trong vòng lặp này, có hai con trỏ đang di chuyển độc lập về phía nhau, tổng cộng sẽ dẫn đến n lặp lại trong trường hợp xấu nhất. Không có vòng lặp lồng nhau bên trong vòng lặp while, do đó các phép toán bên trong có thời gian không đổi bất chấp các điều kiện while cũng vậy. O(n). Nhân chúng với nhau sẽ cho chúng ta n * n = n^2, Kể từ đây O(n^2).

Độ phức tạp của không gian

Độ phức tạp về không gian của mã là O(log n) nếu chúng ta không xem xét đến không gian đầu ra, điều đó sẽ O(n). Độ phức tạp về không gian phát sinh do không gian được sử dụng bởi thuật toán sắp xếp, thường là O(log n) cho các thuật toán thường được sử dụng như QuickSort hoặc MergeSort trong nhiều thư viện lập trình tiêu chuẩn.

Tổng Kết

Mô tả bài toán: Bài toán yêu cầu tìm tất cả các bộ ba phần tử trong mảng sao cho tổng của chúng bằng 0. Cần lưu ý rằng các bộ ba kết quả phải không trùng nhau.

Ví dụ:

Input: nums = [-1, 0, 1, 2, -1, -4] Output: [[-1, -1, 2], [-1, 0, 1]] Giải thích: Các bộ ba có tổng bằng 0 là [-1, -1, 2] và [-1, 0, 1].
Input: nums = [0, 1, 1] Output: [] Giải thích: Không có bộ ba nào có tổng bằng 0.

Phân tích giải pháp:

Để giải bài toán này, ta sẽ sử dụng phương pháp hai con trỏ (two-pointer technique) kết hợp với việc sắp xếp mảng trước.

Các bước thực hiện:

Sắp xếp mảng: Đầu tiên, ta sẽ sắp xếp mảng để có thể sử dụng kỹ thuật hai con trỏ.
Duyệt mảng: Ta sẽ duyệt từng phần tử nums[i] (cố định phần tử đầu tiên của bộ ba).
Tìm các bộ ba: Dùng hai con trỏ left và right để tìm cặp phần tử còn lại sao cho tổng của ba phần tử là 0.
- Nếu tổng của ba phần tử là 0, ta thêm bộ ba này vào kết quả.
- Nếu tổng nhỏ hơn 0, ta tăng con trỏ trái (left++) để làm tổng lớn hơn.
- Nếu tổng lớn hơn 0, ta giảm con trỏ phải (right--) để làm tổng nhỏ hơn.
Tránh trùng lặp: Sau khi tìm được bộ ba, cần đảm bảo không có bộ ba trùng nhau bằng cách bỏ qua các phần tử giống nhau.

Mã giải thuật trong JavaScript:

var threeSum = function(nums) { nums.sort((a, b) => a - b); // Sắp xếp mảng const result = []; for (let i = 0; i < nums.length; i++) { // Tránh trùng lặp phần tử đầu tiên if (i > 0 && nums[i] === nums[i - 1]) { continue; } let left = i + 1; let right = nums.length - 1; while (left < right) { const sum = nums[i] + nums[left] + nums[right]; if (sum === 0) { result.push([nums[i], nums[left], nums[right]]); // Tránh trùng lặp phần tử thứ hai while (left < right && nums[left] === nums[left + 1]) { left++; } // Tránh trùng lặp phần tử thứ ba while (left < right && nums[right] === nums[right - 1]) { right--; } // Di chuyển con trỏ left++; right--; } else if (sum < 0) { left++; // Tổng quá nhỏ, tăng left để tăng tổng } else { right--; // Tổng quá lớn, giảm right để giảm tổng } } } return result; }; // Test ví dụ const nums1 = [-1, 0, 1, 2, -1, -4]; console.log(threeSum(nums1)); // Output: [[-1, -1, 2], [-1, 0, 1]] const nums2 = [0, 1, 1]; console.log(threeSum(nums2)); // Output: []

Giải thích chi tiết:

Sắp xếp mảng: nums.sort((a, b) => a - b);
- Sắp xếp mảng nums để dễ dàng áp dụng thuật toán hai con trỏ và tránh trùng lặp.
Duyệt mảng: for (let i = 0; i < nums.length; i++) {
- Duyệt qua từng phần tử của mảng. Mỗi lần duyệt, chúng ta sẽ cố định một phần tử nums[i] làm phần tử đầu tiên của bộ ba.
Tránh trùng lặp: if (i > 0 && nums[i] === nums[i - 1]) { continue; }
- Kiểm tra nếu phần tử hiện tại nums[i] giống phần tử trước đó, ta bỏ qua để tránh tạo bộ ba trùng lặp.
Dùng hai con trỏ: let left = i + 1; let right = nums.length - 1;
- Khởi tạo hai con trỏ left và right để tìm phần tử thứ hai và thứ ba sao cho tổng của ba phần tử bằng 0.
Điều chỉnh con trỏ: while (left < right) { const sum = nums[i] + nums[left] + nums[right];
- Tính tổng của ba phần tử.
- Nếu tổng bằng 0, ta thêm bộ ba này vào kết quả và điều chỉnh con trỏ để tránh trùng lặp.
- Nếu tổng nhỏ hơn 0, ta tăng con trỏ left để tăng tổng.
- Nếu tổng lớn hơn 0, ta giảm con trỏ right để giảm tổng.
Tránh trùng lặp: while (left < right && nums[left] === nums[left + 1]) { left++; } while (left < right && nums[right] === nums[right - 1]) { right--; }
- Sau khi tìm được bộ ba có tổng bằng 0, ta cần di chuyển con trỏ để tránh các phần tử trùng lặp và tìm các bộ ba khác.

Độ phức tạp:

Thời gian: O(n²), vì ngoài việc sắp xếp mảng (O(n log n)), chúng ta phải duyệt qua tất cả các bộ ba khả thi với mỗi phần tử (O(n) cho mỗi phần tử).
Không gian: O(1) nếu không tính không gian cho kết quả, bởi chúng ta chỉ sử dụng một vài biến phụ cho con trỏ và các phép tính.

Các tình huống đặc biệt:

Nếu mảng có ít hơn 3 phần tử, không thể tìm bộ ba, trả về [].
Các bộ ba trả về cần phải đảm bảo không có trùng lặp.

LeetCode Bài 153. Tìm giá trị tối thiểu trong mảng được sắp xếp xoay (Find Minimum in Rotated Sorted Array)

8 min
1 năm ago

Mô tả vấn đề Bài toán trình bày một mảng chứa một dãy số theo thứ tự tăng dần đã được quay từ 1 đến n lần. Xoay có nghĩa là các phần tử được dịch chuyển sang phải một vị trí […]

Tagged #ctdl&gt, #seriesLeetCode

Mô tả vấn đề

Bài toán trình bày một mảng chứa một dãy số theo thứ tự tăng dần đã được quay từ 1 đến n lần. Xoay có nghĩa là các phần tử được dịch chuyển sang phải một vị trí và phần tử cuối cùng được chuyển sang vị trí đầu tiên. Nhiệm vụ là tìm phần tử nhỏ nhất trong mảng được xoay này. Thách thức là đạt được điều này bằng thuật toán chạy trong thời gian O(log n), điều này gợi ý rằng Tìm kiếm nhị phân nên sử dụng phương pháp này vì tìm kiếm nhị phân có độ phức tạp về thời gian logarit và thường được áp dụng cho các mảng được sắp xếp để nhanh chóng tìm thấy một phần tử cụ thể.

Tổng Quan

Chìa khóa để giải quyết vấn đề này nằm ở việc hiểu phép quay ảnh hưởng như thế nào đến mảng đã được sắp xếp. Mặc dù xoay, một phần của mảng vẫn được sắp xếp. Nếu mảng không được xoay hoặc đã được xoay toàn bộ chu kỳ (n lần) thì phần tử nhỏ nhất sẽ ở đầu. Nếu nó được xoay, mảng gồm hai dãy tăng dần và phần tử nhỏ nhất là phần tử đầu tiên của dãy thứ hai.

Vì vậy, chúng ta có thể sử dụng Tìm kiếm nhị phân để nhanh chóng xác định điểm xảy ra quá trình chuyển đổi từ giá trị cao hơn sang giá trị thấp hơn, điểm này cho biết phần tử nhỏ nhất. Tìm kiếm nhị phân được sửa đổi ở đây để so sánh phần tử ở giữa với phần tử đầu tiên và quyết định vị trí di chuyển tiếp theo:

Nếu phần tử ở giữa lớn hơn phần tử đầu tiên thì giá trị nhỏ nhất phải ở bên phải phần tử ở giữa. Do đó, chúng tôi tìm kiếm nửa bên phải của mảng.
Nếu phần tử ở giữa nhỏ hơn phần tử đầu tiên thì giá trị nhỏ nhất sẽ nằm ở đâu đó ở bên trái của phần tử ở giữa hoặc có thể chính là phần tử ở giữa. Ở đây, chúng tôi tìm kiếm nửa bên trái.

Bằng cách áp dụng logic này một cách đệ quy cho các nửa, điểm tồn tại của phần tử nhỏ nhất có thể được tìm thấy một cách hiệu quả, đáp ứng độ phức tạp về thời gian cần thiết..

Cách tiếp cận giải pháp

Việc thực hiện giải pháp thúc đẩy một Tìm kiếm nhị phân thuật toán tìm phần tử nhỏ nhất trong mảng đã quay. Dưới đây là các bước chi tiết của thuật toán:

Đầu tiên, giải pháp kiểm tra xem phần tử đầu tiên của mảng có nhỏ hơn hoặc bằng phần tử cuối cùng hay không. Nếu đúng, điều này cho biết mảng không được xoay hoặc được xoay toàn bộ chu kỳ. Do đó, phần tử đầu tiên đã là giá trị tối thiểu và chúng ta có thể trả về nó ngay lập tức.if nums[0] <= nums[-1]: return nums[0]
Nếu lần kiểm tra trước không thành công, giải pháp sẽ đặt hai con trỏ, left Và right, ở đầu và cuối mảng tương ứng. Những con trỏ này được sử dụng để thu hẹp vùng tìm kiếm một cách linh hoạt trong khi thực hiện Tìm kiếm nhị phân.left, right = 0, len(nums) - 1
Thuật toán đi vào một vòng lặp tiếp tục cho đến khi left con trỏ nhỏ hơn right con trỏ. Mục đích của vòng lặp này là liên tục thu hẹp không gian tìm kiếm cho đến khi xác định được phần tử tối thiểu..while left < right:
Bên trong vòng lặp, giải pháp tính toán mid điểm giữa con trỏ trái và phải. Điểm giữa này được sử dụng để so sánh các phần tử và quyết định nửa nào của mảng sẽ tìm kiếm tiếp theo.mid = (left + right) >> 1
Bước tiếp theo là so sánh phần tử tại mid chỉ mục với phần tử đầu tiên trong mảng. Nếu như nums[mid] lớn hơn nums[0], chúng ta biết rằng phần tử nhỏ nhất phải ở bên phải mid, vì vậy chúng tôi di chuyển left con trỏ tới mid + 1.if nums[0] <= nums[mid]: left = mid + 1
Ngược lại, nếu nums[mid] ít hơn nums[0], phần tử tối thiểu nằm ở bên trái của mid, hoặc nó có thể là mid chính nó, vì vậy chúng tôi di chuyển right con trỏ tới mid.else: right = mid
Vòng lặp tiếp tục cho đến khi left Và right con trỏ hội tụ về chỉ số của phần tử tối thiểu. Lúc này, chúng ta có thể quay lại nums[left] là phần tử tối thiểu của mảng.return nums[left]

Cách tiếp cận này đảm bảo rằng thời gian chạy sẽ là O(log n) vì nó liên tục loại bỏ một nửa không gian tìm kiếm trong mỗi lần lặp, đây là đặc điểm của phương pháp Tìm kiếm nhị phân.

Hướng dẫn ví dụ

Hãy xem xét một ví dụ nhỏ để minh họa cách tiếp cận giải pháp. Giả sử chúng ta có mảng xoay sau:

nums = [4, 5, 6, 7, 0, 1, 2]

Ban đầu, chúng tôi kiểm tra xem mảng chưa được xoay hay đã được xoay toàn bộ chu kỳ:

if nums[0] <= nums[-1]: return nums[0]

Tuy nhiên, nums[0] là 4 Và nums[-1] là 2, vì vậy chúng tôi không trở lại nums[0] vì mảng đã được xoay.

Tiếp theo, chúng tôi thiết lập left Và right con trỏ:

left, right = 0, len(nums) - 1

Kể từ đây, left = 0 Và right = 6.

Bước vào vòng lặp, chúng ta tính toán mid chỉ số:

mid = (left + right) >> 1

Điều này giúp chúng tôi mid = 3, với nums[mid] = 7.

Bây giờ chúng ta so sánh nums[mid] với nums[0]. Từ 7 (phần tử ở giữa) lớn hơn 4 (phần tử đầu tiên), chúng tôi cập nhật left ĐẾN mid + 1:

left = mid + 1

Hiện nay, left = 4 Và right = 6.

Ở lần lặp tiếp theo, mid = (4 + 6) >> 1 = 5. giá trị nums[mid] là 1, đó là ít hơn nums[0].

Từ nums[mid] ít hơn nums[0], chúng tôi cập nhật right con trỏ tới mid:

right = mid

Hiện nay, left = 4 Và right = 5.

Tiếp tục vòng lặp, chúng ta tính toán tiếp theo mid:

mid = (left + right) >> 1 = (4 + 5) >> 1 = 4

Giá trị tại mid chỉ số là 0, đó là ít hơn nums[0]. Vì vậy, chúng tôi cập nhật right con trỏ tới mid lại:

right = mid

Kể từ bây giờ cả hai left Và right là 4, vòng lặp kết thúc và chúng tôi trả về giá trị nums[left] đó là 0, phần tử nhỏ nhất trong mảng được xoay:

return nums[left]

Do đó, theo cách tiếp cận được cung cấp, chúng tôi tìm thấy phần tử tối thiểu một cách hiệu quả trong một mảng được sắp xếp xoay trong thời gian O(log n).

C++

#include <vector> // Include the vector header for using the vector data structure 2 3class Solution { 4public: 5 // Function to find the minimum element in a rotated sorted array 6 int findMin(std::vector<int>& nums) { 7 int size = nums.size(); // Get the size of the vector 8 9 // If the first element is less than or equal to the last element, 10 // then the array is not rotated, so return the first element 11 if (nums[0] <= nums[size - 1]) { 12 return nums[0]; 13 } 14 15 int left = 0; // Initialize left pointer to the start of the array 16 int right = size - 1; // Initialize right pointer to the end of the array 17 18 // Binary search to find the pivot, the smallest element 19 while (left < right) { 20 int mid = left + (right - left) / 2; // Find the mid index to prevent overflow 21 22 // If the first element is less than or equal to the mid element, 23 // then the smallest value must be to the right of mid 24 if (nums[0] <= nums[mid]) { 25 left = mid + 1; 26 } else { // Otherwise, it is to the left of mid 27 right = mid; 28 } 29 } 30 31 // At this point, left is the index of the smallest element 32 return nums[left]; 33 } 34};

Độ phức tạp về thời gian và không gian

Mã Python được cung cấp triển khai thuật toán tìm kiếm nhị phân để tìm phần tử tối thiểu trong một mảng được sắp xếp xoay. Đây là phân tích về độ phức tạp về thời gian và không gian của nó:

Độ phức tạp thời gian:

Độ phức tạp về thời gian của thuật toán là O(log n), Ở đâu n là độ dài của danh sách đầu vào nums. Điều này là do thuật toán sử dụng phương pháp tìm kiếm nhị phân, trong đó nó liên tục chia khoảng thời gian tìm kiếm thành một nửa. Ở mỗi bước, thuật toán so sánh phần tử ở giữa với các phần tử biên để xác định nửa mảng cần tìm kiếm tiếp theo. Do đó, số bước cần thiết để tìm mức tối thiểu sẽ tỷ lệ thuận với logarit của kích thước mảng.

Độ phức tạp của không gian:

Độ phức tạp không gian của thuật toán là O(1), vì nó chỉ sử dụng một lượng không gian bổ sung không đổi. Các biến left, right, Và mid được sử dụng để duy trì giới hạn của không gian tìm kiếm và không có cấu trúc dữ liệu bổ sung nào được phân bổ phụ thuộc vào kích thước của danh sách đầu vào. Do đó, yêu cầu bộ nhớ không đổi bất kể kích thước đầu vào.

LeetCode Bài 53. Maximum Subarray (Phân mảng tối đa) bằng Javascript