JavaScript的基本语法

will80
277 阅读5分钟

JavaScript的表达式和语句

表达式

  • 1+2 表达式的值为 3
  • add(1,2) 表达式的值为函数的返回值
  • console.log 表达式的值为函数本身
  • console.log(3) 表达式的值为undefined——因为表达式的值就是函数的返回值 ，log函数的返回值为 undefined

语句

  • var a=1 是一个语句

大小写

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

空格

大部分空格没有实际意义

  • var a = 1 和 var a=1 没有区别

  • 加回车，大部分时候也不影响

  • 只有一个地方不能加回车，那就是 return 后面。 如果你在return后面打了回车，那系统会自动帮你补充一个undefined。

标识符

规则

  • 第一个字符，可以是 Unicode 字母 / $ / _ / 中文

  • 后面的字符，除了上面所说，还可以有数字

  • 首位不能是数字

变量名是标识符

合法的标识符用法

  • var _ = 1
  • var $ = 2
  • var ______= 6
  • var 你好 = 'hi'

if语句

语法

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

  • { } 在语句只有一句的时候可以省略，不建议这样做

变态情况

  • (表达式) 里可以非常变态，如 a=1
const a=2
if(a=1){
  console.log('a是1')   // 最终打印这句，因为 = 是赋值，=== 才是判断是否相等
}else{
  console.1og('a不是1')
}

  • 语句1 里可以非常变态，如嵌套的 if else

  • 语句2 里可以非常变态，如嵌套的 if else

  • 缩进也可以很变态，如面试题常常下套

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

执行结果：a=2

  • 因为不写 { } 时，只默认第一个语句是跟随 if 条件的，有一个无形的 { } 括住了第一句，相当于下面效果
a = 1
if (a===2){
   console.log('a')}
   console.log('a=2')
  • js 中是没有【行】的概念，即使两句写在一行，结果不变，仍是只括住第一个语句
a = 1
if (a===2)
   console.log('a') console.log('a=2')

上面相当于

a = 1
if (a===2){
   console.log('a')} console.log('a=2')
  • 分号也不行，因为分号代表结束
a = 1
if (a===2)
   console.log('a')；console.log('a=2')
  • 但是逗号分隔的话就可以，因为逗号代表还未结束
a = 1
if (a===2)
   console.log('a')，console.log('a=2')

最推荐的写法

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

次推荐的写法

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

switch 语句

if…else…升级版

语法

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

关于break

1 大部分时候，省略 break 你就完蛋了

  • 如果没有 break，就会向下跳过case 'apple'，直接执行 apple 的语句

2 少部分时候，可以利用 break

问号冒号表达式

语法

表达式1 ? 表达式2 : 表达式3

  • 能用问号冒号就不用 if…else…
// 求两个数的最大值
function max(a,b){
  if(a>b) return a;
  else return b;
}

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

// 求绝对值
function abs(n){
  return n>0 ? n: -n
}

&& 短路逻辑

  • A && B && C && D

取第一个假值，后面就不看了

  • 如果ABC都为真，就取 D。
  • 一般整句表达式的值，不会出现取 true / false，而是取 ABCD 中的一个
  • 只要整个表达式中，有一个是假，整个式子就是假
a&&b
if(a){  // 理解：a&&b 等价于，如果a是真，就执行b，否则就什么都不执行
  b
}else{ 
  
}

例如

3>2 && 2>1 && 4>5 && 5
false
3>2 && 2>1 && 4>2 && 5
5
3>2 && 2>1 && 4>2 && console.log('前面全对了')
前面全对了
3>2 && 2>1 && 4>2 && 5<0
false

又或者

if(window.f1){
  console.log('f1存在')
}
// 上下效果等价：如果 window.f1为 true ，就会执行 conosole.log('f1存在')
window.f1 && conosole.log('f1存在')

|| 短路逻辑

  • A || B || C || D

取第一个真值，后面就都不看了。

  • 如果ABC都为假，就取 D

  • 一般整句表达式的值，不会出现取 true / false，而是取 ABCD 中的一个

  • 只要整个表达式中，有一个是真，整个式子就是真

例：

a||b
if(!a){  // 理解：a||b 等价于，如果a不是真，就执行b，否则就什么都不执行
  b
}else{
  
}

或者

a = a || 100 

// 理解：如果a存在就什么都不做，否则 a=100
if(a){
  a = a  // 自己赋给自己，相当于什么都不做
}else{
  a = 100  // 保底值
}

条件语句的总结

  • if … else…
    if…else…的逻辑是最常用的，但是很多情况并不使用它。代码简短时，会用更简便的代码替代这种写法

  • switch case 不能少了 break

  • A ? B : C 相当常用（A若为真，执行B，A若为假，执行C）

  • A && B 相当常用，举例：fn && fn() （ fn 存在就执行 fn ）

  • A || B 相当常用，举例： A = A || B （A 存在时就什么都不执行，A 不存在时 B 就是 A 的保底值）

while 循环

语法

while (表达式) { 语句 }

  • 判断表达式的真假
  • 当表达式为真，执行语句，执行完再判断表达式的真假
  • 直到遇到表达式为假，跳出循环，执行后面的语句
var a = 1  // 初始化
while(a !== 10){   // 判断条件
  console.log(a)   // 循环体
  a = a+1  // 增长(为最终能跳出循环)
}
  • 共需要四部分： 1. 初始化 2. 判断条件 3. 循环体 4. 增长

特殊情况

  • 在chrome执行以上会出现死循环
var a = 1  // 初始化
while(a !== 10){   // 判断条件
  console.log(a)   // 循环体
  a = a+1  // 增长(为最终能跳出循环)
}

for 循环

语法糖

  • for 是 while 循环的方便写法
  • 写 while 时需要四部分： 1. 初始化 2. 判断条件 3. 循环体 4. 增长
  • for 将 while 的写法升级、整合，如下

1 语句1 是用来初始化的

2 表达式2 是判断条件

3 语句3 是自增

4 循环体

语法

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

1 先执行语句1 2 然后判断表达式2

  • 如果为真，执行循环体，然后再执行语句3

  • 如果为假，直接退出循环，执行后面的语句

例子

for(var i=0;i<5;i++){
  console.log(i)   // 0 1 2 3 4
}
// i 5

变态

for(var i=0;i<5;i++){
  setTimeout(()=>{
    console.log(i) // 5 5 5 5 5
    // console.log(i + '随机数' + Math.random())  
  },0)
}
// i 5

  • setTimeout相当于设置一个闹钟命令：过一会再执行 setTimeout 中的语句。而过一会之后，for循环已经走完，i 变为 5。然后闹钟到点，依次执行每轮触发的 setTimeout 中的语句，也就是执行 5轮 console.log( i ) ，就会打印 5 个 5

  • 把var 变成 let 可以解决这个问题

语法变形

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

  • 省略 语句 1 ，可在 for 循环外面定义变量
let i = 0
for(; i<5 ; i++){
  console.log(i)    // 0 1 2 3 4
}
  • 省略 表达式 2 ，会进入死循环
let i = 0
for(; ; i++){
  console.log(i)    // 0 1 2 3 4 5 6...
}
  • 省略 语句 2 & 3 ，会进入死循环
let i = 0
for(; ; ){
  console.log(i)    // 0 0 0 0 0 0 0...
}

break 和 continue

break 退出所有循环


continue 退出当前一次循环

例

for(var i=0;i<10;i++){
  if(i%2===1){ // 遇到奇数轮次，退出整个for循环
    break
  }
}
console.log(i)  // 1

for(var i=0;i<10;i++){
  if(i%2===1){ // 遇到奇数轮次，跳过当次循环
    continue
  }else{
    console.log(i)  // 0 2 4 6 8
  }
}

label语句

语法

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

avatar
文章
阅读
粉丝