Các Thủ Thuật JavaScript Hữu Ích

Toán Tử Logic

Toán tử &&

// Cách dài dòng
if (this.condition) {
  this.action();
}

// Cách ngắn gọn
this.condition && this.action();

Toán tử ||

// Cách dài dòng
let result;
if (this.input) {
  result = this.input;
} else {
  result = 0;
}

// Cách ngắn gọn
let result = this.input || 0;

Toán tử !

// Kiểm tra giá trị falsy
if (!value) {
  // Xử lý khi value rỗng/null/undefined/0/false
}

Toán tử !!

// Chuyển đổi sang boolean
const flag = !!value;

Toán Trải Rộng

// Hợp nhất object
const config = { ...defaults, ...options };

// Nối mảng
const combined = [...arrayA, ...arrayB];

Phép Gán Phân Rã

// Với object
const { id, name, email } = user.profile;

// Với mảng
const [first, second] = items;

Chuỗi Mẫu

const message = `
  Chào ${userName},
  Cảm ơn đã đăng ký ${serviceName}!
`;

Xử Lý Mảng

const numbers = [1, 2, 3];

// Kiểm tra tất cả phần tử
const allValid = numbers.every(n => n > 0);

// Kiểm tra ít nhất một phần tử
const hasEven = numbers.some(n => n % 2 === 0);

// Lọc phần tử
const filtered = numbers.filter(n => n > 1);

// Biến đổi phần tử
const doubled = numbers.map(n => n * 2);

// Tổng hợp giá trị
const total = numbers.reduce((sum, num) => sum + num, 0);

Loại Bỏ Trùng Lặp

// Giá trị cơ bản
const unique = [...new Set(values)];

// Đối tượng
const uniqueObjects = Array.from(new Map(
  items.map(item => [item.key, item])
).values());

Sắp Xếp Mảng

// Tăng dần
numbers.sort((a, b) => a - b);

// Giảm dần
numbers.sort((a, b) => b - a);

Định Nghĩa Thuộc Tính

// Tên thuộc tính động
const dynamicKey = 'status';
const item = { 
  id: 1, 
  [dynamicKey]: 'active' 
};

// Thuộc tính có điều kiện
const getUser = includeEmail => ({
  name: 'Alex',
  ...(includeEmail && { email: 'alex@example.com' })
});

Kiểm Tra Kiểu Dữ Liệu

// Phương pháp chính xác
function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

Chuyển Đổi Tập Hợp

const elements = document.querySelectorAll('.item');
const elementArray = [...elements];

Sao Chép Nông

const shallowCopy = { ...original };

Sao Chép Sâu

// Dùng thư viện
import { cloneDeep } from 'lodash';
const deepCopy = cloneDeep(original);

Tìm Giá Trị Lớn Nhất

const maxValue = Math.max(...values);

Kỹ Thuật Vue.js

Thêm Phương Thức Prototype

// main.js
import Vue from 'vue';
import utilities from './utils';
Vue.prototype.$utils = utilities;

Đóng Băng Dữ Liệu

export default {
  data() {
    return {
      staticData: Object.freeze(largeDataSet)
    };
  }
};

Thẻ: JavaScript es6 vuejs ArrayMethods ObjectManipulation

Đăng vào ngày 27 tháng 6 lúc 03:31