前端一些面试题

Q：如何判断一个变量是对象还是数组？

判断数组和对象分别都有好几种方法，其中用prototype.toString.call()兼容性最好。

function isObjArr(variable){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是数组');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点
            console.log('value是对象');
      }else{
          console.log('value不是数组也不是对象')
      }
}

ps：千万不能使用typeof来判断对象和数组，因为这两种类型都会返回"object"。

原文链接：https://juejin.im/post/5aad40e4f265da237f1e12ed

Q: 统计字符串字母个数

var str="aaaabbbcccddfhk";
var obj=[];
for(var i=0;i<str.length;i++){
var v=str.charAt(i);
if(obj[v]&&obj[v].value==v){
obj[v].count=++obj[v].count;
}
else{
obj[v]={};
obj[v].count=1;
obj[v].value=v;
}
}
for(key in obj)

console.log(obj[key].value+"="+obj[key].count+"&nbsp;");

ES5的继承和ES6的继承有什么区别？

ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。

ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。

具体的：ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。

ps：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。

链接：https://juejin.im/post/5aad40e4f265da237f1e12ed

Q：CSS3有哪些新增的属性？

这里可以分为边框、背景，渐变，阴影、2D转换 3D转换等之类的来说。
比如：边框(border-radius、border-shadow、border-image)之类的 。

Q：setTimeout的执行机制

setTimeout属于异步执行函数，遇到setTimeout会将该函数放入等待队列，等待当前主程序（除去setTimeout的部分）执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

Q：你知道哪些http状态码？

1xx：1开头的是信息状态码
2xx：2开头的是请求成功
3xx：3开头的是重定向
4xx：4开头的是客户端错误
5xx：5开头的是服务器错误

具体查看 https://juejin.im/post/590082e6a22b9d0065be1a5c

Q：反转字符串

转载自 https://juejin.im/post/590082e6a22b9d0065be1a5c

（1）使用字符串函数

//使用数组翻转函数
function reverseString(str){
    var array = str.split('');  //转换成字符串数组
    array = array.reverse();
    str = array.join('');
    return str;
}
//简写
function reverseString1(str){
    return str.split('').reverse().join('');
}

console.log(reverseString("helloworld"));  //dlrowolleh
console.log(reverseString1("helloworld"));  //dlrowolleh

（2）使用for循环

//使用for循环
function reverseString2(str){
    var newStr = "";
    for(var i=str.length-1; i>=0; i--){
        newStr += str[i];
    }
    return newStr;
}
console.log(reverseString2("helloworld"));  //dlrowolleh

（3）使用递归

//使用递归
function reverseString3(str){
    if(str===""){
        return "";
    }else{
        return reverseString3(str.substr(1)) + str.charAt(0);
    }
}
console.log(reverseString3("helloworld"));  //dlrowolleh

//简写
function reverseString4(str) {  
 return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);  
}   
console.log(reverseString4("helloworld"));  //dlrowolleh

Q：document.write的用法

http://blog.csdn.net/qq_34986769/article/details/52160532

Q：js for循环闭包问题及解决办法

https://www.cnblogs.com/ZinCode/p/5551907.html

http://www.jb51.net/article/87084.htm

1.变量声明const和let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

  function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

  function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

  function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

    const name = 'lux'
    name = 'joe' //再次赋值此时会报错

说一道面试题

    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

    // ES5告诉我们可以利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

达到相同的效果，es6简洁的解决方案是不是更让你心动！！！

链接：https://www.jianshu.com/p/287e0bb867ae

Q：四种函数调用的方法

1. 函数作为对象的属性进行方法调用

2. 正常函数调用

3. 构造函数调用（new一个）

4. apply/call

http://www.fed123.com/2017/08/29/%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E7%9A%84%E8%A7%92%E5%BA%A6%E7%90%86%E8%A7%A3call/

Q：get和post的区别

 GET使用URL或Cookie传参，而POST将数据放在BODY中。

 GET的URL会有长度上的限制，则POST的数据则可以非常大。

 POST比GET安全，因为数据在地址栏上不可见。

 GET请求的参数会保存在浏览器的历史记录中

Q: src和href的区别

src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

转自：http://www.jb51.net/web/77258.html

Q：XHTML和HTML的区别

最主要的不同：

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。