JS基础整理面试题

时间:2024-10-06 09:33:56

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()