Xử lý dữ liệu phổ biến trong Front-end (Cơ bản)

  1. Chuyển đổi giữa chuỗi và mảng
// Chuyển chuỗi thành mảng
let chuoi = 'Công ty A, Công ty B, Công ty C';
console.log(chuoi.split(',')); //['Công ty A', ' Công ty B', ' Công ty C']
// Chuyển mảng thành chuỗi
let mangChuoi = ['Công ty A','Công ty B','Công ty C'];
console.log(mangChuoi.join());//Công ty A,Công ty B,Công ty C
  1. Chuyển đổi giữa mảng và đối tượng
// Chuyển mảng thành đối tượng
const mang = [
  { nhan: 'Nam', giaTri: 0 },
  { nhan: 'Nữ', giaTri: 1 }
];
const doiTuongMang = {};
for(let i = 0; i < mang.length; i++) {
   doiTuongMang[mang[i].giaTri] = mang[i].nhan;
}
console.log(doiTuongMang);
//{0: 'Nam', 1: 'Nữ'}
// Chuyển đối tượng thành mảng
const doiTuong = { 0: 'Nam', 1: 'Nữ' };
let mangDoiTuong = [];
for (let key in doiTuong) {
   mangDoiTuong.push({ nhan: doiTuong[key], giaTri: +key })
}
console.log(mangDoiTuong);
  1. Gộp mảng và đối tượng
// Gộp mảng
let mang1 = ['js', 'es', 'ts'], mang2 = ['vue','react'];
let mangGop = mang1.concat(mang2);
console.log(mangGop);
//['js', 'es', 'ts', 'vue', 'react']
// Gộp đối tượng
let doiTuong1 = { a: 1, b: 2 }, doiTuong2 = { c: 3, d: 4 };
let doiTuongGop = Object.assign(doiTuong1, doiTuong2);
console.log(doiTuongGop);
//{a: 1, b: 2, c: 3, d: 4}
  1. Kiểm tra mảng hoặc đối tượng rỗng
// Kiểm tra mảng rỗng
let mangRong = [], mangCoDuLieu = [1,2,3];
function kiemTraMang(mang) {
     if (Array.isArray(mang) && mang.length === 0) return true;
     return false;
}
console.log(kiemTraMang(mangRong));//true
console.log(kiemTraMang(mangCoDuLieu));//false
// Kiểm tra đối tượng rỗng - sử dụng hasOwnProperty
let doiTuongRong = {}, doiTuongCoDuLieu = { p:9 };
function kiemTraDoiTuong(dt) {
     for(let key in dt) {
        // Nếu có thuộc tính thì không phải đối tượng rỗng
	if (dt.hasOwnProperty(key)) return false;
     }
     return true;
}
console.log(kiemTraDoiTuong(doiTuongRong));//true
console.log(kiemTraDoiTuong(doiTuongCoDuLieu));//false

// Kiểm tra đối tượng rỗng - sử dụng Object.keys
function kiemTraDoiTuong2(dt) {
     if (Object.keys(dt).length === 0) return true;
     return false;
}
console.log(kiemTraDoiTuong2(doiTuongRong));//true
console.log(kiemTraDoiTuong2(doiTuongCoDuLieu));//false
  1. Chuyển đổi timestamp thành định dạng ngày
function chuyenThoiGian(timestamp) {
	// Timestamp 10 chữ số cần *1000, 13 chữ số thì không cần
	var ngay = new Date(timestamp * 1000);
	var nam = ngay.getFullYear() + 'năm';
	var thang =  (ngay.getMonth() + 1 < 10 ? '0' + (ngay.getMonth() + 1) : ngay.getMonth() + 1) + 'tháng';
	var ngayTrongThang = ngay.getDate() + 'ngày';
	var gio = ngay.getHours() + 'giờ';
	var phut = ngay.getMinutes() + 'phút';
	var giay = ngay.getSeconds() + 'giây';
	return nam + thang + ngayTrongThang + gio + phut + giay;
}
console.log(chuyenThoiGian(1651373079));
//2022năm05tháng10ngày1giờ44phút39giây
  1. Loại bỏ phần tử trùng lặp trong mảng
// Cách 1
let soTrung = [1,2,3,3,2,1,1,2,3,4,5,6,7];
function loaiBoTrung1(mang) {
	let tapHop = new Set(mang);
	return Array.from(tapHop);
}
function loaiBoTrung2(mang){
  return mang.reduce((truoc, hienTai) => {
  	return truoc.includes(hienTai) ? truoc : truoc.concat(hienTai);
  }, [])
}
console.log(loaiBoTrung1(soTrung));
console.log(loaiBoTrung2(soTrung));
//[1, 2, 3, 4, 5, 6, 7]

// Cách 2
const danhSach = [
	{ maHang: '1', nguoiDung: 'jack', maUni: 20 },
	{ maHang: '2', nguoiDung: 'tom', maUni: 20 },
	{ maHang: '1', nguoiDung: 'jack', maUni: 20 },
	{ maHang: '3', nguoiDung: 'rose', maUni: 20 },
	{ maHang: '1', nguoiDung: 'jack', maUni: 20 },
]
function loaiBoTrungDanhsach(danhSach) {
	let obj = {};
	return danhSach.reduce((truoc, hienTai) => {
		obj[hienTai.maHang]  ? '' : obj[hienTai.maHang] = true && truoc.push(hienTai);
		return truoc;
	}, [])
}
console.log(loaiBoTrungDanhsach(danhSach))
  1. Làm phẳng mảng đa chiều
let mangDaChieu = [1, [2, [3, 4]],[5,6],[7]];
function lamPhangMang(mang) {
	return mang.reduce((truoc, hienTai) => {
		return truoc.concat(Array.isArray(hienTai) ? lamPhangMang(hienTai) : hienTai);
	}, [])
}
console.log(lamPhangMang(mangDaChieu));
//[1, 2, 3, 4, 5, 6, 7]
  1. Định dạng số với dấu phẩy (ngàn)
let so = '1234567';
function dinhDangSo(so) {
	return so.split('').reverse().reduce((hienTai, tiepTheo, index) => {
		// Kiểm tra index có chia hết cho 3 không
		return ((index % 3) ? tiepTheo : (tiepTheo + ',')) + hienTai
	})
}
console.log(dinhDangSo(so));//1,234,567
  1. Chuyển đổi URL parameters thành đối tượng
let url = 'http://www.example.com/?user=rose&id=123&pid=01&city=hanoi';
function layThamSoURL(url) {
    /*
    ?user=rose&id=123&pid=01&city=hanoi
    [?&]        Bao gồm ? và &
    [^?&]+=     Không phải ? và &, theo sau là dấu =
    */
    const ketQua = {};
    const regex = /[?&][^?&]+=[^?&]+/g;
    const timThay = url.match(regex);
    if (timThay) {
        timThay.forEach(item => {
            let tam = item.substring(1).split('=');
            let khoa = tam[0], giaTri = tam[1];
            ketQua[khoa] = giaTri;
        })
    }
    return ketQua;
}
console.log(layThamSoURL(url));
//{user: 'rose', id: '123', pid: '01', city: 'hanoi'}
  1. Chuyển đổi mảng một chiều thành cấu trúc cây
let duLieu = [
	{ id: 1, parent: null, text: 'Menu 1' },
	{ id: 11, parent: 1, text: 'Menu 1-1' },
	{ id: 12, parent: 1, text: 'Menu 1-2' },
	{ id: 2, parent: null, text: 'Menu 2' },
	{ id: 21, parent: 2, text: 'Menu 2-1' },
	{ id: 22, parent: 2, text: 'Menu 2-2' }
]
function taoCayJson(duLieu, cha, danhSach) {
	for (let item of duLieu) {
		if (item.parent == cha) danhSach.push(item);
	}
	for (let i of danhSach) {
		i.children = [];
		// Đệ quy
		taoCayJson(duLieu, i.id, i.children);
		if(i.children.length == 0) delete i.children;
	}
	return danhSach;
}
// Ba tham số: dữ liệu gốc, ID của nút cha, mảng rỗng mặc định
console.log(taoCayJson(duLieu, null, []));

Thẻ: JavaScript front-end xử lý dữ liệu mạng đối tượng

Đăng vào ngày 3 tháng 7 lúc 13:28