20 ویژگی کمتر شناخته شده جاوا اسکریپت که احتمالا هرگز از آنها استفاده نکرده اید

برای ناوبری بهتر، پست را در آدرس اصلی https://devaradise.com/lesser-known-javascript-features بخوانید

جاوا اسکریپت سنگ بنای توسعه وب مدرن است که وب سایت ها و برنامه های کاربردی پویا را تقویت می کند. در حالی که بسیاری از توسعه دهندگان با ویژگی های اساسی و پرکاربرد جاوا اسکریپت آشنا هستند، بسیاری از ویژگی های پنهان اغلب مورد توجه قرار نمی گیرند. این ویژگی های کمتر شناخته شده می توانند کد شما را مختصر، خوانا و قدرتمندتر کنند.

در این مقاله، برخی از ویژگی های پنهان جاوا اسکریپت را بررسی می کنیم. از عملگر ادغام بی اثر گرفته تا اشیاء Map و Set، هر ویژگی شامل مثال‌های عملی و بهترین روش‌ها است. استفاده از این ویژگی ها می تواند به شما کمک کند کدهای تمیزتر و کارآمدتر بنویسید و به راحتی با مشکلات پیچیده مقابله کنید.

چه یک توسعه‌دهنده باتجربه یا مبتدی باشید، این مقاله شما را با قابلیت‌های جاوا اسکریپت آشنا می‌کند. در پایان، شما تکنیک های جدیدی برای ارتقای مهارت های کدنویسی خود با جاوا اسکریپت خواهید داشت.

پست های دیگر در مورد جاوا اسکریپت

ویژگی های کمتر شناخته شده جاوا اسکریپت

1. اپراتور ادغام باطل

عملگر ادغام تهی (??) برای ارائه یک مقدار پیش فرض زمانی که یک متغیر است استفاده می شود null یا undefined.

مثال کد:

let foo = null;
let bar = foo ?? 'default value';
console.log(bar); // Output: 'default value'

برای رسیدگی به مواردی که در آن از عملگر ادغام تهی استفاده کنید null یا undefined ممکن است مقادیر ظاهر شوند و اطمینان حاصل شود که کد شما با مقادیر پیش فرض به خوبی اجرا می شود.

2. زنجیربندی اختیاری

اپراتور اختیاری زنجیر (?.) امکان دسترسی ایمن به خصوصیات شی عمیق تو در تو را فراهم می کند و در صورت عدم وجود ویژگی از خطاهای زمان اجرا جلوگیری می کند.

مثال کد:

const user = {
    profile: {
        name: 'Alice'
    }
};
const userProfileName = user.profile?.name;
console.log(userProfileName); // Output: 'Alice'

const userAccountName = user.account?.name;
console.log(userAccountName); // Output: undefined

از زنجیره اختیاری برای جلوگیری از خطا هنگام دسترسی به ویژگی های بالقوه استفاده کنید null یا undefined اشیاء، کد شما را قوی تر می کند.

3. جداکننده های عددی

جداکننده های عددی (_) اعداد بزرگ را با جداسازی بصری ارقام قابل خواندن تر می کند.

مثال کد:

const largeNumber = 1_000_000;
console.log(largeNumber); // Output: 1000000

از جداکننده های عددی برای بهبود خوانایی اعداد بزرگ در کد خود استفاده کنید، به خصوص برای محاسبات مالی یا مجموعه داده های بزرگ.

4. Promise.AllSettled

Promise.allSettled منتظر می ماند تا همه وعده ها حل و فصل شوند (اعم از انجام شده یا رد شده) و مجموعه ای از اشیاء را که نتیجه را توصیف می کند، برمی گرداند.

مثال کد:

const promises = [Promise.resolve('Success'), Promise.reject('Error'), Promise.resolve('Another Success')];

Promise.allSettled(promises).then((results) => {
    results.forEach((result) => console.log(result));
});
// Output:
// { status: 'fulfilled', value: 'Success' }
// { status: 'rejected', reason: 'Error' }
// { status: 'fulfilled', value: 'Another Success' }

استفاده کنید Promise.allSettled زمانی که شما نیاز به رسیدگی به وعده های متعدد دارید و می خواهید اطمینان حاصل کنید که همه نتایج بدون توجه به نتایج تک تک وعده ها پردازش می شوند.

5. رشته های کلاس خصوصی

فیلدهای کلاس خصوصی خصوصیاتی هستند که فقط در کلاسی که اعلام شده اند قابل دسترسی و تغییر هستند.

مثال کد:

class MyClass {
    #privateField = 42;

    getPrivateField() {
        return this.#privateField;
    }
}

const instance = new MyClass();
console.log(instance.getPrivateField()); // Output: 42
console.log(instance.#privateField); // Uncaught Private name #privateField is not defined.

از فیلدهای کلاس خصوصی برای کپسوله کردن داده ها در یک کلاس استفاده کنید، و اطمینان حاصل کنید که داده های حساس در خارج از کلاس نمایش داده نمی شوند یا اصلاح نمی شوند.

6. عملگرهای تخصیص منطقی

عملگرهای تخصیص منطقی (&&=، ||=، ??=) عملگرهای منطقی را با انتساب ترکیب می کند و راهی مختصر برای به روز رسانی متغیرها بر اساس یک شرط ارائه می کند.

مثال کد:

let a = true;
let b = false;

a &&= 'Assigned if true';
b ||= 'Assigned if false';

console.log(a); // Output: 'Assigned if true'
console.log(b); // Output: 'Assigned if false'

از عملگرهای تخصیص منطقی برای ساده کردن انتساب های شرطی استفاده کنید و کد شما را خواناتر و مختصرتر کنید.

7. برچسب برای بیانیه های حلقه و بلوک

برچسب‌ها شناسه‌هایی هستند که به دنبال آن یک دونقطه قرار می‌گیرند و برای برچسب‌گذاری حلقه‌ها یا بلوک‌ها برای ارجاع در عبارات شکست یا ادامه استفاده می‌شوند.

مثال کد:

outerLoop: for (let i = 0; i  3; i++) {
    console.log(`Outer loop iteration ${i}`);
    for (let j = 0; j  3; j++) {
        if (j === 1) {
            break outerLoop; // Break out of the outer loop
        }
        console.log(`  Inner loop iteration ${j}`);
    }
}
// Output:
// Outer loop iteration 0
//   Inner loop iteration 0

labelBlock: {
    console.log('This will be printed');
    if (true) {
        break labelBlock; // Exit the block
    }
    console.log('This will not be printed');
}
// Output:
// This will be printed

از برچسب‌ها برای کنترل رفتار حلقه پیچیده استفاده کنید، که مدیریت حلقه‌های تودرتو را آسان‌تر می‌کند و وضوح کد را بهبود می‌بخشد.

8. Tagged Template Literals

الفبای الگوی برچسب‌گذاری‌شده به شما امکان می‌دهد واژه‌های قالب را با یک تابع تجزیه کنید و پردازش سفارشی حروف رشته‌ای را ممکن می‌سازد.

کد مثال 1:

function logWithTimestamp(strings, ...values) {
    const timestamp = new Date().toISOString();
    return (
        `[${timestamp}] ` +
        strings.reduce((result, str, i) => {
            return result + str + (values[i] || '');
        })
    );
}

const user = 'JohnDoe';
const action = 'logged in';
console.log(logWithTimestamp`User ${user} has ${action}.`);
// Outputs: [2024-07-10T12:34:56.789Z] User JohnDoe has logged in.

کد مثال 2:

function validate(strings, ...values) {
    values.forEach((value, index) => {
        if (typeof value !== 'string') {
            throw new Error(`Invalid input at position ${index + 1}: Expected a string`);
        }
    });
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] || '');
    });
}

try {
    const validString = validate`Name: ${'Alice'}, Age: ${25}`;
    console.log(validString); // This will throw an error
} catch (error) {
    console.error(error.message); // Outputs: Invalid input at position 2: Expected a string
}

برای پردازش رشته های پیشرفته، از جمله ایجاد قالب های HTML ایمن یا بومی سازی رشته ها، از الفاظ قالب برچسب گذاری شده استفاده کنید.

9. Bitwise Operators for Quick Math

عملگرهای بیتی در جاوا اسکریپت عملیاتی را بر روی نمایش های دودویی اعداد انجام می دهند. آنها اغلب برای کارهای برنامه نویسی سطح پایین استفاده می شوند، اما می توانند برای عملیات سریع ریاضی نیز مفید باشند.

لیست اپراتورهای Bitwise

• & (و)
• | (یا)
• ^ (XOR)
• ~ (نه)
• (Left shift)
• >> (شیفت سمت راست)
• >>> (شفت به راست بدون علامت)

کد مثال 1:

شما می توانید از عملگر AND برای بررسی زوج یا فرد بودن یک عدد استفاده کنید.

const isEven = (num) => (num & 1) === 0;
const isOdd = (num) => (num & 1) === 1;

console.log(isEven(4)); // Outputs: true
console.log(isOdd(5)); // Outputs: true

کد مثال 2:

می توانید از عملگرهای shift (>) به ترتیب برای ضرب و تقسیم بر توان های 2 استفاده کنید.

const multiplyByTwo = (num) => num  1;
const divideByTwo = (num) => num >> 1;

console.log(multiplyByTwo(5)); // Outputs: 10
console.log(divideByTwo(10)); // Outputs: 5

کد مثال 3:

می توانید با استفاده از عملگر AND بررسی کنید که آیا یک عدد توان 2 است.

const isPowerOfTwo = (num) => num > 0 && (num & (num - 1)) === 0;

console.log(isPowerOfTwo(16)); // Outputs: true
console.log(isPowerOfTwo(18)); // Outputs: false

از عملگرهای بیتی برای برنامه های کاربردی حیاتی که در آن دستکاری باینری سطح پایین مورد نیاز است یا برای عملیات ریاضی سریع استفاده کنید.

10. in اپراتور برای بررسی اموال

این in اپراتور بررسی می کند که آیا یک ویژگی در یک شی وجود دارد یا خیر.

مثال کد:

const obj = { name: 'Alice', age: 25 };
console.log('name' in obj); // Output: true
console.log('height' in obj); // Output: false

استفاده کنید in اپراتور برای تأیید وجود ویژگی ها در اشیا، اطمینان حاصل شود که کد شما با اشیاء با ویژگی های از دست رفته به خوبی برخورد می کند.

11. debugger بیانیه

این debugger دستور هر گونه قابلیت اشکال زدایی موجود را فراخوانی می کند، مانند تعیین نقطه شکست در کد.

مثال کد:

function checkValue(value) {
    debugger; // Execution will pause here if a debugger is available
    return value > 10;
}
checkValue(15);

استفاده کنید debugger بیانیه ای در حین توسعه برای توقف اجرای و بازرسی رفتار کد، به شما کمک می کند تا باگ ها را به طور موثرتری شناسایی و رفع کنید.

12. تکلیف زنجیره ای

تخصیص زنجیره ای به شما این امکان را می دهد که یک مقدار واحد را به چندین متغیر در یک عبارت اختصاص دهید.

مثال کد:

let a, b, c;
a = b = c = 10;
console.log(a, b, c); // Output: 10 10 10

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

13. نام توابع پویا

نام توابع پویا به شما این امکان را می دهد که توابع را با نام های محاسبه شده در زمان اجرا تعریف کنید.

مثال کد:

const funcName = 'dynamicFunction';
const obj = {
    [funcName]() {
        return 'This is a dynamic function';
    }
};

console.log(obj.dynamicFunction()); // Output: 'This is a dynamic function'

از نام توابع پویا برای ایجاد توابع با نام‌های مبتنی بر داده‌های زمان اجرا استفاده کنید و انعطاف‌پذیری کد و قابلیت استفاده مجدد را افزایش دهید.

14. آرگومان های تابع را دریافت کنید

این arguments شی یک شی آرایه مانند است که حاوی آرگومان های ارسال شده به یک تابع است.

مثال کد:

function sum() {
    let total = 0;
    for (let i = 0; i  arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3)); // Outputs: 6

استفاده کنید arguments شی برای دسترسی به همه آرگومان های ارسال شده به یک تابع، مفید برای توابع با آرگومان های با طول متغیر.

15. Unary + اپراتور

عملگر Unary (+) عملوند خود را به عدد تبدیل می کند.

مثال کد:

console.log(+'abc'); // Outputs: NaN
console.log(+'123'); // Outputs: 123
console.log(+'45.67'); // Outputs: 45.67 (converted to a number)

console.log(+true); // Outputs: 1
console.log(+false); // Outputs: 0

console.log(+null); // Outputs: 0
console.log(+undefined); // Outputs: NaN

از عملگر unary برای تبدیل سریع نوع استفاده کنید، به خصوص هنگام کار با ورودی کاربر یا داده های منابع خارجی.

16. قدرت ** اپراتور

عملگر توان (**) توان (قدرت) عملوندهای خود را انجام می دهد.

مثال کد:

const base = 2;
const exponent = 3;
const result = base ** exponent;
console.log(result); // Output: 8

از عملگر توان برای عبارات ریاضی مختصر و قابل خواندن که شامل توان ها هستند، مانند محاسبات علمی یا مالی استفاده کنید.

17. ویژگی های تابع

توابع در جاوا اسکریپت اشیا هستند و می توانند دارای ویژگی باشند.

کد مثال 1:

function myFunction() {}
myFunction.description = 'This is a function with a property';
console.log(myFunction.description); // Output: 'This is a function with a property'

کد مثال 2:

function trackCount() {
    if (!trackCount.count) {
        trackCount.count = 0;
    }
    trackCount.count++;
    console.log(`Function called ${trackCount.count} times.`);
}
trackCount(); // Outputs: Function called 1 times.
trackCount(); // Outputs: Function called 2 times.
trackCount(); // Outputs: Function called 3 times.

از ویژگی های تابع برای ذخیره متادیتا یا پیکربندی مربوط به تابع استفاده کنید و انعطاف پذیری و سازماندهی کد خود را افزایش دهید.

18. آبجکت گیرنده و تنظیم کننده

گیرنده ها و تنظیم کننده ها متدهایی هستند که مقدار یک ویژگی شی را دریافت یا تنظیم می کنند.

مثال کد:

const obj = {
    firstName: 'John',
    lastName: 'Doe',
    _age: 0, // Conventionally use an underscore for the backing property
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set age(newAge) {
        if (newAge >= 0 && newAge  120) {
            this._age = newAge;
        } else {
            console.log('Invalid age assignment');
        }
    },
    get age() {
        return this._age;
    }
};

console.log(obj.fullName); // Outputs: 'John Doe'
obj.age = 30; // Setting the age using the setter
console.log(obj.age); // Outputs: 30

obj.age = 150; // Attempting to set an invalid age
// Outputs: 'Invalid age assignment'
console.log(obj.age); // Still Outputs: 30 (previous valid value remains)

از گیرنده‌ها و تنظیم‌کننده‌ها برای کپسوله‌سازی حالت داخلی یک شی استفاده کنید، و یک راه کنترل‌شده برای دسترسی و اصلاح ویژگی‌ها ارائه می‌دهد.

19. !! اپراتور بنگ بنگ

این !! عملگر (نفی مضاعف) یک مقدار را به معادل بولی آن تبدیل می کند.

مثال کد:

const value = 'abc';
const value1 = 42;
const value2 = '';
const value3 = null;
const value4 = undefined;
const value5 = 0;

console.log(!!value); // Outputs: true (truthy value)
console.log(!!value1); // Outputs: true (truthy value)
console.log(!!value2); // Outputs: false (falsy value)
console.log(!!value3); // Outputs: false (falsy value)
console.log(!!value4); // Outputs: false (falsy value)
console.log(!!value5); // Outputs: false (falsy value)

استفاده کنید !! عملگر برای تبدیل سریع مقادیر به بولی که در عبارات شرطی مفید است.

20. نقشه و تنظیم اشیاء

Map و Set مجموعه هایی با ویژگی های منحصر به فرد هستند. Map جفت های کلید-مقدار را نگه می دارد و Set ارزش های منحصر به فردی دارد

کد مثال 1:

// Creating a Map
const myMap = new Map();

// Setting key-value pairs
myMap.set('key1', 'value1');
myMap.set(1, 'value2');
myMap.set({}, 'value3');

// Getting values from a Map
console.log(myMap.get('key1')); // Outputs: 'value1'
console.log(myMap.get(1)); // Outputs: 'value2'
console.log(myMap.get({})); // Outputs: undefined (different object reference)

کد مثال 2:

// Creating a Set
const mySet = new Set();

// Adding values to a Set
mySet.add('apple');
mySet.add('banana');
mySet.add('apple'); // Duplicate value, ignored in a Set

// Checking size and values
console.log(mySet.size); // Outputs: 2 (only unique values)
console.log(mySet.has('banana')); // Outputs: true

// Iterating over a Set
mySet.forEach((value) => {
    console.log(value);
});
// Outputs:
// 'apple'
// 'banana'

استفاده کنید Map برای مجموعه ای از جفت های کلید-مقدار با هر نوع داده ای به عنوان کلید، و Set برای مجموعه ای از مقادیر منحصر به فرد، ارائه راه های کارآمد برای مدیریت داده ها.

نتیجه

با استفاده از این ویژگی‌های کمتر شناخته شده جاوا اسکریپت، می‌توانید کد کارآمدتر، خوانا و قوی‌تر بنویسید. شروع به ادغام این تکنیک ها در پروژه های خود کنید تا مهارت های جاوا اسکریپت خود را به سطح بعدی ارتقا دهید.

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

اگر این مقاله برای شما مفید بود، لطفاً آن را با توسعه دهندگان و دوستان خود به اشتراک بگذارید. من دوست دارم نظرات و تجربیات شما را در مورد این ویژگی ها بشنوم، بنابراین در زیر نظر خود را با ما در میان بگذارید.

با تشکر. کد نویسی مبارک!