JS的基础语法

236 阅读4分钟

1. 表达式和语句

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

var a = 1 + 3;

1+3 是一个表达式, var a = 1+3 是一个语句。
表达式和语句不能完全区分。一般来说,表达式都有值,语句可能有也可能没有。语句一般会改变声明和赋值。

;;;

分号前面可以没有任何内容,JS引擎将其视为空语句。

函数也是表达式,只有函数有返回值。

console.log(3)
3
undefined

console.log表达式的返回值就是log函数本身

console.log(3)的返回值是undefined,并不是3,3只是打印出来的值而已。

2. 标识符

标识符(identifier)指的是用来识别各种值的合法名称。

最常见的标识符就是变量名,以及后面要提到的函数名。JS 语言的标识符对大小写敏感。 例如:aA是不同的, var avar A是不同的, objectObject是不同的。

标识符命名规则

  • 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
  • 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。 举例:不合法的标识符
1a  // 第一个字符不能是数字
23  // 同上
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

中文是合法的标识符,可以用作变量名。

var 临时变量 = 1;

3. 注释

JS 引擎忽略的部分就叫做注释,它的作用是对代码进行解释。

  • 单行注释,用//起头;
  • 多行注释,放在/**/之间。
// 这是单行注释

/*
 这是
 多行
 注释
*/

4. 区块

JS 使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。

{
  let a = 1;
  let b = 2;
}

5. 条件语句

if 语句

  • 语法:if(表达式) { 语句1 } else { 语句2 }
  • 作用:表达式值为true则执行语句1,否则执行语句2。
  • {}在语句只有一句的时候可以省略,但是不建议这样做 特殊情况1 语句1里嵌套if
var a = 2;
if (a<100)
    if(a<10)
    console.log('a小于10')
    
=>a小于10   

特殊情况2 语句2里嵌套if

var a = 2;
if(a==1){'a<1'}
    else if(a<100){
        console.log('a小于100')
        }else
        console.log('小于100')

=>a小于100
var a = 2;
if(a==1){'a<1'}
    else if(a<100)
         console.log('a大于100')
         
=>a大于100

特殊情况3 缩紧不可见

var a = 2;
if (a===2)
console.log('a')
console.log('a=2')

=>a

switch语句

  • switch是if else语句的升级版

语法:

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

大部分时候,不要省略break,break会让程序结束,省略了就会继续往下走。

三元运算符 ?:

  • 语法:(条件) ? 表达式1 : 表达式2
var n=99;
(n % 2 === 0) ? 偶数 : 奇数;
//
if (n % 2 === 0) {
  even = 偶数;
} else {
  even = 奇数;
}

=>奇数

6. 短路逻辑

&&和||短路逻辑

&&(一假全假)

A && B

  • 只要 && 前面是 false,无论 && 后面是true还是 false,结果都将返 && 前面的值;

  • 只要 && 前面是 true,无论 && 后面是true还是 false,结果都将返 && 后面的值; A && B && C && D

  • 逻辑是如果A存在就执行B;如果B存在就执行C;如果C存在就执行D;

  • 如果不存在,取第一个假值,如都存在就取D。

||(一真就真)

A || B

  • 只要 || 前面为 false,无论 || 后面是true还是 false,结果都返回 || 后面的值。

  • 只要 || 前面为 true,无论 || 后面是true还是 false,结果都返回 || 前面的值。

  • A || B || C || D

逻辑是如果A不存在就执行B;如果B不存在就执行C;如果C不存在就执行D;

如果都存在取A,如果都不存在取D

总结

&&是找假
||是找真

7. 循环语句

while 循环

  • 语法:while(表达式) { 语句 }
  • 作用:表达式值为true则执行语句,否则跳出循环。
var a = 1;
   while(a <= 10){
       console.log(a);
       a++;
   }
   
 =>1 2 ... 10

for 循环

  • 语法:for(语句1 ; 表达式 ; 语句2) { 语句 }
  • 作用:
    • 语句1:初始化循环变量i;\
    • 表达式:值为true则执行语句,否则跳出循环;\
    • 语句2:改变循环变量的值(防止死循环)
for(var i = 1;i <= 10;i++){
       console.log(i); 
   }
   
=>1 2 ... 10

8. break 语句和 continue 语句

  • break语句
  • 作用:跳出整个循环
var i = 10;
while (i < 20){
  i++;
  if (i % 2 === 0)break;
  console.log(i);
}

=>11

上面代码在i为11时,输出11后,跳出整个循环

  • countinue语句
  • 作用:跳出单次循环
var i = 10;
while (i < 20){
  i++;
  if (i % 2 === 1) continue;
  console.log(i);
}

=>11 13 15 17 19

上面代码在i为奇数时,才会输出i的值。如果i为偶数,则直接进入下一轮循环。

9.标签(label)

  • 语法:标识符 : { 陈述 }
  • 作用:标识一段循环语句,以便break或continue跳出循环
foo:{

    console.log(1);

    break foo;

    console.log('不会输出');
}

=>1