javascript中split源码浅析

93 阅读 0 评论 62 点赞

我是靠谱客的博主开心泥猴桃，最近开发中收集的这篇文章主要介绍javascript中split源码浅析，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

了解底层才能更好的编程

初始代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>split的封装</title>
</head>

<body>

</body>
<script>
    String.prototype.spl = function (res, amount) {
        var copyString = this, //获取当前字符串
            strLength = copyString.length,//获取当前字符串的长度
            newArr = [], //设置新的数组
            start = 0, //设置数组截取的初始值
            iTemp, //设置起始长度暂变量
            tempRes,//设置传入分割参数暂变量
            ik = 0; //设置下面正则表达式的match的ik值
        if (res == "" || res == undefined) {
            res = ""; //若传入的分隔符为空，则使res为空            
        }
        patternLength = res.length; //获取传入分隔符的长度
        switch (Object.prototype.toString.call(res)) {
            case "[object String]":
                if (res == "") {
                    for (var i = 0; i < strLength; i++) {
                        // 若为空，将每个字符推进数组
                        newArr[i] = copyString[i];
                    }
                }
                else if (res != "") {
                    tempRes = res; //因为要对传进来的进行转义，所以这里存一个tempRes的res暂变量
                    if (res == "|") {
                        res = "\|";//因为下面是根据正则表达式来匹配项，所以得转义
                    }
                    var pattern = new RegExp(res, "g") //对传进来的字符串进行正则实例化
                    function callback(start) {
                        var matches = pattern.exec(copyString);//匹配分隔符
                        var iNullStrLen = 0;  //iNullStrLen为再次使用start的值
                        if (matches) {
                            iNullStrLen = matches.index + tempRes.length;// 重新设置star的值，步骤一
                            newArr.push(copyString.slice(start, matches.index)); // 进行分割推进数组
                            start = iNullStrLen;// 重新设置start的值，步骤二
                            iTemp = start;//设置裁取之后的起始位置的暂变量
                        }
                        else if (matches === null) {
                            if (iTemp === undefined) {
                                newArr.push(copyString.slice(0, strLength));//若起始位置暂变量一开始就为空，那么将整个字符串推进数组，变成数组项
                            }
                            else {
                                newArr.push(copyString.slice(iTemp, strLength));//处理最后一个字符串，然后推进数组
                            }
                            return;
                        }
                        callback(start)  //回调
                    }
                    callback(start); //出事调用
                }
                break;
            case "[object RegExp]"://当穿进去的是正则表达式的时候
                var pattern = new RegExp(res, "g");
                var everyStr = copyString.match(pattern);
                function callback(start) {
                    var matches = pattern.exec(copyString);
                    var iNullStrLen = 0;
                    if (matches) {
                        iNullStrLen = matches.index + everyStr[ik].length;//取得每个匹配到的数组下标，和匹配的字符串的长度
                        ik++;
                        newArr.push(copyString.slice(start, matches.index));// 进行分割推进数组// 重新设置star的值，步骤一
                        start = iNullStrLen;// 重新设置start的值，步骤二
                        iTemp = start;
                    }
                    else if (matches === null) {
                        newArr.push(copyString.slice(iTemp, strLength));
                        return;
                    }
                    callback(start)
                }
                callback(start);
                break;
        }
        if (amount >= 0) {
            // newArr.splice(amount, newArr.length - amount);
            newArr = newArr.slice(0, amount);  //对数组长度进行切割
        }
        return newArr;
    }
    var a = "red,blue,green,yellow,red";
    var b = a.spl(/[^,]+/);
    console.log(b); //["", ",", ",", ",", ",", ""]
    var c = "red|blue|green|yellow|red|black|purble";
    var d = c.spl("|", 4); 
    console.log(d)//["red", "blue", "green", "yellow"]
    var e = a.spl("wuasda")
    console.log(e);//["red,blue,green,yellow,red"]
</script>

</html>