关于JavaScript 常见的面试题

关于JavaScript常见的面试题总结

一、JavaScript基本数据类型　　　

null：空、无。表示不存在，当为对象的属性赋值为null，表示删除该属性
undefined：未定义。当声明变量却没有赋值时会显示该值。可以为变量赋值为undefined
number：数值。最原始的数据类型
string：字符串。最抽象的数据类型
boolean：布尔值。最机械的数据类型
object：对象。面向对象的基础

　　怎么判断是否是某数据类型??

　　typeof:

alert(typeof 1);                // 返回字符串"number"

alert(typeof "1");              // 返回字符串"string"

alert(typeof true);             // 返回字符串"boolean"

alert(typeof {});               // 返回字符串"object"

alert(typeof []);               // 返回字符串"object "

alert(typeof function(){});     // 返回字符串"function"

alert(typeof null);             // 返回字符串"object"

alert(typeof undefined);        // 返回字符串"undefined"

示例代码：

<script type="text/javascript">

             var app={};

             alert(typeof app);

</script>

运行效果：

二、闭包的相关问题

　　问题：点击每个li输出里面的内容

示例代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>闭包</title>

    </head>

    <body>

        <ul id="parent">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

        </ul>

        <script>

            var ul = document.getElementById('parent');

            var li = ul.getElementsByTagName('li');

            for(var i=0;i<li.length;i++){

                li[i].onclick=function(){

                    alert(i);

                }

            }

        </script>

    </body>

</html>

运行效果：

我点击的是3 而弹出i的是却是7

原因就在于点击事件的函数内部使用外部的变量i一直在变化，当我们指定click事件时并没有保存i的副本，这样做也是为了提高性能，但达不到我们的目的，我们要让他执行的上下文保存i的副本，这种机制就是闭包。

因此，小编总结了三种比较常见的办法让点击每个li输出里面的内容

No1:　

运行效果：

达到了我们想要的效果

理解：当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数，定义在一个函数内部的函，创建一个闭包环境，让返回的这个子程序抓住i，以便在后续执行时可以保持对这个i的引用。内部函数比外部函数有更长的生命周期；函数可以访问它被创建时所处的上下文环境。

No2:

运行效果：

　达到了我们想要的效果

　理解：使用this的原理，因为对于this的隐式绑定来说，this指向的是调用位置上的包含对象，也就是你点击的那个li[i]。this 谁调用它他就指向谁通过this的指向就可以得到我们想要的结果

No3:

运行效果：

理解：使用的是事件代理以及event事件的内置属性来达到效果。

二、JavaScript面向对象

　对象就是“键/值”对的集合并拥有一个连接到原型（prototype）对隐藏连接。

　2.1、对象常量（字面量）

　一个对象字面量就是包含在一对花括号中的零个或多个“键/值”对。对象字面量可以出现在任何允许表达式出现的地方。

对象的定义：　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>面向对象</title>

        <script>

            //空对象对象

            var obj={};

            //对象的属性

            var obj1 = {name:"foo",age:"19"};

            var obj2 = {"nick name":"dog"};

            //对象中的方法

            var obj4 = {

                price:99,

                inc:function(){

                    //obj4这个对象调用this  this指向obj4 obj4.price+=1 =100；

                    alert(this.price+=1);

                }

            }

            obj4.inc();

        </script>

    </head>

    <body>

    </body>

</html>

对象中可包含的内容：

对象常量可以出现在任何允许表达式出现的地方，对象、数组、函数可以相互间嵌套，形式可以多种多样。对象的值可以是：数组，函数，对象，基本数据类型等。

//对象中可包含的内容

            var obj5 = [{

                name: "jack"

            }, {

                name: "lucy",  //常量

                hobby:["读书","上网","代码"],  //数组

                friend:{name:"mark",height:198,friend:{}},  //对象

                show:function(){  //函数

                    console.log("大家好，我是"+this.name);

                }

            }];

            //对象中的this是动态的，指向的是：调用者

            obj5[1].show();

输出：大家好，我是lucy

2.2、取值

方法一：直接使用点号运算

 //3取值

            var obj6={"nick name":"pig",realname:"Rose"};

            console.log(obj6.realname);

            //console.log(obj6.nick name);  错误

2.3、枚举（遍历）

var obj7={weight:"55Kg","nick name":"pig",realname:"Rose"};

            for (var key in obj7) {

                console.log(key+"："+obj7[key]);

            }

运行结果：

weight：55Kg
nick name：pig
realname：Rose

输出的顺序是不一定的

2.4、更新与添加

如果对象中存在属性就修改对应值，如果不存在就添加。对象通过引用传递，它们永远不会被复制

var obj8={realname:"King"};

            obj8.realname="Queen";  //修改

            obj8.weight=1000;  //添加属性

            obj8.show=function()  //添加方法

            {

                console.log(this.realname+"，"+this.weight);

            }

            obj8.show();

输出：

Queen，1000

var obj8={realname:"King"};

            obj8.realname="Queen";  //修改

            obj8.weight=1000;  //添加属性

            obj8.show=function()  //添加方法

            {

                console.log(this.realname+"，"+this.weight);

            }

            obj8.show();

            //引用

            var obj9=obj8;   //obj9指向obj8的引用

            obj9.realname="Jack";

            obj8.show();

二、JavaScript当中的this

在JavaScript中this表示：谁调用它，this就是谁。

JavaScript是由对象组成的，一切皆为对象，万物皆为对象。this是一个动态的对象，根据调用的对象不同而发生变化，当然也可以使用call、apply修改this指向的对象。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

2.1、JavaScript中函数与方法的区分

在面向过程的语言中我们习惯把完成某个特定功能的代码块称为“函数”或“过程”，当然过程一般没有返回值。在面向对象语言中我们把对象的功能称为“方法”。但JavaScript是种介于面向对象与面向过程中间的语言，同样的方法有时是函数，有时是方法，如下所示：

<script type="text/javascript">

            //

            function show(){

                console.log("这是一个函数");

            }

            //

            (function(){

                console.log("这是一个函数表达式");

            })();

            //

            var obj1={

                show:function(){

                    console.log("这是一个方法");

                }

            };

            //

            function obj2(){  //obj2是函数，构造函数

                this.show=function(){

                    console.log("这是一个方法，是一个表达式");

                }

            }

            var obj3=new obj2();

        </script>

2.2、指向全局对象

当在全部范围内使用 this，它将会指向全局对象。一般是window对象，但全局对象不一定只有window，特别是在node.js环境中。作为函数调用时一般指向全局对象。

<script type="text/javascript">

            var name="tom";

            console.log(this.name);      //顶层对象，一般为window    

            function show()

            {

                console.log(this.name);  //顶层对象，一般为window

                return function(){

                    console.log(this.name);  //顶层对象，一般为window，因为返回的是函数

                }

            }

            var f1=show();

            f1();

        </script>

2.3、作为事件时的this

示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this</title>

    </head>

    <body>

        <input type="button" value="btnA" class="btn"/>

        <input type="button" value="btnB" class="btn"/>

        <input type="button" value="btnC" class="btn"/>

        <input type="button" value="btnD" onclick="handler()"/>

        <input type="button" value="btnE" id="btnE"/>

    <script>

        var btns= document.getElementsByClassName("btn");

        for (var i=0;i<btns.length;i++) {

            btns[i].onclick=handler;

        }

        function handler(){

            alert(this.value);

        }

         //handler中的this指向btnE

        document.getElementById("btnE").addEventListener("click",handler,false);

    </script>

    </body>

</html>

运行结果：

点击按钮A

点击按钮D

没有取到this的值此时的this指向了window对象

示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this</title>

    </head>

    <body>

        <input type="button" value="按钮F的值" id="btnF" />

        <input type="button" value="按钮G的值" id="btnG" onclick="app.show()"/>

        <script type="text/javascript">

            value="window的值"

            var app = {

                value: "app的值",

                show: function() {

                    alert(this.value); //如果show为事件，则this指向触发事件的对象

                },

                init: function() {

                    //handler中的this指向btnE

                    document.getElementById("btnF").addEventListener("click", this.show, false);

                }

            };

            app.show();   //"app的值"，show方法中的this指向app这个对象

            app.init();     //init中的this指向谁app对象

        </script>

    </body>

</html>

运行加载时的结果：

点击按钮F时

点击按钮G时：

在HTML元素上直接指定事件严格来说都不能说是事件绑定，只能描述是当按钮点击完成后执行的函数。如果想将执行时的对象带回，可以增加参数this。

三、JavaScript数组

3.1数组的定义

　　　　　　　var array01 = new Array(); //空数组

            //alert(typeof array01); object

            var array02 = new Array(5);

            alert(array02.length); 5

            var array03 = new Array("a","b" ,1,2,3,true,false);

            var array04 = [] //空数组

            var array05 = [2,3,4,"x","y"];

运行效果：弹出array02的长度

3.2访问数组：

　　　　　　　　//访问数组  No1

             console.log(array03[6]);

运行效果：

//访问数组  No2

             for (var i = 0; i<array05.length;i++) {

                 console.log("第"+(i+1)+"个值:   "+array05[i]);

             }

运行效果：

//访问数组  No3  枚举

             for(var i in array03){

                 console.log("下标为"+i+"的值为:   "+array03[i]);//此处是i的下标

             }

运行效果：

3.3、添加元素

将一个或多个新元素添加到数组未尾，并返回数组新长度

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])

示例代码：

//添加元素

            array03.push(5,8);    //添加到末尾

            array03.unshift("we"); //添加到末尾

             for(var i in array03){

                 console.log("下标为"+i+"的值为:   "+array03[i]);//此处是i的下标

             }

运行效果：

//添加到中间

            array05.splice(3,0,"w","e"); //从第三位开始插入 删除第三位后面 0 个元素 默认会删除3后面一个元素的

            for (var i=0;i<array03.length;i++) {

                console.log(array05[i]);

            }

运行结果：

3.4、删除

移除最后一个元素并返回该元素值

arrayObj.pop();

移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.shift();

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount);

示例：

//删除最后一个元素

            array03.pop();

            for (var i in array03) {

                console.log(array03[i]);

            }

运行效果：

//删除首个一个元素

            array03.shift();

            for (var i in array03) {

                console.log(array03[i]);

            }

运行效果：

//删除指定位置与个数

            array05.splice(1,2);//从下标第二的开始删 删2个

            for (var i=0 ;i<array05.length; i++) {

                console.log(array05[i]);

            }

运行效果：

3.5、截取和合并

以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

arrayObj.slice(start, [end]);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

示例：

//4.5、截取和合并

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

            var array52=[7,8,9,0,"a","b","c"];

            //截取，切片

            var array53=array51.slice(2);  //从第3个元素开始截取到最后

            console.log("被截取："+array53+"——"+array51);

            var array54=array51.slice(1,4);  //从第3个元素开始截取到索引号为3的元素

            console.log("被截取："+array54+"——"+array51);

            //合并

            var array55=array51.concat(array52,["d","e"],"f","g");

            console.log("合并后："+array55);

运行效果：

3.6、拷贝

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.slice(0);

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();

因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。

3.7、排序

反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.reverse();

对数组元素排序，返回数组地址

arrayObj.sort();

arrayObj.sort(function(obj1,obj2){});

示例：

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

            array71.sort();

            console.log("排序后："+array71);

            var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];

            array72.sort(function(user1,user2){

                return user1.age<user2.age;

            });

            console.log("排序后：");

            for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);

运行效果：

3.8、合并成字符

返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

arrayObj.join(separator);

//4.8、合并成字符与将字符拆分成数组

            var array81=[1,3,5,7,9];

            var ids=array81.join(",");

            console.log(ids);

            //拆分成数组

            var text="hello nodejs and angular";

            var array82=text.split(" ");

            console.log(array82);

运行效果：

3.9数组的排序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            /*

             *（1）在数据集之中，选择一个元素作为"基准"（pivot）。

             *（2）所有小于"基准"的元素，都放置于"基准"的"小值区域"（左边）；所有大于"基准"的元素，都被置于"基准"的"大值区域"（右边）。

             *（3）对以"基准"为分割线的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

             */

            //定义一个数组

            var arr = [85, 24, 63, 45, 17, 31, 96, 50];

            //定义一个存放结果的result

            var result = "";

            var quickSort = function(arr) {　

                if(arr.length <= 1) {

                    return arr;

                }

                //选取被排序数组中的任一元素作为"基准"（这里我们就选取数组中间的元素）

                var pivotIndex = Math.floor(arr.length / 2);　　

                var pivot = arr.splice(pivotIndex, 1);　　

                //声明两个数组分别用来放置"小值"和"大值"

                var left = [];　　

                var right = [];　

                //然后，开始遍历数组，小于"基准"的元素放入左边的子集，大于基准的元素放入右边的子集。

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

                    if(arr[i] < pivot) {　　　　　　

                        left.push(arr[i]);　　　　

                    } else {　　　　　　

                        right.push(arr[i]);　　　　

                    }　　

                }　　

                return result = quickSort(left).concat(pivot, quickSort(right));

            };

            //执行方法

            quickSort(arr);

            //输出结果

            console.log(result.join(" < "));

        </script>

    </head>

    <body>

    </body>

</html>

运行效果：

3.10数组的去重：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>数组去重</title>

        <script type="text/javascript">

            var array11 = [2, 3, 4, 2, 3];

            var newArr = []; //新建一个数组

            function unique1(arr) {

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

                    if(newArr.indexOf(arr[i]) == -1) { //若新数组中未包含该项则将其存入新数组

                        newArr.push(arr[i]);

                    }

                }

                return newArr;

            }

            unique1(array11);

            alert(newArr.length)//3

            for(var i in newArr){

                console.log(newArr[i]);

            }

        </script>

    </head>

    <body>

    </body>

</html>

运行效果：

4.在未知多少个数字输入框的情况下，计算这些输入框中数字的总和：

代码：

        $('input').keyup(function() {

            console.log($(this).val());

            var num = 0;

            $('input').each(function(index, item){

                num += Number($(item).val());

            });

            $("#business").text(num);

        });

效果：

附：

判断输入的是否是数字：

$.isNumber($(this).val());

判断输入的是否是大于0的数字：

$(this).val()<0;

4.1在一个table中，有未知多少个tr，我要选择最后三个用jQurey怎样实现：

代码：

$('tr td').slice(-3).css("color", "red");

效果：

5.1两个小案例

<ul class="ul">

        <li ><a href="#">第一条</a></li>

        <li ><a href="#">第二条</a></li>

        <li ><a href="#">第三条</a></li>

        <li ><a href="#">第四条</a></li>

        <li ><a href="#">第五条</a></li>

        <li ><a href="#">第六条</a></li>

        <li ><a href="#">第七条</a></li>

    </ul> 

    <span class="span">12.234567</span>

    <span class="span">43.7675</span>

    <span class="span">54.456765</span>

    <span class="span">23.76543</span>

    <span class="span">232.765</span>

    <span class="span">9876.4542345</span>

    <script type="text/javascript">

            var arr = [1,5,3,6];

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

                $(".ul li a:eq('"+arr[i]+"')").css("color","red");

                console.log(arr[i]);

            }

            var span=0;

            for(var i=0;i<$(".span").length;i++){

                span = Number($(".span:eq('"+i+"')").text());

                span = parseFloat(span.toFixed(2));

                $(".span:eq('"+i+"')").html(span);

            }

    </script>

运行效果：

6、jQuery 验证from表单提交文件类型

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

    <form action="002.html" method="post">

        <input type="file" name="myFile" id="myFile"/> <br />

        <input type="file" name="myImg" id="myImg" /> <br />

        <input type="submit" id="sub" value="提交"/><br />

    </form>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#sub").on('click',function(){

                 function check(){

                var filepathExl = $("input[name='myFile']").val();

                var extStartExl = filepathExl.lastIndexOf(".");

                var ext1 = filepathExl.substring(extStartExl, filepathExl.length).toUpperCase();

                var filepathImg = $("input[name='myImg']").val();

                var extStart = filepathImg.lastIndexOf(".");

                var ext = filepathImg.substring(extStart, filepathImg.length).toUpperCase();

                   if (ext1 != ".XLS" && ext1 != ".XLSX") {

                    alert("文件限于Excel格式");

                    return false;

                }

                   if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {

                    alert("图片限于bmp,png,gif,jpeg,jpg格式");

                    return false;

                }

            }

            return check();

            });

        });

    </script>

</body>

</html>

7、图片显示并修改

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

        <style>

            .topleftbox {

                width: 200px;

                height: 130px;

                border: 1px solid #262626;

                padding: 3px;

                border-radius:4px;

                margin-left: 10px;

                margin-top: 10px;

                float: left;

            }

            .topleftbox #addimga {

                display: block;

                width: 100%;

                height: 100%;

                background-size:100% 100%;

                background-position: center center;

                background-repeat: no-repeat;

            }

            .topleftbox #addimga input {

                width: 100%;

                height: 100%;

                opacity: 0;

            }

            #sub{margin: 120px 10px;}

        </style>

    </head>

    <body>

        <form method="get" action="001.html" enctype="multipart/form-data">

            <div class="topleftbox">

                <a class="addimga" id="addimga" href="javascript:;">

                    <input type="file" name="file" onchange="showImg(this)"/>

                </a>

            </div>

            <input type="submit" name="" id="sub" value="提交" />

        </form>

        <script>

            //常常显示的是一张原图

            $("#addimga").css("background-image","url(img/10.jpg)");

            //显示上传的图片

            function showImg(obj) {

                var srcs = window.URL.createObjectURL(obj.files[0]);

                var addimga = document.getElementById("addimga");

                if(srcs){

                    //把上传后的图片路径给a链接背景图片的路径

                    addimga.style.background = "url(" + srcs + ") center no-repeat";

                    $("#addimga").css("background-size", "100% 100%");

                }

            }

        </script>

    </body>

</html>

运行效果：

选择一张图片后

点击提交之后，图片信息已经发送过去

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

        <style>

            .topleftbox {

                width: 200px;

                height: 130px;

                border: 1px solid #262626;

                padding: 3px;

                border-radius:4px;

                margin-left: 10px;

                margin-top: 10px;

                float: left;

            }

            .topleftbox #addimga {

                display: block;

                width: 100%;

                height: 100%;

                background-size:100% 100%;

                background-position: center center;

                background-repeat: no-repeat;

            }

            .topleftbox #addimga input {

                width: 100%;

                height: 100%;

                opacity: 0;

            }

            #sub{margin: 120px 10px;}

        </style>

    </head>

    <body>

            <div class="topleftbox">

                <a class="addimga" id="addimga" href="javascript:;">

                    <input type="file" name="file" id="file" onchange="showImg(this)"/>

                </a>

            </div>

            <input type="submit" name="" id="sub" value="提交" />

        <script>

            //常常显示的是一张原本的图

            $("#addimga").css("background-image","url(img/10.jpg)");

            //显示上传的图片

            function showImg(obj) {

                var srcs = window.URL.createObjectURL(obj.files[0]);

                var addimga = document.getElementById("addimga");

                if(srcs){

                    //把上传后的图片路径给a链接背景图片的路径

                    addimga.style.background = "url(" + srcs + ") center no-repeat";

                    $("#addimga").css("background-size", "100% 100%");

                }

            }

            $("#sub").on('click',function(){

                var imgFile = $("#file").val();

                $.ajax({

                    url:'001.html',

                    data:imgFile,

                    type:'get',

                    dataType:'JSON',

                    success:function(res){

                        console.log(res);

                    },

                    error:function(re){

                        console.log("er")

                    }

                })

            })

        </script>

    </body>

</html>

如何让银行卡卡号每四位出现空格隔开

return val.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");

JS 计算时间差

        function getTimeSpace(startTime,endTime){

            console.log(startTime,endTime)

            var spaceTine = new Date(endTime).getTime()-new Date(startTime).getTime();   //时间差的毫秒数

            if (spaceTine<0) {

                alert('结束时间必须大于开始时间');

                return ;

            }

            //计算出相差天数

            var days=Math.floor(spaceTine/(24*3600*1000))

            //计算出小时数

            var leave1=spaceTine%(24*3600*1000)    //计算天数后剩余的毫秒数

            var hours=Math.floor(leave1/(3600*1000))

            //计算相差分钟数

            var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数

            var minutes=Math.floor(leave2/(60*1000))

            //计算相差秒数

            var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数

            var seconds=Math.round(leave3/1000)

            if (days>0) {

                if (hours==0) {

                    return " 相差 "+days+"天 "+minutes+"分钟 ";

                }else{

                    return " 相差 "+days+"天 "+hours+"小时 ";

                }

            }else if(hours>0){

                if (minutes==0) {

                    return  hours+"小时 "+seconds+" 秒";

                }else{

                    return  hours+"小时 "+minutes+" 分钟";

                }

            }else if(minutes>0){

                return  minutes+" 分钟"+seconds+" 秒";

            }else{

                return  seconds+" 秒";

            }

        }

        console.log(getTimeSpace(new Date().getTime(),'2019-06-29 23:00:00'));