# 1.多选题 下面说法正确的是？（选择两项）
**A.**变量初次赋值时，不使用var定义，则为全局变量
**B.**typeof null，返回的结果为null
**C.**非零数字除以0时，结果是Infinity
**D.**在定义变量之前，输出此变量会报错
参考解析：
本题考查变量和类型的基本概念。
不管在全局作用域还是局部作用域，初次赋值时，如果没有使用var定义，那么变量为全局变量，A说法正确。
typeof 是检测数据类型，typeof null输出的是object，B说法错误。
Infinity是一个数值，表示无穷大。非零数字除以0时，结果是Infinity，C说法正确。
在js代码执行之前，变量会预解析，即提前定义。所以会输出undefined，不会报错，D说法错误。
所以本题答案为AC。
# 2. 多选题 : 已知x=4、y=5、z=0，以下选项中说法错误的是？（选择两项）
**A.**x||y||z返回结果为0
**B.**z&&y&&x 返回结果为0
C. (y-z)%4返回结果为结果为1
D.(z++)+(--x)-y返回结果为-1
本题考查操作符和表达式。
||逻辑或中，从左往右计算，返回第一个可以转换为true的操作数。若操作数全部为false，则返回最后一个操作数。x||y||z中，第一个操作数x为4，4转换为布尔类型为true，所以结果返回4，A说法错误。
&&逻辑与中，从左往右计算，返回第一个可以转换为false的操作数。若操作数全部为true，则返回最后一个操作数。x&&y&&z中，第一个操作数z为0，0转换为布尔类型为false，所以结果返回0，B说法正确。
%为取余运算，y-z结果为5。 (y-z)%4计算的是5%4,即5除以4的余数，所以结果返回1，C说法正确。
z++表示先参与公式的运算，再自加。--x是先自减，再参与公式运算。所以(z++)+(--x)-y计算的是0+3-5，返回的结果为-2，D说法错误。
所以本题答案为AD。
# 3. 单选题以下代码中有几处错误（选择一项）
**A.**1
**B.**2
C. 3
**D.**4
本题主要考查大家排查错误的能力。
第一处是prmopt单词拼写错误，正确拼写为prompt。
第二处是number <= 80判断逻辑错误，成绩不错应该是大于等于80，而不是小于等于80，所以要把<=改成>=。
第三处是else(number < 60) 语法错误，如果else后面有判断条件，那么需要使用else if。
所以一共有3处错误，本题正确答案为C。
# 4.单选题以下代码，输出的结果依次是？（选择一项）
**A.**2,3,4
**B.**2,2,2
C. 4,4,4
**D.**2,2,4
本题考查引用类型赋值。
引用类型的赋值是把一个对象的内存地址赋值给另一个对象，所以修改其中一个对象的属性值另一个对象的属性也会改变。
代码中，b=a之后，a和b指向的地址一样，所以a.num = 2增加了属性num，那么输出b.num也是2。
但是注意，a = {num: 3 }是给a重新赋值了一个对象，所以此时a的地址改变了，再修改a的属性，b的属性不会改变。所以后面两次输出b.num依旧是2。
本题正确答案为B。
# 5.多选题选择哪一项补充到代码中，可以让结果输出[5, 4, 3, 2, 1]？（选择两项）
**A.**arr.push(5)，a-b
**B.**arr.push(5)，b-a
**C.**arr[4]=5,b-a
**D.**arr[5]=5,a-b
本题考查数组添加元素以及排序的方法。
（1）添加数组元素有两种方式，第一种是使用push()方法，即在数组末尾处添加元素，参数是要添加的元素。arr.push(5)意思是在arr末尾处添加元素5。
第二种是使用数组索引的方式，把元素添加到指定位置。但是注意，索引从0开始。数组原来有4个元素，如果添加第5个元素，索引应该为4。所以arr[4]=5是正确的。
（2）sort()方法用于数组排序，排序规则中，a表示前一个元素，b表示后一个元素。如果a-b或者b-a大于0，则交换元素的位置，如果小于等于0，则不交换。
arr前一个元素要比后一个元素小。如果使用a-b，则a-b<0，此时不会交换位置。arr依旧为[1,2,3,4,5]。所以要使用b-a，此时b-a>0,会交换元素的位置，即数值大的会被移动到前面，形成降序排列。
所以本题第一处代码可以补充arr.push(5)或者arr[4]=5，第二处代码只能补充b-a，答案为BC。
# 6.单选题观察以下代码，当点击“点击我”时，控制台输出的结果是？（选择一项）
A.
**B.**点击我
**C.**点击我，
D.
本题考查事件以及事件委托相关知识。
addEventListener给同一个元素绑定多个相同事件时，不会覆盖，而是按照代码顺序从上往下依次执行。本题代码中，给div.box元素绑定了两个点击事件，所以会输出两个结果。A和B选项只有一个结果，可以先排除。
事件委托就是把子元素的事件绑定在父元素上，利用冒泡的原理， 点击子元素时，触发父元素上面的事件。e.target表示触发事件的源对象，即点击了谁，表示的就是谁。这里是点击
e.currentTarget表示绑定事件的源对象，即不管点击谁，它表示的都是绑定事件的那个元素。本题中，是给div#box绑定的事件，所以e.currentTarget.innerHTML获取的是box元素里面的内容，即
所以本题答案为C。
# 7.**单选题 **结合生活小常识，观察/^\d{17}[0-9X]$/匹配的是什么？（选择一项）
**A.**邮箱
**B.**手机号
C. QQ号
**D.**身份证
本题考查正则表达式的基础知识。
\d是匹配数字，{17}是匹配前面的表达式17次，即匹配17个数字。[0-9X]表示匹配0~9的数字或者大写字母X。所以整个表达式匹配的结果有两种，一是18位的数字，而是17位的数字加上一个大写字母X，也是18位。我国居民身份证号码位数是18位，前17位是数字，最后一位可能是数字或者大写X,
所以本题答案为D。
# 8.单选题 某账号密码为字母、数字和下划线的组合，且必须以字母开头，密码长度为6~12位。以下哪一个选项，可以作为此密码的正则？（选择一项）
A./^[a-zA-Z]\w{6,12}$/
B./^[a-zA-Z0-9_]{6,12}$/
C. /^[a-zA-Z]\w{5,11}$/
D./^[^0-9_][a-zA-Z0-9_]{5,11}$/
本题考查正则表达式相关知识。
/^[a-zA-Z]\w{6,12}$/：开头的[a-zA-Z]匹配字母，后面的\w{6,12}匹配6~12位的字母，数字、下划线。匹配的总长度为7~13位，长度不符合要求，A错误。
/^[a-zA-Z0-9_]{6,12}$/：只匹配了6~12的字母、数字和下划线，没有规定开头必须是字母，B错误。
/^[a-zA-Z]\w{5,11}$/：开头的[a-zA-Z]匹配字母，后面的\w{5,11}匹配5~11位的字母，数字、下划线。匹配的总长度为6~12位，符合要求，C正确。
/^[^0-9_][a-zA-Z0-9_]{5,11}$/：开头[^0-9_]匹配非数字和下划线，即开头会匹配字母或者其它符号，不符合开头必须字母，D错误。
所以本题答案为C。
# 9.单选题以下代码输出的结果为？（选择一项）
**A.**报错
**B.**3
C. 4
**D.**2
本题考查函数参数的使用。
定义的形参与实参的位置是一一对应的，即a=6、b=2、c=4，a+b+c计算的结果为12；且调用函数时，传入的实参比形参数量多，不会报错。
另外，传入的所有实参，都会保存在arguments类数组中，所以arguments.length获取的参数长度为4。
所以result/arguments.length计算结果为12/4=3，答案为B。
# 10.单选题观察下面的代码，输出的结果是？（选择一项）
A.["g","o","o","d"]，object
B.["d","o","o","g"]，object
C. good, string
**D. **doog, string
本题考查数组和字符串的一些方法。
split() 方法用于把一个字符串分割成字符串数组。
reverse() 方法用于反转数组中元素的顺序。
join() 方法用于把数组中的所有元素放入一个字符串。
本题代码中，str.split("")把字符串先分割成数组，即["g","o","o","d"]，通过reverse()反转数组，即["d","o","o","g"]。最后再通过join（）方法把数组又转换为字符串，即“doog”。
typeof检测字符串类型为string，所以本题答案为D。
# 11.单选题观察下面的代码，输出的结果是？（选择一项）
# 12.单选题观察一下代码，三次输出的结果依次是？（选择一项）
A.["g","o","o","d"]，object
B.["d","o","o","g"]，object
C. good, string
**D. **doog, string
本题考查作用域和预解析。
函数会形成一个局部作用域，局部作用域使用某一个变量时，会先在内部查找并使用。如果没有找到，就会往上一层作用域中查找。另外，变量和函数在代码执行之前会预解析，即会提前定义。但是注意赋值不会预解析，预解析时变量默认赋值为undefined。
本题代码中，func中在定义username之前就输出了，不过因为变量预解析，所以函数func中第一次输出结果是“undefined”。第一次输出之后，username会赋值为“小鱼”。
函数funcname中没有使用var定义username，它会向上一层作用域func中查找同名的变量username。func中定义了此变量，所以username 的值由"小鱼"修改为“小慕”。第二次输出“小慕”。
全局变量并没有修改，所以全局中输出的是“小星星”，本题答案为D。
# 13.单选题以下代码输出的结果依次是？（选择一项）
**A.**5,3
**B.**5,2
C. 4,3
**D. **4,2
本题考查预解析和面对对象的基本概念。
预解析：使用var声明的变量和function声明的函数会提前定义，但是注意变量赋值并不会预解析。
面对对象：实例对象调用某一个方法时，会先在自身查找该方法，如果自身没有此方法，才会去调用原型上的同名方法。
本题代码中，先预解析全局的变量“var getNum”和函数“function getNum() {console.log(5) }”。预解析完毕之后，getNum最终的值为function getNum() {console.log(5) }。然后代码执行阶段，变量getNum进行赋值，所以全局下的getNum最终值为function() { console.log(4); }，调用getNum输出结果为4。
代码继续往下执行，构造函数Foo实例化，实例对象f自身会继承构造函数内使用”this.”定义的方法getNum，即function() { console.log(2); }。而f的原型会指向构造函数的原型对象，即function() { console.log(3); }。f.getNum()调用同名方法时，优先调用自身的方法，所以结果输出2。
本题答案为D。
# 14.单选题以下代码中，输出的结果依次为？（选择一项）
**A.**2,2,2,2
**B.**1,2,3,4
C. 2,3,2,3
**D. **2,3,4,5
本题考查闭包和作用域的基本概念。
函数里的子函数被函数外部一直使用，使子函数无法释放，保持其所在作用域，形成一个封闭的作用域，称之为闭包。
本题代码中，函数out内部返回一个子函数inner。全局变量fn1，fn2的值为函数out的返回值，即子函数inner。由于全局变量在程序执行过程中是不会销毁的，所以它使用的值，即子函数inner无法释放。而inner内部使用的局部变量num，也就随之保存在内存中不会销毁了。
第一次调用fn1(),输出2；第二次调用fn1()时，会在内存中拿到上一次num的值并自加，第二次输出为3。需要注意的是，函数out分别调用了两次，即会形成两个不同作用域。每一个作用域中的局部变量不会相互影响。你可以把fn1和fn2看成两个互不干扰的闭包，所以第一次调用fn2()，输出2；第二次调用fn2()，输出3。
本题答案为C。
# 15.单选题有一对小兔子从出生后第三个月起，每一个月都生一对小兔子。生下来的小兔子长到第三个月后，每一个月又生一对小兔子。补充下面的代码，求任意月份兔子的对数？（选择一项）
**A.**func(n - 1) + func(n - 2)
**B.**func(n ) + func(n-1)
C. n + func(n - 1)
**D. **n + func(n - 2)
本题考查递归算法。
兔子的对数分析：第一个月1对，第二个月1对，第三个月它们生了1对，共2对。第四个月又生1对，共3对。第五个月，又生了1对，且第二对兔子已经长到第三个月，生了1对小兔子，共5对。第六个月，第一对兔子生了1对，第二对生了1对，第三对兔子已经长到第三个月，也生了一对，共8对。形成的数字规律如下：
1，1，2，3，5，8，13，21……（单位：对）
以上就是斐波拉契数列，后面的一个数是它前面两个数之和。所以第n个月兔子的对数，为用第n-1个月的兔子对数 + 第n-2个月的兔子对数，即func(n - 1) + func(n - 2)，本题答案为A。
# 16.单选题页面上输出99 97 95 93 91 89 87 85………………………………1，也就是1-99的奇数，但是是从大到小的输出，下列哪个循环语句可以实现？（选择一项）
**A.**for(var i=99；i>=1；i=i-2);
**B.**for(var i=1；i<100；i=i-2);
C. for(var i=99；i>=1；i++);
**D. **for(var i=99；i>=1；i--);
参考解析：
本题考察的是for循环语句的运用，正确选项为A。
从99到1，只取奇数，那么每个数之间是相差2的，循环后的执行语句是i=i-2；数字是倒数，所以要从最大的开始，所以初识变量i=99；
倒数最小为1，所以当条件大于等于1时执行循环语句，一旦小于1了，就停止循环。
# 17.在登录页面中，小云输入的密码是：1234567，小课输入的密码是：12345a，根据以下代码判断页面会输出什么？（选择一项）
A.“ 密码输入正确“ “输入的密码只能为数字”
B.”输入的密码位数不是6位数“ ”密码输入正确“
C. ”输入的密码位数不是6位数“ “输入的密码只能为数字”
**D. **控制台报错
参考解析：
本题考察的是if语句以及isNaN（）的应用，正确选项为C；
小慕输入的密码是7位数，input.length!=6为真，所以会弹出输入的密码位数不是6位数；小课输入的密码是六位数但是包含字母，所以会弹出密码只能为数字。
# 18.下面代码的运行结果是？（选择一项）
**A.**3
**B.**9
C. 4
**D. **-1
参考解析：
本题考察的是字符串的IndexOf（）方法，正确选项为C。IndexOf（）方法返回字符串中匹配子串的第一个字符的下标；“Script”首次出现的位置是4。
# 19.想获取字符串"Dreams will never die"中的never字符，substring（）里的参数该怎么写？（选择一项）
**A.**substring（12,16）
**B.**substring（11,17）
C. substring（11,16）
**D. **substring（12,17）
参考解析：
本题考察的是字符串的substring（）方法，正确选项为D。
substring（）方法可以截取字符串中的子字符串，有两个参数，第一个参数是截取的开始位置，第二个参数是截取的结束位置，参数截取含头不含尾。
# 20.下列代码中，哪个可以实现图片中的效果，控制台每秒打印一次“hello”？（选择一项）
**A.**setInterval ( function( ) { console.log ( "hello" ) ; } , 1000)
**B.**setInterval ( function( ) { console.log ( " hello " ) ; } , 1)
C. setTimeout ( function( ) { console.log ( " hello " ) ; } , 1000)
**D. **setTimeout ( function( ) { console.log ( " hello " ) ; } , 1)
该题考察的是setInterval（）的使用，正确选项为A；
setInterval（）方法每隔指定的时间执行一次代码，有两个参数：
第一个参数是要执行的函数或者执行脚本
第二个参数是周期性执行代码的时间间隔，以毫秒计数
# 回到顶部
(function () {
let backToTop = document.getElementById("backtotop");
let timer;
// 返回顶部按钮的监听
backToTop.onclick = function () {
// 设表先关
clearInterval(timer);
timer = setInterval(function () {
// 设置定时器
document.documentElement.scrollTop -= 80;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 20);
};
// 监听页面滚动
window.onscroll = function () {
// 得到卷动值
let scrollTop = document.documentElement.scrollTop || window.scrollY;
// 如果页面没有卷动 返回顶部隐藏
if (scrollTop === 0) {
backToTop.style.display = "none";
} else {
backToTop.style.display = "block";
}
};
})();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 菜单移动
(function () {
let banner_nav_ul = document.getElementById("banner-nav-ul");
let menus = document.querySelectorAll(".menus-box .menu");
let banner_nav_lis = document.querySelectorAll("#banner-nav-ul li");
let banner_nav = document.getElementById("banner-nav");
// 事件委托，必须使用onmouseover事件，而不是onmouseenter，我们基础课上讲过，
// onmouseover冒泡，onmouseenter不冒泡
banner_nav_ul.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() == "li") {
// 得到触碰的这个li元素身上的data-t属性
let t = e.target.getAttribute("data-t");
//alert(t);
//寻找匹配的menu
let theMenu = document.querySelector(`.menus-box .menu[data-t = ${t}]`);
//排他操作,让其他的盒子都去掉show类名
for (let i = 0; i < menus.length; i++) {
menus[i].classList.remove("show");
}
// 匹配的这项加上show类名
theMenu.classList.add("show");
// 排他操作 , 让所有盒子去掉active类名
for (let i = 0; i < banner_nav_lis.length; i++) {
//banner_nav_lis[i].className = banner_nav_lis[i].getAttribute("data-t");
banner_nav_lis[i].classList.remove("active");
}
// 当前触碰匹配到的这项加active类名
e.target.classList.add("active");
}
};
// 当鼠标离开大盒子的时候 菜单关闭
banner_nav.onmouseleave = function () {
for (let i = 0; i < banner_nav_lis.length; i++) {
//banner_nav_lis[i].className = banner_nav_lis[i].getAttribute("data-t");
banner_nav_lis[i].classList.remove("active");
menus[i].classList.remove("show");
}
};
})();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 无缝轮播图
/* 轮播图特效
日期:2020,11,18
姓名小云
*/
(function () {
// 得到元素
let carousel_list = document.getElementById("carousel-list");
let left_btn = document.getElementById("left-btn");
let right_btn = document.getElementById("right-btn");
let banner = document.getElementById("banner");
let circles_ol = document.getElementById("circles-ol");
let circles_lis = document.querySelectorAll("#circles-ol li");
// 克隆第一张li
let clone = carousel_list.firstElementChild.cloneNode(true);
// 上树
carousel_list.appendChild(clone);
//当前正在显示的图片序号 从0开始
let index = 0;
//节流锁
let lock = true;
//右按钮的事件监听
right_btn.onclick = right_btn_handler;
function right_btn_handler() {
// 判断节流所的状态,如果是关闭的,就什么都不做
if (!lock) return;
// 关锁
lock = false;
// 加上过渡
carousel_list.style.transition = "transform .5s ease 0s";
// idx当然要加1
index++;
// 拉动
carousel_list.style.transform = `translateX( ${-16.66 * index}% )`;
// 判断是否最后一张 最后一张就瞬间移动回来
if (index > 4) {
setTimeout(function () {
//去掉过渡
carousel_list.style.transition = "none";
// 删除transform的属性
carousel_list.style.transform = "none";
// 全局图片的序号变为0
index = 0;
}, 500);
}
//设置小圆点
setCircles();
// 动画结束之后开锁
setTimeout(function () {
lock = true;
}, 500);
}
// 左按钮的事件监听
left_btn.onclick = function () {
// 判断节流所的状态,如果是关闭的,就什么都不做
if (!lock) return;
// 关锁
lock = false;
//左按钮很特殊 先写if语句 而不是index--
if (index == 0) {
// 瞬间拉到最后
carousel_list.style.transition = "none";
//拉到最后(瞬间移动)
carousel_list.style.transform = `translateX( ${-16.66 * 5}% )`;
//改变Index的值
index = 4;
//小技巧 延时0毫秒非常有用 可以让刚刚的瞬移发生后 再把过渡加上
setTimeout(function () {
// 加上过渡
carousel_list.style.transition = "transform .5s ease 0s";
// 动画
carousel_list.style.transform = `translateX( ${-16.66 * 4}% )`;
}, 0);
} else {
index--;
//拉动
carousel_list.style.transform = `translateX( ${-16.66 * index}% )`;
}
//设置小圆点
setCircles();
// 动画结束之后开锁
setTimeout(function () {
lock = true;
}, 500);
};
// 设置小圆点的active在谁身上 序号为index小圆点才有active类名 其他li没有
function setCircles() {
for (let i = 0; i <= 4; i++) {
//i == index 当index=5的时候也是第一张图片但是没变 可以 i == index % 5
// 这里的 %5 非常巧妙 1,2,3,4除以5的余数是它本身 但是5除以5就等于0了
//这里的 %5 的目的就是为了右按钮它有一瞬间 Index = 5 500毫秒才会变为0
if (i == index % 5) {
circles_lis[i].classList.add("active");
} else {
circles_lis[i].classList.remove("active");
}
}
}
// 事件委托 小圆点的监听
circles_ol.onclick = function (e) {
if (e.target.tagName.toLowerCase() == "li") {
// 得到li身上的data-n属性，就是n
let n = Number(e.target.getAttribute("data-n"));
// 改变idx
index = n;
//拉动
carousel_list.style.transform = `translateX( ${-16.66 * index}% )`;
//设置小圆点
setCircles();
}
};
// 定时器 自动轮播
let timer = setInterval(right_btn_handler, 2000);
// 鼠标进入,自动轮播暂停
banner.onmouseenter = function () {
clearInterval(timer);
};
// 鼠标进入,自动轮播开始
banner.onmouseleave = function () {
// 设表先关
clearInterval(timer);
// 设置定时器 这里不要加let 加let就声明局部变量了,就clear不掉了!
timer = setInterval(right_btn_handler, 2000);
};
})();
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162