JS常见的面试题简单总结

1、什么是JavaScript？

基于对象和事件驱动并具有相对安全性的客户端脚本语言;

 

2、JavaScript与ECMAScript的关系？

JavaScript是ECMAScript的表现，ECMAScript是JavaScript的规范;

 

3、变量的命名规则？

由字母、数字或者下划线组成；但是不能以数字开头；变量名尽量见名知意，驼峰命名；不能使用关键字和保留字；变量名不能相同，否则后面的会覆盖前面定义的变量；

4、window.onload的作用？

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

 

5、js数据类型？

基本数据类型（数值型number，字符串string，布尔型boolean，空类型null，undefined）和引用数据类型（object，function，array）

6、null和undefined的区别？

null：访问一个不存在对象返回的值，表示空对象

undefined：访问一个声明完没有赋值的变量返回的值，表示空变量

 

7、运算符的种类？

算术运算符，赋值运算符，比较运算符，逻辑运算符，三目运算符

 

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

a=11;b=10;

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

==,判断相等，判断的过程中会隐式转换为number类型进行比较 “10”==10 true

=== 全等，严格相等，不会发生类型转换，“10”===10 false

 

10、console.log(0.1+0.2 == 0.3)的输出结果及分析。

false，有些小数在运算的过程中会出现偏差，因此最好不要用小数作为判断条件

 

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

NaN：not a number

A.自己定义

B.运算过程中出现错误，原本应该是数字的地方出现一些不能转换为数字的值 10+“s” Number(“s”)

 

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

强制类型转换:

Number(“10”); 强转为Number;

parseInt(“10.5”);强转为number，取整;

parseFloat(“10.5”);强转为number，保留小数;

String(10); 强转为字符串;

10.toString(); 强转为字符串;

隐式类型转换:

“10”+20 ； 1020 +号遇到字符串变成连接符，20隐式转换为字符串;

1+true; 2 true隐式转换为1;

10==“10” “10”隐式转换为10;

 

 

13、document.write()与innerHTML的区别？

document.write： 操作body的内容 会覆盖之前已经存在的body中的内容，会重写页面。，document.write添加的内容会叠加 innerHTML： 操作所有闭合标签的内容 会覆盖之前的所有内容，不会重绘页面。

 

14、谈谈对this对象的理解？

this存储任何地方，不同环境代表不同的含义，取决于调用时的环境。

A.事件处理函数中的this---触发事件的对象 document.onclick = function(){ alert（this） }

B.普通函数中的this---window function sum（）{ alert(this)} sum()

 

15、写一个获取非行间样式的函数

function getStyle(ele, attr) {
    if(window.getComputedStyle) {

        return getComputedStyle(ele)[attr];
    } else {
        return ele.currentStyle[attr];
    }    

}

16、说说你对作用域链的理解？

作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define

 

17、下面代码执行完以后的结果为？

var x = 1,
    y = z = 0;
function add(n) {
    n = n + 1;
};
y = add(x);
function add(n) {
    n = n + 3;
};
z = add(x);
console.log(x, y, z);

1 undefined undefined；

 

18、请解释变量提升？

浏览器解析js代码至少会经过两个过程，预解析和逐步执行

预解析：找东西var，function，如果找到var，会在内存中存储变量没有值，function则会存储整个函数

逐步执行：逐行执行代码 console.log(a); //undefined

 

19、函数声明和函数表达式声明的区别？

在预解析的过程中，函数会存储整个，因此可以在之前调用，表达式是var声明，只会存储undefined;

 

20、JavaScript两种变量范围有什么不同？

Js中两种变量，全局变量和局部变量 全局变量：

函数外声明，在任何地方都能被修改和访问，会一直存储在内存中

局部变量：函数内声明，只能在函数内部使用，除了函数{}就会被销毁

 

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

Js中有两种定时器：

setInterval：间歇执行，

setTimeout：延迟执行

setInterval(函数，时间) 语法：setInterval(function(){},1000); 时间单位ms，隔一秒执行函数一次 一般用于倒计时，轮播图

setTimeout(函数，时间) 语法：setTimeout(function(){},1000); 时间单位ms，隔一秒执行函数一次 一般用于广告，广告弹出层

 

22、js有哪些对象？

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

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

宿主对象：DOM BOM

全局对象：window

 

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

如下："1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs"

返回："12345fdsarg"

var str = "1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs";
var newStr = '';
var numStr = '';
var aphstr = '';
for (var j = 0; j < str.length; j++) {
    if (newStr.indexOf(str[j]) == -1) {
        newStr += str[j];
    }
}

for (var i = 0; i < newStr.length; i++) {
    if (newStr[i] >= '0' && newStr[i] <= '9') {
        numStr += newStr[i];
    } else if (newStr[i] > 'a' && newStr[i] <= 'z') {
        aphstr += newStr[i]
    }
} 
console.log(numStr + aphstr);   //12345fdsrg

 

24、截取字符串"abcdefg"中的def

var str = "abcdefg";
if (str.indexOf("def") != -1) {
    console.log(str.substr(str.indexOf("def"), 3));
}

var str = 'abcdefg'; // def

var i = str.indexOf('def'); // 检查有不有
if (i !== -1) { // 则有
    var s = str.slice(i, i + 3);
}
console.log(s);

 

25、有这样一个 var str = 'http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e';。请写 一段js程序提取url中各个get参数(参数名和参数个数不确定)，将其key-value 形式返回到一个json结构中

var o = {
    a: '1',
    b: '2',
    c: '',
    d: 'xxx',
    e: undefined
};

var str = 'http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e';
// 以key-value形式返回

str = str.split('?');
console.log(str);   //["http://item.taobo.com/item.html", "a=1&b=2&c=&d=xxx&e"]

var s = str[1];
console.log(s);     //a=1&b=2&c=&d=xxx&e

var k = s.split('&');
console.log(k); //["a=1", "b=2", "c=", "d=xxx", "e"]

var o = {};
for (var i = 0; i < k.length; i++) {
    var arr = k[i].split('=');
    o[arr[0]] = arr[1];
}
console.log(o); //{a: "1", b: "2", c: "", d: "xxx", e: undefined}

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

push()是从数组的后面添加一个或多个元素，返回修改后的数组长度；

pop()是从数组的后面删除最后一个元素；返回删除的数组项；

unshift()是从数组的前面添加一个或多个元素，返回修改后的数组长度；

shift()是从数组的前面删除第一个元素；返回删除的数组项；

 

27、split() join() 的区别？

split()是字符串的方法，是将一个字符串按照指定分隔符将其分隔，以数组的方式返回；

join()是数组的方法，是将数组所有的数组项按照指定分隔符连接，以字符串的方式返回；

 

28、编写一个数组去重的方法。

function sort(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                j--; //删除一个元素后，后面的元素会依次往前，下标也需要依次往前           
            }
        }
    }
    return arr
}

// 1. 方式 arr.indexOf();方法
var arr = [12, 12, 31, 321, 1, 30, 30, 2, 4];
console.log(getUniqueArr(arr));

function getUniqueArr(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

// console.log(arr);   // [12, 12, 31, 321, 1, 30, 30, 2, 4]
// console.log(getUniqueArr(arr)); // [12, 31, 321, 1, 30, 2, 4]

// 方式二  arr.filter(function(item,index,array){});
var newArr = arr.filter(function (item, index, array) {
    // 查看元素返回的索引值 是否和数组中首次出现的索引值是否一样即可
    return array.indexOf(item) === index;
});
console.log(newArr);    // [12, 31, 321, 1, 30, 2, 4]

 

29、冒泡算法排序？

var arr = [21, 0, 23, 6, 4, 3];
function bubbleSort(arr) {
    for (var i = 1; i < arr.length; i++) {
        for (var j = 0; j < arr.length - i; j++) {
            if (arr[j] > arr[j + 1]) {

                var temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}
console.log(bubbleSort(arr));   //[0, 3, 4, 6, 21, 23]

 

30、DOM怎样添加、移除、移动、复制、创建和查找节点

获取子节点

父节点.children

父节点.childNodes

获取父节点

子节点.parentNode

子节点.offsetParent

创建

document.createElement(‘标签名’)

document.createTextNode(‘文本内容’)

添加

父节点.appendChild(子节点)

父节点.insertBefore(newChild，refChild)

复制

被复制的节点.cloneNode(true)

删除：

父节点.removeChild（子节点）

替换

父节点.replaceChild（newChild，refChild）

 

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

window是js中最大的对象，表示窗口，包含document document文档对象，表示HTML

 

32、offsetWidth、clientWidth、scrollTop的区别？

offsetWidth：占位宽，包含 内容宽+左右padding+左右border

clientWidth：可视宽，包含 内容宽+左右padding

scrollTop：页面被卷去的高

 

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

window.location.search

 

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

IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。

 

35、如何阻止冒泡？

ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;

 

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

标签.事件：如果给同一个元素添加同一个事件，后面的会覆盖前面

事件绑定：可以给同一个元素添加同一个事件，不会被覆盖

 

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

oDiv.addEventListener('click',fun1);

oDiv.addEventListener('click',fun2);

 

38、解释一下事件流？

事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递

确定目标阶段：确定事件目标

事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window

事件都是在事件冒泡处理，ie只有冒泡

 

39、事件委托是什么。

将所有的操作交给父元素，将事件添加给父元素，父元素接受到这个事件，找到具体的子元素，让子元素处理事件；

 

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

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    ...
    <li>10000</li>
</ul>
<script>
	//获取父元素  通过冒泡原理 给父元素绑定点击事件    
    var ul = document.getElementsByTagName('ul')[0];
    
    ul.onclick = function (e) {
        //获取当前事件的触发对象  某一个li  绑定同一点击事件
        e.target.style.backgroundColor = 'red';
    }
</script>

 

 

 

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

按下onmousedown，拖拽onmousemove，弹起onmouseup

 

42、什么是回调函数？

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

 

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

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

 

44、请用js去除字符串空格 var str = “ fdf er re545 6565 2fdfd ”

var reg = /\s/g;

consloe.log(str.replace(reg,””));

 

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

var reg = /^[a-z]\w{4,19}$/ig;
​
if (reg.test(reg)) {
    console.log('是')
} else {
    console.log('否')
}

 

  

 

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

创建了一个新对象；

将构造函数的作用域赋给新对象；即this就指向这个新对象；

执行构造函数中的代码；即为这个对象添加新属性和方法；

返回新对象；

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

都是用来改变this的指向，在传值的过程中会有些区别

call（this的指向，参数1，参数2...）

apply（this的指向,[参数1，参数2..]）

 

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

七种。字面量创建；实例创建；工厂模式创建；构造函数创建；原型创建；混合模式创建；动态混合创建；

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

四种。原型链的继承；对象冒充继承；组合继承；寄生组合式继承；

50、JavaScript原型，原型链 ？

原型：js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。

原型链： 当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了proto的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）

 

 

51、什么是闭包，闭包有什么作用，说说你对闭包的理解。

闭包：就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量）， 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

作用：闭包中使用的变量会一直存储在内存中，类似全局变量 ，避免全局污染，可以解决全局变量的问题。 ```

function fun() {
    var c = 10;
    return function () {
        console.log(c++);
    }
}
var f = fun();
f();//10 
f();//11

 

52、用闭包方式完成下面代码的修改，使得属性user，id外界不可见

User = function () { }
User.prototype = {
    id: '',
    name: '',
    getId: function () { return this.id },
    setId: function () { this.id = id },
    getName: function () { return this.name },
    setName: function () { this.name = name }
}

//直接声明两个变量，这两个变量的作用域只是在这个函数体之中所以外界是不能访问的  
var User = function () {
    var id = "id";
    var name = "name";
    this.__proto__ = {
        getId: function () {
            return id;
        },
        setId: function (_id) {
            id = _id;
        },
        getName: function () {
            return name;
        },
        setName: function (_name) {
            name = _name;
        }
    }
}
var u = new User();
u.setId("007");
u.setName("tom");
console.log(u.name, u.getName()); // undefined tom

 

53、创建ajax的过程。

1. 创建XMLHTTPRequest对象；xhr

2. 使用open方法设置和服务器的交互的信息；

3. 设置发送的数据，开始和服务器端交互；

4. 注册事件；xhr.readyState===4 xhr.status === 200 交互完成 返回请求的数据；responseText()

5. 更新界面；

54、ajax请求的时候get 和post方式的区别，什么时候用post。

1、GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的

2、Get传输数据容量小，不安全，post传输数据内容大，更加安全； 当向服务器发生一些数据的时候选择post比较安全

 

55、ajax请求时，如何解释json数据。

如果是字符串形式的json：eval("("+ajax.response+")")

如果是本地的json文件：JSON.parse(data)

 

56、同步和异步的区别?

异步：客户端与服务器请求数据的过程中，可以做其他的事情

同步：客户端与服务器请求数据的过程中，不能做其他的事情

 

57、常见的http状态码？

200 表示请求成功；

404 表示请求的资源不存在；

500 服务端错误

302 重定向

58、eval的作用是？

 

59、js哪些操作会造成内存泄露？

1）意外的全局变量引起的内存泄露

2）被遗忘的定时器或者回调

3）闭包引起的内存泄漏

 

60、$(document).ready() 方法和window.onload 有什么区别？

 

61、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

在默认情况下，通过$.extend()合并操作不是递归的（而是浅拷贝）;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将true作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。

浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。

深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

 

62、$().attr与$().prop()的区别?

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

$("#chk1").prop("checked") == false

$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现： $("#chk1").attr("checked") == undefined

 

63、jQuery怎么解决跨域问题？

在jQuery中，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求

 

64、ajax如何实现异步定时5秒刷新？

setInterval(function () {
    host = window.location.host;
    $.post("http://" + host + "/index.php/Article/cpMes/value/1");
}, 5000);

 

65、页面编码和被请求的资源编码如果不一致如何处理？

比如：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js

a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的

那就需要在引入的时候 <script src="http://www.xxx.com/test.js" charset="utf-8"></script> 同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset="gbk"

 

66、Ajax的缺点？

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

 

68、jquery中$.get()提交和$.post()提交有区别吗？

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

 

69、jquery.extend 与 jquery.fn.extend的区别？

1.jquery.extend(object);

为扩展jQuery类本身.为类添加新的方法。

2.jquery.fn.extend(object);

给jQuery对象添加方法。