برنامه نویسی

JS | آرایه غیر متمایز: فیلتر ، نقشه ، برش ، Concat توضیح داده شده!

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

  • من ابتدا قطعه های کد خود را بر روی scribbler.live ایجاد می کنم ، که یک بستر خارق العاده است که به شما امکان می دهد بدون نیاز به تنظیم دستی ، یک نوت بوک JavaScript ، کامپایلر آنلاین و ویرایشگر را اجرا کنید.
  • علاوه بر این ، من پیوندی به قطعه های کد را شامل می شوم که شامل تمام نمونه های کد است تا بتوانید قطعه را باز کرده و خودتان آن را اجرا کنید تا نتایج را ببینید.
  • من استفاده خواهم کرد scrib.show از scribbler.live ، معادل آن است console.log

بیایید شیرجه بزنیم.

فهرست مطالب

روشهای غیر جهش یافته

این روش ها آرایه اصلی را تغییر نمی دهد بلکه آرایه جدیدی را برای نتیجه ایجاد می کند ، این موارد شامل:

  • filter – یک آرایه را بر اساس عملکرد پاسخ به تماس فیلتر می کند
  • map – بر اساس یک عملکرد پاسخ به تماس ، از آرایه استفاده کنید
  • slice – بخشی از آرایه را استخراج کنید
  • concat – ادغام 2 آرایه
  • flat – آرایه های چند بعدی یا تو در تو را صاف کنید
  • flatMap – آرایه های چند بعدی یا تو در تو را با 1 سطح صاف کنید و نقشه برداری را با عملکرد پاسخ به تماس با آن انجام دهید.

رمز نمونه

const technologies = [
  {
    name:"HTML",
    type:"Frontend"
  },
  {
    name:"CSS",
    type:"Frontend"
  },
  {
    name:"JS",
    type:"Frontend"
  },
  {
    name:"React",
    type:"Frontend"
  },
  {
    name:"Java",
    type:"Backend"
  },
  {
    name:"Node",
    type:"Backend"
  },
]

const otherTechnologies = [
  {
    name:"Python",
    type:"Backend"
  },
  {
    name:"Rust",
    type:"Backend"
  },
]

// filter method
const frontendTechs = technologies.filter(technology => {
  if(technology.type === "Frontend"){
    return technology
  }
})
scrib.show("Frontend techs - ",frontendTechs) // will return an array with items with type Frontend

// map method
const frontendTechsNames = frontendTechs.map(technology => technology.name) // will return an array with technology names with type Frontend
scrib.show("Frontend tech names - ",frontendTechsNames) // will return an array with items with type Frontend


// slice method
const firstThreeItems = technologies.slice(0,3) // first three items in the array
scrib.show("First three items - ",firstThreeItems)

// concat method
const combinedTechnologies = technologies.concat(otherTechnologies)
scrib.show("Combined technologies - ",combinedTechnologies)

// flat method
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const oneLevelFlat = nestedArrays.flat()
const twoLevelFlat = nestedArrays.flat(2)
const infinityLevelFlat = nestedArrays.flat(Infinity)
scrib.show(oneLevelFlat)
scrib.show(twoLevelFlat)
scrib.show(infinityLevelFlat)

// flatMap method
const webTechnologies = ["HTML","CSS","JS"]
const flatAndLowercase = webTechnologies.flatMap(technology => technology.toLowerCase())
scrib.show(flatAndLowercase)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

زنجیر کردن روشها

// Chaining of methods
const technologies = [
  {
    name:"HTML",
    type:"Frontend"
  },
  {
    name:"CSS",
    type:"Frontend"
  },
  {
    name:"JS",
    type:"Frontend"
  },
  {
    name:"React",
    type:"Frontend"
  },
  {
    name:"Java",
    type:"Backend"
  },
  {
    name:"Node",
    type:"Backend"
  },
]

// Filter and map
const frontendNamesByChaining = technologies.filter(technology => technology.type === "Frontend").map(technology => technology.name)
scrib.show(frontendNamesByChaining)

// flat and map
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const flatAndMapChaining = nestedArrays.flat(Infinity).map(technology => technology.toLowerCase())
scrib.show(flatAndMapChaining)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

پرداخت این تعبیه شده برای اجرای مثال کد ذکر شده در بالا

این برای این پست است ، به من اطلاع دهید که آیا می توانم در این مقاله پیشرفت هایی انجام دهم. همچنین ، وب سایت scribbler.live را بررسی کنید.

شما می توانید با من تماس بگیرید –

اینستاگرام – https://www.instagram.com/supremacism__shubh/
LinkedIn-https://www.linkedin.com/in/shubham-tiwari-b7544b193/
ایمیل – shubhmtiwri00@gmail.com

شما می توانید با کمک مالی در لینک زیر به من کمک کنید متشکرم
https://www.buymeacoffee.com/waaduheck

همچنین این پست ها را نیز بررسی کنید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا