eaut-logo
Đăng nhập
cover

webdev
Công nghệ

2 follower
Đăng bởi hoanggbao2 ngày trước

Remove Duplicate Elements from JavaScript Array

Removing duplicate elements from a JavaScript array is a common task that developers often need to perform. JavaScript offers several methods to achieve this, each suitable for different scenarios.

1. Remove Duplicates Using the Set Object

The Set object lets you store unique values of any type, whether primitive values or object references. Converting an array to a Set removes all duplicate elements.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

2. Remove Duplicates Using the filter() Method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. By checking the index of each element, duplicates can be filtered out.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.filter((value, index, self) => self.indexOf(value) === index);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

3. Remove Duplicates Using the reduce() Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It can be used to accumulate unique elements in an array.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.reduce((accumulator, value) => {
    if (!accumulator.includes(value)) {
        accumulator.push(value);
    }
    return accumulator;
}, []);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

4. Remove Duplicates Using forEach() Method

The forEach() method executes a provided function once for each array element. By using an auxiliary object to track unique elements, duplicates can be removed.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
let seen = {};

numbers.forEach(value => {
    if (!seen[value]) {
        uniqueNumbers.push(value);
        seen[value] = true;
    }
});

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

Removing duplicate elements from a JavaScript array can be achieved using various methods. Whether you prefer the simplicity of the Set object, the flexibility of filter(), the power of reduce(), or the combination of map() and filter(), JavaScript provides multiple ways to handle this common task effectively. Each method offers unique advantages, so you can choose the one that best suits your specific needs.

Đăng bởi hoanggbao2 ngày trước

6 Useful Resources for Beginners in Front-End Development

Are you a beginner in front-end development? Then you are in the right place. In this post, I'll share some useful resources for aspiring front-end developers. I hope it will help you.

Before that, if you are not focusing on the front end and are focusing on something else, regardless of the programming language, you can always rely on Google and YouTube as your primary sources of help. Also, if you are stuck with something and need to seek help from other programmers, you can always rely on StackOverflow. It is a paradise for programmers.

You can read the full article from here


W3Schools

First of all, this one is my fav in this list. It has almost everything about HTML, CSS, and JavaScript, along with other resources for you to become not just a front-end developer, but a Full-Stack Developer.

freeCodeCamp

It is a non-profit organization that offers a comprehensive curriculum in web development. Personally, I used freeCodeCamp in my early days to learn HTML & CSS. They have an Android app as well as a YouTube channel. Check out their YouTube channel; you won’t regret it.

Udacity

Udacity has a bunch of cool free courses. And if you want something more organized, they've got paid nanodegree programs too!


Read the full article from here.

post attachment
Đăng bởi hoanggbao2 ngày trước

Sự khác nhau giữa khai báo hàm và biểu thức hàm trong Javascript

Khi nói đến việc định nghĩa hàm trong JavaScript, có hai cách chính để thực hiện: khai báo hàm và gán hàm vào biến. Mặc dù chúng có vẻ giống nhau nhưng có những điểm khác biệt chính giữa chúng có thể ảnh hưởng đến hoạt động của code của bạn. Hãy cùng khám phá những khác biệt này một cách chi tiết.

Khai báo hàm

Khai báo hàm là một cách tiêu chuẩn để xác định hàm bằng cách sử dụng từ khóa hàm, theo sau là tên của hàm.

Đặc điểm của khai báo hàm:

  • Named Functions: Chúng được khai báo bằng một tên cụ thể.

  • Not Assignable to Variables: Các khai báo hàm độc lập và thường không được gán cho các biến.

  • Hoisted: Các khai báo hàm được hoisted, nghĩa là chúng có sẵn trước bất kỳ quá trình thực thi mã nào khác. Bạn có thể gọi một hàm được khai báo theo cách này trước định nghĩa của nó trong mã.

// Calling the function before its definition due to hoisting
Declaration();

function Declaration(){
    console.log('function declaration is called');
}

// Calling the function after its definition
Declaration();

Biểu thức hàm

Biểu thức hàm liên quan đến việc xác định hàm như một phần của biểu thức. Điều này thường có nghĩa là gán một hàm cho một biến.

Characteristics of Function Expressions:

  • Assigned to Variables: Function expressions are typically assigned to a variable.

  • Not Hoisted: Function expressions are not hoisted, meaning they can only be accessed after their definition.

  • Use Cases: Function expressions are often used when you need to pass a function as an argument to another function or when you want to define functions conditionally.

// Trying to call the function before its definition will result in an error
expression(); // Will give an error

// Defining the function as a function expression
const expression = function(){
    console.log('function expression');
};

// Calling the function after its definition
expression();

Key Differences

Syntax and Structure:

  • Function Declaration:function Declaration() { // code }

  • Function Expression: const expression = function() { // code };

Hoisting

  • Function Declaration: Hoisted to the top of the scope.

  • Function Expression: Not hoisted; must be defined before use.

Naming:

  • Function Declaration: Named functions.

  • Function Expression: Can be anonymous or named, but usually assigned to variables.

Use Cases

  • Function Declaration: Best for defining standard, reusable functions.

  • Function Expression: Useful for conditional definitions and passing functions as arguments.

post attachment
Đăng bởi hoanggbao11 ngày trước

React 19 Launches with Game-Changing React Compiler: What Does This Mean for Your Apps?

Với sự ra mắt gần đây của React 19 Beta, một trong những tính năng thú vị nhất được giới thiệu trong phiên bản này là React Compiler—một công cụ đột phá hứa hẹn sẽ cách mạng hóa cách chúng ta xây dựng và tối ưu hóa các ứng dụng React.

Tối ưu hóa hiệu suất mà không gặp rắc rối

Không giống như các phương pháp truyền thống nơi các nhà phát triển phải triển khai các tối ưu hóa theo cách thủ công, chẳng hạn như các hook React.memo hoặc useCallback và useMemo, Trình biên dịch React sẽ đảm nhiệm các tối ưu hóa này cho bạn. Nó phân tích mã của bạn một cách thông minh và áp dụng các tối ưu hóa cần thiết để đảm bảo ứng dụng của bạn chạy trơn tru và hiệu quả.

Áp dụng trong thực tế

Quest Store và Instagram đã bắt đầu tích hợp Trình biên dịch React vào ứng dụng của họ. Kết quả rất đáng chú ý, cho thấy những cải thiện đáng kể về các chỉ số hiệu suất trên mọi phương diện.

Thống kê ấn tượng

Sự ra đời của Trình biên dịch React đã mang lại hiệu suất tăng đáng kể cho cả Quest Store và Instagram:

  • Tương tác nhanh hơn 2,5 lần: Tương tác của người dùng trong ứng dụng nhanh hơn 2,5 lần, nâng cao trải nghiệm tổng thể của người dùng.

  • Thời gian tải ban đầu được cải thiện 12%: Thời gian tải ban đầu của các ứng dụng này đã được cải thiện 12%, đảm bảo người dùng có thể bắt đầu tương tác với ứng dụng nhanh hơn.

  • Điều hướng nhanh hơn: Điều hướng giữa các phần khác nhau của ứng dụng đã trở nên nhanh hơn đáng kể, góp phần mang lại trải nghiệm mượt mà hơn cho người dùng.

Tăng bộ nhớ 0%: Thật ấn tượng, những cải tiến hiệu suất này đã đạt được mà không tăng mức sử dụng bộ nhớ, duy trì hiệu quả của ứng dụng

Tập trung vào logic kinh doanh

Một trong những ưu điểm đáng kể nhất của React Compiler là nó cho phép các nhà phát triển tập trung vào việc viết logic nghiệp vụ thay vì lo lắng về việc tối ưu hóa hiệu suất. Trình biên dịch tự động xác định và thực hiện tối ưu hóa, ngay cả trong những lĩnh vực mà nhà phát triển có thể chưa nghĩ đến việc áp dụng chúng. Điều này có nghĩa là các nhà phát triển có thể viết mã rõ ràng, dễ bảo trì trong khi vẫn được hưởng lợi từ hiệu suất nâng cao.

Kết luận

Sự ra đời của Trình biên dịch React trong React 19 Beta đánh dấu một cột mốc quan trọng trong quá trình phát triển của hệ sinh thái React. Bằng cách tự động hóa tối ưu hóa hiệu suất, nó hợp lý hóa quy trình phát triển và trao quyền cho các nhà phát triển xây dựng các ứng dụng hiệu suất cao một cách dễ dàng. Khi React 19 thu hút được sự chú ý và được áp dụng, chúng ta có thể kỳ vọng sẽ thấy nhiều cải tiến và cải tiến hơn nữa giúp vượt qua ranh giới của những gì có thể xảy ra trong quá trình phát triển web. Tương lai của React tươi sáng hơn bao giờ hết và Trình biên dịch React đang dẫn đầu kỷ nguyên mới của các ứng dụng nhanh, hiệu quả và thân thiện với nhà phát triển.

Xem thêm: https://react.dev/learn/react-compiler

References: React 19 Launches with Game-Changing React Compiler: What Does This Mean for Your Apps? by MINI JAIN

Đăng bởi hohohehe2 tháng trước

Chia sẻ ứng dụng True DevTools giúp ae dev thuận tiện hơn

Giới thiệu ứng dụng True Devtools do Hoang Dat phát triển bao gồm hơn 45 công cụ cho developer như code formatter, regex tester, chuyển đổi định dạng ảnh, hệ cơ số, JSON, XML, YAML, SQL và rất nhiều công cụ hữu ích khác cho công việc.

Ứng dụng được thiết kế chạy trên trình duyệt, hoàn toàn không xử lý hoặc lưu trữ dữ liệu trên server nên tốc độ gần như là tức thời và đảm bảo an toàn dữ liệu người dùng.

Ứng dụng cũng hỗ trợ chuẩn Progressive Web App, bạn có thể cài đặt trên máy và sử dụng offline không cần Internet. Link ứng dụng: https://truedevtools.com

yes sir

End of content