آرایه های JS | جهش ، نقشه ، تبدیل ، مرتب سازی مانند یک حرفه ای

// mutating methods
const tags = ["html", "css", "javascript", "react"]

// push
tags.push("nextjs")
scrib.show("Push - ",tags)

// pop
tags.pop()
scrib.show("Pop - ",tags)

// unshift
tags.unshift("nextjs")
scrib.show("Unshift - ",tags)

// shift
tags.shift()
scrib.show("Shift - ",tags)

// sort
tags.sort()
scrib.show("Sort - ",tags)

// reverse
tags.reverse()
scrib.show("Reverse - ",tags)

// splice
tags.splice(0,0,"HTML") // will replace first index element with HTML
tags.splice(0,2,"HTML") // will delete first 2 elements and replace with HTML
scrib.show("Splice - ",tags)

// fill
tags.fill("Scribbler",0,2) // replace first elements with Scribbler
scrib.show("Fill - ",tags)

// Methods on steroids - conditional push
const tags = ["html", "css", "javascript", "react"]

const addValidTags = (isTagValid) => {
  const invalidTag = "java"
  if(isTagValid !== invalidTag){
    tags.push(isTagValid)
  }
}
addValidTags("nextjs") // will add this to the array
addValidTags("java") // won't add this to the array
scrib.show(tags)

// Methods on steroids - conditional filtering
const tags = ["html", "css", "javascript", "react"]

const filters = (filterName) => {
  if(filterName === "sort"){
    tags.sort()
    return tags
  }
  else if(filterName === "reverse"){
    tags.reverse()
    return tags
  }
  else {
    return tags
  }
}

filters("sort") // first sort the tags
filters("reverse") // then reverse it

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)

// Searching and indexing methods
const humans = [
  {
    id: 1001,
    name: "Bruce",
    isAvailable: true
  },
   {
    id: 1002,
    name: "Clark",
    isAvailable: true
  },
   {
    id: 1003,
    name: "Diana",
    isAvailable: true
  },
   {
    id: 1004,
    name: "Barry",
    isAvailable: false
  }
]

const hereos = ["Batman","Superman","Wonder woman","Flash"]

// find method
const findBatman = humans.find(hero => hero.name === "Bruce")
scrib.show(findBatman) // { "id": 1001, "name": "Bruce", "isAvailable": true }

// findIndex method
const findSupermanIndex = humans.findIndex(hero => hero.name === "Clark")
scrib.show(findSupermanIndex) // 1

// indexOf method
const findFlash = hereos.indexOf("Flash")
scrib.show(findFlash) // 3

// lastIndex
const findSuperman = hereos.lastIndexOf("Superman")
scrib.show(findSuperman) // 1

// includes
const wonderWomanInTeam = hereos.includes("Wonder woman")
scrib.show(wonderWomanInTeam) // true

// some 
const availableHeros = humans.some(human => human.isAvailable === true)
scrib.show(availableHeros) // true

// every
const allHeroesAvailable = humans.every(human => human.isAvailable === true)
scrib.show(allHeroesAvailable) // false

// Chaining with other array methods like filter
const humans = [
  {
    id: 1001,
    name: "Bruce",
    isAvailable: true
  },
   {
    id: 1002,
    name: "Clark",
    isAvailable: true
  },
   {
    id: 1003,
    name: "Diana",
    isAvailable: true
  },
   {
    id: 1004,
    name: "Barry",
    isAvailable: false
  }
]

const isBatmanAvailable = humans.filter(human => human.isAvailable).find(human => human.name === "Bruce")
scrib.show(isBatmanAvailable)

const humans = [
  {
    id: 1001,
    name: "Bruce",
    isAvailable: true
  },
   {
    id: 1002,
    name: "Clark",
    isAvailable: true
  },
   {
    id: 1003,
    name: "Diana",
    isAvailable: true
  },
   {
    id: 1004,
    name: "Barry",
    isAvailable: false
  }
]

// forEach loop
humans.forEach(human => human.hasSuperPowers = true)
scrib.show("For each loop - ", humans)

// entries
scrib.show("ENTRIES")
for (const [key, value] of Object.entries(humans)) {
  scrib.show(`Key: ${key} and `, "Value: ",value);
}

// keys
scrib.show("KEYS")
for (const key of Object.keys(humans)) {
  scrib.show(`Key: ${key}`);
}

// values
scrib.show("VALUES")
for (const value of Object.values(humans)) {
  scrib.show("Values: ",value);
}

// Flattening single level nested arrays with reduce
const technologies = [["HTML", "CSS"], ["JS", "TS"], ["REACT", "NEXTJS"]];

const flatArray = technologies.reduce((acc, arr) => acc.concat(arr), []);
scrib.show(flatArray);

const flatArrayFromRight = technologies.reduceRight((acc, arr) => acc.concat(arr), []);
scrib.show(flatArrayFromRight);

const sentence = "Hello i am bruce , bruce wayne , founder of wayne enterprises";

const wordCount = sentence.split(" ").reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});
scrib.show(wordCount)

const superheroes = [
  { name: "Batman", team: "Justice League" },
  { name: "Superman", team: "Justice League" },
  { name: "Flash", team: "Justice League" },
  { name: "Iron man", team: "Avengers" },
  { name: "Thor", team: "Avengers" },
  { name: "Captain america", team: "Avengers" },
];

const groupByTeam = superheroes.reduce((acc, superhero) => {
  (acc[superhero.team] = acc[superhero.team] || []).push(superhero);
  return acc;
}, {});

const teamJusticeLeague = groupByTeam["Justice League"]
const teamAvengers = groupByTeam["Avengers"]
scrib.show("Group team:",groupByTeam)
scrib.show("Justice League:",groupByTeam["Justice League"])
scrib.show("Avengers:",groupByTeam["Avengers"])

// join method
const superheroes = ["Batman", "Superman", "Flash", "Wonder woman"];

const joinHeroes = superheroes.join("") // join without a separator
const joinHeroesWithHyphen = superheroes.join("-") // join with a hyphen as a separator
scrib.show("Without seperator - ",joinHeroes)
scrib.show("Without seperator as hyphen - ",joinHeroesWithHyphen)

// toString
const superheroes = ["Batman", "Superman", "Flash", "Wonder woman"];
const superheroesString = superheroes.toString();
scrib.show("Superheroes array as string separated by comma - ",superheroesString)

// Chaining with other methods
const superheroes = ["Batman", "Superman", "Flash", "Wonder woman"];
const heroesWithLowerCase = superheroes.join(" ").toLowerCase()
scrib.show("Chaining with other methods - ",heroesWithLowerCase)

// copyWithin method, rarely used
const superheroes = ["Batman", "Superman", "Flash", "Wonder woman"];

const copyFromIndex0To2 = superheroes.copyWithin(0, 2)
scrib.show(copyFromIndex0To2)

// from method
const batman = "Batman"
const arrayFromString = Array.from(batman)
scrib.show(arrayFromString)

const createArrayFromWords = Array.of("Batman", "Superman", "Flash", "Wonder woman")
scrib.show(createArrayFromWords)

// Chaining with other methods
const superhereos = "Batman Superman Flash Wonder woman";
const convertSuperheroesToArray = superhereos.split(" ").join("-");
scrib.show()
scrib.show(Array.from(convertSuperheroesToArray))