赋值不是覆盖
var a=12;
a=13;
①先创建一个变量a，在值存储区域创建12,a指向12
②在值存储区域创建13,a指向13（此时12没有被销毁）
一.问答题
1.JS中常用的数据类型有哪些?
基本数据类型（值类型）：number string boolean null undefined symbol
引用数据类型：1.object（{普通对象}，[数组对象]，/正则对象/，数学函数对象Math,日期对象Data，类数组对象getElementByTagName） 2.function
2.浏览器中常用的内核有哪些?
webkit 谷歌，手机端pc端大部分
gecko 火狐
presto 欧朋
trident IE
3.数据类型之间的区别?
基本数据类型按值操作，引用类型操作的是堆内存的空间地址
4.列举常用的关键字和保留字ES6
关键字：break 、continue、if else 、for、var、let、const、function、class、import、typeof、this、return、switch、case、do while、delete、new
保留字：boolean、float、int、double、long、char、debugger
5.JS中创建变量的几种常用方式?
var /let 创建变量
const创建常量
function创建函数
class创建类
import模块导入
二.写输出
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}}
2.写出下面结果输出(一眼顶针！)
js中加法有特殊情况，相加过程中遇到字符串直接变为字符串拼接
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(1) + 21.2 + null(0) =122.2
//100 + true + 21.2 + null(0) + undefined(NaN)=NaN
console.log(a, b, c);
3.写出下面结果输出（顶针倒了）
NaN不等于NaN
typeof NaN 输出 ‘number’
var str = 'abc123';
var num = parseInt(str); //NaN
if (num == NaN) { //NaN不等于NaN
alert(NaN);
} else if (num == 123) {
alert(123);
} else if (typeof num == 'number') {
alert(' number'); // 'number'
} else {
alert('str');
}
4.写出下面结果输出(一眼顶针！)
var a = 0;
var b = a;
b++; //
alert(a); //0
var o = {};
o.a = 0;
var b = o;
b.a = 10;
alert(o.a) //10
5.输出字符串’1’的有哪些（顶针倒了）
A.alert(1) //alert要转化为字符串输出 '1'
B.console.log(parseInt(1.3)) //数字1
C.console.log(1) //数字1
D.console.log(isNaN(1)) //flase
E.console.log(parseInt("1")) //数字1
6.输出undefined的有哪些（顶针倒了）
A.console.log(alert(1)) // alert(1):执行浏览器内置的alert方法，
执行方法的时候弹出一个"1"(方法的功能)，此方法没有返回值（默认返回值undefined）
B.typeof undefined //输出 'undefined' 字符串
C.console.log(parseInt(undefined)) //NaN
D.isNaN(undefined) //true
7.输出true的有哪些(?顶针倒了)
A.isNaN(null) //false null-->0, undefined-->NaN
B.isNaN(parseInt(null)) //true
C.Number(null) //0
D.parseFloat(null) //NaN
8.输出结果
parseInt("") //NaN
Number("") //0
isNaN("") //false
parseInt(null) NaN
Number(null) // 0
isNaN(null) // false
parseInt("12px") //12
Number("12px") NaN
isNaN("12px") true
9.输出结果
if (isNaN(NaN) == "") { // isNaN(NaN) true
console.log("你好")
} else {
console.log("呵呵") 呵呵
}
10.输出结果
let x = [1, 2, 3];
let y = x;
let z = [4, 5, 6];
y[0] = 10; //y:[10,2,3]
y = z; //z=y=[4,5,6]
z[1] = 20;
x[2] = z = 30;
console.log(x, y, z);
三.扩展题
1.浏览器常用的输出方式，除了console.log还有哪些
1.console.log/dir/table…在控制台输出
let a = 10;
let b = [{
id: 1,
name: 'zhangsan'
}, {
id: 2,
name: 'lisi'
}]
console.log(a);
console.dir(b);
console.table(b);
console是一个object(对象),他的方法有log()，table(),dir()…
可以使用console.dir(console)查看console有哪些对象
2.浏览器弹窗输出(3种)
三种方式输出的结果都必先经过toString转换为字符串，再弹出
三种方式会阻断代码执行，只有当窗口关掉，JS才会继续运行
alert() alert输出的内容都要先toString, 转化为字符串，在输出
如果是alert({name:'zhangsan'})会弹出[object Object]
confirm() 确定取消，确定和取消
prompt() 带输入框的，确定和取消
3.document.write在页面中写入(不用)
document.write(‘qqqqqqqqqqq’);
和alert一样，输出的结果都是字符串
2.script 标签放到页面头部和尾部的区别，以及解决办法?
注意事项: 放到头部，可能导致无法获取到需要操作的元素
一般把js放到body最后面，是为了保证页面结构加载完成才去做这些事情
可以使用window.onload(一个页面只能用一次)
事件:当页面中的结构和内容都加载完成才会执行这里面的代码
window.onload = function () {
//事件:当页面中的结构和内容都加载完成才会执行这里面的代码
//jQ中也有一个对应的方法$( document).ready(function(){})
let box = document.getElementById('box');
box.style.color = 'orange' ;
}
四.习题
4.1.输出下面程序运行的结果
for (var i = 0; i < 10; i++) {
console.log(i);
break;
}
console.log(i);
0
0
4.2.输出下面程序运行的结果
for (var i = 0; i < 10; i++) {
continue;
console.log(i); //不输出
}
console.log(i);
不输出
10
4.3.输出下面程序运行的结果
for (var i = 1; i <= 10; i += 2) {
if (i <= 5) {
i++; // 7
continue;
} else {
i -= 2; //5
break;
}
i--;
console.log(i); //不输出
}
conso1e.log(i); //5
4.4.输出下面程序运行的结果
for (var i = 3; i < 12; i++) {
if (i < 3) {
i++;
break;
}
if (i > 9) {
i += 2;
continue;
}
i--;
}
console.log(i);
死循环，不会结束，无输出
4.5将下面程序改为三目运算
八股文(太正宗了！！！)
let a = 12;
if (a >= 0 && a <= 20) {
if (a % 2 === 0) {
a += 2;
}
} else {
a -= 2;
}
console.log(a);
a >= 0 && a < = 20 ? (a % 2 === 0 ?a += 2 : null) : a -= 2;
4.6写输出
let a = typeof typeof typeof [12, 23];
console.log(a);
typeof [12, 23]--> 'object'
typeof '[object object]'--> 'string'
typeof 'string'--> 'string'
4.7写输出(?经典八股?)
10==‘10’ -->true； == :相等，数据类型不同，先转换为一样的再比较
10===‘10’ -->false； ===:绝对相等，必须类型和值都相同才为true
let a=‘10’
a+1–>‘101’ i+=1–>‘101’
++a //11 i++和以上两种不完全一样，他是纯粹的数学运算
i–无所谓，－－不用考虑字符串拼接
let i=1;
5+(i++) =>先算5+i=6 然后i再加1(i=2)
i=1;
5+(++i) =>先i累加1，然后拿累加后的结果去和5运算5+27
let a = '10';
a == 10 ? a++ : a--;
console.log(a); //11
// let a= '10';
// ++a;//11
let b = '10';
switch (b) {
case 10:
b++;
break;
default:
b--;
}
console.log(b); //9
五.实现颜色 白–>红–>绿–>蓝–>黑–>白–>红…
<!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 style="background-color: white;">
<button id="btn">循环变色白-->红-->绿-->蓝-->白-->红....</button>
<script>
var body = document.body;
var btn = document.getElementById('btn');
/******************方法二开始**********************/
var ary = ['white', 'red', 'green', 'blue', '#888'];
var i = 0;
btn.onclick = function () {
i++;
i > ary.length - 1 ? i = 0 : null;
body.style.backgroundColor = ary[i];
}
/******************方法二结束**********************/
/******************方法一开始**********************/
// btn.onclick = function () {
// let bg = body.style.backgroundColor;
// //获取当前的背景颜色元素.style.xxx只能获取行内样式（颜巴仕样式中使用16进制方式，JS中获取到的是RGB的值)
// console.log(bg);
// switch (bg) {
// case 'white':
// body.style.backgroundColor = 'red';
// break;
// case 'red':
// body.style.backgroundColor = 'green';
// break;
// case 'green':
// body.style.backgroundColor = 'blue';
// break;
// default:
// body.style.backgroundColor = 'white';
// }
// }
/********************方法一结束*****************/
</script>
</body>
</html>
六.扩展题(?面试官看了都摇头?)
!(!"Number(undefined)");
true boolean转化只有0，NaN，NULL，undefined,''会变为false
isNaN(parseInt(new Date()) + Number([1]) + typeof undefined;
true(1)+1+undefined=2undefined
Boolean(Number("")) + !isNaN(Number(null)) + Boolean("parseInt([])") + typeof !(null);
false+true+true+'boolean'=0+1+1+'boolean'=2boolean
parseF1oat("1.6px") + parseInt("1.2px") + typeof parseInt(null);
1.6+1+'number'=2.6number
isNaN(Number(! !Number(parseInt("0.8"))));
false
console.log(1 + "2" + "2");
122
!typeof parseFloat("O");
! 'number'=false
Number("");
0
typeof "parseInt(nu11)" + 12 + !!Number(NaN);
Number(NaN)-->NaN,
! 先转化为boolean再取反
!!(NaN)-->false
'string'+12+false=string12false
!typeof (isNaN("")) + parseInt(NaN);
false+NaN=NaN
typeof !parseInt(null) + !isNaN(null);
'boolean'+true=booleantrue
七.扩展题
.某个公司要给员工发年终奖，为了奖励老员工，所以工作时间越长，发的越多，规则如下:
工作满0年,发月薪的1倍月薪年终奖，如果月薪大于8000 ，那么就是发1.2倍
工作满1年,发月薪的1.5倍月薪年终奖，如果月薪大于10000，那么就是发1.7倍
工作满2年甚至更多 ,发月薪的3倍月薪年终奖，如果月薪大于12000，那么就是发3.2倍
编写JS程序，当用户输入自己的工作年限和薪资后，计算并且输出应得的年终奖~~
<!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" name="workyear" id="workyear"><br>
工资:<input type="text" name="sal" id="sal"><br>
<button id="btn">计算年终奖</button><br>
你的年终奖是: <span id="reward"></span>
<script>
var workyear = document.getElementById('workyear');
var sal = document.getElementById('sal');
var submit = document.getElementById('btn');
var reward = document.getElementById('reward');
submit.onclick = function () {
//1.获取输入的年限和工资数据,并转化为数字类型(蓝色)
var year = parseInt(Number(workyear.value));
var gongzi = parseInt(Number(sal.value));
if (isNaN(year) || isNaN(gongzi)) {
alert('请输入正确数据')
return;
}
console.log(year, gongzi);
//2.处理
let result = null;
switch (year) {
case 0:
result = gongzi > 8000 ? gongzi * 1.2 : gongzi;
break;
case 1:
result = gongzi > 10000 ? gongzi * 1.7 : gongzi * 1.5;
break;
default:
result = gongzi > 12000 ? gongzi * 3.2 : gongzi * 3;
}
//3.结果赋值给#reward
reward.innerHTML = result;
}
</script>
</body>
</html>
1630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
