JavaScript高频面试试题——2020.12.04

1.什么是JavaScript?

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

2.JavaScript与ECMAScript的关系？

ECMAScript是js的规格，js是ECMAScript的一种实现。

3.变量的命名规则？

1.名字见名知义，遵循驼峰标识。例：userName passWord
2.变量名只能以字母,_,$开头
3.不能使用关键和保留字
4.变量名不要相同(后面的会覆盖前面)

4.window.onload的作用？

作用是：当文档和资源都加载完成后执行

5.js数据类型？

基本数据类型：Number、String、Boolean、Undefined、Null
复杂数据类型:Object、Array、Function…

6.null和undefined的区别？

Null访问一个不存在对象返回的值，表示空对象
Undefined：访问一个声明完没有赋值的变量返回的值，表示空变量

7.运算符的种类？

算术运算符：+ - * / % ++ –
赋值运算符：
比较运算符：
逻辑运算符：
三目运算符：

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

b=10,a=11

9.==与===的区别？

===又叫全等，判断的时候先判断数据类型，在判断值
==只判断值是否相等

10.console.log(0.1+0.2==0.3)输出结果

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

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

出现无法计算或者转换结果不是一个数值
1.Number（c）
2.‘a’/3

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是直接将内容写入页面的内容流，会导致页面全部重绘，
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

14.break与continue的区别，举例说明并解释原因

break与continue都是在循环中，中止循环操作。Break是结束循环，后面的循环不再执行，continue是结束本次循环，执行下次循环

15.使用for循环打印由星号*组成的菱形？

 //打印上三角
        for (var i = 1; i <= 3; i++) {
            for (var k = 1; k <= 3 - i; k++) {
                document.write('&nbsp;');
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
                document.write('*');
            }
            document.write('<br>');
        }
        //打印下三角
        for (var m = 1; m <= 3; m++) {
            for (var s = 0; s < m; s++) {
                document.write('&nbsp;');
            }
            for (var n = 1; n <= (-2 * m) + 5; n++) {
                document.write('*');
            }
            document.write('<br>');
        }

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

16.this对象的理解？

this存储任何地方，不同环境代表不同的含义，取决于调用时的环境。
A.事件处理函数中的this—触发事件的对象
document.onclick = function(){ alert（this） }
B.普通函数中的this—window
function sum（）{ alert(this)} sum()

17.声明函数的方式有哪些？分别举例

函数声明(1)，函数表达式(2~5)，Function构造器(6)

function func1(a){}//函数声明
var func2=function(b){}//函数表达式
var func3=function func4(c){}//命名式函数表达式
var func5=(function(n1,n2){})();//立即执行的函数表达式
return function(){ };//作为返回值的函数表达式
var func6=new Function()//构造函数声明

  
  

  
  
1
2
3
4
5
6

18.使用函数计算50、100、150、200、1000以内所有奇数的和？

function sum(num) {
            //保存奇数的和
            var sum = 0;
            for (var i = 0; i < num; i++) {
                //判断是否为奇数
                if (i % 2 != 0) {
                    sum += i;
                }
            }
            console.log(sum);
        }
        sum(50);

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11
12

19.写一个非行内样式的函数

 function getStyle(elem, attr) { //elem,attr
            if (elem.currentStyle) { //ie
                return elem.currentStyle[attr];
            } else { //标准
                return getComputedStyle(elem)[attr];
            }
        }

  
  

  
  
1
2
3
4
5
6
7

20.说说你对作用域链的理解

如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

21.请解释变量提升

浏览器解析js代码至少会经过两个过程，预解析和逐步执行
预解析：找东西var，function，如果找到var，会在内存中存储变量没有值，

function则会存储整个函数 逐步执行：逐行执行代码 console.log(a); //undefined 不会报错

找到var存储了变量a，但是没有赋值默认为 undefined var a = 10; //给内存中的a赋值10
console.log(a); //10

//2.function console.log(sum); //整个函数，找到函数会将整个函数都存储在内存中 sum();
//存储了整个函数，因此可以在前面调用 function sum() { console.log(10+20); }

22.函数声明和表达式声明的区别？

函数声明可以放在页面任意地方，而且都可以调用
表达式声明，需要在表达式声明后调用函数，如果在表达式的前面执行函数，会出现undefined，是因为var把函数名提升了，赋值却没有没提升，所以在赋值之前调用都是undefined

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

分为两类：setInterval和setTimeout
setInterval：重复执行或叫间歇执行，即隔一段时间就执行一次
setTimeout：延迟执行，延迟指定时间开始执行，只执行一次

24.生成4位随机验证码？

//四位数验证码
        function getRadom() {
            var n = '';
            while (n.length < 4) {
                var code = Math.floor(Math.random() * 74) + 48;
                if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122) {
                    n += String.fromCharCode(code);
                }
            }
            return n;
        }

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11

25.js有哪些内置对象？

Object Date String Array等等。。

26.把下面字符串去重，并去掉特殊字符，按照数字在前字母在后的顺序排序。
字符串如下：1231fdfsd&2424fdsaff&454545&454545444rfdsfs&687dsag

要求：数组去重，并去掉特殊字符，按照数字在前，字母在后的顺序排序
        var str = '1231fdfsd&2424fdsaff&454545&454545444rfdsfs&687dsag';
        var arr = str.match(/[0-9a-zA-Z]/g);
        var arr0 = [];
        for (var i in arr) {
            if (arr0.indexOf(arr[i]) == -1) {
                arr0.push(arr[i]);
            }
        }
        var res = arr0.join('');
        console.log(res);

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11

27.截取字符串‘abcdefg’中的efg。

str.slice(3, 6);

28.有这样一个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}

var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";
        var s1 = str.split('?')[1]; //参数
        var arr = s1.split('&');
        var obj = {};
        for (var i in arr) {
            var key = arr[i].split('=')[0];
            var value = arr[i].split('=')[1];
            obj[key] = value;
        }
        console.log(obj);

  
  

  
  
1
2
3
4
5
6
7
8
9
10

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

var str = "asddfssssaasswef";
        var obj = {};
        //遍历字符串，将出现的字符存入到数组中
        for (var i = 0; i < str.length; i++) {
            if (!obj[str.charAt(i)]) {
                obj[str.charAt(i)] = 1;
            } else {
                obj[str.charAt(i)]++;
            }
        }
        console.log(obj);
        var max = 0;
        var charmax;
        //遍历数组，找出出现最多的字母出现的次数
        for (var key in obj) {
            if (obj[key] > max) {
                max = obj[key];
                charmax = key;
            }
        }
        console.log("出现最多的字符是" + charmax + ",出现了" + max + "次");

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

30.DOM常用的API有哪些？

获取子节点
父节点.children
父节点.childNodes

获取父节点
子节点.parentNode
子节点.offsetParent

创建
document.createElement(‘标签名’)
document.createTextNode(‘文本内容’)

添加
父节点.appendChild(子节点)
父节点.insertBefore(newChild，refChild)

复制
被复制的节点.cloneNode(true)

删除：
节点.remove()
父节点.removeChild（子节点）

替换
父节点.replaceChild（newChild，refChild）

31.html和DOM有区别吗？

html是属性节点，
dom元素本质是对象，都有自己的内置属性（property） 叫做dom元素的属性

32.什么是window对象？什么是document对象？

window对象是一个顶级对象指浏览器打开的窗口。
document对象是Documentd对象（HTML文档对象）的一个只读引用，window对象的一个属性。

33.offsetWidth、clientWidth、scrollTop的区别？

offsetWidth----content+padding+border
clientWidth----content+padding
scrollTop-------被卷去的高

34.如何获取url地址中搜索内容？

使用location对象中的search可以获得？后面的字符串，以问号开头

35.IE与火狐的事件机制有什么区别？

IE是事件冒泡
Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件

36.如何阻止冒泡？兼容

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

37.事件绑定和普通事件有什么区别？

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
addEventListener不兼容低版本IE addEventLisntener还支持事件冒泡+事件捕获

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

oDiv.addEventListener(‘click’,fun1);
oDiv.addEventListener(‘click’,fun2);

39.解释一下事件流？

事件流：事件被触发之后会在DOM树的节点之间传递
三个阶段：事件捕捉，目标阶段，事件冒泡

• 事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
• 确定目标阶段：确定事件目标
• 事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window 事件都是在事件冒泡处理,ie只有冒泡

40.什么是事件委托？事件委托的原理是什么？他有哪些应用场景？

事件委托就是利用冒泡原理，将子元素所触发的事件，让他的父元素代替执行
一般应用于有新的子元素加入时，可以为后加入的元素添加事件

41.给1000个li添加点击事件。

事件委托，事件加给ul，需要this的地方用e.target代替

42.拖拽效果中有几种事件？

鼠标按下mousedown
鼠标按下过程中鼠标移动 mousemove
鼠标抬起 mouseup

43.什么是回调函数？

回调函数即callback，就是写一个函数，不需要自己去调用执行，让预写好的函数去调用。
自己直接调用的函数是直调，让系统调用的函数就是回调数。

44.数组方法pop() push() unshift() shift()的作用？

Push（）在数值末尾添加
Unshift（）在数值头部添加
Pop（）删除末尾数据
Shift（）删除开头数据

45.split() 与join()的区别？

Split()将字符串按照指定字符分割成一个数组
Join()将数组按照指定字符合并为一个字符串

46.编写至少两种数组去重的方法

//1.
//用来保存新数组
     var arr0 = [];
     for (var i in arr) {
         //如果新数组中没有出现就保存到新数组
         if (arr0.indexOf(arr[i]) == -1) {
             arr0.push(arr[i]);
         }
     }

//2.遍历数组进行比较
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
//如果发现相等，删除j
if (arr[i] == arr[j]) {
//删除j
arr.splice(j, 1);
//删除j后数组长度减少1，需要j–
//否则每删除一个，就会跳过后面的比较
j–;
}
}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

47.[‘1’, ‘2’, ‘3’].map(parseInt);

输出 [1, NaN, NaN]

48.冒泡算法排序？

// 冒泡法:相邻元素作比较，交换位置(小的在前面)
        var arr1 = [4, 3, 2, 1, 5, 6, 7, 9, 8, 0];
        //外层控制多少趟
        for (var i = 0; i < arr1.length; i++) {
            //内层控制每趟走多少次，每趟次数减少1（内层循环次数减少1）
            for (var j = 0; j < arr1.length - i; j++) {
                if (arr1[j] > arr1[j + 1]) {
                    var temp = arr1[j];
                    arr1[j] = arr1[j + 1];
                    arr1[j + 1] = temp;
                }
            }
        }
        console.log(arr1);
        //----------控制台输出------------
        //(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

49.数组的随机排序？

方法一：javascript 
	 	var arr = [1,2,3,4,5,6,7,8,9,10]; 
	    function randSort1(arr){ 
	    	for(var i = 0,len = arr.length;i < len; i++ ){ 
	    		var rand = parseInt(Math.random()*len);
	    		var temp = arr[rand];
	    		arr[rand] = arr[i]; 
	    		arr[i] = temp; 
	    	} 
	    	return arr;    		
	    } 
	    console.log(randSort1(arr));
	方法二：
	 	var arr = [1,2,3,4,5,6,7,8,9,10];
        function randSort2(arr){
            var mixedArray = [];
            while(arr.length > 0){
                var randomIndex = parseInt(Math.random()*arr.length);
                mixedArray.push(arr[randomIndex]);
                arr.splice(randomIndex, 1);
            }
            return mixedArray;
        }
        console.log(randSort2(arr));
	方法三：推荐
		var arr = [1,2,3,4,5,6,7,8,9,10];
        arr.sort(function(){
            return Math.random() - 0.5;
        })
        console.log(arr);

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

50.找出数组中的最大值，arr=[1,2,3,4,5];

Math.max.apply(Math, arr);	

 
 

 
 
1