JS的基本语法

这篇博客旨在总结JS的基本语法，内容包括：表达式和语句、标识符的规则、注释、if else语句、while for 语句、break 和 continue以及label相关用法以及注意事项。

表达式和语句

表达式

表达式（expression），指一个为了得到返回值的计算式。

• 1+2表达式的值为3
• add（1，2）表达式的值为函数的返回值
• console.log表达式的值为函数本身
• eg.console.log(3)表达式的值是 undefined

语句

语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var a = 1 + 3;

语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。此外语句一般会改变环境（声明 赋值）
注意：

大小写敏感

• var a 和var A是不同的
• object和Object是不同的
• function和Function是不同的

空格

• 大部分空格是没有实际意义的
• var a=1和 var a = 1 没有区别
• 加回车大部分也不影响，但是要记住return的后面不能加回车，如果回车了默认* 给你补undefined

标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名。

规则

• 第一个字符，可以是Unicode字母或$或_或中文
• 后面的字符，除了上述所说，还可以是数字（下划线最多用俩）

var a = 1
var _ = 1
var $ = 1
var 你好 = 'hi'
var $9 = 1

注释

源码中被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。

//单行注释
/*
多行注释
*/

注释分为好注释和不好的注释

好的注释：

• 踩坑注释
• 为什么代码会写的奇怪，遇到什么bug

不好的注释：

• 把代码翻译成中文
• 过时的注释
• 发泄不满的注释

区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。

{
let a = 1
let b = 1
}

常常与if/for/while合用

if else 语句

• 语法：

if (表达式) {
语句1
} else {
语句2
}
//{}在语句只有一句的情况下可以省略，但是不建议这么做

变态情况：

• 表达式可以变态，比如a=1
• 语句1/2都可以很变态，比如再嵌套一个if else
• 缩进也可以很变态比如

a = 1
if (a === 2)
    console.log('a')
    console.log('a等于2')

此时，打印的结果是a等于2，原本应该是这样

a = 1
if (a === 2)
    console.log('a')
console.log('a等于2')

因为没有花括号，if只会执行到console.log(‘a’)，第二个console.log()则是else的情况。逗号可以将两句变为一个语句，表示第一句没完.
最推荐写法

if (表达式) {
语句
} else if (表达式) {
语句
} else {
语句
}

次推荐写法

function fn() {
if (表达式) {
return 表达式
}
if (表达式) {
return 表达式
}
return 表达式
}

switch语句

switch语句是if else的升级写法
语法为：

switch (fruit) {
case "banana":
// ...
break;
case "apple":
// ...
break;
default:
// ...
}

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。

• break
  大部分时候，省略break就完了
  小部分时候，可以利用break

问号冒号表达式（三元运算符）

(条件) ? 表达式1 : 表达式2

举个例子

function max(a, b) {
if (a > b) return a
else return b
}

等价于

function max(a, b) {
a > b ? a : b
}

如果条件为true则返回表达式1的值，否则返回表达式2的值

&&短路逻辑

if (window.f1) {
console.log('f1存在')
}

等价于

window.f1 && console.log('f1存在’)

A&&B

截屏2022-07-13 10.18.24.png

｜｜短路逻辑

if (!a) {
b
} else { }

等价于

a || b

如果a不存在则b

a = a || 100
if (a) {
a = a
} else {
a = 100 //保底值
}

取第一个真值或者最后一个值

while for 语句

while循环

• 语法

whlie(表达式){语句}

先判断表达式真假，当表达式为真，则执行语句且执行完再次判断表达式的真假；当表达式为假，则执行后面的语句。
变态情况

var a = 0.1//初始化
while (a !== 1) {//判断
console.log(a) //循环体
a = a + 0.1 //增长
}

由于浮点数不精确导致a会跳过1，所以该while循环是一个死循环

for循环

• for循环是while循环的方便写法
• 语法

for (语句1; 表达式2; 语句3) {
循环体
}

• 先执行语句1
• 然后判断表达式2
• 如果为真，则执行循环体，然后执行语句3
• 如果为假，直接退出循环，执行后面的语句

for (var i = 0; i < 5; i++) {
console.log(i)
}

此时i的值为5，注意是先执行循环体，然后再执行语句3，所以i会比打印的最大的数大1。
变态情况

for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 0)
}

将会打印5次5，因为setTimeout是过段时间执行此代码，在for循环结束后i的值为5，"过段时间"会晚于for循环完成的时间，所以会打出5个5

break和continue

break为退出所有循环，而continue为退出当前循环

for (var i = 0; i < 10; i++) {
if (i % 2 === 1) {
break
}
}

结果为1

for (var i = 0; i < 10; i++) {
if (i % 2 === 1) {
continue
} else {
console.log(i)

打印结果为0，2，4，6，8
注意
break只会退出离它最近的一个for

for (var i = 0; i < 10; i++) {
for (var j = 101; j < 110; j++) {
if (i === 5) {
break
}
}
console.log(i)
}

这个输出结果将会是0，1，2，3，4，5，6，7，8，9，因为i=5时只是退出了j循环，i循环还会运行

label语句

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

label:
  语句

• 语法

foo: {
console.log(1);
break foo;
console.log('本行不会输出')
}
console.log(2)

输出结果为1，2

{
foo: 1
}

意思为一个label标签里面有个1