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

古城微笑少年丶 2022-08-30 00:42 171阅读 0赞

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

--------------------

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

--------------------

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

### 文章目录 ###

*  习题
 *  详解
 *   *  变量提升
     *  switch
     *  三目运算符
     *  break label
     *  continue label

# 习题 #

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

5、\[填空\] 已知 `continueNormal()` 和 `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()` 定义如下，请问输入以下参数，分别会在控制台中输出什么？

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()` 的定义如下，请问调用他们分别会在控制台中输出什么？

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

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

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

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

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

## continue label ##