JavaScript高频面试题

一、js基本概念

1.HTML语义化理解？

得分点：语义化标签,利于页面结构化,利于没有css页面也可读,利于SEO,利于代码可读
标准答案：在使用html标签构建页面时,避免大篇幅的使用无语句的标签

2.说一说盒模型？

得分点：标准盒模型、怪异盒模型（box-sizing:border-box;）、盒模型大小
标准答案：
标准模型(box-sizing:content-box):给盒子设置width和height,实际设置的是content-box,padding和border加上设置的宽高就是整个盒子的大小；
怪异盒模型(box-sizing:border-box)：给盒子设置width和height,包含了padding和border,设置的width和height就是盒子的实际大小；
默认情况下,盒模型都是标准盒模型

3.对象是由属性和方法组成的,是一个无序键值对的集合,指的是一个具体的事物

• 属性:事物的特征,在对象中用属性来表示(常用名词)
• 方法:事物的行为,在对象中用方法来表示(常用动词)

4.有关自增自减运算符描述

• 如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(–)运算符来完
• 递增(++)和递减(–)既可以放在变量前面,也可以放在变量后面
• 放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符
• 递增和递减运算符必须和变量配合使用

5.在JavaScript中,方法是作为对象成员的函数,表面对象所具有的行为

6.关于函数内this指向的描述

• 普通命名函数内部的this指向window对象
• 构造函数内部的this指向 实例对象
• 事件处理函数内部的this指向事件源对象
• 定时器回调函数内部的this指向window对象

7.逻辑运算符常用于布尔型的数据进行操作, 当操作数都是布尔值时,返回值也是布尔值;当操作数不是布尔值时,运算符"&&“和”||"的返回值就是一个特定的操作数的值.

8.键盘码中只有数字和字母与ASCII码表中的编号相同

9.网页在浏览器中加载的过程可以触发事件进行相关操作(利用页面加载事件进行处理)

10.JavaScript中函数名称严格区分大小写

11.一个完整的for循环,应该具备的条件

• 循环的初始变量
• 循环的判断条件
• 循环的增量或者减量

12.javaScript中焦点事件都不会发生冒泡,如focus和blur

13.类的定义、通过关键字class创建类的注意点

(1) 类的定义,在 ES6 中新增加了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象.类抽象了对象的公共部分,它泛指某一大类（class）对象特指某一个,通过类实例化一个具体的对象

(2) 通过关键字class创建类的注意事项,

1. 通过class关键字创建类, 类名我们还是习惯性定义首字母大写

2. 类里面有个constructor函数,可以接受传递过来的参数,同时返回实例对象

3. constructor函数只要new生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

4. 多个函数方法之间不需要添加逗号分隔

5. 生成实例new不能省略

6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

14.关于JS封装匀速运动函数

1. 在函数开始的时候要清除上次的定时器,防止一个元素被多个定时器控制

2. 在定时器里面需要用原来的位置加上每次移动的距离

3. 最好把定时器挂着到要运动的元素上面,例如oDiv.timer,这样能明确的知道定时器属于哪一个元素对象

4. 运动的原理就是重复的让元素的当前位置加上一个步长,所以使用 setInterval 比较合适,而不是使用 setTimeout,因为setInterval会重复执行执行函数,而setTimeout默认情况下只会在时间到了之后触发执行函数一次

二、js类型转换

NaN不等于任何东西,包括它自己

类型	将目标转换为
Number	数字类型
String	字符串
toString	将num转化为n进制数并转换为字符串,undefined和null不可用
Boolean	布尔类型
parseInt	以目标数字为基地转化为十进制
parseFloat	浮点型数字
isNaN	判断数据是否为NaN,执行过程先对数据进行Number()操作,然后执行后的数据跟NaN进行对比看是否相同

三、js常用方法

1.实现深拷贝用到的主要技术点是递归

2.window.event是为了解决IE老版本的兼容性问题

3.调用元素.classList的返回值,返回的是元素的DOMTokenList的集合/伪数组

4. 页面有图片元素<img src="image/pic.png" title="图片">,假设已经获取到元素img,获取图片地址正确的方式是img.src,获取图片标题img.title

5.Math方法

函数	作用
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入
Math.random()	随机数(大于0.0小于1.0的伪随机double值)

6.keydown -> keypress -> keyup是正确的响应顺序

键	解析
keydown	当某个键盘按键按下时触发
keypress	当某个键盘按键按下时触发,但不识别功能键,比如左右箭头,shift等
keyup	当某个键盘按键别松开时触发

7.找父盒子内第一个子元素firstElementChild

8.找上一个或者下一个兄弟元素:nextElementSibling和previousElementSibling

9.假设一年中所有月份表示为1-12月,当前月份的是getMonth()+1

10.界面中有一个按钮btn,给这个按钮注册点击事件的两种方式

• 通过onclick属性的赋值方式

 btn.onclick=function(){}

-通过调用addEventListener方法的方式

btn.addEventListener('click',function(){})

11.获取父级元素的父元素node.parentNode.parentNode

12.将创建的元素添加到页面中的方法

• appenChild()
• insertBefore()

13.关于日期对象,能获取总毫秒数(时间戳)的方法

• new Date().getTime()
• +new Date()
• Data.now()

15.clientHeight

 <!-- oSpan.clientHeight 的值是？ -->
 <span style="height: 100px; border: 10px solid pink; width: 100px; background: red;"></span>
 <!-- 答： 0；clientHeight 获取内联元素的值为0,span 是一个内联元素 -->

16.判断一个变量的数据类型typeof(变量名)

17.判断应该数组中是否包含某个特定元素数组.includes(元素)

18.复制一个对象Object.assign({},原始对象)

19.判断一个对象是否为空Object.keys(对象).length===0

20.将字符串转为大写或小写

• 字符串.toUpperCase()
• 字符串.toLowerCase()

21.用JavaScript实现继承

• 子类.prototype=Object.create(父类.prototype)
• 子类.prototype.constructor=子类

22.阻止事件冒泡和默认行为

• 事件.stopPropagation();
• 事件.preventDefault();

23.关于call(),bind(),apply()的描述

• call()方法常用于实现继承
• bind()方法常用于改变回调函数内部this的指向
• apply()方法经常用于对数组的操作