js知识总结整理

1、js是一门什么样的语言及特点？

        js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。

        主要的目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。

2、js的数据类型？

        基本数据类型：String、boolean、Number、undefined、null

        引用数据类型：Object、Array、Date、RegExp、Function

        拓展：如何判断数组数据类型？

               

                1、 obj instanceof Array 返回值判断；        

                2、es5和jquery都有方法Array.isArray()。

                3、toString.call(param) 判断；返回格式 [object
Array]             

3、获取所有的checkbox？

        var domlist = document.getElementsByTagName("input");

        var checkboxlist = [];

        var len = domlist.length;

        

        for (var i = 0; i < len; i++) {

                if(domlist[i].type == "checkbox"){

                        checkboxlist.push(domlist[i])

                }

        }

        //各大主流浏览器中，for与while在平时使用中效率上for循环效率略优。

4、绑定事件的方式？

        1、直接在dom里绑定：<div onclick="test()"></div>

        2、在js中通过onclick绑定：xxx.onclick=test;

        3、通过事件绑定：dom.addEventListener("click",test,boolean)

        (拓展：js事件流模型？)

                “事件冒泡”：事件由最具体的元素接收，然后逐级向上传播；

                “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体元素；

                “dom事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡；

                （附：事件流详解）

                        ie事件流：冒泡型事件：button->div->body

                        netscape事件流：捕获型事件：body->div->button

                        dom事件模型：body->div->button->button->div->body;

                        dom事件流同时支持两种事件模型：但是捕获事件先发生，从document对象开始，也在document对象结束

                        ie9以下不支持addEventListener/removeEventListener,采用attachEvent/detachEvent

                        （附：阻止事件传播）

                                w3c中，使用stopPropagation()方法阻止冒泡;阻止默认事件：preventDefault()；

                                ie中，cancelBubble = true阻止事件冒泡；阻止默认事件：window.event.returnValue = false;

5.什么是Ajax和JSON，它们的优缺点？

        Ajax（Asynchronous Javascript And XML/异步的javascript和xml）。

        优点：

                可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量。

                避免用户不断刷新或者跳转页面，提高用户体验。

        缺点：

                对搜索引擎不友好。

                要实现ajax下的前后退功能成本较大

                可能造成请求数的增加

                跨域问题限制

        JSON：json是一种轻量级的数据交换格式，ECMA（欧洲计算机制造商协会）的一个子集；

                优点：轻量级，占用带宽小、易于人的阅读和编写，便于机器（js）解析，支持复合数据类型（数组，对象，字符串，数字），能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量。

                缺点：相对xml通用性较差，数据可描述性较差；

        

        （拓展：json与xml的区别？）

                xml定义：可拓展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的语言。xml是SGML（标准通用标记语言）的子集，非常适合web传输。

                xml提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

                xml优点：

                        1、格式统一，符合标准；

                        2、容易与其他系统进行交互，数据共享比较方便

                缺点：

                        1、xml文件格式文件庞大，格式复杂，传输占用更多带宽

                        2、服务器和客户端都需要花费大量代码来解析xml，服务器和客户端代码变得异常复杂和不容易维护。

                        3、客户端不同浏览器之间解析xml的方式不一致，需要重复编写很多代码。

                        4、服务器端和客户端解析xml花费更多资源和时间

                与json的优缺点比较？

                        1、可读性、可拓展性都很出色，但是xml的编码难度更高。

                        2、json的解码难度几乎为0，而xml得考虑子父节点；

                        3、xml的通用性更广，json则广泛应用于前端。

                        4、json相对xml，数据体积更小；与js交互更方便；

                        5、json对数据的描述性比xml较差；

                        6、json的无论是传播还是解析速度远远快于xml；

6、什么情况会出现undefined？

        当只声明变量，并未赋值初始化的时候这个变量的值就是undefined；

        

        (拓展：解释原因？)

        var a=null;

        console.log(typeof a);        //        object

        null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象。所以typeof返回object；

7、双等号的类型转换？

        var undefined;

        undefined == null; // true

        1 == true;  // true

        2 == true;  // false

        0 == false; // true

        0 == '';   // true

        NaN == NaN; // false

        [] == false; // true

        [] == ![];  // true

        // alert(!![])        //true

        // alert(![])        //false

        // alert([] == 0)        //true

        // alert(false == 0)        //true

        分析：undefined与null相等 但不全等（===）

        当为number与string时，会将string转换为number；

        number和boolean时，会将boolean转换为number

        number或string与Object，会将Object转换成number或string

        （附：js中的数据类型转换？）

                函数转换：parseInt()、parseFloat()、toString()

                强类型转换：Boolean()、Number()、String()

                弱类型转换：“==”、“-”、“+”、if（）

                        

        （拓展：for循环中的效率问题？）

                1.for(var i=0;i<arr.length;i++)

                2.for(var i in arr)

                3.for(var i=0,len=arr.length;i<len;i++)

                第三种效率更高！

                在大数据下：

                        第三种方式比第一种执行速度快3~4倍；

                        至于第三种比第三种快100多倍开外（详细数据：http://www.111cn.net/wy/js-ajax/39368.htm）

8、基础算法？已知：var str="get-element-by-id",写一个函数转化成驼峰形式（你懂得）？

        function Naizi(str){

                var arr = str.split("-");

                var target = "";

                for(var i=0,len=arr.length;i<len;i++){

                        target+=arr[i].substr(0,1).toUpperCase()+arr[i].substr(1);

                }

                return target;

        }

9、基础API？

        数组：

                var numberArray = [3,6,2,4,1,5];

                倒序：numberArray.reverse();

                降序：numberArray.sort(function(a-b){return b-a})

               
连接：concat()
方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

        日期：

                输出YYYY-MM-DD

                function getYMD(){

                        var date = new Date();

                        var y = date.getFullYear();

                        var m = date.getMonth()+1;

                        var d = date.getDate();

                        function getDouble(str){

                                var str; 

                                if(str < 10){

                                        return str = "0"+str;

                                }else{

                                        return str = str;

                                }

                        }

                        return y +"-"+getDouble(m)+"-"+getDouble(d);

                }

                （值得一提：date.getDay() 返回星期0~6  星期日~星期六）

10、正则？

        var str = ”<tr><td>{$id}</td><td>{$name}</td></tr>”的{$id}替换成10，{$name}替换成Tony 

        var target = str.replace(/{\$id}/,"10").replace(/{\$name}/,"Tony");

        (拓展:tirm方法实现)

                var str = "     sdasad    ";

                function trim(str){

                        return str.replace(/(^\s*)|(\s*$)/g,"");

                }

        (拓展：转义字符方法实现)

                function escapeHTML(str){

                return str.replace(/[<>"&]/g,function(match,key){

                        switch(match){

                                case '<':

                                        return '\<';

                                        break;

                                case '>':

                                        return '\>';

                                        break;

                                case '"':

                                        return '\"';

                                        break;

                                case '&':

                                        return '\&';

                                        break;

                        }

                })

        }

        （拓展：正则构造函数var reg=new RegExp("xxx")与正则字面量形式var reg=//有什么不同？匹配邮箱？）

                使用RegExp()构造函数的时候，不仅需要转义引号（“\”），并且还需要双反斜杠\\表示一个\。使用正则字面量形式效率更高；

                邮箱匹配：

                        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]{2,3})$/;

11、短路表达式 || &&？

        foo = foo || bar；

        如果foo 为真 foo = foo； 否则 foo = bar；

        || 第一个为真则返回第一个，否则返回第二个；

        && 第一个为假则返回第一个，否则返回第二个；

        作用：精简代码，不过可读性较低；

12、随机取10个10-100数？

        function getNumArr(n){

                var arr = [];

                for(var i = 0;i <n;i++){

                        arr.push(parseInt(Math.random()*90+10))

                }

                return arr;

        }

13、dom增删查改？

        增：

                document.createElement(tag);

                document.createTextNode();

                document.createDocumentFragment() 

                dom.appendChild(sondom);

                dom.insertBefore(newdom,targetdom);

        删：

                document.removeChild();

        改：

                document.replaceChild();

        查：

                getElementById()

                getElementsByTagName()

                getElementsByName();

14、字符串操作？

        var str = 'http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e';

        //将GET参数按照键值对的形式输出json

        function getGEt(str){

                var dataStr = str.split("?")[1];

                var result = {};

                if(dataStr.indexOf("&") > 0){

                        var bigArr = dataStr.split("&");

                        for(var i = 0,len = bigArr.length;i<len;i++){

                                var smallArr = bigArr[i].split("=");

                                result[smallArr[0]] = smallArr[1];

                        }

                }else{

                        var arr = dataStr.split("=");

                        result[arr[0]] = arr[1];

                }

                return result;

        }

15、闭包的使用？

        for(var i = 0,len=domlist.length;i<len;i++){

                domlist[i].onclick = function(){

                        console.log(i);

                }

        }

        都输出domlist.length；

        onclick 是一个异步函数；当onclick执行的时候i此时变成了domlist.length；

        解决：（闭包）

                for(var i=0,len=domlist.length;i<len;i++){

                        domlist[i].onclick = (function(a){

                                return function(){

                                        console.log(a)

                                }

                        })(i);

                }

                //也可以设置私有属性；

16、实现函数clone，包括Number、String、Object、Array、Boolean?

        function clone(param){

                var result;

                switch(typeof param){

                        case "object":

                                if(param instanceof Array){

                                        result = [];

                                        for(var i=0,len=param.length;i<len;i++){

                                                result.push(param[i]);

                                        }

                                        return result;

                                } else if(param instanceof Object){

                                        result = {};

                                        for(var key in param){

                                                result[key] = param[key];

                                        }

                                        return result;

                                }else{

                                        return result = param;

                                }

                                break;

                        default:

                                return result = param;

                                break;

                }

        }

17.老掉牙的数组去重？

        var arr = [123,"1",123,12,312,3,123,"123",1,23,123,12,312,3,123,123,123,123,12]        function gotU(arr){

                var result = [];

                var json = {};

                for(var i = 0,len=arr.length;i<len;i++){

                        var temp = arr[i];

                        var type = typeof temp;

                        if(!json[temp]){

                                json[temp] = [type];

                                result.push(temp);

                        }else{

                                if(json[temp].indexOf(type) < 0){

                                        json[temp].push(type);

                                        result.push(temp);

                                }

                        }

                }

                return result;

        }

18.提取对象属性与方法？

        粗壮的旺财是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。

        function Dog(){

                this.name = "粗壮的旺财";

                this.type = "cute";

                this.animalkind = "dog";

        }

        Dog.prototype={

                sound:function(){

                        alert("wow GG");

                },

                seeMaster:function(){

                        this.sound();

                },

                seeMasterBeingB:function(){

                        var bitches = 50;

                        for(var i=0;i<bitches;i++){

                                this.seeMaster();

                        }

                }

        }

        小猪和粗壮的旺财一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。

        function MadDog(){

                this.name = "小猪";

        }

        MadDog.prototype = new Dog();

        MadDog.prototype.foundSomeoneIsAGay=function(){

                var self = this;

                this.timer = setInterval(function(){

                        self.seeMaster();

                },500)

        } 

19、定义一个方法代理console.log。

        function log(){

                console.log.apply(null,arguments);

        }

        (拓展：apply与call的区别？)

                apply与call的作用相同，即调用一个对象的一个方法，改变该方法的this的指针。

                在第二个参数：apply传入的是一个参数数组，而call传入的是离散型参数。

     
（拓展：给log添加前缀？）
        function log(){
                var args = Array.prototype.slice.call(arguments);
                args.unshift("aa");
                console.log.apply(null,args);
        }

20、在js中什么是伪数组？如何转化成真数组？

        伪数组：无法直接调用数组的方法，但是仍含有length属性。

        getElementsByTagName/getElementsByClassName/childNodes/arguments 都是伪数组;

        通过使用Array.prototype.slice.call(fakeArray)将伪数组转化为真数组；

21、作用域与this？

        var User = {

                count:1,

                getCount:function(){

                        return this.count;

                }

        }

        console.log(User.getCount())  //1

        var fn = User.getCount;

        console.log(fn());        //undefined

        为什么？

                fn是在window的上下文中被执行的，所以会访问不到count属性。也就是说this指向的是window.

                最好的方法还是使用混合对象：构造函数+原型对象构建

                function User(){

                        this.count = 1;

                }

                User.prototype={

                        getCount:function(){

                                return this.count;

                        }

                }

                var fn = new User();

                console.log(fn.getCount());
本文主体源自：http://www.cnblogs.com/coco1s/p/4029708.html

分类: javascript