


Advanced usage skills of split and join functions in JavaScript_javascript skills
Javascript has two very powerful functions that are loved by developers: split and join, two opposing functions. These two functions allow string and array types to be interchanged, that is, arrays can be serialized into strings and vice versa. We can make full use of these two functions. Let’s explore some interesting applications inside. First, let’s introduce these two functions:
String.prototype.split(separator, limit)
separator splits the string into arrays, and the optional parameter limit defines the maximum length of the generated array.
"85@@86@@53".split('@@'); //['85','86','53']; "banana".split(); //["banana"]; //( thanks peter (-: ) "president,senate,house".split(',',2); //["president", "senate"] Array.prototype.join(separator)
The optional parameter separator converts the array into a string. If no separator is provided, a comma will be used as the parameter value (just like the toString function of the array).
["slugs","snails","puppy dog's tails"].join(' and '); //"slugs and snails and puppy dog's tails" ['Giants', 4, 'Rangers', 1].join(' '); //"Giants 4 Rangers 1" [1962,1989,2002,2010].join();
Let’s take a look at these apps:
replaceAll
This simple function, unlike the native replace function, can be used as a global substring replacement without using regular expressions.
String.prototype.replaceAll = function(find, replaceWith) { return this.split(find).join(replaceWith); } "the man and the plan".replaceAll('the','a'); //"a man and a plan"
For small strings, its performance is weaker than the native function of single character replacement (here refers to the two extra functions of regular expressions), but under mozilla, if this character exceeds 2 or 3 characters, this function runs faster than regular expressions.
occurences
This function can get the number of substring matches. And this kind of function is very straightforward and does not require regularization.
String.prototype.occurences = function(find, matchCase) { var text = this; matchCase || (find = find.toLowerCase(), text = text.toLowerCase()); return text.split(find).length-1; } document.body.innerHTML.occurences("div"); //google home page has 114 document.body.innerHTML.occurences("/div"); //google home page has 57 "England engages its engineers".occurrences("eng",true); //2 repeat
This function is borrowed from prototype.js:
String.prototype.repeat = function(times) { return new Array(times+1).join(this); } "go ".repeat(3) + "Giants!"; //"go go go Giants!"
The beauty of it lies in the use of the join function. The focus is on the separator parameter value, and the underlying array only contains some undefined values. To illustrate this point more clearly, let’s recreate the above example:
[undefined,undefined,undefined,undefined].join("go ") + "Giants
Remember that each array element will be converted to a string (an empty string in this case) before joining. This application of the repeat function is one of the few applications where defining an array via an array literal is not feasible.
Use limit parameter
I rarely use the limit optional parameter of the split function. Here is an example of using this limit:
var getDomain = function(url) { return url.split('/',3).join('/'); } getDomain("http://www.aneventapart.com/2010/seattle/slides/"); //"http://www.aneventapart.com" getDomain("https://addons.mozilla.org/en-US/firefox/bookmarks/"); //"https://addons.mozilla.org"
Modify numerical members
If we mix regular expressions, join, and split, we can easily modify the array members. But this function is not as difficult as imagined. Its main function is to remove the string specified in front of each member of the given array.
var beheadMembers = function(arr, removeStr) { var regex = RegExp("[,]?" + removeStr); return arr.join().split(regex).slice(1); } //make an array containing only the numeric portion of flight numbers beheadMembers(["ba015","ba129","ba130"],"ba"); //["015","129","130"]
Unfortunately, this function doesn't work in IE because they incorrectly remove the first empty member from the split. Now let’s fix this function:
var beheadMembers = function(arr, removeStr) { var regex = RegExp("[,]?" + removeStr); var result = arr.join().split(regex); return result[0] && result || result.slice(1); //IE workaround }
Why should we use this technique instead of the map function of array in Emascript 5?
["ba015","ba129","ba130"].map(function(e) { return e.replace('ba','') }); //["015","129","130"]
In actual applications, when feasible, I usually use the native map function (not available in IE<9 and below). The following example is only used as a learning tool, but it is worth noting that the calling syntax of join and split is simpler and more direct. The most interesting thing is that it is also very efficient, especially for very small arrays, and it is even more efficient in FF and Safari. For large arrays, the map function is more suitable. (In all browsers), the join and split functions will have fewer function calls.
//test 1 - using join/split var arr = [], x = 1000; while (x--) {arr.push("ba" + x);} var beheadMembers = function(arr, regex) { return arr.join().split(regex).slice(1); } var regex = RegExp("[,]?" + 'ba'); var timer = +new Date, y = 1000; while(y--) {beheadMembers(arr,regex);}; +new Date - timer; //FF 3.6 733ms //Ch 7 464ms //Sa 5 701ms //IE 8 1256ms //test 2 - using native map function var arr = [], x = 1000; while (x--) {arr.push("ba" + x);} var timer = +new Date, y = 1000; while(y--) { arr.map(function(e) { return e.replace('ba','') }); } +new Date - timer; //FF 3.6 2051ms //Cr 7 732ms //Sf 5 1520ms //IE 8 (Not supported)
Pattern matching
Arrays need to continuously perform pattern matching, but strings do not. Regular expressions can be used on strings, but not on arrays. The power of converting arrays to strings for pattern matching is far beyond the scope of this article. Let's look at a simple application of it.
Suppose the results of the walking competition need to be saved in an array. The purpose is to alternate the contestants with their record times in the array. We can use join and regular expressions to verify whether this storage mode is correct. The following code is to find out if the record time is missed by searching for two consecutive names.
var results = ['sunil', '23:09', 'bob', '22:09', 'carlos', 'mary', '22:59']; var badData = results.join(',').match(/[a-zA-Z]+,[a-zA-Z]+/g); badData; //["carlos,mary"]

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The method of using a foreach loop to remove duplicate elements from a PHP array is as follows: traverse the array, and if the element already exists and the current position is not the first occurrence, delete it. For example, if there are duplicate records in the database query results, you can use this method to remove them and obtain results without duplicate records.

The performance comparison of PHP array key value flipping methods shows that the array_flip() function performs better than the for loop in large arrays (more than 1 million elements) and takes less time. The for loop method of manually flipping key values takes a relatively long time.

Multidimensional array sorting can be divided into single column sorting and nested sorting. Single column sorting can use the array_multisort() function to sort by columns; nested sorting requires a recursive function to traverse the array and sort it. Practical cases include sorting by product name and compound sorting by sales volume and price.

Methods for deep copying arrays in PHP include: JSON encoding and decoding using json_decode and json_encode. Use array_map and clone to make deep copies of keys and values. Use serialize and unserialize for serialization and deserialization.

The best practice for performing an array deep copy in PHP is to use json_decode(json_encode($arr)) to convert the array to a JSON string and then convert it back to an array. Use unserialize(serialize($arr)) to serialize the array to a string and then deserialize it to a new array. Use the RecursiveIteratorIterator to recursively traverse multidimensional arrays.

PHP's array_group_by function can group elements in an array based on keys or closure functions, returning an associative array where the key is the group name and the value is an array of elements belonging to the group.

PHP's array_group() function can be used to group an array by a specified key to find duplicate elements. This function works through the following steps: Use key_callback to specify the grouping key. Optionally use value_callback to determine grouping values. Count grouped elements and identify duplicates. Therefore, the array_group() function is very useful for finding and processing duplicate elements.

The PHP array merging and deduplication algorithm provides a parallel solution, dividing the original array into small blocks for parallel processing, and the main process merges the results of the blocks to deduplicate. Algorithmic steps: Split the original array into equally allocated small blocks. Process each block for deduplication in parallel. Merge block results and deduplicate again.
