تعلم أهم دوال وكائنات JavaScript

ملخص

أتقن الأساليب الأساسية لـ JavaScript — عمليات المصفوفات (map، filter، reduce، groupBy)، ومعالجة النصوص، وأدوات الكائنات، وهياكل بيانات Map/Set، وأنماط Promise — لكتابة كود فعال وقابل للقراءة في جميع أنواع المشاريع.

تعد المكتبة القياسية لـ JavaScript واسعة النطاق، ومعرفة الأساليب التي يجب استخدامها تميز المطورين المبتدئين عن المحترفين. ينظم هذا الدليل المرجعي الأساليب الأساسية حسب الفئة مع أمثلة عملية وتوقيعات أنواع TypeScript. سواء كنت تقوم بمعالجة البيانات، أو التلاعب بالنصوص، أو تنظيم العمليات غير المتزامنة، ستصبح هذه الأنماط جزءاً من ذاكرتك العضلية.

أساليب المصفوفات (Array Methods)

التكرار والتحويل

const numbers = [1, 2, 3, 4, 5];

// map: transform each element
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: keep elements that match a condition
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce: aggregate to a single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// forEach: execute side effects (no return value)
numbers.forEach((n, index) => {
  console.log(`Index ${index}: ${n}`);
});

توقيعات TypeScript:

// map<U>(callback: (value: T, index: number, array: T[]) => U): U[]
const squared: number[] = numbers.map(n => n * n);

// filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S): S[]
const filtered: number[] = numbers.filter(n => n > 2);

// reduce<U>(callback: (prev: U, curr: T, index: number, array: T[]) => U, init: U): U
const total: number = numbers.reduce((sum, n) => sum + n, 0);

البحث عن العناصر

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'user' }
];

// find: return first matching element
const admin = users.find(u => u.role === 'admin');
console.log(admin); // { id: 1, name: 'Alice', role: 'admin' }

// findIndex: return index of first match
const idx = users.findIndex(u => u.id === 2);
console.log(idx); // 1

// includes: check if value exists
const hasZero = [1, 2, 3].includes(0);
console.log(hasZero); // false

// some: test if at least one element matches
const hasAdmin = users.some(u => u.role === 'admin');
console.log(hasAdmin); // true

// every: test if all elements match
const allActive = users.every(u => u.active !== false);
console.log(allActive); // true (if no explicit false values)

التجميع والتلخيص (ES2024)

const transactions = [
  { id: 1, type: 'income', amount: 100 },
  { id: 2, type: 'expense', amount: 50 },
  { id: 3, type: 'income', amount: 200 },
  { id: 4, type: 'expense', amount: 30 }
];

// Array.groupBy: group by key function
const byType = Array.groupBy(transactions, t => t.type);
console.log(byType.income); // [{ id: 1, ... }, { id: 3, ... }]

// Combining groupBy with reduce
const totals = Object.entries(
  Array.groupBy(transactions, t => t.type)
).reduce((acc, [type, items]) => {
  acc[type] = items.reduce((sum, t) => sum + t.amount, 0);
  return acc;
}, {});
console.log(totals); // { income: 300, expense: 80 }

التسطيح والدمج

// flat: flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]] — flattens one level
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6] — flattens two levels

// flatMap: map and flatten in one pass
const sentences = ['Hello world', 'Nice day'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['Hello', 'world', 'Nice', 'day']

// join: combine array elements into string
const csv = ['Alice', 'Bob', 'Charlie'].join(', ');
console.log(csv); // 'Alice, Bob, Charlie'

أساليب النصوص (String Methods)

البحث والتحقق

const text = 'Hello, JavaScript!';

// includes: check if substring exists
console.log(text.includes('Java')); // true

// startsWith / endsWith: check string boundaries
console.log(text.startsWith('Hello')); // true
console.log(text.endsWith('!')); // true

// indexOf / lastIndexOf: find position
console.log(text.indexOf('o')); // 4
console.log(text.lastIndexOf('o')); // 14

// search: find with regex
console.log(text.search(/script/i)); // 7 — case insensitive

// match: find all matches with regex
const matches = 'abc123def456'.match(/\d+/g);
console.log(matches); // ['123', '456']

التحويل

// toUpperCase / toLowerCase
console.log('hello'.toUpperCase()); // 'HELLO'
console.log('HELLO'.toLowerCase()); // 'hello'

// trim: remove whitespace
console.log('  spaced  '.trim()); // 'spaced'
console.log('  spaced  '.trimStart()); // 'spaced  '
console.log('  spaced  '.trimEnd()); // '  spaced'

// replace / replaceAll: substitute strings
console.log('hello world'.replace('world', 'JS')); // 'hello JS'
console.log('hello world world'.replaceAll('world', 'JS')); // 'hello JS JS'

// split: divide string into array
console.log('a,b,c'.split(',')); // ['a', 'b', 'c']
console.log('hello'.split('')); // ['h', 'e', 'l', 'l', 'o']

// slice / substring: extract portions
const str = 'JavaScript';
console.log(str.slice(0, 4)); // 'Java'
console.log(str.substring(0, 4)); // 'Java'

القوالب والحشو (Padding)

// Template literals (backticks) — not a method, but essential
const name = 'Alice';
const age = 30;
console.log(`${name} is ${age} years old`); // 'Alice is 30 years old'

// padStart / padEnd: pad strings to length
console.log('5'.padStart(3, '0')); // '005'
console.log('5'.padEnd(3, '0')); // '500'

// repeat: repeat string
console.log('ab'.repeat(3)); // 'ababab'

أساليب الكائنات (Object Methods)

الاستبطان والتكرار

const user = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

// Object.keys: array of property names
console.log(Object.keys(user)); // ['id', 'name', 'email']

// Object.values: array of property values
console.log(Object.values(user)); // [1, 'Alice', 'alice@example.com']

// Object.entries: array of [key, value] pairs
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key: ${value`);
});

// Object.hasOwn: check if property exists (modern version of hasOwnProperty)
console.log(Object.hasOwn(user, 'name')); // true
console.log(Object.hasOwn(user, 'age')); // false

الدمج والتوسيع

const defaults = { timeout: 5000, retries: 3 };
const config = { timeout: 10000 };

// Object.assign: merge objects (mutates first argument)
const merged = Object.assign({}, defaults, config);
console.log(merged); // { timeout: 10000, retries: 3 }

// Spread operator: cleaner syntax
const merged2 = { ...defaults, ...config };
console.log(merged2); // { timeout: 10000, retries: 3 }

// Deep merge (manual recursion required)
function deepMerge(target, source) {
  Object.entries(source).forEach(([key, value]) => {
    if (value && typeof value === 'object' && !Array.isArray(value)) {
      target[key] = target[key] || {};
      deepMerge(target[key], value);
    } else {
      target[key] = value;
    }
  });
  return target;
}

التحويل

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'user' }
];

// Create a lookup map by ID
const byId = Object.fromEntries(
  users.map(u => [u.id, u])
);
console.log(byId[1]); // { id: 1, name: 'Alice', ... }

// Transform values
const upperNames = Object.fromEntries(
  Object.entries({ a: 'alice', b: 'bob' })
    .map(([k, v]) => [k, v.toUpperCase()])
);
console.log(upperNames); // { a: 'ALICE', b: 'BOB' }

// Group by property
const byRole = Object.groupBy(users, u => u.role);
console.log(byRole.admin); // [{ id: 1, ... }]

Map و Set

Map: تخزين مفتاح-قيمة

// Map preserves key type and insertion order
const map = new Map<string, number>();

// set: add or update entry
map.set('alice',