前端学习第二阶段 瞎折腾： javascript数组排序

  这两天学习javascript数组知识点，发现和python的数组还是有很大差别的，很多python数组的操作在JS中都是不可用的，有python基础的小伙伴千万千万别把python的数组方法在JS中乱用。例如

// python中可以直接用‘+’操作符将两个数组合并成一个新的数组

list1 = [1, 2, 3] + [4, 5, 6]
print(list1) 

//[1, 2, 3, 4, 5, 6]

// 但是在javascript中如果使用上面的方法就会出错

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1 + arr2;
console.log(arr3) 

// 输出结果  1,2,34,5,6
//在JS中使用‘+’操作符会直接把两个数组转换成字符串输出

  还有python中非常好用的切片操作在JS中也是不可用的，python小伙伴要特别留意下，别弄混了。

  好了，进入正题，让我们看下JS中用数组都有哪些好玩的骚操作~~~

利用数组和字符串转换进行数组升序排列

实现逻辑：

• 遍历数组A的元素i，把i存入一个新的数组B[i]=i

• 把数组B转换成字符串

• 去掉字符串中的多余','

• 把字符串转换成数组并赋值给数组A

开始折腾

1. 首先定义一个函数arrayAscendingSort()，实现传入一个数组参数并对其进行升序排列功能

function arrayAscendingSort(arr) {
    var temp = [];                                              //创建一个空的临时数组
    for (var i = 0; i < arr.length; i++) {                          //循环遍历数组
        var j = arr[i];                                         //获取数组的第i个下标的数值
        temp[j] = j;                                            //把j存入temp下标为j的元素中
    }    
    var str = temp + '';                                        //使用'+'实现数组隐式转换为字符串类型
    return str;
}
var arr = [5, 4, 2, 7];
console.log(arrayAscendingSort(arr));

到这里我们把一个数组转换成了一个字符串，上面的代码可以把一个数组经过一定变换之后转换成一个字符串，输出结果如下：

,,2,,4,5,,7

2. 我们想办法把上面的字符串中连在一起的',,'替换成','，然后把字符串转换成数组就可以了。

• replace() 方法

字符串替换我们可以使用replace方法
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法: stringObject.replace(regexp/substr,replacement)
简单理解就是可以把一个【子字符串】或【正则表达式】替换成新的字符串。
例如：str.replace(/,+/g,',')
这里我们可以使用一个简单的正则表达式/,+/g来匹配到所有连在一起的','。 （PS：对正则表达式感兴趣的话可以自己查询下相关资料，由于篇幅有限不做详细介绍）

• split() 方法

字符串转换成数组我们可以使用split方法
用于把一个字符串分割成字符串数组。
语法: stringObject.split(separator,howmany) 简单的用法如下：
例如：newStr.split(',')这个方法按','分割字符串转换成数组

有了以上两个方法，我们可以把上面的代码修改为：

        function arrayAscendingSort(arr) {
            var temp = [];                                            //创建一个空的临时数组
            for (var i = 0; i < arr.length; i++) {                        //循环遍历数组
                var j = arr[i];                                       //获取数组的第i个下标的数值
                temp[j] = j;                                          //把j存入temp下标为j的元素中
            }
            var str = temp + '';                                      //使用'+'实现数组隐式转换为字符串类型
            var newStr = str.replace(/,+/g,',');
            arr = newStr.split(',');            
            return arr;
        }        
        var arr = [5, 4, 2, 7];
        console.log(arrayAscendingSort(arr));

运行上面的代码，输出结果如下：

(5) ["", "2", "4", "5", "7"]

好像跟我们预期的不一样~~~
分析下原因：

• 前面出现了一个空值，是因为我们上面的字符串变换出来是,2,4,5,7前面多了一个,，要想办法去掉前面的,

• 所有数字都是以字符形式出现的，要想办法把数组的字符格式化成数值类型

继续查资料~~~

• substr() 方法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法:stringObject.substr(start,length)
例如：newStr = newStr.substr(1)可以删除字符串第一个字符

• str.map(Number) 方法

可以把字符串中的字符类型数值转换成数值类型
例如：newStr.map(Number)可以把字符串中的字符类型数值转换成数值类型。

继续改代码~~~：

        function arrayAscendingSort(arr) {            
            var temp = [];                                               //创建一个空的临时数组
            for (var i = 0; i < arr.length; i++) {                           //循环遍历数组
                var j = arr[i];                                          //获取数组的第i个下标的数值
                temp[j] = j;                                             //把j存入temp下标为j的元素中
            }            
            var str = temp + '';                                         //使用'+'实现数组隐式转换为字符串类型
            var newStr = str.replace(/,+/g,',');                             //去掉多余的“,”
            if (newStr[0] == ',') {                                      //判断第一个字符是不是 “,”  如果是则删除掉第一个字符
                newStr = newStr.substr(1);
            };
            arr = newStr.split(',').map(Number);                         //把字符串转换成数组，并将数组中的字符格式化成数值类型。
            return arr;
        }        
        var arr = [5, 4, 2, 7];
        console.log(arrayAscendingSort(arr));

代码运行结果：

(4) [2, 4, 5, 7]

基本符合预期，但是这个函数没有考虑到包含数字0和存在重复数字的情况。继续折腾~~~

3. 完善函数功能，处理包含数字0和重复数字的情况

• 首先处理重复数字的情况

要处理重复数字，我们可以在for循环中增加一个if判断语句，当temp[j]已经存在的时候想办法把temp[j]元素的值处理一下，使这个值可以表示多个数字j。

我想到的方法是把原来的temp[j]的数值转换成字符串，采用一个隐式转换把元素值转化成"j,j"的形式，这样就可以表示多个j了。

            for (var i = 0; i < arr.length; i++) {
                var j = arr[i];                
                if (temp[j]) {                                 //判断temp[j]是否存在
                    temp[j] = temp[j] + ',' + j;               //若存在，则给temp[j]的值增加一个',j'
                } else {                    
                    temp[j] = j + '';                          //这里包含了处理0和空值的逻辑
                }
            }

最后想一想，我是如何处理0和空值的呢？

完整的代码如下：

        function arrayAscendingSort(arr) {
            var temp = [];
            for (var i = 0; i < arr.length; i++) {
                var j = arr[i];
                if (temp[j]) {                                 
                    temp[j] = temp[j] + ',' + j;                  
                } else {
                    temp[j] = j + '';                               
                }
            }
            var str = temp + '';
            var newStr = str.replace(/,+/g,',');
            arr = newStr.split(',').map(Number);
            return arr
        }
        var arr = [8, 6, 0, 7, 3, 0, 7, 34587];
        arr = arrayAscendingSort(arr);
        console.log(arr);

代码运行结果：

通过折腾上面的代码，复习/学习到的知识点汇总

1. 字符串的隐式转换

2. 字符串的replace替换方法

3. 字符串转数组的split方法

4. 字符串substr删除部分子串方法

5. 数组数字字符转数字的map(Number)方法

6. for循环

7. 函数的定义和调用方法