最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript的简单语法

    正文概述 掘金(饥人谷一言)   2021-01-17   468

    你可以看到

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

    --资料来源于饥人谷

    一些要说的话

       本文✍了我学习JavaScript的一些基本语法,如果你是老手希望可以查漏补缺,如果是和我一样的小白,那我的一系列笔记都会对你很有帮助的。


    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没有区别。

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

    标识符

    • 规则

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

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

    • 变量名是标识符

       var_=1

       var $ =2

       var___= 6

       var 你好 = 'hi' ...

    注释的分类

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

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

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

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

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

       踩坑注解。

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

    区块 block

    • 把代码包在一起(代码块 )
    {
      let a = 1
      let b = 2
    }
    
    • 常常与if / for / while合用

    条件语句

       可以看到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,如果不注意建议少用)

    • 语法
    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为假直接整个都是假)
    • 代码解释
    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专门为我们这种新手小白添加的。。


    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



    --恭喜你获得了?一个,看完了你还记得么,不记得可以点击这里返回顶部?

    --continue


    推荐

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

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

    JavaScript的简单语法












    你真帅

    起源地下载网 » JavaScript的简单语法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元