面试题2018-1-26

JS部分

1  Math.max.apply([2,3,4],[4,5,6]);

2  将[2,3,4,5]变成[{a:2},{a:3},{a:4},{a:5}]；用过map方法吗？

3  给[2,3,3,4,5,5,7]如何返回[3,5]，重复的部分？

4  获取浏览器cookie，设置cookie的值，如userId；

5  获取浏览器信息；

6  写一个完整的ajax请求；

7  写一个方法getQuery（key，url），如将https://www.baidu.com/s?wd=apply%20js&rsv_spt=1&rsv_iqid=0xb6&issp=1&f=8&rsv_bp=022  ，输入key，url,能拿后面的value值；

8  用过es6吗？你最喜欢它的哪个新特性？

css部分：

9  position有哪些值？

10  box-sizing有哪些值？

答案：

1 答案：

Math,max(arg1,arg2)只接受两个参数，比较两个数字的大小，返回最大值，但是却不接受数组作为参数。当然可以写个函数遍历比较之类的等等，此处不描述。

apply方法第二个参数为参数的数组，明白了吧，虽然我们传入的是数组参数，但是apply会将数组拆分并传入调用的函数。可以说是比较巧的用法了。

2 答案：

var arr=[];

[2,3,4,5].map(function(val,index){

　　var obj = {};

　　obj.a=val;

　　arr.push(obj);

});

arr.map(function(val,index,curObj){   

　　//val  遍历的当前值

　　//index 当前下标

　　//curObj  当前对象arr

  });

3 答案：

4 答案：

document.cookie  //获取所有cookie ，用分号和空格隔开的

document.cookie="www=wlz"   //设置cookie

//设置一个过期时间
//var oDate=new Date();
//oDate.setDate(oDate.getDate()+7);//设置为当前时间起7天后过期
//document.cookie='name=Jack;expires='+oDate.toGMTString();
//alert(typeof oDate);//odate类型是object类型，需要转换为字符串；
//alert(oDate.getDate()); //获取的是当前月份的日号，如5月25，输出的是25

6  答案：

    //获取用户信息
    function getUserInfo(){
        $.ajax({
            type:"GET", 
            async:false, //处理成同步方式
            url:_http_error_statues.web_service_url+_http_error_statues.web_service_name+"currentUser", 
            dataType:"json",
            cache:false, 
            success:function(data){
                userInfo = data;
            },
            error:function(){}
        });
    }

或者：

//加载导航下部的页面
        $.ajax({
            url:"src/modules/" + filePath + "/index.html",
            contentType:"text/html",
            success:function(template){
                if(navMenus.hasRightContainer()){
                    var rightContainer = $('#rightContainer');
                    rightContainer.html(template);
                }else{
                    container.html(template);
                }
                require(["modules/" + filePath + "/index"],function(index){                                
                    index(container, param, userInfo);
                });
            },
            error: redirectToNotFoundPage
        });

或者最小的：

$.ajax({
            url:"src/modules/error/error404.html",
            contentType:"text/html",
            success: function(template){
                container.html(template);
            }
        })

最常见字符串操作方法：

    //string.substr(起始下标,指定长度-可选)
    //string.indexOf('?') > -1 //string存在？  返回子字符串第一次出现的位置，从startIndex开始查找，找不到时返回-1
    //string.split('?')[0]  //分割成数组
    //array.slice(开始下标, 结束下标-可选)
　　//arr.slice(start,end);  两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从start到end-1的字符

5 答案

Navigator 对象属性   navigator属于window对象

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

7 用split方法

8 略

9  position的值：

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

10 box-sizing的值：

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

普通的盒子模型是：  盒子大小是：盒子宽 = width（内容宽）+padding+border        盒子高= height（内容高）+padding+border

设置border-box:   盒子大小是： 盒子宽=width=（内容宽）+padding+border      盒子高=height=（内容高）+padding+border