This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Note: Part of the article content and pictures from the network, if there is infringement please contact me (homepage public number: small siege lion learning front)

By: Little front-end siege lion, home page: little front-end siege lion home page, source: Nuggets

GitHub: P-J27, CSDN: PJ wants to be a front-end siege lion

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

preface

When I first learned JS, I was confused about the three functions of slice, splice and split. I think a lot of people do the same thing, so LET me rearrange it.

The core

  • Slice:Interception function
    • Intercepting is primarily an array, but also a string
    • Returns a new array containing the intercepted elements
    • Do not change the original array
  • Splice () :Array add delete check change
    • You can only add or delete arrays, not strings
    • Returns a new array of deleted elements
    • It changes the original array
  • Split: string => array
    • String method, not array method.
    • Returns an array of strings.
  • Join: array => string

slice()

The core

  • Intercepts any element from an array and returns a new array
  • Do not change the original array.

Grammar:

New array = original array. Slice (index of start position, index of end position);[a,b] [a,b] [a,b]
Copy the code

For example:

const arr = ['a'.'b'.'c'.'d'.'e'.'f'];
arr.slice(); // If there are no arguments, all elements are intercepted.
arr.slice(2); // Start extracting from the second value until the end
arr.slice(-2); // The negative of the last two elements is added to the length, -2+6=4
arr.slice(2.4); // Extract elements from the second to the fourth (excluding the fourth element)
arr.slice(4.2); / / empty
Copy the code

extension

Slice () used to convert pseudo-arrays to real arrays.

1 / / way
array = Array.prototype.slice.call(arr);
2 / / way
array = [].slice.call(arr);
Copy the code

ES6 version

array = Array.from(arr);
Copy the code

splice()

The core

  • Removes any (possibly negative, incremented) element from the array.

  • Returns a new array of deleted elements.

  • This method alters the array, removing the specified element from the array.

Grammar:

New array = old array.splice (start index, number to delete); New array = old array.splice (initial index index, number to delete, new element1New elements2...) ;Copy the code

Analysis: The third and subsequent parameters are the elements to be added. Inserts start at the previous position in the initial index. You remove elements and add new ones in their place.

var arr1 = ['a'.'b'.'c'.'d'.'e'.'f'];
arr1.splice(1); // Delete the element starting at index 1
arr2.splice(-2); // Delete the last two elements, same idea as slice.
arr3.splice(1.3); // Delete elements from index 1
// Add series
arr4.splice(1.0.'g'.'h') // Pure increment case
// The case of a change is first deleted and then added, i.e. replaced
arr4.splice(1.3.'js'.'vue');// Delete + add == change
Copy the code

split()

The core

  • split()String method, not array method.

Grammar:

New array = str.split(separator);Copy the code

Parse: Splits a string into an array using the specified delimiter (which can be an empty string “”). It doesn’t change the original string.

join()

The core

  • Converts an array to a string and returns the converted string

  • I’m not going to change the array

  • The join() method can specify as an argument a string (which can be an empty string) that will be the concatenator for the elements in the array;

  • If no concatenation is specified, it defaults to, as a concatenation, which is the same as toString().

Grammar:

New string = original array. Join (parameter);// The argument is optional -- the concatenator
Copy the code
var arr = ['a'.'b'.'c'];
arr.join(); // No concatenation is specified here, so it is used as a concatenation by default
arr.join(The '-'); // Use the specified string as the concatenator
Copy the code

Thank you for reading, I hope to help you, if there is a mistake or infringement of the article, you can leave a message in the comment area or add a public number in my home page to contact me.

Writing is not easy, if you feel good, you can “like” + “comment” thanks for your support ❀

“Welcome to the discussion in the comments section. The nuggets will be giving away 100 nuggets in the comments section after the diggnation project. See the event article for details.”