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、字符串的运算

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

任何数字和NaN 计算，结果都是NaN;
任何数字和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()