这里写目录标题
1.面试题
js所有的赋值都是关联,不是拷贝
1
//1.写出下面结果输出的答案
let a = {
n: 1
};
let b = a;
a.x = a = {
n: 2
};
console.log(a.x); // undefined
console.log(b); // {n: 1, x:{n:2}}
1.1.堆的嵌套,会导致内存溢出
//变式:
let a = { n: 1 }
let b = a;
a.x = b;
console.log(a);//{n: 1, x: {…}} n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}
2.分别写出下列表达式输出的结果
var a = 'abc' + 123 + 456; //abc123456
var b = '456' - '123'; //333
var c = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false; //NaNTencentnull9false
//100 + true + 21.2 + null =122.2
//100 + true + 21.2 + null + undefined=NaN
console.log(a, b, c);
2.js数据类型检测(4种)
1.typeof(不是方法,不加小括号)
基于typeof检测出来的结果
1.首先是一个字符串
2.字符串中包含对应的类型
console.log(typeof 1); // 'number'
console.log(typeof NaN); // 'number'
typeof null //'object'
typeof undefined //'undefined'
typeof [] // 'object'
typeof [1,2,3] //'object'
typeof function(){} //'function'
局限性
- typeof null => "object"但是null并不是对象
- 基于typeof无法细分出当前值是普通对象还是数组对象等,因为只要是对象数据类型,返回的结果都是"object"
typeof面试题
typeof typeof typeof []
typeof [] //'object'
typeof typeof [] 'string'==>typeof 'object'
输出结果是:'string’
因为typeof检测的结果都是字符串,所以只要两个及以上同时检测,最后结果必然是"string"
剩下的以后再讲。。。。。
2.instanceof :用来检测当前实例是否率属于某个类
3.constructor :基于构造函数检测数据类型(也是基于类的方式)
4.Object.prototype.toString.call()︰检测数据类型最好的办法
3.js中的操作语句
3.1判断
1.if/else if/esle
2.三元运算符 条件?成立:不成立
条件?条件成立处理的事情:不成立处理的事情;
1.如果处理的事情比较多,我们用括号包起来,每一件事情用逗号分隔
2.如果不需要处理事情,可以使用null/undefined占位
3.switch case
1.每一种CASE情况结束后最好都加上BREAK(如果不加break,会全部执行)
2.default等价于else,以上都不成立干的事情
3.每一种case情况的比较用的都是===(绝对相等)
let score = 10;
let n = score / 10;
switch (n) {
case 10:
case 9: console.log("成绩为优" + score);
break;
case 8: console.log("成绩为良=" + score);
break;
case 6: console.log("成绩为及格=" + score);
break;
default: console.log("成绩不及格=" + score);
}
'5'==5 和 case '5'
switch ('5') {//会输出0000,此时case5 不等于5
case 5: console.log(55555555);
break;
default: console.log(0000);
}
if('5'==5){ //'5'==5判断为true
'5'==5 先将字符串转化为数组在进行比较
}
3.2== 和 ===
== 相等:(‘5’ == 5)判断为真,(如果左右两边数据值类型不同,是默认先转换为相同的类型,然后比较
===绝对相等:(‘5’===5)判断为假,如果类型不一样,肯定不相等。
项目中为了严谨,推荐使用三个等于号
能用css写的就不要用js来写
练习1.鼠标滑过css实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
/*自绝父相*/
box-sizing: border-box;
/*C3新增,控制最终宽高*/
margin: 20px auto;
width: 200px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
.box .detail {
position: absolute;
/*自绝父相*/
box-sizing: border-box;
/*C3新增,控制最终宽高*/
width: 500px;
height: 100px;
text-align: center;
border: 1px solid lightcoral;
left: -1px;
top: 38px;
display: none; /*隐藏*/
z-index: -1;/*优先展示*/
}
.box:hover{
border-bottom-color:#FFF ;
}
.box:hover .detail {
display: block;
}
</style>
</head>
<body>
<div class="box">
<span>购物车</span>
<div class="detail">购物车详情</div>
</div>
</body>
</html>
练习2.鼠标点击js实现
传统基于操作DOM的方式实现业务需求
1.想操作谁就先获取谁
2.给某元素绑定某事件
3.在事件触发的时候修改元素的样式等
操作DOM:传统操作,JQ
操作数据:Vue,React
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
/*自绝父相*/
box-sizing: border-box;
/*C3新增,控制最终宽高*/
margin: 20px auto;
width: 200px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
cursor: pointer;
/*变小手*/
}
.box .detail {
position: absolute;
/*自绝父相*/
box-sizing: border-box;
/*C3新增,控制最终宽高*/
width: 500px;
height: 100px;
text-align: center;
border: 1px solid lightcoral;
left: -1px;
top: 38px;
display: none;
/*隐藏*/
z-index: -1;
/*优先展示*/
}
</style>
</head>
<body>
<div class="box" id="box">
<span>购物车</span>
<div class="detail" id="detail">购物车详情</div>
</div>
</body>
<script>
//传统基于操作DOM的方式实现业务需求
//1.想操作谁就先获取谁
//2.给某元素绑定某事件
//3.在事件触发的时候修改元素的样式等
//1.document.getElementById([ID]):在整个文档中,通过元素的ID获取到当前这个元素对象
let box = document.getElementById('box');
let detail = document.getElementById('detail');
//2.事件绑定 对象.onxxx=function(){} (click/mousedown/keydown...)
let flag = 0;
box.onclick = function () {
if (flag === 0) {
//3.在事件触发的时候修改元素的样式等
detail.style.display = 'block'; //.style方法操作元素的行内样式
box.style.borderBottomColor = '#FFF'
flag = 1;
} else {
//3.在事件触发的时候修改元素的样式等
detail.style.display = 'none'; //这种方法操作元素的行内样式
box.style.borderBottomColor = 'pink'
flag = 0;
}
}
</script>
</html>
3.2循环
1.for循环
2. for in循环
3. for of循环(ES6新增)
4. while
5. do while
1.for循环
1.创建循环初始值
2.设置(验证)循环执行的条件
3.条件成立执行循环体中的内容
4.当前循环结束执行步长累计操作
for(var i=0;i<5;i++){
console.log(i); //0 1 2 3 4
}
console.log(+i);//5
循环2次,结果为4
for (var i = 10; i > 4; i -= 2) {
if (i < 7) {
i++;
} else {
i--;
}
}
console.log(i);
continue和break的区别
continue结束本轮循环
break结束整个循环
for (var i = 0; i < 10; i++) {
if (i >= 2) {
i += 2;
continue; //一趟循环结束
}
if (i >= 6) {
i--;
break;//所有循环结束
}
i++;
console.log(i); //1
}
console.log(i);//11
判断输入数的符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="text1">
<button id="btn1">判断</button>
</body>
<script>
var text1 = document.getElementById('text1');
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
//console.log(text1.value);
var n = Number(text1.value)
if (isNaN(n)) {//
console.log('no');
} else if (n > 0) {
console.log('正数');
} else if (n < 0) {
console.log('负数');
}
}
</script>
</html>