• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

浅学JavaScript01

互联网 diligentman 3小时前 1次浏览

世界不止0和1 还有…

浅学JavaScript01

目录

基础知识

1.起步入门

        运行流程

        脚本定义

        避免延迟

        代码注释

        自动分号

2.变量声明

        命名规则

        变量声明

        弱类型

        提升

3.块作用域

        共同点

        var

        let

        const

        重复定义

        Object.freeze

        传值与传址

4.undefined

        null

基础知识

1.起步入门

        运行流程

                JS请求处理步骤如下:

                浅学JavaScript01

        脚本定义

                内嵌脚本

                像style标签一样,可以在html文档中使用script标签嵌入javascript代码。

                浅学JavaScript01         

                外部文件

                通过设置 src 属性引入外部js文件。

                 浅学JavaScript01

                 引入外部文件在标签体内的脚本不会执行,下面的alert弹窗不会执行。

                浅学JavaScript01

        避免延迟

                如果js放在 <heade> 标签中要等到js加载并解析后才会显示<body>标签中的内容。

                延迟体验

                下面是延迟加载的示例

                浅学JavaScript01

                 Lamour.js 内容如下

                浅学JavaScript01

                h1会在Lamour.js文件加载并解析后才会显示。 

                推荐做法

                为了解决上面的问题,可以将js放在 标签前如下所示

                 浅学JavaScript01

        代码注释

                和大部分语言使用的注释方式相仿,有单行和多行注释。

                单行注释

                浅学JavaScript01

                 多行注释

                   浅学JavaScript01

        自动分号        

            使用分号表示一段指令的结束,当没有输入分号时如果有换行符JS会自动添加分号,减少错误的发生。

  • 但推荐每个指令都以分号结束
  • 在使用构建工具时,不使用分号结束可能会造成异常
  • 浅学JavaScript01

2.变量声明

        命名规则

                 JS中的变量是弱类型可以保存所有类型的数据,即变量没有类型而值有类型。变量名以字母、$、_ 开始,后跟字母、数字、_。

            下面都是合法的命名

             浅学JavaScript01

               JS语言关键字不能用来做变量名,比如 true、if、while、class 等。

             浅学JavaScript01 

        变量声明

           可以使用多种方式定义变量比如var、let等

           浅学JavaScript01

           以上代码是声明和赋值的结合

            浅学JavaScript01

           使用, 可以同时声明多个变量

            浅学JavaScript01

        弱类型

            在JS中变量类型由所引用的值决定

            浅学JavaScript01

        变量提升

           解析器会先解析代码,然后把声明的变量的声明提升到最前,这就叫做变量提升。下面代码在解析过程中发现while不能做为变量名,没有到执行环节就出错了,这是一个很好的解析过程的体验。

           浅学JavaScript01

           使用 var 声明代码会被提升到前面

           浅学JavaScript01

        下面是 if(false) 中定义的var也会发生变量提升,注释掉if 结果会不同 

         浅学JavaScript01

        使用 var 定义的代码,声明会被提升到前面,赋值还在原位置

        浅学JavaScript01

3.块作用域

        共同点

   var/let/const共同点是全局作用域中定义的变量,可以在函数中使用

           浅学JavaScript01

         函数中声明的变量,只能在函数及其子函数中使用

         浅学JavaScript01

         函数中声明的变量就像声明了私有领地,外部无法访问

         浅学JavaScript01

        var

           使用 var 声明的变量存在于最近的函数或全局作用域中,没有块级作用域的机制。

没有块作用域很容易污染全局,下面函数中的变量污染了全局环境

            浅学JavaScript01

            没有块作用作用域时var也会污染全局 

             浅学JavaScript01

             使用let有块作用域时则不会

             浅学JavaScript01

             下例中体验到 var 没有块作用域概念, do/while 定义的变量可以在块外部访问到

              浅学JavaScript01

              var 全局声明的变量也存在于 window对象中

              浅学JavaScript01

              以往没有块任用时使用立即执行函数模拟块作用域

              浅学JavaScript01

              有了块作用域后实现就变得简单多了

              浅学JavaScript01

        let

           与 var 声明的区别是 let/const 拥有块作用域,下面代码演示了块外部是无法访问到let声明的变量。

  • 建议将let在代码块前声明
  • 用逗号分隔定义多个

    let存在块作用域特性,变量只在块域中有效

           浅学JavaScript01

           块内部是可以访问到上层作用域的变量

           浅学JavaScript01

           每一层都是独立作用域,里层作用域可以声明外层作用域同名变量但不会改变外层变量    

           浅学JavaScript01   

        const

            使用 const 用来声明常量,这与其他语言差别不大,比如可以用来声明后台接口的URI地址。

  • 常量名建议全部大写
  • 只能声明一次变量
  • 声明时必须同时赋值
  • 不允许再次全新赋值
  • 可以修改引用类型变量的值
  • 拥有块、函数、全局作用域

            常量不允许全新赋值举例

            浅学JavaScript01

            改变常量的引用类型值

            浅学JavaScript01

            下面演示了在不同作用域中可以重名定义常量

             浅学JavaScript01 

        重复定义

           使用 var 可能造成不小心定义了同名变量

           浅学JavaScript01

           使用let 可以避免上面的问题,因为let声明后的变量不允许在同一作用域中重新声明

            浅学JavaScript01

            不同作用域也不可以重新声明

             浅学JavaScript01

             但可以改变值这是与const不同点

              浅学JavaScript01

              let 全局声明的变量不存在于 window对象中,这与var声明不同

              浅学JavaScript01 

        Object.freeze

            如果冻结变量后,变量也不可以修改了,使用严格模式会报出错误。

            浅学JavaScript01

        传值与传址

            基本数据类型指数值、字符串等简单数据类型,引用类型指对象数据类型。

            基本类型复制是值的复制,互相不受影响。下例中将a变量的值赋值给b变量后,因为基本类型变量是独立的所以a的改变不会影响b变量的值。

             浅学JavaScript01

             对于引用类型来讲,变量保存的是引用对象的指针。变量间赋值时其实赋值是变量的指针,这样多个变量就引用的是同一个对象。 

             浅学JavaScript01

4.undefined

           对声明但未赋值的变量返回类型为 undefined 表示值未定义。

           浅学JavaScript01

           对未声明的变量使用会报错,但判断类型将显示 undefined。

            我们发现未赋值与未定义的变量值都为 undefined ,建议声明变量设置初始值,这样就可以区分出变量状态了。

            函数参数或无返回值是为undefined

            浅学JavaScript01

      null

            null 用于定义一个空对象,即如果变量要用来保存引用类型,可以在初始化时将其设置为null          

            浅学JavaScript01



程序员灯塔
转载请注明原文链接:浅学JavaScript01
喜欢 (0)