Một số tips mà tớ đã sử dụng khi làm việc với Javascript
Bài đăng này đã không được cập nhật trong 4 năm
Giới thiệu
Trong bài viết này thì mình sẽ giới thiệu những tip mà mình thường sử dụng khi làm việc với JS, được mình tổng hợp từ nhiều nguồn, và nó đang giúp mình rút ngắn thời gian phát triển rất là nhiều, hy vọng sẽ giúp ích được cho bạn.
Chuyển đổi thành Boolean
Để chuyển một biến thành giá trị boolean và không làm thay đổi giá trị của nó thì thường mình sẽ làm như thế này
!!undefined // false
!!null // false
!!true // true
!!false // false
!!123 // true
!!0 // false
!!'some string' // true
!!'' // false
!!{} // true
!![] // true
[true, false, undefined, 0, 1].map(Boolean) // [true, false, false, false, true]
Lọc giá trị
[true, false, undefined, 0, 1].filter(Boolean) // [true, 1]
Pluck
Khi mình cần lấy dữ liệu của một thuộc tính trong một mảng các object thì sẽ làm như thế này:
var goal = [
{
"category" : "other",
"title" : "harry University",
"value" : 50000,
"id":"1"
},
{
"category" : "traveling",
"title" : "tommy University",
"value" : 50000,
"id":"2"
},
{
"category" : "education",
"title" : "jerry University",
"value" : 50000,
"id":"3"
},
{
"category" : "business",
"title" : "Charlie University",
"value" : 50000,
"id":"4"
}
]
const pluck = (key, array) => array.reduce((values, current) => {
values.push(current[key]);
return values;
}, []);
console.log(pluck('title', goal));
//(4) ["harry University", "tommy University", "jerry University", "Charlie University"]
Chuyển String thành Number và ngược lại
Để chuyển giá trị trong mảng từ chuỗi thành số và ngược lại, thì tớ sẽ làm như thế này:
// string => number
console.log(['1', '2', '3'].map(Number)) // [1, 2, 3]
// number => string
console.log([1, 2, 3].map(String)) // ['1', '2', '3']
Query string parameters
const objectToQueryString = (obj) => Object.keys(obj).map((key) =>
`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
console.log(objectToQueryString({giatri1: 1, giatri2: 2})) // "giatri1=1&giatri2=2"
Tìm kiếm object trong mảng
Bạn cần tìm một object trong một mảng có giá trị gần giống hoặc giống thì làm như sau:
const _ = require("lodash") // chúng ta sẽ sử dụng thư viện lodash
const search = (arr, keyName, value) => _.filter(
arr,
item => item[keyName].toLowerCase().includes(value.toLowerCase())
)
const test = [
{
name: 'name 1'
},
{
name: 'name 2'
},
{
name: 'name 3'
}
];
console.log(search(test, 'name', '1')); // [{name: "name 1"}]
console.log(search(test, 'name', '2')); // [{name: "name 2"}]
console.log(search(test, 'name', 'ame')); // [{name: "name 1"}, {name: "name 2"}, {name: "name 3"}]
console.log(search(test, 'name', 'na 3')); // []
Tìm giá trị bằng nhau trong 2 mảng
const test = (arr, values) => arr.filter(v => values.includes(v));
console.log( test([1, 2, 3], [1, 4, 3]) ); // [1, 3]
Kiểm tra Loại thiết bị
const pattern = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i;
console.log(pattern.test(navigator.userAgent) ? 'Mobile' : 'Desktop') // "Desktop";
Chuyển đổi số thập phân
const test = num => num.toLocaleString('en-US');
console.log( test(123456789.987782) ); // "123,456,789.988"
Flatten deep
Bằng cách sử dụng đệ quy, mình có thể chuyển mảng đa chiều thành mảng một chiều
const flattenDeep = arr => [].concat(...arr.map(v => (Array.isArray(v) ? flattenDeep(v) : v)));
console.log( flattenDeep([1, [2], [[3], 4], 5]) ); // [1, 2, 3, 4, 5]
Chuyển đổi chữ dạng camel case sang một dạng tùy ý
const fromCamelCase = (str, separator = '_') => str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
.replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2')
.toLowerCase();
const string = 'dayLaMotChuoi';
console.log(fromCamelCase(string, ' ')); // day la mot chuoi
console.log(fromCamelCase(string, '-')); // day-la-mot-chuoi
console.log(fromCamelCase(string, '_')); // day_la_mot_chuoi
All rights reserved