第二章 语法基础篇

前言

本篇的内容属于JavaScript高级程序设计的基础部分,因此不做过多介绍,只选择相对来说比较有趣、面试常用或者鲜为人知的部分进行记录。想学习更多基础知识内容的同学,可以直接买一本《JavaScript高级程序设计》(第四版)进行深入地阅读。

精要

1.var的变量提升。

在这里插入图片描述
使用var进行声明变量的时候,JavaScript会将var a = 1分成2句进行执行,先执行 var a 声明 a,然后再执行 a = 1 的赋值操作。并且声明的语句会被提升到最前面。相当于
在这里插入图片描述
所以会输出undefined,此时已经声明变量,只是还未进行赋值。
而使用let声明的变量则不会被提升到最前面,因此会报ReferenceError(引用错误),因为这个时候还没有声明这个变量,自然就找不到。

2.let的作用域。

在这里插入图片描述
let 声明的范围是块作用域,而var声明的范围是函数作用域。也就是说,let声明的变量如果在花括号中声明,那么该变量仅在花括号{}中生效。
在这里插入图片描述
而var声明的变量只在声明的函数中生效。而直接在script中使用var声明但不在某个函数中声明的变量,则可以将整个script片段当成一个自执行函数看待。

3.最佳实践

1.不使用var
2.const优先,let次之

4.typeof操作符(判断数据类型)

“undefined”表示未定义
“boolean”表示布尔值
“string”表示字符串
“number”表示数值
“object”表示对象(而不是函数)或者null
“function”表示函数
“symbol”表示为符号

tips:
1)null在js中被认为一是个空对象的引用,在实际的项目中,通常后端在返回某些字段时,有些字段并未赋值,因此值会以null的形式出现或者直接被过滤不显示该字段。所以,当我们需要辨别某个字段是object或者其他类型的时候,就需要考虑到null的这种情况。(
2)另外,严格来说,function其实也是对象,而非数据类型,但是函数拥有一些自己特殊的属性,因此有必要通过typeof操作符来讲函数和其他对象进行区分。
3)undefined == null 但是 undefined !== null

5.数据类型

1.NaN(Not a Number)表示不是数值的数值,当被除数和被除数都为0,-0或者+0时,返回的值就是NaN。
在这里插入图片描述
值得注意的是,因为NaN表示非数值,所以NaN === NaN并不成立。在这里插入图片描述
可以使用isNaN()来判断一个值是否为非数值

2.Number转换数值比较复杂,通常使用parseInt()和parseFloat()。
其中parseInt()会检测第一个字符,如果不是数字字符、减号或加号,就会立即返回NaN,否则返回直到最后一个不是数值字符之前的数值,支持多种进制。
而parseFloat()只支持十进制。
建议始终给parseInt()传第二参数——进制位数,避免解析错误

3.转字符串,优先使用String()
toString()方法可以将数值、布尔值、对象和字符串值转化为字符串,但是null和undefined值没有toString()方法,相对而言,String()方法更加全面,如果有值,则返回toString()方法的结果,如果是null和undefined,则返回对应的字符串。
在这里插入图片描述
4.模板字面量
模板字面量会保留内部的换行字符,它的用途如下:
(1)通常用来定义模板(比如HTML片段)
(2)字符串插值
(3)标签函数。
在这里插入图片描述
模板字面量标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。
因为表达式参数的数量是可变的,因此通常使用剩余操作符将它们收集到一个数组中。
在这里插入图片描述
在这里插入图片描述
(4)字符串原始值

在这里插入图片描述
在这里插入图片描述
String.raw可以获取模板字面量的原始字符串,但是不能获取实际换行符的转义序列
在这里插入图片描述
也可以通过标签函数的第一个参数,及字符串数组的.raw属性取得每个字符串的原始内容。

5.Symbol类型,主要作用是用作对象唯一的属性名。在一般的开发中很少用到,但是在一些库中会经常使用,用于避免多个库定义相同属性名称而造成的冲突。如果只是增删改查的日常开发,可以略过。但是如果有涉及到库的开发的话,很有必要学习相关的知识。因为内容比较繁杂。后面会考虑单独写一篇文章用于介绍。

在这里插入图片描述
在这里插入图片描述

6.操作符

1.前缀递增、前缀递减、后缀递增、后缀递减的区别
(1)前缀递减操作
在这里插入图片描述
在实际运算前,递减运算符就已经对a进行了重新赋值

c = --a + b

相当于先执行

a = a - 1

再执行

c = a + b

递增操作符类似
(2)后缀递减操作
在这里插入图片描述
在运算后,递减运算符才对a1进行了重新赋值

c1 = a1-- + b1

相当于先执行

c1 = a1 + b1

在执行

a1 = a1 - 1

tips:其实不难记忆,前缀计算(前缀递减或者前缀递增)都是先对变量本身进行计算赋值,再对整条语句进行计算赋值;后缀计算(后缀递减或者后缀递增)则是忽略变量本身的计算,先计算整条语句,然后再对变量本身进行计算赋值操作。
口诀:(前缀)计算,(先变)后算;(后缀)计算,(后变)先算。
简化下就是,前缀先变,后缀后变。

2.指数操作符
es7新增了指数操作符,Math.pow()现在有了自己的操作符**
在这里插入图片描述

7.语句

1.for in 和 for of 的用法和区别
(1)for in 用法:
在这里插入图片描述
在这里插入图片描述
(2)for of 用法:
在这里插入图片描述
在这里插入图片描述

(2)区别:
【1】for of 不能够遍历对象,否则会报语法错误。
【2】for in 遍历返回的是自定义属性,for of 遍历的返回的是值。
(3)总结:for in 的用法更为灵活多变,既可以遍历数组,又可以遍历对象,更加推荐使用。

2.标签语句
标签语句可以通过break或continue语句引用,它的使用典型使用场景是结束嵌套循环
通常情况下的跳出嵌套循环:
在这里插入图片描述
标签语句下的跳出嵌套循环:
在这里插入图片描述
这里的outermost就是我们的标签,可以标志语句内将要跳出的循环层次。在一般语句中,虽然在内层循环中break,但是仍然会执行外层的循环,因此输出95。而标签outermosr告诉我们跳出的是最外层的循环,因此输出55

3.不使用with
由于with语句影响性能并且难以调试其中的代码,通常不建议在产品代码中使用with语句

4.swith 语句变种
普通用法:
在这里插入图片描述
变种用法:
在这里插入图片描述
其实普通用法和变种都遵循一个匹配原则,即case expression中的expression全等于switch中的值时,则执行对应的语句然后跳出,否则跳过继续判断,直至执行defualt中的语句。

小结

【1】ES中的基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol,共6种
【2】Object是一种复杂数据类型,它是这门语言中所有对象的基类
【3】与其他语言不同,ES不区分浮点数和整数,只有Number数值一种数值数据类型
【4】ES中的控制流语句大多都是从其他语言借鉴来的,比如if语句、for语句和switch语句等等
【5】ES中的函数不需要返回值,但是可以在函数中的任何位置返回任何值。如果没有返回值,则默认返回undefined

下一章 变量、作用域和内存

Guess you like

Origin blog.csdn.net/qq_39055970/article/details/109963230