JavaScript的简单语法

---

你可以看到

• JS吐槽
• 最基本的
• 条件语句
• while、for 循环语句
• break 和 continue
• label 语句
• 推荐

–资料来源于饥人谷

---

JS吐槽

   来自一些人的评价

JS之父对JS的评价

   它的优秀之处并非原创，它的原创之处并不优秀。(优秀的地方大部分是从别的地方借鉴过来的，而我自己设计的东西却-好烂。)

—些人对JS的批评

王垠:

   很多JavaScript程序员也盲目地鄙视Java，而其实JavaScriptPython和Ruby还要差。JavaScript的社区以幼稚和愚昧著称。你经常发现一些非常基本的常识,被JavaScript“专家”们当成了不起的发现似的，在大会上宣讲。我看不出来JavaScript社区开那些会议，到底有什么意义，仿佛只是为了拉关系找工作。

一些人对JS的辩护

   世界上只有两种编程语言，一种是天天挨骂的,一种是没人用的。

   JavaScript:世界上最被误解的语言。

JS的价值

• 一门语言的价值 是由其产生的价值决定的。

   JS是世界上使用最广的语言。

   JS是门槛极低的语言(打开浏览器控制台就能学习JS，只要你不学糟粕。)。

   JS是一门能产生价值的语言(例如直播)。

得到的忠告：

   1.学习JS要取其精华，去其糟粕。
   2.爱一门语言，也要接受它的缺点。
   3.永远不要只学一门语言，要开拓视野。

---

最基本的

表达式和语句

• 表达式

   1+2 表达式的值为3

   add(1,2)函数调用表达式的值为函数的返回值(只有函数有返回值)

   console.log表达式的值为函数本身

   console.log(3)表达式的值为多少?(值为undefined，打印出来的东西是3)

• 语句

   var a = 1(是一个语句主要用来改变环境,a是一个环境）

• 二者的区别

   表达式─般都有值,语句可能有也可能没有。

   语句一般会改变环境(声明、赋值)。

上面两句话并不是绝对的，有时候表达式也可以改变环境，有时候语句也可以取值。

大小写敏感

   var a 和var A是不同的。

   object和 Object是不同的。

   function和 Function是不同的。

空格与回车

   大部分空格没有实际意义,例如var a      =   1和var a=1没有区别。

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

只有一个地方不能加回车,那就是return后面，return后面没有加任何东西，会自动补充一个undefined。这是JS原创之处

标识符

• 规则
     第一个字符,可以是Unicode字母或$或_或中文等等。

   后面的字符，除了上面所说，还可以有数字(数字不能是第一个)

• 变量名是标识符

   var_=1

   var $ =2

   var___= 6

   var 你好 = ‘hi’
…

注释的分类

• 不好的注释(描述你做了什么)

   把代码翻译成中文(可能会混淆视听，把重要注释隐藏了，信噪比要低)。

   过时的注释(代码和注释可能不一样,过时)。

   发泄不满的注释(职业素养问题)。

• 好的注释(为什么这么做，蕴含的坑)

   踩坑注解。

   为什么代码会写得这么奇怪，遇到什么bug(可能有特殊的需求)。

区块 block

• 把代码包在一起（代码块 ）

{
  let a = 1
  let b = 2
}

• 常常与if / for / while合用

下面就开始记录JS基本语法

---

条件语句

   可以看到if else语句、switch case、问号冒号表达式、&&短路逻辑、||短路逻辑的基本用法

if else 基本的语法

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

   圆括号不能省，花括号语句一可以省。

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

• 变态情况

   ①表达式里可以非常变态，如a=1是把1赋值给a，a===1是a等于1(写不规范代码webstorm可以教你写代码)

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

a = 2
if( a < 100)
  if( a < 10)
  	console.log('a小于10')
//在Chrome的console里运行：a小于10

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

a=2
if( a < 100){
}else if{a > 1000}{ 
  console.log('a大于1000') 
}else{

}
//去掉了if else中else的花括号，变成了else if，代码上是两队if else

   ④缩进也可以很变态，如下

a = 1
if(a === 2)
  console.log('a')
  console.log( 'a等于2')
/*最终结果是打印出了a等于2
	实际缩进是
  console.log('a')
console.log( 'a等于2')
如果省略了花括号if只会管到第一句console.log('a')，,实际上是有个隐形的括号括起来的
*/

• 最推荐使用的写法

   像我这样的小白最推荐的写法是最没有歧义的写法

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

• 次推荐使用的与法

function fn(){
  if（表达式){
    return 表达式
  }
  if（表达式){
    return 表达式
  }
  return 表达式
}
//如果有return语句就可以省略else，条件满足就return，后面就不用执行

switch语句(注意break，如果不注意建议少用)

   --if else升级版

• 语法

switch (fruit) {
case "banana" :
 ... 
break;
case "apple":
 ...
break;
default:
 ...
}
//fruit是什么就走那条道，如果都不是就走default

• break
     大部分时候,不能省略break

   少部分时候,可以利用break

a = 2
switch(a){
  case 1:
  case 3:
    console.log('单数');
    break;
  case 2:
  case 4:
    console.log('双数');
    break;
}
//case 2:后没有break继续走下面的case 4:直到break
//JS出生太早了没有借鉴到一个好的例子

问号冒号表达式(能用问号冒号表达式就不用if else)

语法

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

   例子：

//原版
function max(a,b){
  if(a>b)return a;
  else return b;
}
//a>b就是a，否则就是b

//问号冒号表达式
function max(a,b){
return a>b ? a: b
}
//a>b就是a，否则就是b。是不是简洁许多了啊

   经常用于简化if和else只有一个语句的时候

&& 短路逻辑

   &&是,什么和什么的意思。也可以用来代替if else

   A && B && C &&D取第一个假值,都不是假值取最后一个D，大部分时候并不会取true / false

• A && B表：
  | A\B | 真 | 假 |
  |:—😐:—😐 :—: |
  | 真 | B(AB为真取B作为表达式的值) | B(A为真看B ，B为真就是真，B为假就是假) |
  | 假 | A(A为假直接取A) | A(A为假直接整个都是假) |

短路逻辑：

在两个都为真的情况下都是B，只要A是假，那值就是A。

如果前面的为假，就看前面的，如果前面为真就看后面。

• 代码解释

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

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

   如果能写&&就不写if。例如console && console.log && console.log( 'hi' )，这句话意思是:如果console存在就看console.log存不存在，如果cnsole.log存在，就执行console.log( ‘hi’ )。好处:IE没有console，第一个就假，后面就不执行。

|| 短路逻辑

      或或，和上面相反，同理

      A || B || C || D取第一个真值或D，并不会取true / false

代码解释：

a = a || 100

//如果有a就把a的值赋给a，没有a就给a保底赋值100

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

---

while、for 循环语句

while循环（当…时）

• 语法

   while(表达式){语句}

• 判断表达式的真假

   当表达式为真，执行语句，执行完再次判断表达式的真假

   当表达式为假，执行后面的语句/跳出

• 其他

   do…while用得不多

• 变态死循环

while(a !== 1){
  console. log(a)
  	a = a+ 0.1
}//死循环卡死机
/*
a = 0.1
用a = a+0.1加到9次
得出的结论是0.9999999999999999。浮点数不精确 ，永远不等于1，一直循环
*/

var a = 0.1 //初始化
while (a !== 1){ //判断
console.log(a) //循环体，缺循环体无意义
a = a + 0.1 //增长
}
//四个中除了循环体其他三个缺一不可，缺了就死循环，这就是while循环升级后的语法是for循环

for循环

• 语法糖

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

• 语法

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

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

   如果为真,执行循环体,然后执行语句3。

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

来个变态例子：

for(var i=0; i<5; i++){
  setTimeout(()=>{
    console.log(i)  
  },0)
}
//结果是5个5，

   说明过一会儿(setTimeout)的时间比整个循环结束了的时间还要晚。如何解决呢？=》把var改成let，就可以得到你想像的。这是JS专门为我们这种新手小白添加的。。

判断条件不写会死循环、判断条件和语句3没写会一直执行循环体导致死循环。

---

break 和 continue

   break和continue意思分别是退出离它最近的所有循环和退出当前一次循环

用代码来理解吧

break：

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

continue：

for(var i=0; i < 10; i++){
  if(i%2===1){
    continue
  }else{
    console.log(i)
  }
}
//结果:0 2 4 6 8

---

lable 语句 (就是代码块，理解。可能面试会问)

语法就是标签加代码块

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

   foo，是个标签，表示花括号里的代码块，break foo跳出代码块，直接console.log(2)

foo: 1
console.log(2)
//结果:2

  

{
  foo: 1
  console.log(2)
}

//结果:2

   这是一个代码块，代码块里第一行是个标签，标签内容是1，第二行是打印2

{
  foo: 1;
}
//有个代码块，里面有个标签叫foo，foo的内容就是1句话是1

   这个代码块只有一行叫做1

只有一句的情况下：

   Chrome里不打分号返回1，打了分号这里变成了一个对象，Chrome有它自己的想法。。

   Firefox直接返回1，没有对象。

--看完了你还记得么，不记得可以 点击这里返回顶部

–continue

---

推荐

• 阮一峰的免费教程入门篇
• ‘你不知道的JavaScript’可以先看上卷,适合进阶

---

既然看到这了都，我就告诉你们一个秘密吧

你真帅