- vừa được xem lúc

4 useful Javascript function

0 0 3

Người đăng: Tran Ngoc Nam

Theo Viblo Asia

1. Caching function calculation results

Chúng tôi muốn lưu kết quả của hoạt động hàm vào bộ nhớ cache. Khi nó được gọi sau đó, nếu các tham số giống nhau, hàm sẽ không được thực thi nữa mà kết quả trong cache sẽ được trả về trực tiếp. Chúng ta có thể làm gì?

function cached(fn){ // Create an object to store the results returned after each function execution. const cache = Object.create(null); // Returns the wrapped function return function cachedFn (str) { // If the cache is not hit, the function will be executed if ( !cache[str] ) { let result = fn(str); // Store the result of the function execution in the cache cache[str] = result; } return cache[str] }
}

Cùng xem ví dụ nhé:

2. Curry

Currying là một kỹ thuật đánh giá hàm với nhiều đối số, thành một chuỗi các hàm với một đối số duy nhất. Nói cách khác, khi một hàm, thay vì nhận tất cả các đối số cùng một lúc, lấy đối số đầu tiên và trả về một hàm mới nhận đối số thứ hai và trả về một hàm mới nhận đối số thứ ba, v.v. cho đến khi tất cả các đối số đều hoàn thành. Tại sao nó hữu ích?

  • Currying giúp bạn tránh chuyển đi chuyển lại cùng một biến.
  • Nó giúp tạo ra một hàm bậc cao hơn. Nó cực kỳ hữu ích trong việc xử lý sự kiện. Các mảnh nhỏ có thể được cấu hình và sử dụng lại một cách dễ dàng. Hãy xem xét một chức năng thêm đơn giản. Nó chấp nhận ba toán hạng làm đối số và trả về tổng của cả ba là kết quả.
function add(a,b,c){ return a + b + c;
}

Bạn có thể gọi nó với quá ít đối số hoặc quá nhiều (đối số dư thừa bị bỏ qua).

add(1,2,3) --> 6 add(1,2) --> NaN
add(1,2,3,4) --> 6 //Extra parameters will be ignored.

Sẽ thế nào nếu convert hàm đó sang dạng curry.

function curry(fn) { if (fn.length <= 1) return fn; const generator = (...args) => { if (fn.length === args.length) { return fn(...args) } else { return (...args2) => { return generator(...args, ...args2) } } } return generator
}

3. Singleton

Mô hình Singleton giới hạn số lượng phiên bản của một đối tượng cụ thể chỉ là một. Cá thể đơn lẻ này được gọi là một singleton. Các Singleton rất hữu ích trong các tình huống mà các hành động trên toàn hệ thống cần được phối hợp từ một nơi trung tâm duy nhất. Một ví dụ là một nhóm kết nối cơ sở dữ liệu. Pool quản lý việc tạo, hủy và tồn tại của tất cả các kết nối cơ sở dữ liệu cho toàn bộ ứng dụng, đảm bảo rằng không có kết nối nào bị ‘mất’. Singletons giảm nhu cầu về các biến toàn cục đặc biệt quan trọng trong JavaScript vì nó hạn chế ô nhiễm không gian tên và nguy cơ xung đột tên liên quan.

function proxy(func) { let instance; let handler = { construct(target, args) { if (!instance) { // Create an instance if there is not exist instance = Reflect.construct(func,args) } return instance } } return new Proxy(func, handler)
} // example function Person(name, age) { this.name = name this.age = age
} const SingletonPerson = proxy(Person) let person1 = new SingletonPerson('zhl', 22) let person2 = new SingletonPerson('cyw', 22) console.log(person1 === person2) // true

Cùng xem ví dụ:

4. Deep check and get different of 2 objects

Nếu đã làm quen với react, react native chắc hẳn bạn đã quen thuộc với việc kiểm tra sự thay đổi của props, state để cho phép render lại view. Tuy nhiên đối với những dự án lớn, cấu trúc của state, props rất lớn và phức tạp, đây sẽ là function giúp bạn debug xem properties nào đang thay đổi.

private difference = (object: any, base: any) => { function changes(object: any, base: any) { return _.transform(object, function(result: any, value, key) { if (!_.isEqual(value, base[key])) { result[key] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value; } }); } return changes(object, base);
};

Cùng xem ví dụ nhé:

let oldObject = { p1: 1, p2: { p2_1: 2, p2_2: 3, }
} let newObject = { p1: 5, p2: { p2_1: 4, p2_2: 3, }
} difference(newObject, oldObject); // => { p1: 5, p2_1: 4 }

Trên đây là 1 số function có thể sẽ hữu ích với bạn, có thể nó sẽ chưa đúng trong 1 số trường hợp, nếu có đóng góp gì để cái tiến chúng, Please comment below!!!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 502

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 415

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 137

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 120

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 94

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 230