玩命加载中 . . .

JS笔记(01)


JS学习笔记01

概述

  1. JavaScript是一种专门在浏览器编译并执行的编程语言。
  2. JavaScript处理用户与浏览器之间请求问题。
  3. JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言。

弱类型编程语言风格 VS 强类型编程语言风格:

  1. 强类型编程语言风格:认为对象行为应该受到其修饰类型严格约束。

    • Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言。
    class Student{
        public String sname;
        public void sayHello(){
            System.out.print("hello world");
        }
        
        public static void main(String[] args) {
            Student  stu = new Student();
            stu.sname="mike";     // stu对象能够调用属性只有sname
            stu.sayHello();        // stu对象能够调用方法只有sayHello()
            stu.sid =10;        // 在Java认为是语法错误,修饰stu对象的Student类型没有提供这个属性  
        }
    }
    
  2. 弱类型编程语言风格: 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用属性和方法

    • JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言。
    var stu = new Object();    //stu对象相当于【阿Q】
    stu.car = "劳斯莱斯";    //合法
    stu.play = function (){ return  "天天打游戏"}
    stu.play();
    

变量声明方式

命令格式

var 变量名;
var 变量名 =;
var 变量名1,变量名2=值;

注意:在JavaScript变量/对象,在声明不允许指定【修饰类型】只能通过var来进行修饰。

标识符命名规则

  1. 标识符只能由四种符号组成 英文字母,数字 , 下划线,美元符号($)。

  2. 标识符首字母不能以”数字”开头。

  3. 标识符不能采用JavaScript关键字 比如var。

数据类型

数据类型基本数据类型/引用数据类型说明
number基本数据类型数据类型
string基本数据类型字符类型
boolean基本数据类型布尔类型
object高级数据类型对象类型
function高级数据类型函数类型

注意:JavaScript是弱类型编程语言,根据变量赋值内容来判断变量数据类型,JavaScript中变量的数据类型可以根据赋值内容来进行动态改变。

JavaScript特殊【值】

特殊【值】说明
undefinedJavaScript中所有变量在没有赋值时,其默认值都是undefined
由于JavaScript根据变量的赋值来判断变量类型,此时由于变量
没有赋值因此JavaScript无法判断当前变量数据类型,此时返回也是undefiled。
nullJS中当一个对象赋值为null时,表示对象引用了一个【空内存】
这个空内存既不能存储数据也不能读取数据。
此时这个对象数据类型,在JavaScript依然认为是object类型。
NaNJS中当一个变量赋值为NaN,表示变量接收了一个【非法数字】(123 合法数字 abc123 非法数字)
此时这个变量数据类型,在JavaScript依然认为number类型。
infinityJS中当一个变量赋值为infinity,表示变量接收了一个【无穷大数字】
此时这个变量数据类型,在JavaScript依然认为number类型。

控制语句

if 语句

  • if 语句是最常用的条件分支语句,作用就是通过某个指定的判断条件,决定走哪个分支的代码

  • 语法:

     if (condition expression) {
         statement1;
     } else {
         statement2;
     }
    

switch

  • 开关语句允许一个程序求一个表达式的值,并且尝试去匹配表达式的值到一个 case 标签。如果匹配成功,这个程序执行相关语句。

  • 语法:

    switch(表达式){
        case value1:
            结构体;
            break;
        case value2:
            结构体;
            break;
        ...
        default:
            执行最后的语句
    } 
    
  • 语法解析:

    • switch:关键字表示开始进入一个开关语句。
    • 表达式:会求出一个具体的值,将这个值去与 {} 内部的 case 后面的值进行对比、匹配,如果值相等表示匹配成功。匹配相等时,方式是进行全等于匹配,不止值要相等,数据类型也要相等。
    • case:示例的意思,作为关键字后面必须跟一个空格,书写匹配的值。
    • case 后面的结构体:每个 case 匹配成功之后要执行的语句。
    • break: 用于打断结构体,直接跳出程序,模拟跳楼现象。
    • default:相当于 if 语句中的 else ,否则的情况,如果前面的 case 都不匹配,执行 default 后面的语句。
  • 注意

    • default 可以不写,相当于 if 语句没有 else。
    • break 关键字:根据结构需要有时必须在每个 case 后面都要写,为了模拟跳楼现象,如果不写break,对应的 case 后面的语句执行之后,不会跳出结构体,会继续想下执行其他 case 的后面的语句,直到遇到一个 break。

for循环

  • for 循环是一种前测试循环语句,在反复执行一段代码之前,都先测试入口条件,如果条件为真,可继续循环,如果条件为假,必须跳出循环不再执行。
    它是一种反复执行一段代码直到测试条件为假时停止。

  • 语法:

    for(定义循环变量; 变量的最大值或最小值; 步长;){
        循环体
    } 
    

do while 循环

  • do while 循环是一种后测试循环语句,会先执行一次结构体,执行完后才会去判断入口条件,如果条件为真能够继续下一次循环,如果条件为假跳出循环。

  • 语法:

    do{
        循环体
    } while(条件表达式)
    
  • 语法解析:

    • do:做什么,后面是每次循环的循环体。
    • while:当·····的时候。
    • 先执行一次循环体,然后当条件表达式为真时可以继续循环。
  • 注意

    • 如果循环需要循环变量参与,循环变量必须定义在循环外面,否则会被重置。
    • 循环变量自加的过程需要写在 {} 循环体内部。
    • 如果将循环变量写在结构体内,i 的初始值每次都会被重置,容易出现死循环。
    • 变量自加过程写在输出语句前面和后面,结果是不同的。
    • do while 循环即便条件第一次测试就为假,也会执行一次结构体。
    • 至少会执行一次循环体。

while 循环

  • while 循环是一种前端测试循环语句,在执行循环体之前都要测试入口条件,条件为真继续执行,条件为假直接跳出循环。

  • 语法:

    while(条件表达式){
        循环体;
    }
    
  • 语法解析:

    • 当条件表达式为真时,执行循环体,如果为假,跳出循环。
  • 语法解析:

    • 如果需要循环变量参与,必须定义在循环外部,避免被重置。
    • 循环变量自加的过程写在循环体内部。

break 语句

  • 我已经找到我要的答案了,我不需要进行更多的循环了!
  • break 语句的作用可以立即停止当前的 for、do while、while 循环。
  • 根据一些条件设置 break 位置,直到循环能够执行到 break 语句立即停止执行,跳出循环。
  • 例如:
//break关键字 用于跳出整一个循环
for(var n = 1; n <= 5; n++){
    if(n == 3){
        break;
    }
    console.log('这是我吃的第' + n + '个包子');
}
  • 注意事项:

    • break 如果没有特殊提示,只能停止自己所在的那一层循环,并不能终止外部循环。

    • 如果想停止外层循环,可以给外层循环添加一个标签名 label,在内层循环的 break 关键字后面空格加一个 label 名。

    • 例如:

    // 如果想终止外层循环,需要给外层循环添加一个名字
    outloop : for (var i = 1; i <= 4; i++) {
        for (var j = 1; j <= 4; j++) {
            console.log(i,j);
        }
        // 补充打断条件
        if (j >= 2) {
            break outloop;
        }
    }
    

continue 语句

  • 这个答案不是我想要的,赶紧试试下一个吧。

  • 遇到 continue 表示当前的一次循环不是我们想要的,会立即停止当前次的循环,立即进入下一次循环。

  • 例如:找 1-30 之间,输出不是 5 的倍数的数字。

    // continue关键字用于立即跳出本循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
    // 找 1-30 之间,输出不是 5 的倍数的数字
    for(var i = 1; i <= 30 ; i++){
        if(i % 5){
        // 是 5 的倍数,不能输出,直接进入下一次循环
            continue;
        }
        // 走到这个位置,说明不是 5 的倍数,可以输出
        console.log(i);
    }
    
  • 注意事项:

    • 要根据特殊设置 continue 的位置。

    • continue 如果没有特殊指示只能进入自己的下一次循环,不能立即停止外层循环的这一次进入下一次。

    • 控制外层循环的方式与 break 一样,都是添加外层的标签名。

    • 例如:控制内层循环

      // continue 只能进入自己的循环的下一次
      for (var i = 1 ; i <= 4 ; i++) {
          for (var j = 1 ; j <= 4; j++) {
              // 补充打断这一次条件
              if (j % 2 == 0) {
                  continue;
              }
              console.log(i,j);
          }
      }
      
    • 例如:控制外层循环

      // continue 只能进入自己的循环的下一次
      outloop:for (var i = 1 ; i <= 4 ; i++) {
          for (var j = 1 ; j <= 4; j++) {
              // 补充打断这一次条件
              if (j % 2 == 0) {
                  continue outloop;
              }
              console.log(i,j);
          }
      }
      

函数

概述

命令格式:

function   函数名(形参名1,形参名2){
    JavaScript命令行
    JavaScript命令行
    return  将函数运行结果进行返回  
}

注意:

  1. JavaScript中,所有函数在声明时,都需要使用function进行修饰。
  2. JavaScript中,所有函数在声明时,禁止指定函数返回数据类型。
  3. JavaScript中,所有函数在声明时,形参既不能使用var来修饰也不能使用数据类型修饰。
  4. JavaScript中,所有函数在声明时,如果有返回值,此时应该通过return进行返回。

声名方式

  • 标准声名方式

    function 函数对象名(参数1,参数2) {
        命令;
    }
    
  • 匿名声名方式

    var 函数对象名 = function () {
        命令;
    }
    

调用方式

  1. 浏览器并不会自动调用JavaScript函数。
  2. 可以通过命令行方式来调用Java函数。
  3. 通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理。

function创建时机

  • 在浏览器加载

文章作者: 小靳同学
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小靳同学 !
评论
 上一篇
JSTL表达式(05) JSTL表达式(05)
JSTL表达式概述JSTL 标签库 全称是指 JSP Standard Tag Library JSP 标准标签库。 是一个不断完善的开放源
2021-12-04
下一篇 
JS笔记(02) JS笔记(02)
JS学习笔记02初识BOM/DOM概述: BOM英文全名:(borwser Object Model)浏览器对象模型 DOM英文全名:(Do
2021-12-03
  目录