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

همگام شدن با تمام ویژگی‌های جدیدی که هر سال مشخصات ECMAScript برای ما به ارمغان می‌آورد آسان نیست. بیایید به نکات برجسته ES11 بپردازیم.

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

خیلی دیر نیست. در اینجا من ویژگی های ES11 (ECMAScript 11، با نام مستعار ECMAScript 2020) را که ممکن است از دست داده باشید جمع آوری کرده ام. آنها شامل تعدادی از پیشرفت های ارگونومیک و دیگر مدرن هستند. بیایید نگاهی بیندازیم.

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

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

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

فهرست ۱. نمونه های زنجیره ای اختیاری

box = {
  innerBox: {},
  nullFunction: function() { return null; },
  // non-existent method foo() and members bar
}
// with optional chaining:
if (box?.innerBox?.foo){ }// navigate object graph safely
// old style without optional chaining:
if (box.innerBox && box.innerBox.foo){ }
//also works for functions:
box.nullFunction()?.foo
// and nonexistent methods and members:
box?.foo() && box?.bar

کد در بیان آنچه می‌خواهید مختصرتر است: اگر چیزی وجود دارد، به آن بروید. اگر نه، تعریف نشده برگردید.

globalThis

یک افزوده معقول دیگر به زبان اصلی، globalThis، انتزاعی از شیء سراسری موجود در زمینه فعلی است. شناخته شده ترین و قدیمی ترین آنها شی پنجره ای است که در جاوا اسکریپت در حال اجرا در مرورگر یافت می شود. اما محیط‌هایی مانند Node.js و وب‌کارگرها اشیاء ریشه‌ای خاص خود را دارند که دقیقاً همان هدف را دنبال می‌کنند: به ترتیب global و self.

globalThis کدی را می‌سازد که قابل حمل‌تر باشد (و بررسی‌های موجود را حذف می‌کند) با قرار دادن همه این اشیاء ریشه در یک شناسه که در هر محیطی که کد در آن اجرا می‌شود به شی ریشه جهانی حل می‌شود.

BigInt

قبل از ES11، بزرگ‌ترین عدد صحیحی که می‌توانست به طور ایمن در جاوا اسکریپت ارجاع داده شود، Number.MAX_SAFE_INTEGER بود که به ۹۰۰۷۱۹۹۲۵۴۷۴۰۹۹۱ (معروف به ۲^۵۳ – ۱) حل می‌شود. این ممکن است برای برخی از ما یک مشکل روزمره نباشد، اما برای بسیاری از برنامه‌های کاربردی، اندازه بسیار کوچکی است که برنامه نویسان را ملزم می‌کند از پوششی مانند عدد صحیح بزرگ. (توجه داشته باشید که کتابخانه اعداد صحیح بزرگ هنوز هم به عنوان یک polyfill مفید است.)

هنگام استفاده از نوع سنتی Number برای نشان دادن چنین اعداد بزرگی، با گرد کردن غیرمنتظره مواجه خواهید شد. (توجه داشته باشید که همه این نظرات برای اعداد بسیار کوچک نیز اعمال می شود، یعنی -۲^۵۳ – ۱).

با ES11، نوع BigInt برای این سناریوها تعبیه شده است. می توانید آن را با افزودن یک n به انتهای یک عدد تعریف کنید، مانند mySafeBigNumber = 9007199254740992n.

این واقعاً یک نوع جدید است، نه فقط کمی در مورد نوع شماره موجود. اگر نوع ۱۲ را انجام دهید، شماره را دریافت خواهید کرد. اگر type of mySafeBigNumber را انجام دهید، bigint دریافت می‌کنید. علاوه بر این، اگر هر چیز بدی مانند mySafeBigNumber - 12 را امتحان کنید، با این خطا مواجه خواهید شد: “نمی توان BigInt و انواع دیگر را ترکیب کرد، از تبدیل های صریح استفاده کنید.”

برای تبدیل بین این دو، می توانید از سازنده ها استفاده کنید. به عنوان مثال، می‌توانید let myUnsfeBigNumber = Number(mySafeBigNumber) را بنویسید، اما صبر کنید – نباید این کار را انجام دهید زیرا به‌تازگی یک شی Number بزرگ و ناامن ایجاد کرده‌اید. بنابراین در عوض، تنها زمانی تبدیل کنید که BigInt به کوچکتر از مقدار MAX_SAFE_INTEGER کاهش یابد.

در روشی مشابه، شایان ذکر است که مقایسه اعداد و BigInts برای برابری همیشه نادرست است، زیرا آنها انواع مختلفی دارند.

BigInt همچنین از نمایش در نمادهای باینری، اکتبر و هگز پشتیبانی می کند و از همه عملگرهای ریاضی معمولی که ممکن است انتظار داشته باشید پشتیبانی می کند به جز unary plus operator، که هدف آن تبدیل یک مقدار به یک عدد است. دلیل این امر نسبتا مبهم است، زیرا از ایجاد تغییرات در کد asm غیر JS.

در نهایت، ممکن است اشاره به آن اضافی به نظر برسد، زیرا در همان نام است، اما BigInt نشان دهنده اعداد صحیح است. اجرای کد x = 3n; x = x / 2n; به مقدار ۱n برای x منجر می شود. BigInts به آرامی بخش کسری اعداد را از بین می برد.

یکپارچگی را باطل کنید

ادغام باطل، شاعرانه‌ترین ویژگی ES11 است و به زنجیره اختیاری می‌پیوندد تا به ما در برخورد با ارزش‌های بی‌ثمر کمک کند. ادغام باطل نیز یک نماد جدید است، علامت سوال دوگانه: ??. این یک عملگر منطقی با رفتاری مشابه با عملگر منطقی OR (نماد دو لوله ||) است.

تفاوت بین ?? و || در نحوه برخورد اپراتور با مقادیر تهی در مقابل نادرست است. اکثر توسعه دهندگان جاوا اسکریپت با نحوه برخورد زبان با مقادیر غیربولی هنگام آزمایش درست/نادرست آشنا هستند (به طور خلاصه، false، ۰، null، رشته های خالی و تعریف نشده نادرست در نظر گرفته می شوند و هر چیز دیگری به درستی تبدیل می شود؛ جزئیات بیشتر اینجا). ما اغلب از این برای آزمایش وجود یک چیز استفاده می کنیم و اگر وجود ندارد، از چیز دیگری استفاده می کنیم، مانند این:

let meaningOfLife = answer || 42;

این امکان تنظیم نوعی پیش‌فرض را فراهم می‌کند، در حالی که به سرعت وجود چیزی را در answer آزمایش می‌کند. اگر واقعاً بخواهیم meaningOfLife به طور پیش فرض روی ۴۲ باشد، اگر هر یک از مقادیر نادرست روی answer تنظیم شده باشد، عالی کار می کند. اما اگر بخواهید فقط در صورت وجود یک مقدار تهی واقعی (به ویژه تهی یا تعریف نشده) به ۴۲ برگردید؟

؟؟ این کار را ساده می کند. شما از

استفاده می کنید

let meaningOfLife = answer ?? 42;

برای روشن شدن این موضوع، به تنظیم ۰ به عنوان مقدار در answer فکر کنید، و اینکه چگونه با استفاده از ||meaningOfLife اختصاص دهید. > در مقابل ?? مانند فهرست ۲. در این مورد، ما می خواهیم ۰ را به عنوان مقدار در صورت تنظیم نگه داریم، اما اگر answer واقعاً خالی باشد، از ۴۲ استفاده می کنیم. p>

فهرست ۲. ادغام در عمل را باطل کنید

let answer = 0;
let meaningOfLife = answer ?? 42; // meaningOfLife === 0 - what we want
let meaningOfLife = answer || 42; // meaningOfLife === 42 - not what we want
let answer = undefined;
let meaningOfLife = answer ?? 42; // meaningOfLife === 42 - what we want
let meaningOfLife = answer || 42; // meaningOfLife === 42 - also what we want

String.prototype.matchAll

مشخصات ES11 روش جدیدی را به نمونه اولیه String اضافه می کند: matchAll. این متد یک عبارت منظم را به نمونه String اعمال می کند و یک تکرار کننده را با تمام بازدیدها برمی گرداند. برای مثال، فرض کنید می‌خواهید یک رشته را برای همه مکان‌هایی که کلمه با t یا T شروع شده است اسکن کنید. می‌توانید این کار را مانند فهرست ۳ انجام دهید.

فهرست ۳. استفاده از matchAll

let text = "The best time to plant a tree was 20 years ago. The second best time is now.";
let regex = /(?:^|\s)(t[a-z0-9]\w*)/gi; // matches words starting with t, case insensitive
let result = text.matchAll(regex);
for (match of result) {
  console.log(match[1]);
}

چگالی ذاتی نحو regex را کنار بگذارید و بپذیرید که عبارت منظم تعریف شده در لیست ۳ کلماتی را پیدا می کند که با t یا T شروع می شوند. matchAll() آن regex را به رشته اعمال می کند و به شما پس می دهد. یک تکرار کننده که به شما امکان می دهد به سادگی و به راحتی از نتایج عبور کنید و به گروه های منطبق دسترسی داشته باشید.

واردات پویا

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

یک مثال ساده از نحو در فهرست ۴ نشان داده شده است.

فهرست ۴. وارد کردن ماژول Async

let asyncModule = await import('/lib/my-module.ts');

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

Promise.allSettled()

روش promise.allSettled() به شما امکان می دهد تا نتایج مجموعه ای از وعده ها را مشاهده کنید، خواه انجام شوند یا رد شوند. این را می توان با promise.all() مقایسه کرد که با یک وعده رد شده یا خطای nonpromise به پایان می رسد. promise.allSettled() آرایه ای از اشیاء را که نتایج هر وعده را توصیف می کند، برمی گرداند.

این هنگام تماشای گروهی از وعده‌های نامرتبط مفید است. یعنی شما می خواهید بدانید که چه اتفاقی برای همه آنها افتاده است، حتی اگر برخی در این وسط شکست بخورند. فهرست ۵ یک مثال دارد.

فهرست ۵. نمونه premt.allSettled()

let promise1 = Promise.resolve("OK");
let promise2 = Promise.reject("Not OK");
let promise3 = Promise.resolve("After not ok");
Promise.allSettled([promise1, promise2, promise3])
    .then((results) => console.log(results))
    .catch((err) => console.log("error: " + err));

در این مورد catch lambda روشن نمی‌شود (اگر از promise.all استفاده می‌کردیم این کار را می‌کردیم). در عوض، عبارت then اجرا می‌شود و آرایه‌ای با محتوای فهرست ۶ برگردانده می‌شود. نکته کلیدی در اینجا این است که وعده سوم اجرا شده است و ما می توانیم نتیجه آن را ببینیم حتی اگر promise2 قبل از آن شکست خورده باشد.

فهرست ۶. result.allSettled()

[
  {"status":"fulfilled","value":"OK"},
  {"status":"rejected","reason":"Not OK"},
  {"status":"fulfilled","value":"After not ok"}
]

صادر کردن نحو ستاره

این ویژگی قابلیت صادرات * را از یک ماژول اضافه می کند. قبلاً می‌توانستید * را از ماژول دیگری وارد کنید، اما اکنون می‌توانید با همان نحو مانند فهرست ۷ صادر کنید.

فهرست ۷. صادرات * مثال

Export * from '/dir/another-module.js'

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

مفید است

استانداردسازی for-in ordering

آیا می دانستید که ترتیب شمارش مجموعه ها در حلقه های for-in در جاوا اسکریپت تضمین نشده است؟ در واقع، توسط تمام محیط های جاوا اسکریپت (مرورگرها، Node.js و غیره) تضمین شده بود، اما اکنون این استاندارد عملاً توسط مشخصات جذب شده است. تئوری دوباره از عمل تقلید می کند.

یک مشخصات در حال تکامل

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