JS基础整理面试题

1、DOM和BOM的区别

DOM:document object model;文档对象模型，提供操作页面元素的方法和属性
BOM:browser object model;浏览器对象模型，提供一些属性和方法可以操作浏览器

2、JS有几种引入方式

1、行内式 直接在标签中写js代码 
2、内嵌式 可以有多个script标签，从上到下 
3、外联式 直接导入script标签，相对路径 
4、导入式 import

3、innerHTML 和innerText : 区别

innerHTML 可以识别标签； 
innerText : 不能识别标签；会把所有的东西当作文本；

4、基本数据类型和引用数据类型的区别？

基本数据类型存储到栈内存中，引用数据类型存储到堆内存中 
基本数据类型操作值的，引用数据类型操作的是空间地址；

5、基本数据类型有哪些？

number(数字) string(字符串) boolean(布尔) null undefined；

6、引用数据类型都有哪些？

对象数据类型：

• 普通的对象、数组 、正则 、Date的实例、Math… 
  函数数据类型
• 普通函数、类；

7、其他数据类型转布尔类型是false有且只有哪些？

0 、 “” 、 NaN 、null 、undefined

8、逻辑运算符：与、或、非

|| : 只要其中有一个为true，整体结果是true； 
&& : 只要有一个是false，整体结果是false； 
!：取反 （比较：转布尔，在取反）

9、null和undefined的区别？

typeof null –> “object”; 空对象指针； 
null 表示现在没有，但是以后可能会有； 
undefined ：现在没有，以后也不能有；

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，而null看作是空的对象

10、常见的null的情况

1.通过ID获取元素，如果ID名字不存在，那么返回null； 
2.通过正则进行捕获时，如果没有捕获到内容，那么结果是null； 
3.在清空对象，销毁堆内存时，给对象赋值时，赋值为null；

11、常见的undefined的情况

1.当获取对象属性名对应的属性值时如果属性名不存在，那么返回值是undefined； 
2.函数的形参如果没有实参赋 
值，在函数中默认存储undefined 
3.如果函数没有return，那么函数的返回值是undefined； 
4.如果变量只声明，没有赋值，那么默认存储也是undefined；

12、对象的定义

1.首先会开辟一个新的空间地址；空间地址是16进制；0-9a-f; 
2.把键值对存储到当前这个堆内存下； 
3.把这个空间地址给了对象名； 
(函数定义同上，把函数体中的代码当做字符串存储到堆内存)

13、JS四种检测

1、typeOf：只能检测基本数据类型 
2、instanceOf：检测当前实例是否属于某个类的方法 
3、检测当前实例的构造函数 
4、Object.prototype.toString.call([]); 最准确的方式；

14、continue和break的区别

continue; 结束本轮循环； 
break: 结束整个循环；

15、for…in..和for…of..的区别？

for in 遍历循环对象

• 同时for in也可以遍历数组，但是会出现以下问题 
  1、index索引为字符串型数字，不能直接进行几何运算 
  2、遍历顺序有可能不是按照实际数组的内部顺序 
  3、使用for in会遍历数组所有的可枚举属性，包括原型。

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for of 遍历循环数组

• for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

16、什么是函数的封装？

把实现相同功能的代码放到一个函数体中，当想实现这个功能时，直接执行这个函数即可；减少了的冗余；高内聚，低耦合

17、堆栈内存

当浏览器加载页面时，会形成两个虚拟的内存；一个栈内存，堆内存；

栈内存：

• 1) 提供代码的运行环境；
• 2) 存储基本数据类型；

堆内存： 存储引用数据类型；

18、函数的执行过程

• 1.首先会形成一个私有的作用域
• 2.形参赋值
• 3.变量提升
• 4.代码从上到下运行；
• 5.作用域的销毁； 
  在函数执行时，函数体中可以找到函数外面的变量；但是函数外面不能访问里面的变量；

19、闭包

当函数执行时，首先会形成一个私有的作用域，这个私有作用域保护了里面的私有变量不受外界的干扰；这种机制--> "闭包"；

20、数据类型之间的比较

NaN 和自己都不相等； 
数据类型比较的规律 
对象==对象： 比较的是空间地址 
对象==字符串 对象默认调用toString方法，先转字符串，然后再进行比较 
对象==布尔： 对象先转字符串，再转数字；布尔直接转数字； 
对象== 数字 : 对象先调用toString转换成字符串，然后再转number; 
布尔== 数字 ： 布尔转数字； 
字符串== 数字： 字符串转数字； 
布尔== 字符串 : 布尔转数字，字符串也转数字，然后进行比较； 
null == undefined : true; 
null 和 undefined 和其他数据类型比较都是false；

21、arguments 类数组对象

任意数求和

function sum() {

let total =null;

for(let i=0;i<arguments.length;i++){

let cur =arguments[i];

if(!isNaN(cur)){

total += Number(cur);

}

}

console.log(total);

}

sum(1,2,3,4,5)

22、原生JS选项卡片段

// 1.获取所有的li,和tab这个div盒子下的div;

// 2. 给所有li绑定函数；【循环绑定】;

// 3. 绑定函数中

// 1) : 点击当前这个li时；清空所有li身上的class；

// 2) : 让点击的这个li新增class["select"];

// 3) : 所有div身上select清掉

// 4) : 只要让和点击这个li的索引相同的div新增"select";

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

var oLis = tab.getElementsByTagName("li");

var divs = tab.getElementsByTagName("div");

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

// 新增一个属性；自定义属性

// 给每一个li新增一个属性叫index，属性值当前li的索引；

oLis[i].index = i;

oLis[i].onclick = function () {

for(var j=0;j<oLis.length;j++){

// 通过JS删除所有li的class；

oLis[j].className = "";// 清空所有li的select；

divs[j].className = "";// 清空所有div的select；

}

// 给点击的li和对应div新增class；

// 点击时，循环早已经完成，已经变成最后一个值；3

// 函数中的this，指向当前被绑定的元素；this关键字；

this.className = "select";

divs[this.index].className = "select";

}

}

23、Number的方法

isNaN : 强制转换成number，在判断 
Number :将其他数据类型的值强制转换成number类型； 
parseInt :经常用于字符串提取数字的方法； 
parseFloat:和parseInt 用法一样；区别是多识别一位小数点 
toFixed : 保留小数点位数的方法;返回值是一个字符串；

24、字符串的方法(13个)

toUpperCase : 把小写字母转成大写 
toLowerCase 把大写转小写 
charAt : 通过索引获取字符 
charCodeAt : 通过索引获取对应字符的Unicode编码； 
substr : 截取 substr(m,n) 从索引m开始，截取n个字符； 
substring: substring(m,n) ：从索引m开始，截取到索引n，不包含n; (不支持负数) 
slice(m,n): substring; 从索引m开始，截取到索引n，不包含n (支持负数) 
indexOf : 检测字符在字符串中第一次出现的索引位置； 
lastIndexOf : 检测字符在字符串中最后一次出现的索引位置； 
split: 把字符串按照特定的字符分隔数组中的每一项； 
replace:替换;原有字符串不变；用新字符替换旧的字符 
concat : 拼接 
trim : 去空格 : 去除字符串中左右的空格；

25、字符串的运算

- * /: 会先把字符串转换成数字，然后再进行计算

1. 任何数字和NaN 计算，结果都是NaN;
2. 任何数字和undefined运算，得到也是NaN；

+: 字符串拼接；

• [] : 空数组在进行拼接时，会默认调用toString转换成空字符串；然后拼接；

26、数组的方法（15个）

push ：向数组末尾新增一项；可以传多个； 
pop ： 删除数组的最后一项；不需要传参数； 
unshift ：向数组开头新增一项；需要传参数； 
shift ：删除数组的第一项；不需要传参

sort：数组的排序 
reverse：将数组颠倒 
原有数组发生改变；

concat：数组的拼接 
join：数组的连接 
indexOf：第一次出现的索引位置 
lastIndexOf：最后一次出现的索引位置 
map：数组的遍历和映射 
forEach：遍历数组 
toString：转字符串 
原有数组不发生改变；

slice ：数组的截取 
slice(m,n): 从数组索引m开始，截取到索引n，但是不包含n;[前包后不包] 
slice(m) : 从索引m开始，截取到末尾； 
slice():数组的克隆 slice(0); 
原有数组不发生改变；

splice：删除数组中的某几项 
splice(m,n): 从索引开始，删除n个 
splice(m) : 从索引m开始删除到末尾； 
splice(0): 
splice(m,x,n);替换从索引m开始，删除x个，用n替换； 
原有数组发生改变

27、获取元素的方法

document.getElementById:通过ID名来获取元素 
document.getElementsByTagName: 通过标签名来获取元素 
document.getElementsByClassName(); 类数组集合； 
document.getElementsByName;通过name属性来获取元素； 
document.documentElement 获取当前的html 
body :获取页面的body元素； 
document.querySelector();如果是id名加#，如果是class名加. 
document.querySelectorAll();获取所有的元素

28、DOM四种类型的节点

TYPE	nodeType	nodeName	nodeValue
元素节点	1	大写的标签名	null
文本节点	3	text	文本内容
注释节点	8	comment	注释内容
document	9	document	null

空格和换行都是文本节点；

29、DOM节点的属性

childNodes : 获取当前元素所有的子节点； 
children : 获取当前元素的子元素节点； 
firstChild : 获取第一子节点； 
lastChild :获取最后一个子节点 
previousSibling : 获取上一个哥哥节点 
nextSibling : 获取下一个弟弟节点 
parentNode: 获取当前元素的父亲节点；

30、封装previousSibling

// 获取上一个哥哥的元素节点；

function getBrother(curEle) {

var pre = curEle.previousSibling;

while(pre){

if(pre.nodeType ===1){//不满足，说明不是一个元素；

return pre;

}

pre = pre.previousSibling;

}

return pre;

}

getBrother(sec);

31、动态操作DOM的方法

document.createElement;创建元素 
appendChild : 向元素的末尾添加子节点； 
removeChild : 删除子节点； 
replaceChild : 替换节点； 
insertBefore :把元素节点插入某个节点的前面 
cloneNode : 复制节点； 
set/get/remove Attribute : 设置自定义行内属性；

32、Math的方法

Math.abs(): 取绝对值； 
Math.floor() : 向下取整 
Math.ceil() : 向上取整 
Math.max() : 取最大值 
Math.min() : 取一组数的最小值 
Math.random() 取随机数，取值范围[0,1) 
Math.round(): 四舍五入取整 
取m-n之间的随机整数：Math.round(Math.random()*(n-m)+m) 
Math.pow() : 取幂次方 
Math.sqrt() : 开平方；

33、Date的实例

console.log(typeof new Date());

// "object"

console.log(new Date());

// 获取本机的系统时间；

var time = new Date();

console.log(time.getFullYear());

// 获取时间年；

console.log(time.getMonth())

// 获取时间月 取值范围【0-11】

console.log(time.getDate());

// 获取时间日【1-31】

console.log(time.getDay());

// 获取星期几；【0-6】 星期日是0；

console.log(time.getHours())

// 获取小时数 【0-23】

console.log(time.getMinutes());

// 获取分钟数 【0-59】

console.log(time.getSeconds());

// 获取时间秒【0-59】 console.log(time.getMilliseconds());

// 获取毫秒数【0-999】

console.log(time.getTime());

// 当前时间距离1970-1-1日早上八点的毫秒数；

console.log(Date.now());

// 时间戳：

34、数组的去重

var ary = [12,8,88,12,99,88,66,77,66];

var a = [12,8,88,99,66,77];

var newAry = [];

forEach map ;

1、indexOf: 判断当前项在数组中是否存在，不存在返回-1；

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

var cur = ary[i];

// 判断当前项在新数组中是否存在，不存在返回-1；

if(newAry.indexOf(cur)===-1){

newAry.push(cur);

}

}

console.log(newAry);//[12, 8, 88, 99, 66, 77]

2、对象的属性名不能重复；

var obj = {1:10,1:16};

console.log(obj);

var ary = [12,8,88,12,99,88,66,77,12];

var obj = {};// {12:12,8:8,88:88}

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

var cur = ary[i];// 12

if(obj[cur]===cur){

ary.splice(i,1); 缺点: 数组塌陷；删除这一项后面的所有项的索引都要进行重新计算；

ary[i] = ary[ary.length-1];// 把数组最后一项赋值给当前项

ary.length--;// 删除最后一项；

i--;

continue;// 结束本轮循环

}

obj[cur] = cur;// 新增键值对；当属性名不存在时，执行此处代码

}

console.log(obj);//

console.log(ary);

3、转换成数组

var ary = [12,8,88,12,99,88,66,77,12];

var obj = {};// {12:12,8:8,88:88}

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

var cur = ary[i];// 12

obj[cur] = cur;// 新增键值对；当属性名不存在时，执行此处代码

}

//转换成数组

var newAry = [];

for(var key in obj){

newAry.push(obj[key])

}

console.log(newAry);

35、函数的递归

递归： 针对的是函数； 是JS中一种重要的思想； 
函数： 分为定义和执行 
函数递归： 在函数体内部，调用函数自己本身，让其执行；这就是递归；

function sum(num) {

if(num === 0){

return num;

}

if(num%3===0){

return num + sum(num-1);

}

if(num%3!==0){

return sum(num-1);

}

// return sum(99)

// return 99 + sum(98)

// return 99 + sum(97)

// return 99 + sum(96)

// return 99 + 96 + sum(95)....

// return 99 + 96 +... + 3 + sum(2)

// return 99 + 96 +... + 3 + sum(1)

// return 99 + 96 +... + 3 + 0

}

console.log(sum(100));

console.log(sum(200));

36、求1-100之间是3倍数的和

% : 取模；取余数

var total = 0;

for(var i=0;i<100;i++){

if(i%3===0){

total += i;

}

}

37、数组的插入排序

var ary = [12,88,67,98,56,35,45,26,1];

//5 6 7 8 10

//得到的新数组是排好序

//插入排序原理：去原有数组中去取每一项，然后和新数组中的成员进行比较，从新数组后面开始，一一向前比较，比新数组项小，继续和前一项比较，直到当前项比数组中一项值大时，把它放到这一项的后面；

var newAry = [];

newAry.push(ary[0]);

for(var i=1;i<ary.length;i++){

var cur = ary[i];

for(var j=newAry.length-1;j>=0;j--){

if(cur<newAry[j]){// 如果数组中拿到的这一项比新数组中j的这一项小；那么继续j--;和上一个成员进行比较；

if(j===0){

newAry.unshift(cur);

break;// 只会中止当前的小循环

}

}else{

// cur<newAry[j]的情况，把当前项放到新数组这一项的后面；

newAry.splice(j+1,0,cur);

break;

}

}

}

// 从前向后

console.log(newAry);

var ary = [12,88,67,98,56,35,45,26,1];

var mAry = [12,67,88];

mAry.push(ary[0]);

for(var i=1;i<ary.length;i++){

var cur = ary[i];

for(var j = mAry.length-1;j>=0;j--){

if(cur<mAry[j]){

if(j===0){

mAry.unshift(cur);

break;

}

}else{

mAry.splice(j+1,0,cur);

break;

}

}

}

38、数组的冒泡排序

var ary = [12,32,56,67,88,99,101];

// 1. sort

/*ary.sort(function (a,b) {

return a-b;// 从小到大

});*/

// 实现从小到大

// 让相邻两项进行比较，如果前面一项比后面一项大，那么让这两项互换位置；如果前比后面一项小，那么不换位置；每循环一整轮，把数组的最大值放到数组的最后面；有多少项，就执行多少次这样的循环；

for(var j = 0;j<ary.length;j++){

// 当外面的循环循环一次；

var flag = true;// 标识的作用

for(var i=0;i<ary.length-1-j;i++){

// 里面整个循环完一次，实现将最大值放到最后；

if(ary[i]>ary[i+1]){//前面一项比后面大

// 借助第三方变量

//如果能进来，说明数组没有排好顺序；如果进不来，说明数组已经是排好的

var temp = ary[i];

ary[i] = ary[i+1];

ary[i+1] = temp;

flag = false;

}

}

if(flag){

break;

}

}

console.log(ary);

39、数组的快速排序

快速排序快速排序的原理： 首先取原有数组中的中间项；接下来循环原有的数组每一项，和中间项进行比较，如果比中间项的小的放在左边的数组中，比中间项大的放在右边的数组中；然后再对左边和右边数组进行刚才的操作；最后把所有的小数组和中间项串在一起就是排好的数组；

var ary = [12,8,89,78,76,56,25,35];

function quickSort(ary) {

console.log(ary);

// 当数组的长度小于等于1；直接return当前的数组；

if(ary.length<=1){

return ary;

}

//获取

var middleIndex = Math.floor(ary.length/2);

//删除数组中中间项；并且获取中间项的值

var middleVal = ary.splice(middleIndex,1)[0];

console.log(middleVal);

var left = [];

var right = [];

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

var cur = ary[i];

//比中间项的小的放中间项的左边的数组，比中间项大的放中间项的右边的数组

if(cur<middleVal){

left.push(cur);

}else{

right.push(cur);

}

}

//对中间左右两边的数组进行重新这样的操作

return quickSort(left).concat(middleVal,quickSort(right))

}

var newAry = quickSort(ary);

console.log(newAry);

40、随机验证码

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

function getCode() {

// 准备一个62个字符串；

// 产生随机数；随机数可以作为字符的索引；

// 随机索引范围【0-61】

var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

// 随机数；

var i =0;

var newStr = "";

while(i<4){

var num = Math.round(Math.random()*(61-0)+0);

newStr+=str[num];

i++;

}

code.innerHTML = newStr;

}

getCode();

// 把函数的空间地址赋值给code的onclick属性；

code.onclick = getCode;

41、设置定时器

1) setTimeout() 
2) setInterval()

42、清除定时器

1) clearTimeout() 
2) setInterval()