Video học lập trình mỗi ngày

Bài này đơn giản chỉ là giới thiệu cho các devjs về những dòng code thường xuyên sử dụng với developer javascript. Nó đang giúp tôi rất nhiều, và hy vọng bạn cũng vậy. Nhìn vào rất đơn giản nhưng mỗi ngày chúng ta tìm kiếm trên Google mỗi lần sử dụng. Đây là bài viết thuộc Series - Mẹo viết javascript bạn có thể tìm được nhiều thủ thuật hơn. Và nói thêm nữa là có những hàm ít được biết tới và ít được sử dụng mặc dù công dụng của chúng như khẩu thần công vậy.

Destructuring js

Thông thường sử dụng Destructuring như thế nào? Thì đây cũng vậy mà thôi.

const str = "1986, cr7, boy, 35"
const {1: name, 2: sex, 0: age} = str.split(',')
console.log(name, sex, age) // cr7 boy 1986

valueOf javascript

const obj = {
    i:1,
    valueOf:function(){
        if(this.i === 1){
            this.i ++
            return 1
        }else{
            return 2
        }
    }
}
if(obj==1&&obj==2){
    console.log(obj)
}

Một đối tượng có thể bằng hai giá trị không? ? ? Đoán xem điều này console.log(obj) sẽ được in ra không? Kết quả cuối cùng sẽ là gì?

Convert Boolean

Để chuyển một var thành giá trị Boolean mà không thay đổi giá trị của nó:

const myBoolean = !! myVariable;
!!null // false
!!undefined // false
!!false // false
!!ture // ture
!!"" // false
!!"string" // true
!!0 // false
!!1 // true
!!{} // true
!!\[\] // true

Convert Number to String và ngược lại

Để chuyển đổi một phần tử Number thành một phần tử String:

const stringArray = numberArray.map(String);
const stringArray = \[1, 2, 3\].map(String);
\["1", "2", "3"\]

Hoặc String to Number

const numberArray = stringArray.map(Number);
const stringArray = \["1", "2", "3"\].map(String);
// \[1, 2, 3\]

Format JSON

Nếu bạn nào làm backend thì việc format console.log() thì sử dụng format này là quá hiệu quả.

const formatted = JSON.stringify(myObj, null, 4);
const formatted = JSON.stringify({name: 'Anonystick', age: 18, address: 'sz'}, null, 4);
{
    "name": "Anonystick",
    "age": 18,
    "address": "sz"
}

Query string parameters in JavaScript

const objectToQueryString = (obj) => Object.keys(obj).map((key) => \`${encodeURIComponent(key)}=${encodeURIComponent(obj\[key\])}\`).join('&');
objectToQueryString({name: 'Anonystick', age: 18, address: 'VietNam'})

Output
// name=Anonystick&age=18&address=VietNam

Lấy elements chung của 2 arrays.

const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity(\[1, 2, 3\], \[1, 2, 4\]); // \[1,2\]

Check loại thiết bị với javascript.

const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

Chuyển đổi số thập phân

const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909"

Mảng đa chiều thành mảng một chiều

const deepFlatten = arr => \[\].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten(\[1, \[2\], \[\[3\], 4\], 5\]); // \[1,2,3,4,5\]

Chuyển đổi String với chữ Hoa đầu tiên với nhiều định dạng.

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();

console.log(fromCamelCase('blogJavascriptAnonystick', ' ')); // 'blog javascript anonysticke'
console.log(fromCamelCase('blogJavascriptAnonystick', '-')); // 'blog-javascript-anonystick'
console.log(fromCamelCase('blogJavascriptAnonystick', '\_')); // 'blog\_javascript\_anonystick'

Check một address tuyệt đối

const isAbsoluteURL = str => /^\[a-z\]\[a-z0-9+.-\]\*:/.test(str);

isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false

So sách khoảng cách giữa hai ngày.

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 \* 3600 \* 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

Copy mảng, check duplicate

const deDupe = (myArray) => \[... new Set(myArray)\];
deDupe(\[1, 1, 2, 1, 3, 3, 4\])
// \[1, 2, 3, 4\]

Check falsy values

const clean = dirty.filter(Boolean);
const clean = \[0, false, true, undefined, null, '', 12, 15\].filter(Boolean);
// \[true, 12, 15\]

Unique elements in objects

const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, \[\]);

uniqueElementsBy(\[{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, {id: 1, name: 'Jhon'}\], (a, b) => [a.id](a.id) == b.id)
// \[{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}\]

Tạo mã màu RBG

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

Đọc xong thì cố gắng copy/paste về máy mình mà có dịp thì xài nghe không mấy chế. Còn ai có những bí kíp gì show ra cho anh em học hỏi nha. Biết mà không share là một tội đồ công nghệ đó hêy. Happy coding!

Tài liệu tham khảo: 30-seconds