JavaScript日常练习：二维数组转置、冒泡排序、插入排序、模板:省份城市的三级联动

1.二维数组转置：

如：转置前arr
[
[‘a’,‘b’,‘c’],
[‘d’,‘e’,‘f’],
[‘g’,‘h’,‘i’],
[‘j’,‘k’,‘l’],
]
转置后res
[
[‘a’,‘d’,‘g’,‘j’],
[‘b’,‘e’,‘h’,‘k’],
[‘c’,‘f’,‘i’,‘l’],
]
方法一： 我们得出规律：res[i][j]=arr[i][j],且res数组长度=arr元素长度，res元素长度=arr数组长度

<script>
    var arr = [['a','b','c'],['d','e','f'],['g','h','i'],['j','k','l']];
    var res = [];
    for(var i = 0; i < arr[0].length; i++){
        res[i] = [];
        for(var j = 0; j < arr.length; j++){
            res[i][j] = arr[j][i];
            }
        }
        console.group('转置前：');
        console.log(arr);
        console.groupEnd();
        console.group('转置后：');
        console.log(res);
        console.groupEnd();
    </script>

方法二：使用map()回调函数
map()函数功能描述：创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果。

var arr = [['a','b','c'],['d','e','f'],['g','h','i'],['j','k','l']];//待转置的数组
var reverse = arr[1].map(function(col,i){//利用i获取转置后数组元素的下标
    return arr.map(function(row){//返回转置后新组合而成的数组元素
        return row[i];//返回转置前数组元素的指定索引的元素
        });
    });

arr[1]调用map()时，i表示一维数组[‘d’,‘e’,‘f’]中的元素对应的下标0，1和2，arr调用map()方法时，row以此表示[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’],[‘g’,‘h’,‘i’]和[‘j’,‘k’,‘l’]。因此当i等于0时，arr调用map()方法返回值是[‘a’,‘d’,‘g’,‘j’]，以此类推，就得到了转制后的二维数组。

2.冒泡排序：

我们按照从小到大的顺序排列：

<script>
    var arr = [10, 2, 5, 27, 98, 31];
    console.log('待排序数组：' + arr);
    for (var i = 1; i < arr.length; i++){   //控制需要比较的轮数
        for (var j = 0;j < arr.length - i; j++){    //控制参与比较的元素
            if (arr[j] > arr[j+1], arr[j]){       //比较相邻的两个元素
                [arr[j],arr[j+1] ]= [arr[j+1],arr[j]];
                }
            }
        }
        console.log('排序后的数组：'+arr);
    </script>

3.插入排序

插入排序比较的次数与无序数组的长度相等，每次无序数组元素与有序数组中的所有元素进行比较，比较后找到对应位置插入，最后即可得到一个有序数组。我们按照从小到大的顺序排列：

<script>
    var arr = [89, 56, 100, 21, 87, 45, 1, 888];
    console.log('待排序数组:' + arr)
    for(var i = 1; i < arr.length; i++){   //遍历无序数组下标
        for(var j = i; j > 0; j--){      //遍历并比较一个无序数组元素与所有有序数组元素
            if(arr[j-1] > arr[j]){
                [arr[j-1],arr[j]] = [arr[j],arr[j-]];
                }
            }
        }
        console.log('排序后的数组：’ + arr);
    </script>        

4.模板:省份城市的三级联动

https://github.com/wjt2018/-