前端面试题总结--1 JS篇

妹子就要找工作了，所以时候要研究一下面试题，总结一下，查缺补漏。

所以要开始搜刮各种的面试题做练习啦~~

1.JS中DOM节点操作，添加，删除，插入，查询，创建，复制节点

        //1.创建节点        document.createElement();//创建一个新元素        document.createTextNode();//创建一个文本节点        //2.查找节点        document.getElementById('');//按id查找        document.getElementsByClassName('');//按类名查找        document.getElementsByTagName('');//按节点名称查找        document.getElementsByName('');//按name查找        //3复制节点        cloneNode(true)//true:深复制，复制该元素以及后代元素        cloneNode(false)//false:浅复制，只复制节点本身        //4节点操作        appendChild(node)//在末尾添加元素        insertBefore(node,targrt)//在targrt几点之前插入元素        removeChild(node)//移除父节点的某个子节点        replaceChild(newnode,oldnode)//将父元素的某个子元素替换为新元素

2.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

    function clone(obj){            var o;            switch (typeof obj){                case 'undefined':                    break;                case 'string':                    o=obj+'';                    break;                case 'number':                    o= obj+0;                    break;                case 'boolean':                    o = obj;                    break;                case 'object':                    if(obj === null){                        o = null;                    }else{                         if(Object.prototype.toString.call(obj).slice(8, -1) === "Array"){                            o = [];                            for(var i=0;i<obj.length;i++){                                o.push(clone(obj[i]));                            }                         }else{                            o={};                            for(var j in obj){                                o[j] = clone(obj[j]);                            }                         }                    }                    break;                default:                    o = obj;                    break;            }            return o;        }

3.javascript的typeof返回哪些数据类型

string,number,boolean,undefined,object,function

4.js 实现数组去重

数组去重这个问题好像还挺多问到的，这个问题并不是很困难，方法也有很多，这里我只写了两种。

        function sort1(){//方法1            var arr1 = [0,1,2,2,3,5,8,8,4,4,6];            var arr2 = [];            for(var i=0;i<arr1.length;i++){                if(arr2.indexOf(arr1[i]) < 0){                    arr2.push(arr1[i]);                }            }            return arr2;        }        function sort2(){//方法2            var arr1 = [0,1,2,2,3,5,8,8,4,4,6];            var arr2 = [];            arr1.sort(function (a,b) {                return a-b;            })            for(var i=0;i<arr1.length-1;i++){                if(arr1[i] != arr1[i+1]){                    arr2.push(arr1[i]);                }            }            arr2.push(arr1[arr1.length-1]);            return arr2;        }

5.统计一行字符串中字母个数或出现次数最多的字母

var str = "aaaabbbccccddfgh";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){    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 }

6.变量提升
写出下列程序的运行结果

function test() {            console.log(a);            console.log(foo());            var a = 1;            function foo() {            return 2;               }        }        test();

答案为undefined，2
关于变量提升的问题，可以参见博主的文章 关于js中变量作用于和变量提升的那些事

7.写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {    if (str && typeof str === "string") {        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符    }}

这里主要是考察的正则表达式的使用，我决定明天要复习一下正则表达式啦，明天博主会更的~

8.请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

具体信息信息科参考博主文章 关于本地存储的那些事

9.参数的作用范围

考虑下面的JavaScript代码：
(function() { var a = b = 5；})()；console.log(b)；
会输出什么样的结果？

回答：
上面的代码会打印 5。

这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。这个问题的另一个诀窍是，它没有使用严格模式 (‘use strict’；) 。如果启用了严格模式，代码就会引发ReferenceError的错误：B没有定义（b is not defined）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：

(function() { ‘use strict’； var a = window.b = 5；})()；console.log(b)；

10.this 的用法

写出一下程序的运行结果

        var fullname = 'John Doe';        var obj = {               fullname: 'Colin Ihrig',            prop: {                fullname: 'Aurelio De Rosa',                getFullname: function() {                    return this.fullname;                }            }        };        console.log(obj.prop.getFullname());        var test = obj.prop.getFullname;        console.log(test());

答案是Aurelio De Rosa和John Doe。

原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。

　　在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。