خبرکاو:

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

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

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

چگونه یک آرایه را با یک for loop فیلتر کنیم

قبل از معرفی ES6 در سال 2015، بسیاری از توسعه دهندگان برای مدیریت تقریباً تمام دستکاری آرایه ها به روش حلقه for تکیه می کردند. اما کد می تواند بسیار طولانی شود و درک آن آسان نباشد، که منجر به انتشار بسیاری از متدهای جاوا اسکریپت فردی مانند متد filter() شد (که به زودی با آن آشنا خواهید شد).

اما ابتدا، برای کامل بودن، نحوه انجام آن را با استفاده از حلقه‌های for تحلیل خواهیم کرد.

فرض کنید آرایه ای از اشیاء دارید که جزئیات کاربران مانند نام، سن و شغل را در خود نگه می دارد. می توانید تصمیم بگیرید که برای کاربرانی که سن آنها با شرایط خاصی مطابقت دارد فیلتر کنید.

 let users = [ { name: 'John', age: 25, occupation: 'gardener' }, { name: 'Lenny', age: 51, occupation: 'programmer' }, { name: 'Andrew', age: 43, occupation: 'teacher' }, { name: 'Peter', age: 81, occupation: 'teacher' }, { name: 'Anna', age: 47, occupation: 'programmer' }, { name: 'Albert', age: 76, occupation: 'programmer' }, ]

اکنون می توانید آرایه اشیاء را با استفاده از سن فیلتر کنید تا یک آرایه جدید که age آن بیشتر از 40 است و occupation آن برابر با programmer است را برگردانید:

 let filteredUsers = []; for (let i= 0; i<users.length; i++) { if (users[i].age > 40 && users[i].occupation === 'programmer' ) { filteredUsers = [...filteredUsers, users[i]]; } } console.log(filteredUsers);

با این کار، آرایه ای از سه کاربر که شرایط مشخص شده را دارند، برمی گرداند.

در حال حاضر، این کار خوب است. اما یک راه بهتر برای فیلتر کردن آرایه استفاده از روش ES6 filter() است.

چگونه یک آرایه را با روش filter() فیلتر کنیم

متد filter() یک روش ES6 است که یک نحو تمیزتر برای فیلتر کردن از طریق یک آرایه ارائه می‌کند. عناصر جدید را در یک آرایه جدید بدون تغییر آرایه اصلی برمی گرداند.

 // Syntax myArray.filter(callbackFn)

در تابع callback، شما به هر عنصر، index و خود آرایه اصلی دسترسی دارید:

 myArray.filter((element, index, array) => { /* ... */ })

بیایید همین مثال را با فیلتر کردن کاربر بر اساس age و occupation انجام دهیم:

 let filteredUsers = users.filter((user) => { return user.age > 40 && user.occupation === 'programmer'; }); console.log(filteredUsers);

این خروجی دقیق را برمی گرداند، اما متوجه خواهید شد که کد شما کاملاً تمیز است. همچنین مهم است بدانید که می توانید کد بالا را با یک خط دوباره بنویسید و عبارت return را بردارید:

 let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer'); console.log(filteredUsers);

هر دو بلوک کد از کاربران فیلتر شده خروجی می گیرند:

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

به عنوان مثال، می توانید آرایه فیلتر شده را مرتب کنید و آرایه ای از نام آنها را برگردانید:

 let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer') .sort((a, b) => a.age - b.age) .map(user => user.name); console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert']

فیلتر کردن آرایه ها در جاوا اسکریپت با روش JavaScript filter() بیشتر است. می‌توانید در این آموزش JavaScript Array.filter() اطلاعات بیشتری در مورد روش فیلتر جاوا اسکریپت بخوانید و همچنین می‌توانید در مورد تفاوت بین متدهای () find و filter() جاوا اسکریپت اینجا بیاموزید.

نحوه فیلتر کردن یک شی در جاوا اسکریپت

اشیاء جاوا اسکریپت مانند آرایه ها یا رشته ها قابل تکرار نیستند (شما نمی توانید آنها را حلقه بزنید). این بدان معناست که شما نمی توانید filter() ، متد حلقه for یا هر روش تکراری مستقیماً روی یک شی استفاده کنید. سپس چگونه یک شی را در جاوا اسکریپت فیلتر می کنید؟

شما می توانید این کار را با تبدیل شی به آرایه با استفاده از هر یک از متدهای ثابت شی مانند Object.keys() , Object.values() یا Object.entries() انجام دهید. سپس می‌توانید از متد filter() برای فیلتر کردن آرایه و برگرداندن یک آرایه جدید از عناصر فیلتر شده استفاده کنید.

فرض کنید یک شی دارید که اطلاعات کاربران مانند نام، سن و شغل را در خود دارد. این روش‌های ثابت شی می‌توانند کلیدها، مقادیر یا هر جفت کلید-مقدار را به‌عنوان یک آرایه برگردانند.

 const userDetails = { firstName: "Jane", lastName: "Daniels", userName: "jane.daniels", email: "[email protected]", comapny: "Example Inc.", address: "1234 Example Street", age : 25, hobby: "Singing" }; let keysArray = Object.keys(userDetails); console.log(keysArray);

این یک آرایه از کلیدهای شی را برمی گرداند:

 ['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']

اکنون می توانید از متد filter() برای فیلتر کردن آرایه و برگرداندن یک آرایه جدید از عناصر فیلتر شده استفاده کنید:

 let filteredKeys = keysArray.filter(key => key.length > 5); console.log(filteredKeys);

با این کار آرایه ای از کلیدها که طول آنها بزرگتر از 5 است را برمی گرداند:

 ['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']

اما قطعاً می خواهید عملیات فیلتر مفیدتری را انجام دهید. برای مثال، می‌توانید جفت کلید-مقدار شی ما را فیلتر کنید که شامل نامی از یک شی بزرگ است. سپس می توانید ابتدا کلیدها را دریافت کنید، آنها را فیلتر کنید و از متد reduce() برای reduce کلیدهای فیلتر شده به یک شی با کلیدهای فیلتر شده و مقادیر آنها استفاده کنید:

 const userDetails = { firstName: "Jane", lastName: "Daniels", userName: "jane.daniels", email: "[email protected]", comapny: "Example Inc.", address: "1234 Example Street", age : 25, hobby: "Singing" }; const userNames = Object.keys(userDetails) .filter((key) => key.includes("Name")) .reduce((object, key) => { return Object.assign(object, { [key]: userDetails[key] }); }, {}); console.log(userNames);

این یک شی را با کلیدهای فیلتر شده و مقادیر آنها برمی گرداند:

 { firstName: "Jane", lastName: "Daniels", userName: "jane.daniels" }

بسته شدن

در این مقاله، نحوه فیلتر کردن یک آرایه در جاوا اسکریپت را با استفاده از روش حلقه for و filter() آموختید. filter() نحو بهتری برای فیلتر کردن آرایه ها در جاوا اسکریپت ارائه می دهد.

شما همچنین یاد گرفتید که چگونه یک شی را در جاوا اسکریپت با تبدیل آن به آرایه و استفاده از متد filter() فیلتر کنید.

با تشکر برای خواندن، و از برنامه نویسی لذت ببرید!

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