⌨️
Web Design
  • Index
  • Front End
    • Front End Index
  • HTML/CSS/JS
    • HTML Index
      • Page layout
      • Form
      • Image Optimization
    • CSS Index
      • CSS Selectors
        • Selectors
        • Combinators
        • Attribute Selectors
        • Pseudo classes
      • CSS Cascade and Inheritance
        • Cascade
        • Inheritance
      • Specificity
      • Box Model
      • CSS Clearfix
      • Responsive Meta Tag
      • Flexbox Layout
      • Grid Layout
      • CSS Naming Rules
        • Golden Guidelines for Writing Clean CSS
        • BEM
        • Rules
      • Frameworks & Libraries
    • JS Index
      • JS loading
      • Modules
      • Js Array Common Method 1
      • Js Array Common Method 2
      • Custom attributes on the element
      • Operator
      • Parse a JSON Date in JavaScript
      • Importmap
  • Git
    • Git Index
    • Initialize a Repository
    • Top 20 Git Commands With Examples
  • UML
    • UML Class
  • React
    • Index
      • setState async issue
      • Redux
      • Axios
      • useState update in A Timeout
  • WebGL
    • WebGL Index
  • Back End
    • Back-End Index
      • Knex
      • Bookshelf
        • bookshelf install
        • Bookshelf only returns one row
      • Server side init flow
      • Install Wordpress on Ubuntu 22.04 with a LAMP Stack
  • React Native
    • React Native Index
      • Dynamically changing Image URLs in React Native
  • Expo
    • EAS build config
Powered by GitBook
On this page
  • 1. Join
  • 2. reverse
  • 3. sort
  • 4. Push / Pop and Shift / Unshift
  • 5. find

Was this helpful?

  1. HTML/CSS/JS
  2. JS Index

Js Array Common Method 1

1. Join

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

2. reverse

The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

Reverse is destrutive

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

3. sort

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

Parameters

compareFunction Optional

Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.

  • If compareFunction(a, b) returns a value > than 0, sort b before a.

  • If compareFunction(a, b) returns a value < than 0, sort a before b.

  • If compareFunction(a, b) returns 0, a and b are considered equal.

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

Use arrow function expressions with shorter syntax

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

// [1, 2, 3, 4, 5]

4. Push / Pop and Shift / Unshift

The push() method adds one or more elements to the end of an array and returns the new length of the array.

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array. The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

5. find

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12
PreviousModulesNextJs Array Common Method 2

Last updated 3 years ago

Was this helpful?

twitter @profulsadangi