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