https://virgool.io/feed/@jEbrahimi Front-End Developer fa 2026-06-07 08:34:37 https://files.virgool.io/upload/users/19711/avatar/1otlwT.jpeg?height=120&width=120 https://virgool.io/@jEbrahimi https://virgool.io/iran-react-community/%D8%A8%D8%B1%D8%B3%DB%8C-%D8%AF%D9%82%DB%8C%D9%82-%D9%88-%DA%A9%D8%A7%D9%85%D9%84-%DA%86%D8%B1%D8%AE%D9%87%DB%8C-%D8%AD%DB%8C%D8%A7%D8%AAlifecycle-%D8%AF%D8%B1-%D8%B1%DB%8C%D8%A7%DA%A9%D8%AA-je6hztqzqulm ری‌اکت (React) چیست؟ری‌اکت یک کتابخانه‌ی جاوا اسکریپت برای ساخت رابط کاربری است. برای شروع یک پروژه با ری‌اکت می‌توانید از آموزش زیر استفاده کنید. استفاده از ری اکت بدون Node.jsچرا باید از متدهای چرخه‌ی حیات استفاده کنیم؟چرخه‌ی حیات در ری‌اکتدر اطراف ما همه چیز از طریق یک چرخه‌ی تولد شروع می‌شود، بعد از تولد شروع به رشد (به‌روزرسانی) می‌کند و در یک نقطه نابود می‌شود مانند درختان، یک نرم‌افزار، خود ما انسان‌ها و یا یک Component در ری‌اکت، همه‌ی این‌ موارد به وجود می‌آیند، رشد و تغییر می کنند و در یک نقطه نابود می‌شوند.متد‌های چرخه‌ی حیات (Lifecycle)، متد‌هایی هستند که برای دسترسی به هر یک از مراحل تولد تا نابودی یک Component مورد استفاده قرار می گیرند. فرض کنید می‌خواهید یک برنامه مشابه یوتیوب بسازید. که این برنامه از اینترنت برای لود کردن ویدئو و از باتری به عنوان منبع تغذیه استفاده می‌کند.اگر کاربر در حال تماشای ویدئو در این برنامه باشد و بطور هم زمان یک برنامه دیگر را باز کند در اینجا ما باید مطمئن باشیم که از باتری و اینترنت به کارآمدترین روش ممکن استفاده می‌کنیم. یعنی وقتی کاربر وارد یک برنامه‌ی دیگر می‌شود ما باید مطمئن شویم که پخش فیلم قطع شده و در نتیجه از اینترنت و باتری استفاده نشود.این کار را می توانیم با استفاده از متد‌های چرخه‌ی حیات در ری‌اکت انجام دهیم.وقتی در یک پروژه تعداد component ها زیاد می‌شود. این خیلی مهم است که هر component وقتی کار خود را انجام داد نابود شود و دیگر از منابع استفاده نکند.با یادگیری چرخه‌ی حیات و تمرین درست می‌توانید برنامه‌هایی با کیفیت بالا و کارایی مناسب بسازید.نمودار چرخه‌ی حیات در ری‌اکتبه طور کلی می‌توان چرخه‌ حیات در ری‌اکت را به سه مرحله تقسیم کرد:نصب کردن (Mounting)به‌روزرسانی (Updating)نابودی (Unmounting)خوب وقتشه که تک تک این مراحل رو با هم برسی کنیم:مرحله اول: نصب کردندر ری‌اکت نصب کردن به معنی بارگذاری component در DOM است.این مرحله شامل مجموعه‌ای از متدها است که موقع مقدار دهی اولیه component و بارگذاری آن در DOM فراخوانی می‌شوند.متدها به ترتیب زیر فراخوانی می‌شوند:1- Constructorهر وقت یک component ساخته می‌شود اولین متدی که فراخوانی می‌شود constructor است. این متد فقط یکبار در طول چرخه‌ حیات فراخوانی می‌شود. ما از این متد برای تعریف مقادیر و state استفاده می‌کنیم.constructor() { super(); this.state = { name: 'Jon Snow', age: 22 } } در ری‌اکت constructor تنها جایی است که می توان از this.state استفاده کرد، در بقیه متدها فقط می‌توان با استفاده از this.setState مقدار آن را تغییر داد.2- static getDerivedStateFromPropsمتد getDerivedStateFromProps درست قبل از render فراخوانی می‌شود. این متد می‌تواند یک Object برای به‌روزرسانی state و یا مقدار null را برای جلوگیری از به‌روزرسانی بازگرداند.ما وقتی از این متد استفاده می‌کنیم که بخواهیم state خود را به وسیله‌ی props به‌روزرسانی کنیم.این یک متد static است پس به کلید واژه‌ی this دسترسی ندارد. این متد می‌تواند به state و props دسترسی داشته باشد. از این رو وقتی یک state وابسته به props تعریف می‌کنیم با استفاده از این متد می‌توانیم آن را به‌روزرسانی کنیم.this.state = { name: 'Harry' }; static getDerivedStateFromProps ( nextProps, prevState ) { if (prevState.name !== nextProps.name) { return { name: nextProps.name } } return null; }در مثال بالا ابتدا یک متغیر state با نام name و مقدار 'Harry' تعریف کرده‌ایم، با پاس دادن آرگومان‌های nextProps و prevState به getDerivedStateFromProps به props جدید و state موجود دسترسی پیدا کردیم و سپس با استفاده از دستور if چک می‌کنیم که اگر مقدار props جدید با state موجود متفاوت بود آن را به‌روزرسانی کن و اگر با هم مساوی بودند نیاز به به‌روزرسانی نیست و مقدار null را بازگردانده می‌شود.3- renderاین یک متد ضروری در component های ری‌اکت است، در این متد المنت‌ها آماده‌ی نصب در DOM می‌شوند.در زیر یک مثال ساده از متد render در ری‌اکت را مشاهده می‌کنید: render() { return ( <div> <h1>Hello World!</h1> </div> ) }همانطور که در مثال بالا مشاهده می‌کنید، متد render یک JSX را برای نمایش در UI باز می‌گرداند. یک متد render می‌تواند وقتی چیزی برای نمایش ندارد مقدار null را بازگرداند.4- componentDidMountبعد از این که ما برای اولین بار component خود را render کردیم این متد فراخوانی می‌شود.در این متد ما می‌توانیم به DOM دسترسی داشته باشیم، اگر هم بخواهیم یک کتابخانه مانند Highcharts یا D3 به پروژه‌ی خود اضافه کنیم از این متد استفاده می‌کنیم.componentDidMount() { const modal = document.getElementById('modal'); window.addEventLisener('click', () => { 'some code to close modal' }); } یکی دیگر از مهم‌ترین کاربردهای این متد استفاده از آن برای درخواست های Ajax و API است.componentDidMount() { fetch('url') .then(response => response.json() ); .then(data => this.setState({ info: data }) ); }مرحله دوم: به‌روزرسانی1- static getDerivedStateFromPropsهمان گونه که در تصویر بالا نمودار چرخه‌ی حیات را مشاهده می‌کنید. می‌توانید ببینید که متد getDerivedStateFromProps در مرحله اول و دوم مشرک است. البته کارایی این متد در این مرحله بیشتر است.اگر احتیاج دارید که state خود را با تغییرات props به‌روزرسانی کنید. می‌توانید با بازگرداندن یک Object در این متد این کار را انجام دهید.* البته ناگفته نماند که معمولا بروزرسانی state توسط props توصیه نمی‌شود. و باید به عنوان آخرین راه‌حل از آن استفاده کرد.2- shouldComponentUpdateزمانی که یک props جدید دارید یا از ()setState استفاده می‌کنید، component شما به طور خودکار توسط ری‌اکت دوباره رندر می‌شود. تا شما بتوانید تغییرات را در UI مشاهده کنید.اما با استفاده از این متد شما می‌توانید به component خود اجازه ندهید که دوباره رندر شود.به طور کلی این متد وقتی می‌تواند مفید باشد که شما نمی‌خواهید ری‌اکت تغییرات جدید state و props را رندر کند.شما نمی‌توانید در این متد از ()setState برای به‌روزرسانی state استفاده کنید.shouldComponentUpdate(nextProps, nextState) { return this.props.title !== nextProps.title || this.state.input !== nextState.input; } همان طور که در مثال بالا مشاهده می‌کنید این متد مقادیر nextProps و nextState را به عنوان آرگومان می‌پذیرد و باید یک Boolean را در جواب سوال "آیا باید دوباره رندر کنم؟" بازگرداند که به طور پیش فرض مقدار true را باز می‌گرداند.3- renderدر این بخش component شما دوباره رندر می‌شود.4- getSnapshotBeforeUpdateمتد ()getSnapshotBeforeUpdate یکی دیگر از متد‌های چرخه‌ی حیات ری‌اکت است که به تازگی معرفی شده و برای امنیت بیشتر جایگیزین متد ()componentWillUpdate شد.getSnapshotBeforeUpdate(revProps, prevState) { // ... }این متد درست قبل از به‌روزرسانی DOM فراخوانی می‌شود. هر مقداری که بازمی‌گرداند به عنوان آرگومان به متد ()componentDidUpdate پاس داده می‌شود.یادتون باشه که این متد به ندرت استفاده می‌شود یا اصلا استفاده نمی‌شود. مگر این که بخواهید به یکی از attribute های DOM دسترسی داشته باشید و اون رو به عنوان آرگومان به ()componentDidUpdate پاس بدهید.5- componentDidUpdateحالا که به این بخش رسیدیم یعنی تغییرات ما در DOM اعمال شد. بیشترین مورد استفاده از این متد برای به‌روزرسانی DOM با تغییرات props و state است.در این متد ما به سه چیز دسترسی داریم، props موجود، State موجود و مقداری که متد getSnapshotBeforeUpdate بازگردانده است.componentDidUpdate(prevProps, prevState, snapshot) { if (this.props.userName !== prevProps.userName) { this.fetchData(this.props.userName); } }در مثال بالا ما مقدار props جدید را با props موجود مقایسه کردیم و اگر مقدار آن متفاوت بود آن را به fetchData پاس می‌دهیم.مرحله 3: نابودیاین مرحله فقط شامل یک متد به نام ()componentWillUnmount است. همان طور که از نامش پیداست این متد قبل از نابود شدن component اجرا می‌شود. اگر نیاز به هرگونه عملیات پاکسازی برای component خود دارید می‌توانید از این متد استفاده کنید.شما در این متد اجازه‌ی استفاده از ()setState برای تغییر state را ندارید.به عنوان مثال برای این متد، وقتی که می‌خواهید یک ثانیه شمار بسازید و از ()setInterval استفاده می‌کنید باید راهی وجود داشته باشد که وقتی دیگر از این component در پروژه‌ی خود استفاده نمی‌کنیم بتوانیم جلوی اجرا شدن آن را با ()clearInterval بگیریم.this.state = { stopWatch: 0 } stopWatchHandler = () => { this.setState(prevState => { return { stopWatch: prevState.stopWatch + 1 } }); } componentDidMount() { setInterval(this.stopWatchHandler, 1000); } componentWillUnmount() { clearInterval(this.stopWatchHandler); }برای ساخت ثانیه شمار در مثال بالا ابتدا یک متغیر state با نام stopWatch و مقدار اولیه 0 در کامپوننت خود تعریف کرده‌ایم. سپس در متد stopWatchHandler یک واحد به مقدار stopWatch اضافه می‌کنیم. مرحله ی بعد در متد componentDidMount با استفاده از setInterval متد stopWatchHandler را هر یک ثانیه اجرا می‌کنیم و مقدار stopWatch را یک واحد افزایش می‌دهیم.حالا فرض کنید که ثانیه شمار بخشی از پروژه شما است. که پس از استفاده دیگر به آن احتیاج ندارید اگر تابع setInterval را با استفاده از clearInterval غیرفعال نکنید این تابع هر یک ثانیه اجرا می‌شود و یک واحد به stopWatch اضافه می‌کند. این یعنی حتی وقتی که دیگر نیازی به ثانیه شمار در پروژه‌ی خود ندارید، ثانیه شمار همچنان در حال اجرا در پروژه‌ی شما است و از منابع استفاده می‌کند.برای جلوگیری از این کار می‌توانید از متد componentWillUnmount استفاده کنید. این متد آخرین مرحله از چرخه‌ی حیات در ری‌اکت می‌باشد که در آن می توانید clearInterval را اجرا کرده و از اجرای ثانیه شمار در موقعی که به آن احتیاج ندارید جلوگیری کنید.خب به پایان آموزش چرخه‌ی حیات در ری‌اکت رسیدیم. امیدوارم با استفاده از چیزایی که تو این آموزش یاد گرفتید بتونید برنامه‌هایی با کیفیت و بهینه بنویسید و اگر نظر، پیشنهاد و یا چیزی از قلم افتاده بود تو قسمت نظرات با من به اشتراک بزارین تا بتونم تو آموزش های بعدی ازشون استفاده کنم. jEbrahimi jEbrahimi Tue, 21 May 2019 22:45:17 +0430 https://virgool.io/iran-react-community/try-react-without-nodejs-mjscaihovuqa ری اکت چیست؟ری اکت یک کتابخانه برای جاوا اسکریپت است که برای ساخت رابط کاربری به کار میرود. که توسط فیسبوک ساخته شده و پشتیبانی می شود.برای دسترسی به documentation ری اکت می‌توانید از لینک زیر استفاده کنید.https://reactjs.org/tutorial/tutorial.html#overviewبرای راه اندازی یک پروژه با ری اکت چند راه وجود دارد که ما در این آموزش روش راه اندازی ری اکت بدون Node.js را برسی می‌کنیم و اشاره ای کوتاه به 2 روش دیگر هم داریم.روش اول: استفاده از create-react-appتقریبا ساده ترین راه برای راه اندازی یک پروژه با ری اکت استفاده از پکیج create-react-app می باشد که توسط خود فیسبوک ساخته شده است. https://github.com/facebook/create-react-app در این روش احتیاج به هیچ گونه پیکربندی( configuration ) نداریم و فقط با اجرای دستور زیر در npm می‌توانیم پروژه ی خود را با ری اکت شروع کنیم.npx create-react-app my-app cd my-app npm startلازم به ذکر است که در این روش تقریبا تمام پکیج های مورد نیاز (live-server, babel, webpack و ...) نصب می شود.روش دوم: راه اندازی ری اکت با پکیج های دلخواهدوستانی که علامند به این روش هستند می‌توانند با استفاده از آموزش های زیر پروژه خودشون رو با ری اکت شروع کنند.آموزش فارسی: آموزش بسیار کامل و دقیقی که توسط عامر لطفی اوریمی در ویرگول تهیه شده است.آموزش انگلیسی: برای دوستان علاقه مند ولی با وجود آموزش کامل فارسی فکر نکنم احتیاجی داشته باشین.روش سوم: استفاده از ری اکت بدون Node.jsخوب اگه یه توسعه دهنده وب هستین که با CSS، HTML و JavaScript آشنایی دارین می‌تونین با این روش بدون احتیاج به Node.js و ابزار پیچیده یه پروژه رو با ری اکت راه اندازی کنید.1- افزودن پکیج های react-dom, react و babel به فایل HTML<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js">کدهای بالا را می‌توانید به انتهای تگ <head> اضافه کنید.*در کد های بالا از CDN استفاده شده شما می‌توانید ابتدا فایل ها را دانلود کرده و بعد به پروژه ی خود اضافه کنید.2- افزودن یک container برای ری اکت به فایل HTML<div id="root"></div>این کد را به ابتدای <body> اضافه کنید.3- اضافه کردن فایل App.js به پروژه(این فایل باید شامل برنامه ری اکت شما باشد)ابتدا در پوشه پروژه یک فایل با نام App.js بسازید و سپس:<script type="text/babel" src="./App.js">کد بالا را به انتهای <body> اضافه کنید.دو تا نکته راجب اضافه کردن این فایل:اول: حتما باید بعد از فراخوانی پکیج ها به فایل HTML اضافه شود.دوم: type تگ باید مساوی "text/babel" باشد.خوب حالا می‌تونین کد های ری اکت خودتونو داخل App.js بنویسین به عنوان مثال:class App extends React.Component { render() { return ( <div> <h1>Hello React</h1> </div> ) } } ReactDOM.render(<App />, document.getElementById('root'));خوب دوستان اگه نظر، پیشنهاد و یا سوالی دارین خوشحال میشم تو قسمت نظرات مطرح کنید تا بتونم تو نوشته های بعدیم ازشون استفاده کنم. jEbrahimi jEbrahimi Sun, 14 Apr 2019 01:09:53 +0430 https://virgool.io/JavaScript8/work-with-javascript-arrays-like-a-boss-vgpc6o8krjdr یک بار برای همیشه کار با آرایه ها در جاوا اسکریپت رو یاد بگیرید! آرایه ها نوعی متغیر هستند، که می توانند چندین مقدار را در خود ذخیره کنند.var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];به هر مقدار در آرایه element می گویند، که هر element دارای جایگاهی درون آرایه است که به آن جایگاه index گفته می‌شود.در مثال بالا هر کدام از مقادیر 1 تا 10 یک element هستند.مقادیر داخل یک آرایه ی جاوا اسکریپت می توانند از هر نوعی باشند، boolean ، string ، object و حتی خود آرایه ها هم می توانند عضوی از آرایه ی دیگر باشند. تعریف کردن آرایهاز آنجایی که آرایه ها تعداد زیادی از مقادیر(حداکثر تا 1-32^2 ) را در خود ذخیره کنند، می توانند در برنامه های ما بسیار مفید باشند.برای ایجاد آرایه کافیه یه متغیر با var (یا let و const) تعریف کنید. بعد از این که متغیر رو ایجاد کردین برای این که به جاوا اسکریپت بفهمونین که دارین آرایه تعریف می کنین دو تا راه دارین، استفاد از [] یا می تونین از کلید واژه new Array استفاده کنین.تعریف آرایه با استفاده از []:var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];برای تعریف یک آرایه خالی هم می تونین مثل زیر عمل کنین:var myArray = [];تعریف آرایه با استفاده از کلید واژه new Array:var lostArray = new Array("Jack", "Sawyer", "John", "Desmond" ); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);اگر می خواهید آرایه ای با تعداد عضو مشخص تعریف کنید می توانید تعداد اعضا رو به عنوان پارامتر به سازنده(new Array) بدین و آرایه شما با تعداد عضو دلخواه شما ساخته بشه (هر عضو با مقدار undefined در آرایه ذخیره می شود).var myArray = new Array(80);این آرایه داری 80 عضو است و هر عضو آن برابر با undefined هستند.برای تعریف آرایه خالی با کلید واژه new هم می توانید از دستور زیر استفاده کنید:var myArray = new Array();دسترسی به اعضای آرایهآرایه ها در جاوا اسکریپت zero-based هستند، یعنی index(جایگاه) اولین element (عضو) هر آرایه 0 است. این از جمله موضوعاتیه که دوستانی که تازه شروع به یادگیری جاوا اسکریپت کردن باید بیشتر روش دقت کنن.آرایه زیر را در نظر بگیرید:var myArray = ["Superman", 84, true, ["Batman", "Robin"] ]; این آرایه در index 0 یک string، در index 1 یک number، در index 2 یک boolean و در index 3 هم یک آرایه وجود دارد.console.log(typeof myArray[0]); // => string console.log(typeof myArray[1]); // => number console.log(typeof myArray[2]); // => boolean console.log(typeof myArray[3]); // => object توسط عملگر typeof میتوان نوع داده ای یک مقدار یا متغیر را برگرداند .در جاوا اسکریپت خروجی typeof برای آرایه ها object است، برای تشخیص آرایه ها از کد زیر استفاده کنید:Array.isArray(myArray[3]); // => trueمثالی دیگر از جایگاه اعضای آرایه:var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(myArray[0]); // => “Jack” console.log(myArray[3]); // => “Desmond”همون طور که دیدیم آرایه می تونه ابعاد مختلفی داشته باشه، یعنی می تونیم آرایه ای داشته باشیم که عضو یه آرایه دیگه باشه، خوب چطور میشه به اعضای این آرایه ها دسترسی داشت؟با یه مثال بریم جلو فرض کنین که آرایه ی زیر معرف اعضای یک خانواده است که بچه های خانواده تو آرایه ی مخصوص به خودشون داخل آرایه اصلی تعریف شدند.var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];می تونیم آرایه رو به شکل زیر نشون بدیم:اگه بخوایم به Lisa دسترسی داشته باشیم:ابتدا index آرایه اصلی(کل خانواده) و بعد index آرایه فرزندان را انتخاب می کنیم.var lisa = familyArray[2][1]; console.log(lisa); // => "Lisa"افزودن عضو جدید به آرایهتا اینجای کار دیدیم که چه طور می‌تونیم یه آرایه تعروف کنیم و به اعضای اون دسترسی داشته باشیم، حالا برای اضافه کردن یه عضو جدید به آرایه ای که ساختیم چی کار باید بکنیم؟var myArray = [ "Kate", "Sun"]; myArray[2] = "Juliet"; console.log(myArray); // => "Kate, Sun, Juliet"در مثال بالا ابتدا یه آرایه با دو عضو ساختیم، حالا می تونیم یه عضو جدید به index 2 این آرایه اضافه کنیم(فراموش نکنین که آرایه ها zero-based هستن) که موقع ساخت آرایه اصلا وجود نداشت.حالا چه اتفاقی رخ می‌ده اگه تو مثال بالا به جای اضافه کردن عضو در index 2 عضو جدیدمون رو در index 5 اضافه کنیم؟ عضوی که تعریف کردیم تو جایگاه 5 قرار می گیره و اعضایی که این وسط تعریف نشدن undefined می‌شوند.var myArray = ["Kate", "Sun"]; myArray[5] = "Juliet"; console.log(myArray.length); // => "6" console.log(myArray); // => ["Kate", "Sun", undefined, undefined, undefined, "Juliet"]شما می‌توانید تعداد اعضا یا طول آرایه را با استفاده از خاصیتی به نام length بدست آورید. در مثال بالا همان طور که می بینید طول آرایه 6 است.push()راه دیگری که برای اضافه کردن عضو به آرایه داریم استفاده از متد push() است. با استفاده از این متد می توانیم یک یا چند عضو جدید به آخر آرایه اضافه کنیم.var myArray = [ "Kate", "Sun"]; myArray.push("Juliet"); myArray.push("Libby", "Shannon"); console.log(myaArray); // => ["Kate", "Sun", "Juliet", "Libby", "Shannon"]unshift()متد unshift() مثل push() عمل می‌کند با این تفاوت که عضو جدید را به اول آرایه اضافه می کند.var myArray = [ "Kate", "Sun"]; myArray.unshift("Juliet"); myArray.unshift("Libby", "Shannon"); console.log(myArray); // Prints ["Libby", "Shannon", "Juliet", "Kate", "Sun"]پاک کردن عضو از آرایهبا استفاده از متد‌های pop() و shift() می‌توانید عضوی را از آرایه پاک کنید. این دو متد مثل دو متدی که برای اضافه کردن عضو به آرایه داشتیم عمل می‌کنند، متد pop() یک عضو از آخر آرایه پاک می کند و متد shift() یک عضو از اول آرایه پاک می کند.var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Removes "Kate" myArray.shift(); // Removes "Jack" console.log(myArray); // => ["Sawyer", "John", "Desmond"]برسی چند ابزار دیگر برای کار با آرایه هاsplice()با استفاده از این متد می توانید عضوی دلخواه را پاک و یا عضوی جدید را به آرایه اضافه کنید.این متد می‌تواند به تعداد دلخواه ورودی داشته باشد ولی داشتن 2 ورودی اول برای آن الزامی می باشد.var months = ["farvardin", "ordibehesht", "tir"]; months.splice(2, 0, "khordad"); console.log(months); // => ["farvardin", "ordibehesht", "khordad", "tir"] در مثال بالا "khordad" را به index 2 آرایه ی months اضافه کردیم.اولین عدد (2 در مثال بالا) که به عنوان ورودی به متد می دهیم index را مشخص می کند.دومین عدد (0 در مثال بالا) که ورودی دوم متد است تعداد اعضایی که باید پاک شوند را مشخص می کند.(صفر به این معنی است که عضوی پاک نمی شود)بقیه ورودی هایی که به متد می‌دهیم به عنوان عضو جدید به آرایه در جایگاهی که مشخص کردیم اضافه می‌شوند.چند مثال دیگر را برسی می کنیم:var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; myFish.splice(3, 1); console.log(myFish); // => ["angel", "clown", "drum", "sturgeon"]در بالا از جایگاه سوم به تعداد یک عضو از آرایه پاک می شود. var myFish = ['angel', 'clown', 'drum', 'sturgeon']; myFish.splice(2, 1, 'trumpet'); console.log(myFish); // => ["angel", "clown", "trumpet", "sturgeon"] عضو جایگاه دوم را پاک می کند و 'trumpet' را به آرایه اضافه می کند.var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); console.log(myFish); // => ["parrot", "anemone", "blue", "trumpet", "sturgeon"] دو عضو اول آرایه را پاک می کند و سه عضو جدید را به اول آرایه اضافه می کند. includes() این متد برسی می‌کند که آیا عضو انتخابی شما در آرایه وجود دارد؟ و در صورت وجود مقدار true و در صورت عدم وجود false را بر می گرداند.var array1 = [1, 2, 3]; console.log(array1.includes(2)); // => true var pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // => true console.log(pets.includes('at')); // => falseامیدوارم این نوشته نقشی هر چند کوچک در روند یادگیری جاوا اسکریپت برای شما داشته باشه، اگه نظر یا پیشنهادی برای بهتر شدن این نوشته یا نوشته های بعدی من دارین خیلی خوشحال می‌شم که اونو در بخش نظرات به اشتراک بزارین. jEbrahimi jEbrahimi Thu, 22 Nov 2018 18:51:56 +0330 https://virgool.io/JavaScript8/%D8%AA%D9%88%D8%A7%D8%A8%D8%B9-%D9%85%D8%B1%D8%AA%D8%A8%D9%87-%D8%A8%D8%A7%D9%84%D8%A7higher-order-functions-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-yeezrn8otvbw جاوا اسکریپت یکی از زبان های برنامه نویسی سطح بالا محسوب میشه که امروزه قدرتش بر کسی پوشیده نیست، یکی از قابلیت های جاوا اسکریپت که اونو به یه زبان برنامه نویسی فانکشنال مناسب تبدیل کرده اینه که اجازه میده از توابع مرتبه بالا استفاده کنین. توابع مرتبه بالا توابعی هستند که یک تابع را به عنوان پارامتر ورودی دریافت و یا به عنوان خروجی ارسال می کنند، دانستن اینکه چه زمانی و چگونه از این توابع استفاده می شود ضروری است ،استفاده از این توابع باعث میشه کد هایی که می نویسین ساده تر و قابل فهم تر بشه. توابع مرتبه بالا(Higher-Order Functions) در جاوا اسکریپتFilterفیلتر یک متد برای آرایه ها است، پارامتری که فیلتر می پذیرد یک فانکشن تست است که حتما خروجی آن باید Boolean باشد، خروجی تابع فیلتر یک آرایه جدید از عضو های تابع اولیه است که در تست فانکشن true را برگرداندند.تصور کنید کدی را می نویسید که شامل لیست افرادی است که می خواهید با فیلتر افرادی که 18 سال و یا بیشتر از آن سن دارند را پیدا کند.const people = [ { name: ‘John Doe’, age: 16 }, { name: ‘Thomas Calls’, age: 19 }, { name: ‘Liam Smith’, age: 20 }, { name: ‘Jessy Pinkman’, age: 18 }, ];حالا اگه ما بخوایم بدون استفاده از توابع مرتبه بالا افرادی که 18 سال یا بیشتر سن دارند رو پیدا کنیم باید کدی بنویسیم مثل کد زیر:const peopleAbove18 = (collection) => { const results = []; for (let i = 0; i < collection.length; i++) { const person = collection[i]; if (person.age >= 18) { results.push(person); } } return results; };حالا می خوایم با استفاده از توابع مرتبه بالا و filter() کدی بنویسیم که مشابه کار کد بالا رو انجام بدهconst peopleAbove18 = (collection) => { return collection .filter((person) => person.age >= 18); }و یا حتی: const peopleAbove18 = people.filter(above18 => above18.age >= 18); به همین سادگی می تونیم با استفاده از توابع مرتبه بالا حجم کد نویسی خودمونو کم کنیم و همون طور که می دونید کم شدن حجم کد باعث کم تر شدن میزان اشتباه تو کد نویسی میشه علاوه بر این باعث خوانایی بیشتر کد های ما می شود .Mapیکی دیگه از چیزایی که خیلی در توابع مرتبه بالا استفاده می شود متد map() است، که یک فانکشن را دریافت می کند و آن را بر روی تک تک اعضای آرایه اعمال می کند.برای مثال در یک رشته از اعداد وقتی بخواهیم همه ی اعضا را به توان 2 برسانیم از متد map() استفاده می کنیم:const numbers = [1,2,3,4,5,6,10,20]; const squares = numbers.map((x) => Math.pow(x,2)); console.log(squares); //[1, 4, 9, 16, 25, 36, 49, 64, 81]و یا برای نمایش نام و سن افراد در مثال قبلی از کد زیر استفاده می کنیم:const showInfo = people.map(arr => arr.name + "|" + arr.age);Reduceیک تابع برای حکومت کردن بر همه آنهاآخرین و قدرتمندترین متدی که تو این مطلب در موردش حرف می زنیم Reduce هست، با این تابع می تونیم هر گونه تغییری که دلمون می خواد تو لیستمون ایجاد کنیم.reduce یک تابع و یک مقدار اولیه برای شروع رو دریافت میکنه array.reduce(function(total, currentValue, currentIndex, arr), initialValue) چند مثال با reduceضرب کردن اعضای آرایه:const numbers = [2,3,4,5]; const product = numbers.reduce((acc) => acc * 2, 1); console.log(product); // [4, 6, 8, 10]پیدا کردن اعداد زوج:const isEven = (x) => { return x % 2 === 0; } const numbers = [12,324,213,4,2,3,45,4234]; const callback = (acc, x) => { if (isEven(x)){ acc.push(x) } return acc } const evenNumbers = numbers.reduce(callback, []); console.log(evenNumbers); //[12, 324, 4, 2, 4234] پیاده سازی map با raduce:function map(arr, callback){ return arr.reduce((acc, x) => { acc.push(callback(x)); return acc; }, []); } // squaring example const squares = map([1,2,3,4,5], (x) => Math.pow(x,2) ); console.log(squares); // [1, 4, 9, 16, 25] jEbrahimi jEbrahimi Wed, 24 Oct 2018 04:22:58 +0330