How to use .join() with push and replace together?
Array.join() Method
The array.join() method is an inbuilt function in JavaScript which is used to join the elements of an array into a string.The elements of the string will be separated by a specified separator and its default value is comma (, ).Syntax:
array.join(separator)
Array.push() Method
The array.push() function is used to push one or more values in an array. This function changes the length of an array by the number of elements added to the array. The syntax of the function is as follows:
Syntax:
arr.push(element1[, ...[, elementN]])
Arguments: This function can contain as many numbers of arguments as the number of elements to be inserted into the array.
Return value: This function returns the new array with new values after inserting the arguments into the array.
Array.splice() Method
The array type in JavaScript provides us with splice () method that replaces the items of an existing array by removing and inserting new elements at the required/desired index.Syntax:
array.splice(start_index, delete_count, value1, value2, value3, ...)
Note: Splice() method deletes zero or more elements of an array starting with the start_index element and replaces those elements with zero or more elements specified in the argument list.
Example: Below is the example to illustrate the use of .join() method with push() method and splice() method together:
<!DOCTYPE html><html> <body> <center> <h1 style="color: green;"> GeeksForGeeks </h1> <h2>use .join() with push and replace together</h2> <p>The join() method joins array elements into a string.</p> <p>The splice() method that helps us in order toreplace the items of an existing array by removing and inserting new elements at the required/desired index.</p> <p>The push() method appends a new element to an array.</p> <button onclick="myFunction()">Push</button> <p id="demo"></p> <br /> <script> // Initializing the array var fruits = ["Banana", "Orange", "Apple", "Mango"]; // joining the array elements using .join method document.getElementById( "demo").innerHTML = fruits.join(" *"); function myFunction() {// splicing the array elements(delete_count=2, which will replace//("Orange", "Apple" with "Lion", "Horse") using splice() method fruits.splice(1, 2, "Lion", "Horse"); document.getElementById("demo").innerHTML = fruits;// pushing the array elements("Kiwi, Grapes") using push() method fruits.push("Kiwi, Grapes"); document.getElementById("demo").innerHTML = fruits;// expected output [Banana, Lion, Horse, Mango, Kiwi, Grapes] } </script> </center> </body></html> |
Output:
Before clicking the Push and Splice button:
Output after clicking the Push and Remove button:
Please Login to comment...