js写快排时遇到的调用栈一出问题，Uncaught RangeError: Maximum call stack size exceeded

js写快排时遇到的调用栈一出问题，Uncaught RangeError: Maximum call stack size exceeded

arr = [33,77,88,44,55,11,66,99,22,44]
        var quickSort = function(arrTemp) {
            if(arrTemp.length < 2) {
                return arrTemp;
            }
            var middle = Math.floor(arrTemp.length / 2);
            var midKey = arrTemp[middle];//方式1
            // var midKey = arrTemp.splice(middle, 1)[0];//方式2
            var left = [];
            var right = [];
            for(var i = 0 ; i < arrTemp.length; i ++) {
                if(arrTemp[i] < midKey) {
                    left.push(arrTemp[i]);
                }else {
                    right.push(arrTemp[i]);
                }
            }
            return quickSort(left).concat([midKey],quickSort(right))
        }
                    
    console.log(quickSort(arr));

Uncaught RangeError: Maximum call stack size exceeded

使用方式1时会产生栈溢出，但是使用方式2却不会，暂时也没想通是为什么。

想要知道原理及解决方案

找基准，并把基准从元素组中删除