DEV Community 👩‍💻👨‍💻

mixbo
mixbo

Posted on

Javascript Array methods used in my work

Alt Text

Here list some Javascript Array methods witch helpful and useful to my work

some & every

let users = [{name: 'foo',age: 18},{name: 'bar',age: 21}]
users.some((user)=>user.age < 20) // true
users.every((user)=>user.age < 20) // false
Enter fullscreen mode Exit fullscreen mode
  • some just return true if users has one user age < 20
  • every just return true if all users age < 20

splice

// splice(index[, deleteCount, elem1, ..., elemN])
const fruits = ['apple','pera','grape']
fruits.splice(1,1,'pineapple','watermelon') // ['pera']
// fruits: ['apple','pineapple','watermelon','grape']
Enter fullscreen mode Exit fullscreen mode

splice method will return modified array elements but will mutation origin array. fruits will be ['apple','pineapple','watermelon','grape']

Args

  • index which started index you will mutation
  • deleteCount will declare how many element you will replaced
  • elem1,...eleN will after index poistion

unshift & push

const fruits = ['apple','pera','grape']

fruits.unshift(...['pineapple']) // will return fruits length 4
console.log(fruits) // (4) ["pineapple", "apple", "pera", "grape"]

fruits.push('watermelon')  // will return fruits length 5
console.log(fruits) //(5) ["pineapple", "apple", "pera", "grape", "watermelon"]
Enter fullscreen mode Exit fullscreen mode
  • unshfit(...item) will push item to beginning of array
  • push(item) will push item to end of array

forEach

["foo", "bar", "zzzzz"].forEach((item, index, array) => {
  console.log(`${item} is at index ${index} in ${array}`);
});
Enter fullscreen mode Exit fullscreen mode

Usual we just pass first two args item, index but array used when you need referer the iterate object here is ["foo", "bar", "zzzzz"]

find & findIndex

const fruits = ['apple','pera','grape']

fruits.find((fruit)=> fruit==='apple') // apple
fruits.findIndex((fruit)=> fruit==='grape') // 2

// if not found will return -1
fruits.findIndex((fruit)=> fruit==='notfound') // -1
Enter fullscreen mode Exit fullscreen mode
  • find will return the first matched element in fruits
  • findIndex will return the first matched element index at fruits array

filter

const fruits = ['apple','pera','grape']
let results = fruits.filter((fruit) => fruit.length > 4) // (2) ["apple", "grape"]
Enter fullscreen mode Exit fullscreen mode

fileter will return new array witch iterate callback return true

map

let items = ["foo", "bar", "zzz"].map(item => `lol:${item}`);
console.log(items); // (3) ["lol:foo", "lol:bar", "lol:zzz"]
Enter fullscreen mode Exit fullscreen mode

We can use map transform array element and return new array

Not limited to the above method aslo includes: reverse, reduce, concat ,slice , join

Hope it can help you :)

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!