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

JS基础整理面试题的更多相关文章

  1. js基础整理总结

    变量和变量作用域 变量和函数声明提升定义 Var a=100; Function test(){ 这时候由于变量声明提升,a变量已经声明,值为undefined Console.log(a); Var ...

  2. JS基础整理

    使用JS的三种方式 1.直接在html标签中,使用事件属性,调用js代码 <button onclick="alert('弹框')">弹框!</button> ...

  3. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  4. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  5. Three.js基础

    Three.js基础探寻一 Three.js基础探寻一   1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...

  6. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  7. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  8. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  9. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

随机推荐

  1. fiddler限制网速

    在测试过程中,经常会要求测试弱网络情况时的一些特殊情况,这时候IOS还好说,在开发者选项中调整网络模式即可,但android就只能通过别的方式了,这里整理了通过fiddler抓包工具来设置弱网模式,在 ...

  2. 处理 oracle 数据库导入报错“IMP-00058: 遇到 ORACLE 错误 942”

    在导入数据文件的时候出现了下图错误: 经过多次百度搜索问题.得知问题错误方向: 仔细的查询了被导入数据的数据库的版本: 而 被导入的数据包 dmp 文件是从 oracle11g r2的版本导出的. 所 ...

  3. C#多条件查出来的多个DataSet,然后循环将数据整合

    private List<string> barList;        public List<string> BarList        {            get ...

  4. Android studio 常见错误修改

    一,依赖冲突 All com.android.support libraries must use the exact same version specification (mixing versi ...

  5. cmake让add_subdirectory()的所有target生成到同一目录

    问题描述和解决办法 整个项目包括: 库.测试程序,都是基于源码生成:测试程序肯定是executable类型了,而如果生成的库是SHARED类型,在windows下就是.dll(以及对应的.lib)文件 ...

  6. spring boot mybatis打印SQL语句

    在logback-spring.xml 文件中添加 <logger name="com.ibatis" level="DEBUG" /> <l ...

  7. 服务器Nginx 反向代理 其他服务器 8181端口 失败的问题

    排查方向: 1. 检查服务器的防火墙 2. 检查安全策略 3. 关掉Nginx 服务器上的安全软件 如360 软件会照成这个问题 来自为知笔记(Wiz)

  8. 业务线接入前端异常监控sentry

    1.前端异常处理的框架对比   是否开源 收费 语言 监控范围 sentry 是 自己搭建服务器(免费)价格 英文 Angular.AngularJs.Backbone.Ember.JavaScrip ...

  9. Android Studio 2.1及其以上版本中的instant run功能 介绍

    Android Studio 2.0及其以后版本中的instant run功能 介绍 转 https://blog.csdn.net/zy987654zy/article/details/514961 ...

  10. Jmeter中主要管理器功用

    不管是在使用jmeter进行性能测试还是接口自动化测试时经常用到各种管理器进行对参数的处理,但是有时候分不清几种管理器的具体用法,所以做个笔记,列一下吧(所列内容基于版本为3.2) 主要内容包含以下: ...