task-18

问答

数组方法里 push、pop、shift、unshift、join、split分别是什么作用？

push()，向数组的末尾添加一个或更多元素，并返回新的长度

pop()， 删除并返回数组的最后一个元素

shift()，删除并返回数组的第一个元素

unshift()，向数组的开头添加一个或更多元素，并返回新的长度

join()，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

split()，用指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。分隔符可以是字符串，也可以是一个正则表达式。split()方法可以接受可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小。

代码

数组：

1. 用 splice 实现 push、pop、shift、unshift方法 (***)

var example = [2,4,5,6,7,2];
function push(arr,value){
    arr.splice(arr.length,0,value);
    return arr.length;
}
function pop(arr){
    return arr.splice(arr.length-1,1)[0];
}

function shift(arr){
    return arr.splice(0,1)[0];
}

function unshift(arr,value){
    arr.splice(0,0,value);
    return arr.length;
}

数组-1.png

2. 使用数组拼接出如下字符串 (***)

    var prod = {
        name: '女装',
        styles: ['短款','冬季','春装']
    };
    function getStr(data){
        var htmls = [];
        htmls.push('<dl class="product">');
        htmls.push('<dt>' + prod.name + '</dt>');
        for(var i = 0; i < prod.styles.length; i++){
            htmls.push('<dd>' + prod.styles[i] + '</dd>');
        }
        htmls.push('</dl>');
        return htmls.join('');
    }
    var result = getStr(prod);  

数组-2.png

3. 写一个 find 函数，实现以下功能 (***)

    var arr = ["test", 2, 1.5, false];
    function find(array,value){
        for(var i = 0; i < array.length; i++){
            if(value === array[i]){
                return i;
            }
        }
        return -1;
    }
    find(arr, "test")  // 0
    find(arr, 2)  // 1
    find(arr, 0)  // -1

数组-3.png

4. 写一个函数 filterNumeric，把数组 arr 中的数字过滤出来赋值给新数组 newarr，原数组 arr 不变 (****)

    var arr = ["a", "b", 1, 3, 5, "b", 2];
    newArr = filterNumberic(arr);  //[1,3,5,2]
    function filterNumberic(){
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(typeof(arr[i]) === 'number'){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

数组-4.png

5. 对象 obj 有个 className 属性，里面的值为的是空格分割的字符串(和 html 元素的 class 特性类似)，写 addClass、removeClass 函数，有如下功能：(****)

    var obj = {
        className: 'open menu'
    };
    addClass(obj, 'new')  // obj.className = 'open menu new'
    addClass(obj, 'open');  // 因为 open 已经存在，所以不会再次添加 open
    addClass(obj, 'me');  // me 不存在，所以 obj,className 变为 'open menu new me'
    console.log(obj.className);  // "open menu new me"

    removeClass(obj, 'open');  // 去掉 obj.className 里面的 open，变为 'menu new me'
    console.log(obj.className);
    removeClass(obj, 'blala');  // 因为 blala 不存在，所以此操作没有任何影响
    console.log(obj.className);

    function addClass(obj, value){
        var classNameArray = obj.className.split(' ');  // 字符串 --> 数组
        // 检测是否已存在该字符串
        for(var i = 0; i < classNameArray.length; i++){
            if(classNameArray[i] === value){
                return "已存在此 className";
                // return obj.className;
            }
        }
        classNameArray.push(value);
        obj.className = classNameArray.join(' ');  // 数组 --> 字符串
        // obj.className =  classNameArray.push(value).join(' ');
        return obj.className;
    }

    function removeClass(obj,value){
        var classNameArray = obj.className.split(' ');  // 字符串 --> 数组
        for(var i = 0; i < classNameArray.length; i++){
            if(classNameArray[i] === value){
                classNameArray.splice(i,1);
            }
        }
        obj.className = classNameArray.join(' ');  // 数组 --> 字符串
        return obj.className;
    }

数组-5.png

6. 写一个 camelize 函数，把 my-short-string 形式的字符串转化成 myShortString 形式的字符串 (***)

    camelize("background-color");
    camelize("list-style-image");
    function camelize(str){
        var strToArray = str.split('-');
        console.log(strToArray);
        for(var i = 1; i < strToArray.length; i++){
            // 方法1，相当麻烦的一种(再将里面拆解)
            // var strArrayInner = strToArray[i].split('');
            // strArrayInner[0] = strArrayInner[0].toUpperCase();
            // strToArray[i] = strArrayInner.join('');

            // 方法2
            strToArray[i] = strToArray[i][0].toUpperCase() + strToArray[i].substr(1);
            // strToArray[i] = strToArray[i][0].toUpperCase() + strToArray[i].slice(1);  // .substr(1) VS .slice(1)
        }
        var upperStr = strToArray.join('');
        console.log(upperStr);
    }

代码-6.png

7. 如下代码输出什么？为什么? (***)

arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]()  // ?

输出结果为：弹框显示出undefined，控制台打印出hello hunger valley

原因：arr.push(function)(){...}这句代码会把函数function(){...}添加到数组的末尾，而arr[arr.length-1]运行的就是数组的最后一项，

所以最终结果就是将函数fucntion(){...}运行一遍，console.log(...)返回undefined，所以弹框显示undefined

8. 写一个函数filterNumericInPlace，过滤数组中的数字，删除非数字。要求在原数组上操作 (****)

   var arr = ["a", "b", 1, 3, 4, 5, "b", 2];
    // 对原数组操作，不需要返回值
    filterNumber(arr);
    // console.log(arr);  // [1,3,4,5,2]
    // console.log(filterNumber(arr))

    // var arrNumber = [];
    // arr.map( function(el){ if(typeof el === 'number') {arrNumber.push(el)} } );
    // console.log(arrNumber);

    function filterNumber(value){

        // 方法 1
        for(var i = 0; i < value.length; i++){
            if( typeof(value[i]) !== 'number' ){
                value.splice(i,1);
                i--;
            }
        }
        return value;
        
        // 方法 2  把 'string' “赶到” 数组的最后，再把它割了。 !!! 但是这个方法会把原来的 'number' 的顺序打乱了
        // var value = value.sort();
        // for(var i = 0; i < value.length; i++){
        //     if( typeof(value[i]) !== 'number'){
        //         value.splice(i, value.length - i);
        //     }
        // }
        // return value;

        // 方法 3 把数组每一个的 'string' 赋给一个新的数组，再将这个新数组赋值给原数组 
        // var temp = [];
        // for(var i = 0; i < value.length; i++){
        //     if(typeof(value[i]) === 'number'){
        //         temp.push(value[i]);
        //         // temp[i] = value[i];
        //     }
        // }
        // value = temp;
        // arr = temp;
    }

代码-8.png

9. 写一个 ageSort 函数实现数组中对象按age从小到大排序 （***）

    var john = {
        name: "John Smith",
        age: 23
    };
    var mary = {
        name: "Marry Key",
        age: 18
    };
    var bob = {
        name: "Bob-small",
        age: 6
    };
    var people = [john, mary, bob];
    ageSort(people)  // [ bob, mary, john]
    // console.log(people[0].age)

    function ageSort(arr){
        arr.sort(function(a,b){
            return a.age > b.age;
        })
    }

代码-9.png

10. 写一个filter(arr, func) 函数用于过滤数组，接受两个参数，第一个是要处理的数组，第二个参数是回调函数(回调函数遍历接受每一个数组元素，当函数返回true时保留该元素，否则删除该元素)。实现如下功能： （****）

    function isNumberic(el){
        return typeof el === 'number';
    }
    arr = ["a",3,4,true,-1,2,"b"];

    arr = filter(arr, isNumberic);  // arr = [3,4,-1,2]  过滤出数字
    arr = filter(arr, function(val) { return (typeof val === 'number') && (val > 0)} );  // arr = [3,4,2]  过滤出大于 0 的整数

    function filter(arr,func){
        for(var i = arr.length-1; i >= 0; i--){
            if(!func(arr[i])){
                arr.splice(i,1);
            }
        }
    }

代码10-1.png 代码10-2.png

字符串：

1. 写一个 ucFirst函数，返回第一个字母为大写的字符 （***）

    function charUpper(value){
        // var value = value[0].toUpperCase() + value.substr(1);
        // return value;
        return value[0].toUpperCase() + value.substr(1);
    }

代码二-1.png

2. 写一个函数truncate(str, maxlength), 如果str的长度大于maxlength，会把str截断到maxlength长，并加上...，如 （****）

    function truncate(str, maxlength){
        if(str.length > maxlength){
            return str.slice(0,maxlength) + "..."
            // console.log(str)
            // return str.substr(0, maxlength) + '...';
        }else{
            return str;
        }
    }

代码二-2.png

数学函数

1. 写一个函数，获取从min到max之间的随机整数，包括min不包括max （***）

    function rangeRandomNumber1(min,max){
        return Math.floor(Math.random() * (max-min)) + min;
    }

代码三-1.png

2. 写一个函数，获取从min都max之间的随机整数，包括min包括max （***）

    function rangeRandomNumber2(min,max){
        return Math.floor(Math.random() * (max-min+1)) + min;
    }

代码三-2.png

3. 写一个函数，获取一个随机数组，数组中元素为长度为len，最小值为min，最大值为max(包括)的随机整数 （***）

    function getRandomArray(len,min,max){
        var arr = new Array(len);
        function getRandomNumber(min,max){
            return Math.floor(Math.random() * (max-min+1)) + min;
        }
        for(var i = 0; i < len; i++){
            arr[i] = getRandomNumber(min,max);
        }
        return arr;
    }

代码三-3.png

4. 写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。

    function getRandomStr(n){
        var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var result = '';
        for(var i = 0; i < n; i++){
            result += str[Math.floor(Math.random() * str.length)]
        }
        return result;
    }

代码三-4.png