Skip to main content

۹. امکانات پیشرفته ES6+ 🚀

در این فایل، با امکانات جدید و پیشرفته ES6+ آشنا می‌شویم که روند کدنویسی را ساده‌تر، خواناتر و مدرن‌تر می‌کند. این امکانات شامل متغیرهای جدید، Template Literals، Destructuring، Spread/Rest و ماژول‌ها می‌باشد.

۱.متغیرهای جدید: let و const 🔄​

در ES6 دو نوع متغیر جدید معرفی شدند: let و const:

  • let: برای متغیرهایی که ممکن است تغییر کنند. مثل متغیرهای شمارنده در حلقه‌ها.
  • const: برای متغیرهایی که مقدارشان ثابت است. پس از اختصاص مقدار، قابل تغییر نیستند.
let counter = 0;
counter += 1; // مقدار counter تغییر می‌کند

const PI = 3.14;
// PI = 3.15; // این کار باعث خطا می‌شود

۲.Template Literals 📜​

با استفاده از Template Literals می‌توانید رشته‌های چند خطی ایجاد کرده و متغیرها را به راحتی درون رشته جایگذاری کنید. تنها کافیست از بک‌تیک (`) استفاده کنید:

const name = "علی";
const message = `سلام ${name},
خوش آمدید به آموزش ES6.
امیدواریم از یادگیری لذت ببرید!`;
console.log(message);

۳.Destructuring و Spread/Rest 🔍​

Destructuring​

با استفاده از destructuring می‌توانید مقادیر مورد نیاز خود را از آرایه‌ها و اشیاء استخراج کنید:

// آرایه
const numbers = [1, 2, 3, 4];
const [first, second, ...others] = numbers;
console.log(first, second); // 1 2
console.log(others); // [3, 4]

// شیء
const person = { name: "علی", age: 30, city: "تهران" };
const { name, age } = person;
console.log(name, age); // علی 30

Spread/Rest​

این عملگر به شما اجازه می‌دهد تا داده‌ها را گسترش دهید یا ادغام کنید:

// Spread برای ادغام آرایه‌ها
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Rest برای جمع‌آوری بقیه موارد
function sum(a, b, ...nums) {
  return a + b + nums.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

۴.ماژول‌ها: import و export 📦​

ماژول‌ها به شما امکان می‌دهند کدهای خود را به بخش‌های کوچک و مجزا تقسیم کرده و آنها را به صورت تمیز و سازمان‌یافته مدیریت کنید.

تعریف و صادر کردن یک ماژول

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

وارد کردن (Import) یک ماژول

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

همچنین می‌توانید از export default استفاده کنید:

// greetings.js
const greet = (name) => `سلام ${name}!`;
export default greet;

و سپس در فایل دیگر:

// app.js
import greet from './greetings.js';
console.log(greet("علی")); // سلام علی!

۵.نتیجه‌گیری 🎯​

امکانات پیشرفته ES6+ باعث شده تا کدنویسی در جاوا اسکریپت ساده‌تر، خواناتر و مدرن‌تر شود. با استفاده از متغیرهای جدید، Template Literals، destructuring، spread/rest و ماژول‌ها، می‌توانید کدهایی سازمان‌یافته و قابل نگهداری بنویسید. از این امکانات به خوبی بهره ببرید و کدنویسی لذت‌بخشی داشته باشید! 😁

با آرزوی موفقیت
تیم برندآرا 🤖