JS准备

2、 面试的信心来源于过硬的基础
]
1、 web前端常见面试题汇总

一、ES5、ES6去重
1、ES5去重

提示和注释
注释：indexOf() 方法对大小写敏感！
注释：如果要检索的字符串值没有出现，则该方法返回 -1。

var arr=[1,2,2,3,3,4,4,4,-1,-1,-2,-2,-2,-2];
var result=[];//输出数组
for(var i=0; i < arr.length; i++){
    //如果在结果数组result中没有找到arr[i],则把arr[i]压入结果数组result中
    if(result.indexOf(arr[i]) == -1){
        result.push(arr[i]);
    }
}
alert(result);

结果：alert: "1,2,3,4,-1,-2"

2、ES6去重

const arr=[1,1,1,2,2,2,3,3,3,-1,-1,-1,-2,-2];
function removal(arr){
    //Array.from()作用是将类似于数组Set(arr)转换为一个新的数组，new Set(arr)方法是直接去重
    return Array.from(new Set(arr));
}
alert(removal(arr));

结果：alert: "1,2,3,-1,-2"

二、JQuery ajax方法及参数

$.ajax({

        type: 'GET',    // 这是请求的方式 可以是GET方式也可以是POST方式, 默认是GET

        url: ' xxx.php ',   // 这是请求的连接地址 一般情况下这个地址是后台给前端的一个连接，直接写就可以

        dataType: 'json',  // 这是后台返回的数据类型 一般情况下都是一个json数据， 前端遍历一下就OK

        async: true, // 默认为true，默认为true时，所有请求均为异步请求，如果需要发送同步请求，需设置为false,

        timeout: 8000, // 设置请求超时时间（毫秒）。此设置将覆盖全局设置

        data: {
                // 要传递的参数
                'xxx' : 'xxx',
                ... ... 
        },

        beforeSend: function () {
                // 在发送请求前就开始执行 （一般用来显示loading图）
        }，

        success: function (data) {
                // 发送请求成功后开始执行，data是请求成功后，返回的数据
        },

        complete: function () {
                //当请求完成后开始执行，无论成功或是失败都会执行 （一般用来隐藏loading图）
        }，

        error: function (xhr, textStatus, errorThrown) {
                //  请求失败后就开始执行，请求超时后，在这里执行请求超时后要执行的函数
        }
}).done(function () {
        // 这个函数是在ajax数据加载完之后，对数据进行的判断，在涉及到对ajax数据进行操作无效时，在这个函数里面写是可以起到效果的
})

三、前端开发要注意的浏览器兼容性问题整理
解决浏览器兼容性问题，还是从三个方面入手：html部分、css部分、js部分。

   1、html部分

   a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上

   解决办法是：htmlshim框架可以让低于IE9的浏览器支持html5

   b、img的alt属性，在图片不存在的情况下，各浏览器的解析不一致

   在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字

   c、ul标签内外边距问题

   ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

   2、css部分：

   a、css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

   IE的条件注释hack：

      

   

   b、IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍

   解决办法：display:block;

   c、IE6下图片的下方有空隙

   解决方法：给img设置display:block;

   d、IE6下两个float之间会有个3px的bug

   解决办法：给右边的元素也设置float:left;

   e、IE6下没有min-width的概念，其默认的width就是min-width

   f、IE6下在使用margin:0 auto;无法使其居中

   解决办法：为其父容器设置text-align:center;

   g、 被点击过后的超链接不再具有hover和active属性

   解决办法:按lvha的顺序书写css样式

   h、在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

   i、IE6下无法设置1px的行高，原因是由其默认行高引起的

   解决办法：为期设置overflow:hidden;或者line-height:1px;

   3、js部分

   a、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

   b、事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

   c、我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

   d、在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。

   比如：var year= new Date().getYear();

   e、ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

   f、IE中不能操作tr的innerHtml

   g、获得DOM节点的父节点、子节点的方式不同

   其他浏览器：parentNode  parentNode.childNodes

   IE：parentElement parentElement.children

四、