容易被忽略的JavaScript基础 习题及详解【基本语法】（laosix）

温馨提示：本博客中的所有问题，都可以放入浏览器F12中的console中执行来验证

---

请注意！！！用F12执行代码时，可以会受以前定义变量的影响
所以建议在执行新的代码块之前【刷新网页】
不然就会出现类似于这样的问题

---

最近在补js的基础，把学到的新知识总结了一下，做了点题目分享给大家（因为是js基础知识，所以尽量不用es6的写法）

习题

1、[选择] 请问以下代码分别会在控制台中输出什么？

console.log(a)
var a = 123

A.	'123'
B.	报错 a is not defined
C.	123
D.	undefined

2、[填空] 已知函数 SW() 定义如下，请问输入以下参数，分别会在控制台中输出什么？

function SW(num){
	switch(num){
		case 1:
			console.log('我是数字1')
			break
		case 2:
			console.log('我是数字2')
		case 3:
			console.log('我是数字3')
			break
		default:
			console.log('我是其他')
	}
}

1. SW(1)

2. SW(2)

3. SW(3)

4. SW('1')

3、[选择] 请问以下代码分别会在控制台中输出什么？

var a = 1
var b = a === 1 ? 'a是数字1' : 'a不是数字1'
console.log(b)

A.	a
B.	'a是数字1'
C.	"a === 1 ? 'a是数字1' : 'a不是数字1'"
D.	'a不是数字1'

4、[填空] 已知 breakNormal() 和 breakLabel() 的定义如下，请问调用他们分别会在控制台中输出什么？

function breakNormal(){
	for(var i=0; i<10; i++){
		for(var j = 0; j<10; j++){
			if(j === 3) break
		}
	}
	console.log('i=' + i + '; j=' + j)
}

breakNormal()

function breakLabel(){
	top:
		for(var i=0; i<10; i++){
			for(var j = 0; j<10; j++){
				if(j === 3) break top
			}
		}
	console.log('i=' + i + '; j=' + j)
}

breakLabel()

5、[填空] 已知 continueNormal() 和 continueLabel() 的定义如下，请问调用他们分别会在控制台中输出什么？

function continueNormal(){
	for(var i=0; i<10; i++){
		for(var j = 0; j<10; j++){
			if(j === 3) continue 
		}
	}
	console.log('i=' + i + '; j=' + j)
}

continueNormal()

function continueLabel(){
	top:
		for(var i=0; i<10; i++){
			for(var j = 0; j<10; j++){
				if(j === 3) continue top
			}
		}
	console.log('i=' + i + '; j=' + j)
}

continueLabel()

---

详解

变量提升

1、[选择] 请问以下代码分别会在控制台中输出什么？

console.log(a)
var a = 123

A.	'123'
B.	报错 a is not defined
C.	123		
D.	undefined	【正确】

解：
本题考察的是【变量提升】知识点

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行

这会导致所有的变量的声明语句，都会被提升到代码的头部

也就是说，代码块的实际执行顺序是这样的

var a
console.log(a)
a = 123
// 输出的结果为 undefined 
// 因为只有声明语句被提升，赋值的语句不会提升
// 在调用console.log(a)时，a只被定义，还未被赋值，所以输出undefined 

switch

2、[填空] 已知函数 SW() 定义如下，请问输入以下参数，分别会在控制台中输出什么？

function SW(num){
	switch(num){
		case 1:
			console.log('我是数字1')
			break
		case 2:
			console.log('我是数字2')
		case 3:
			console.log('我是数字3')
			break
		default:
			console.log('我是其他')
	}
}

1. SW(1) // '我是数字1'

2. SW(2) // '我是数字2''我是数字3'

3. SW(3) // '我是数字3'

4. SW('1') // '我是其他'

解：
本题主要考察 switch 的【执行机制】和【相等机制】

1 在 SW() 的 case 2 的末尾没有使用 break 跳出代码块，所以会继续往执行 case 3 的语句

2 switch 的 case 使用的是严格相等判断也就是运算符中的===，在判断时不会转化变量的类型

console.log(1 === '1') // false

所以 SW('1') 会执行 default 的语句

三目运算符

3、[选择] 请问以下代码分别会在控制台中输出什么？

var a = 1
var b = a === 1 ? 'a是数字1' : 'a不是数字1'
console.log(b)

A.	a
B.	'a是数字1'	【正确】
C.	"a === 1 ? 'a是数字1' : 'a不是数字1'"
D.	'a不是数字1'

解：
本题考察的是【三目运算符】

三目运算符可以理解为 if...else... 的简便写法

如果条件为true，执行语句一，否则执行语句二

// 三目运算符
条件 ? 语句一 : 语句二

// if...else...
if(条件){
	语句一
}else{
	语句二
}

break label

4、[填空] 已知 breakNormal() 和 breakLabel() 的定义如下，请问调用他们分别会在控制台中输出什么？

function breakNormal(){
	for(var i=0; i<10; i++){
		for(var j = 0; j<10; j++){
			if(j === 3) break
		}
	}
	console.log('i=' + i + '; j=' + j)
}

breakNormal() // 'i=10; j=3'

解：
普通的 break 会跳出当前的代码块，本题中 j=3 便跳出内层代码块，继续执行外层代码块

结束时，外层代码块全部执行完毕所以 i=10 ，而内层代码块到 j=3 时就被跳出，所以停留在 j=3

function breakLabel(){
	top:
		for(var i=0; i<10; i++){
			for(var j = 0; j<10; j++){
				if(j === 3) break top
			}
		}
	console.log('i=' + i + '; j=' + j)
}

breakLabel() // 'i=0; j=3'

解：
当 break 设置了 label 的时候，就会直接跳到 label 所以在的代码块

在本题中 break top 就直接跳到了 top 所在的位置，也就是两层代码块之外，就等于是直接结束了两层循环

此时外层循环第一次循环都没有执行完，就被 break top 跳出了，所以 i=0 ；内层循环执行到了第三次， 所以 j=3

continue label

5、[填空] 已知 continueNormal() 和 continueLabel() 的定义如下，请问调用他们分别会在控制台中输出什么？

function continueNormal(){
	for(var i=0; i<10; i++){
		for(var j = 0; j<10; j++){
			if(j === 3) continue 
		}
	}
	console.log('i=' + i + '; j=' + j)
}

continueNormal() // 'i=10; j=10'

解：
普通情况下的 continue 会跳过本次循环，如果 continue 之下还有别的语句，在本次循环中是不会被执行的

但是对于本题而言，没有什么影响，内外两层循环都执行了10次，所以 i=10; j=10

function continueLabel(){
	top:
		for(var i=0; i<10; i++){
			for(var j = 0; j<10; j++){
				if(j === 3) continue top
			}
		}
	console.log('i=' + i + '; j=' + j)
}

continueLabel() // 

解：
和上一题类似，当 continue 设置了 label 的时候，就会直接跳到 label 所以在的代码块

在本题中 continue top 就直接跳到了 top 所在的位置，就是每次执行到 j=3 就直接跳出内层循环，继续执行外层循环，基本等同了 普通break 的效果

当循环结束的时候，外层循环全部执行完，而内层循环在 j=3的时候被跳出，所以最终的答案是 i=10; j=3
`

---

本次分享到此结束，感谢各位的阅读~

本次分享共5题，如果每题20分的话，你们能得多少分呢？欢迎在评论区晒出各位的分数

如果本片博客中存在问题，也欢迎各位在评论区指出，这能让我们共同进步

好的，再次感谢你的阅读，我们下期再见 0v0

本博客的知识点均来自于 《js基础教程》