JS 练习一

编程是一门手艺活，光有理论是远远不够的，需要多多练习。

 

1 数组：写一个函数，实现功能 duplicate([1,2,3,4,5]);  // [1,2,3,4,5,1,2,3,4,5]

涉及知识点：

a 函数

b 数组

参考代码如下：

function duplicate(arr){
    var len = arr.length;
    for(var i = 0; i < len; i++){
        arr.push(arr[i]);
    }
    console.log(arr);
};

duplicate([1,2,3,4,5]);

 

2 数组："a test pattern".split(" ").reverse().join(" ");

split(" ")会把字符串转换为数组，怎么分割数组中的各项呢？以空格来分割！

 

3 字符串：去除字符串中的空格

var str1 = "abc d  e ";
var str2 = "  12    3";
var str = str1 + str2;
document.write(str + "<br>");
//匹配任何空白字符，替换成"".
str = str.replace(/\s/g, "");
document.write(str + "<br>");

 

4 DOM：实现如下表单的二级联动

涉及知识点：

a DOM

b 事件

c 表单

html代码如下：

<form>
    <select id="province">
        <option>--请选择--</option>
        <option>湖南</option>
        <option>湖北</option>
    </select>
    <select id="city">
        <option>--请选择--</option>
    </select>
</form>

JS代码如下：

var select1 = document.forms[0][0];
var select2 = document.forms[0][1];

//对于select元素，在其选项改变时触发
select1.onchange = function () {
    //先清除已有的二级选择框中的项
    var len = select2.options.length - 1;
    for(var i = len; i > 0; i--){
        select2.remove(i);
    }

    //如果选择的是湖南，则添加湖南的城市到二级选择框中
    if(select1.selectedIndex == 1){
        select2.add(new Option("长沙", "changsha"), undefined);
        select2.add(new Option("湘潭", "xt"), undefined);
    };
    if(select1.selectedIndex == 2){
        select2.add(new Option("武汉", "wuhan"), undefined);
        select2.add(new Option("武昌", "wuchang"), undefined);
    };
}

注意：for循环不能升序写，因为options.length是动态变化的。

 

5 数组：求最大值

参考代码如下：

var score = [5, 7, 23, 40, 25];

var max = Math.max.apply(score, score);
console.log(max);

如果是二维数组呢？

参考代码如下：

var a = [1, 2, 3, [5, 26], [1, 4, 8] ];
var b = a.join(","); //用，号分割数组各项，然后连接成一个字符串。
var c = b.split(",");
var max = Math.max.apply(c, c);
console.log(max);

 

6 数组： 排序

数字排序

var arr = [1, 5, 10, 150, 15];
arr.sort(compare);
function compare(num1, num2) {
    return (num1 > num2 ? 1 : -1);
}
console.log(arr);

 字母排序

var arr = ['ef', 'cd', 'xy', 'hi', 'ab'];
arr.sort(compare);
function compare(str1, str2) {
    return str1.localeCompare(str2);
}
console.log(arr);

对象排序

将下面四个学生按照得分，从低到高进行排序。

// sorting
person.sort(compare);
function compare(obj1, obj2) {
    return obj1.score - obj2.score;
}

//after sort
person.forEach( function(item, index, array) {
    document.write(item.name + " " + item.score +"<br>");
});