常见js面试题（2）

1、什么是JavaScript？

 

​   JavaScript 是一种**具有面向对象能力**的、**解释型**的程序设计语言。

 

​   更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。

 

2、JavaScript与ECMAScript的关系？

 

**ECMAScript 和 JavaScript 的关系是**，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

 

3、变量的命名规则？

     

• 1、只能包含数字、字母、$，_
• 2、不能以数字开头
• 3、不能以关键字，保留字命名
• 4、尽量使用驼峰命名
• 5、尽量做到见名知意

 

4、window.onload的作用？

 

window.onload是等文档和资源都加载完成后调用的事件，保证js获取元素的时候，已经加载。

 

5、js 数据类型？ 

   基本数据类型：number，string，Boolean、 null，undefined，

   引用类型：object   包含 function、Array
 

6、null 和 undefined 的区别？

- 1、undefined是申明了，未赋值，null是值为空，是准备在将来存储为一个对象的

- 2、undefined的typoef返回的是undefined，null的typeof返回的是object

- 3、undefined转成数字是NaN，null转成数字是0

 

7、运算符的种类？ 

 

8、var a = 10;var b = a++; a、b 最后的结果是？ 

 

9、“==”与“===”的区别？ 

 

10、console.log(0.1+0.2 == 0.3)。 

 

11、NaN 会在什么样的情况下出现呢？列举出现这种情况的代码。 

 

​   NaN：not a number ：not a number 

 

​   A.自己定义  

 

​   B.运算过程中出现错误，原本应该是数字的地方出现一些不能转换为数字的值         "小王"-5 

 

12、列举三种强制类型转换和 2 种隐式类型转换。

 

13、this对象的理解？

 

14、声明函数的方式有哪些？分别举例。

 

15、使用函数计算 50 、100、150、200、1000以内所有奇数的和。

 

16、定时器的分类？他们的区别及用法是什么？

 

17、生成4位随机验证码？

        Math.floor(Math.random() * (max - min + 1) + min)

18、js有哪些内置对象？

 

​       Number Boolean String Array Object Function Date Error(错误对象) RegExp(正则)  

 

19、把下面的字符串去重，并去除掉特殊字符按照数字在前字母在后的顺序排序字符串 

 

​       如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”

 

20、截取字符串“abcdefg”中的def。

 

```js

var str = 'abcdefg';

var s = 'def';

var n = str.indexOf(s); // 3

if (n !== -1) {

    var m = str.slice(n, n + s.length);

}

console.log(m);

```

 

21、有这样一个url：http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e,请写

 

一段js程序提取url中各个get参数(参数名和参数个数不确定)，将其key-value

 

形式返回到一个json结构中，如{a:“1”,b:“2”，c:“”，d：“xxx”，e:undefined}

        function fn(url) {

            var arr = url.split('?')[1].split('&');

            var obj = {}

            arr.map(function(item, index) {

                var newArr = item.split('=')

                obj[newArr[0]] = newArr[1];

                console.log(newArr);

            })

            return obj

        }

        console.log(fn(url));

22、判断一个字符串中出现次数最多的字符，并且统计次数。

          

23、使用moment.js格式化日期，获取前一个月的时间。

 

24、使用moment.js根据身份证号码获得周岁年龄。

 

25、数组方法pop() push() unshift() shift()？

 

26、字符串的split()和 数组的join() 的区别？

 

27、编写至少两种数组去重的方法。

 

28、冒泡算法排序？

 

29、数组的随机排序？

 

30、找出数组中的最大值，arr = [4，3，45，3，3，5];

 

31、DOM常用的API有哪些？

 

32、html 和 DOM 有区别么？

     DOM是一个具有相关API操作的文档模型

        HTML是一种标记语言，可让您在文本中表示某种DOM。

 

33、什么是window对象? 什么是document对象?

    window对象是指浏览器打开的窗口。

    document对象是Document对象（HTML 文档对象）的一个只读引用，window对象的一个属性。

34、offsetWidth、clientWidth、scrollTop的区别？

        Element.scrollTop       被卷去的高

        Element.offsetWidth  盒子距第一个有定位父级的距离，没有则为到body的距离

        Element.clientWidth   元素可视宽（height+padding）

 

35、如何获取url地址中搜索内容？

 

​       window.location.search

 

36、事件中，IE与火狐的事件机制有什么区别？

 

        - 元素.addEventListener(不加on的事件名, 函数, 是否捕获);

        - 元素.attachEvent(加on的事件名, 函数);

        - 1、IE的没有事件捕获，标准有

        - 2、IE的事件名前面有on，标准没有

        - 3、标准会根据写的顺序正确执行，而IE低版本是倒序执行

        - 4、IE的this指向window，而标准的指向触发这个事件的元素

 

37、如何阻止冒泡？

        event.stopPropagation()

38、事件绑定和普通事件有什么区别。

        普通添加事件的方法不支持添加多个事件，最下边的事件会覆盖上边的事件，而事件绑定（addEventListener）方式添加多个事件。

 

        addEventListener不兼容低版本ie

 

        普通事件无法取消，

 

        addEventListener还支持事件冒泡+事件捕获。

 

39、如何用原生js给元素绑定两个click事件？

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

        btn4.addEventListener("click",hello1);

        btn4.addEventListener("click",hello2);

        function hello1(){

        alert("hello 1");

        }

        function hello2(){

        alert("hello 2");

        }

 

40、解释一下事件流？

    事件流描述的就是从页面中接收事件的顺序

    页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流

    // 1、捕获阶段：

    // 2、处于目标阶段

    // 3、冒泡阶段：

 

41、什么是事件委托？事件委托的原理是什么？他有那些应用场景？

 

- 定义：也叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

- 事件委托原理：子级的事件，我们加给父级，当子级发生事件时，会冒泡到父级，我们可以获取到事件源，通过对事件源的判断，我们就可以执行子级的事件。

 

42、给10000个li添加点击事件。

    利用事件委托，给ul添加点击事件

    ul.οnclick=function(){

          var target = event.target || event.srcElement

          if(target.nodeName=='LI'){

              操作

          }

    }

 

43、拖拽效果中有几种事件？

        onmousemove、 onmousedown、onmouseup

 

44、什么是回调函数？

 

​   某个动作做完以后执行的函数

 

45、new操作符具体干了什么呢?

        (1) 创建一个新对象；

        (2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；

        (3) 执行构造函数中的代码（为这个新对象添加属性） ；

        (4) 返回新对象。

 

46、call()和apply()的区别和作用？

 

        作用：改变this指向

        区别：传参方式不同  

                call，参数一个一个传

                apply：参数以数组的方式传

47、JavaScript对象的几种创建方式？

        1.字面量创建

        2.实例创建

        3.工厂模式

        4.原型创建

        5.构造函数创建

        6.混合创建

        7.动态混合创建

 

48、JavaScript对象的几种继承方式？

    1.原型链继承：

        function Studen(){this.name='c'}

        function son(){}

        son.prototype=new Student()//继承

    2.对象冒充继承：

        function Studen(name){this.name=name}

        function son(name){

            Student.call(this,name)//利用call改变this指向

        }

    3.组合继承（对象冒充+原型链）：

        function Studen(name){this.name=name}

        Student.prototype.add=function(){}

        function son(name){

            Student.call(this,name)

        }

        son.prototype=new Student()

 

    4.寄生组合式继承

 

        function Person(name){

        this.name=name;

        }

        Person.prototype.sayName=function(){

        console.log(this.name+' '+this.gender+' '+this.age);

        }

        function Female(name,gender,age){

        Person.call(this,name);//第一次调用父类构造函数             

        this.age=age;

        this.gender=gender;

        }

        Female.prototype=new Person();//第一次调用父类构造函数

        Female.prototype.constrcutor=Female;//因重写原型而失去constructor属性，所以要对constrcutor重新赋值

 

        

 

49、JavaScript原型，原型链 ？

    

 

    1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

 

    2.每个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。

 

50、如何判断一个对象是否属于某个类？

    实例 instanceof 对象

 

51、小贤有一条可爱的狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)，从这段描述可以得到以下对象：

 

```js

function Dog(){

    this.wow = function(){

        alert('wow');

    }

    this.yelp = function(){

        this.wow();

    }

}

```

小芒和小贤一样原来也有一条可爱的狗，可是突然有一点疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例形式用代码来实现。(继承，原型，setInterval)

```js

function MadDog(){

    // Dog.call(this);

    this.yelp = function(){

        var _this = this;

        setInterval(function(){

            _this.wow();

        }, 500);

    }

}

 

MadDog.prototype=new Dog()

```

 

52、使用正则表达式验证邮箱。

        reg= /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/

 

53、请用js去除字符串空格 

        var str = “ fdf er re545 6565 2fdfd ”

        reg=/\s/g

 

54、判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度5-20。

        var reg=/^[a-zA-Z]\w{4,19}/g

 

55、js有哪些对象？

            原生对象：Object，Function ,Array, String, Date, Boolean, Number,RegExp,Error

            内置对象：Global(全局 window,documet),Math

            宿主对象：DOM  BOM

            全局对象：window