JS语法

表达式和语句

表达式

表达式有值
eg.console.log('3')
这就是一个表达式,因为其运行了以后会出值3

语句

语句无值
eg.let a=b,运行后无值

区别:

  1. 语句无值,表达式有
  2. 语句一般会声明/赋值,从而改变环境
  3. 这些区别不绝对

坑:

  1. 大小写敏感,不要写错
  • var a 和 var A 是不同的
  • object 和 Object 是不同的
  • function 和 Function 是不同的
  1. 关于空格和回车
  • 只要不影响断句,大部分空格没有实际意义
    var a = 1 和 var a=1 没有区别
  • 加回车大部分时候也不影响
  • !!!!只有一个地方不能加回车,那就是 return 后面,加了回车会自动隐性地补上 undefined,回车后面的值不会上来。这是面试喜欢考的一个点,面试不考常态只考变态。
  1. 语句和表达式变态情况:
  • console.log(3)表达值是undefined,因为没有名字为3这种可以调用的函数,如果要打印3,则需要console.log('3')加上‘’才可。
  • add(1,2) 表达值为函数的返回值
  • console.log 表达值为console.log本身
    Tips:
  1. 一个函数的函数名即是该函数的代表,也是一个变量。由于函数名变量通常用来把函数的处理结果数据返回给调用函数,即递归调用,所以一般把函数名变量称为返回值,函数的返回值类型是在定义函数时指定的。
    也就是说,只有函数有返回值,他的返回值就是他的值。

  2. 函数可以有返回值,也可以没有返回值。
    (1)没有返回值的函数:功能只是完成一个操作,应将返回值类型定义为void,函数体内可没有return语句。
    (2)有返回值的函数:函数的最后会有一个返回值return,可以用来获取该函数执行结果返回给该函数,让外部调用该函数的。

标识符

  1. 第一个字符,可以是 Unicode 字母或$或_或中文
    Tips:Unicode 字母不只包含英文字母,还有希腊字母德语字母法语字母等,都可以用
  2. 后面的字符,除了上面所说,还可以有数字
  3. 变量名是标识符
    eg
var _=1
var $=2
var ______=6
var 你好='hi'

都是合理的。
Tips:

  1. 最好不要用多于2个_作为变量名,因为很难判断有几个

区块 block

是用来把代码包在一起,也就是{}这个东西

{
let a=1
let b=2
}

block 一般不会单独用,一般是跟if/for/while一起用

if 语句

  • if(表达式){语句 1}else{语句 2}
  • {}在语句只有一句的时候可以省略,不建议这样做

  • 表达式里有坑,
    eg. a=1
  • 语句里有时候会嵌套的 if else
    eg.
if(a<100)
else if(a>1000){console.log('a')}
else{console.log('b')}

这里出现了else if只是因为有些时候可以省略{},完整的是

if(a<100){}
else{ if(a>1000){console.log('a')}
else{console.log('b')}}

其实这个是两个if else语法,省略了一些{}出现的else if,并没有这个else if的语法

  • 缩进也有坑,
    eg
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')

如果是

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

最后是undefined。因为逗号表示这句话没完,这两个语句突然就变成了一个语句。分号的话,就表示这句话完了。

最推荐使用的写法

if(表达式){
  语句
}else if(表达式){
  语句
}else{
  语句
}
复制代码

永远不要省略花括号,就算里面只有一句也不要省略花括号。

次推荐使用的写法

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

switch 语句 ,不推荐

eg

switch(fruit){
case 'banana':console.log('banana')
break;
case 'apple':console.log('apple')
break;}

意思是,在fruit这个东西里面,如果出现是banana的情况,就console.log('banana');如果出现apple的情况,就console.log('apple')。

  • 大部分时候,省略 break 你就完了,如果要使用一定要记得使用break
  • 少部分时候,可以利用 break

问号冒号表达式(三元表达式)

语法

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

  1. 能用问号冒号的时候,就不要用 if else
  2. 只可以用于if else里语句都只有一句的情况
    eg
function max(a,b){
  return a>b?a:b
}

其实是如下代码

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

&& 短路逻辑

A&&B&&C&&D取第一个假值,若都为真,则取D,并不会取 true/false
eg.

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

就是

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

||短路逻辑

A||B||C||D取第一个真值,若全是假取 D,并不会取 true/false

a||b

就是

if(!a){
  b
}else{}

Tips:

  1. !a代表如果a不是真的意思
a=a||100

就是

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

前端程序员如果能写成||,就绝对不写 if else

总结

条件语句

  • if...else...
  • switch
  • A?B:C
  • fn&&fn()
  • A||B
  • A=A||B

while 循环,当...时

语法

eg

while(true){}
  • while(表达式){语句}
  • 判断表达式的真假
  • 当表达式为真,执行语句,执行完再判断表达式的真假
  • 当表达式为假,执行后面的语句

坑(考点)

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

会出现死循环,这是因为上面的浮点数不精确造成的问题,所以+0.1可能加着加着就会变成0.999而不是1,所以永远到不了1

其他

  • do...while,用的不多

for 循环

  • for 是 while 循环的方便写法,for 循环是 while 循环的升级写法
  • while 循环有一个问题是,你如果缺了一部分就会死循环,比如说没有写初始化,死循环,没有写判断或者判断写错了,死循环,你没有写循环体,那你循环也没什么用,没有写增长,死循环

语法

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

  • 先执行语句 1(语句 1 是用来初始化的)
  • 然后判断表达式 2(表达式 2 是用来判断的)
  • 如果为真,执行循环体,然后执行语句 3(语句 3 是自增用的)
  • 如果为假,直接退出循环,执行后面的语句
  • 注意:如果表达式 2 成立,先执行循环体,执行语句 3,注意这个,这是考点。执行循环体后,一定会去执行语句 3,除非你有 break。

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

问:i的值和打印的情况
答:i=5,且打印结果为0,1,2,3,4,因顺序问题,如果表达式 2 成立,先执行循环体,执行语句 3,这个时候如果表达式2不成立就不打印,但是已经循环到i=5的情况了。

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

问:最后打印出来的结果。

答:五个5,因为 setTimeout 过一会时间才打印,等过一会,for已经执行完了,这个时候i=5,所以,打印出五个 5。不在于 for 循环,在于 setTimeout 的时间问题,这里i++的意思就是每次加1.

var a=1
function fn(){
  console.log(a)
}

问:打印出 a,a 的值是多少?

答:不确定。因为 a 现在等于 1,但不知道什么时候执行 fn。a 的值可能会变,如果不确定函数是什么时候执行的,永远不能确定 a 的值是多少。所以如果我不能确定 fn()的调用时间,我是不能说 a 的值的。


# break 和 continue

## 退出所有循环 V.S.退出当前一次循环

注意:break 只会退出离它最近的循环,不会全退

# label 语句

## 用的很少,面试会考(概率 5%)

### 语法

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


### 面试

{
foo:1
}


*   问:上面的东西是什么

*   答:foo 是一个 label,它的语句就是一个 1

## 推荐书籍

### 阮一峰的免费教程

*   [入门篇](https://link.juejin.im?target=http%3A%2F%2Fwangdoc.com%2Fjavascript%2Fbasic%2Fgrammar.html)

### 《你不知道的 JavaScript》

*   先买上卷,适合进阶

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容