02.JavaScript入门笔记

02.JavaScript入门笔记——基本语法

gitee 仓库地址：

https://gitee.com/telyfox/javascript_introduction

编写位置

• 初学时， JS 基本上都是客户端的 JS，也就是说全都是需要在浏览器中运行，所以当前的 JS 代码全都需要在网页中编写；
• JS 代码需要编写到 <script> 标签中；
• 一般将 script 标签写到 head 中（和 style 标签有点像）；
• 属性：
  • type：默认值 text/javascript 可以不写，不写默认也是这个值
  • src：当需要引入一个外部的 .js 文件时，使用该属性指向文件的地址。

Hello World

• 创建一个 html 文件；

• 在 html 文件的 head 标签中创建一个 script 标签，并编写如下代码：

  • <script type="text/javascript">
    		console.log("Hello World");
    </script>
    

严格区分大小写

• JavaScript 是严格区分大小写的，也就是 abc 和 Abc 会被解析器认为是两个不同的东西；
• 在编写上例的 Hello World 时，一定要注意区分大小写。

注释

• 注释中的内容不会被解析器解析执行，但是会在源码中显示，注释一般用于对程序中的内容进行解释；

• JS 中的注释和 Java 的一直，分为两种：

  • 单行注释：

    • //注释内容
      

  • 多行注释：

    • /*注释内容*/
      

标识符

• 所谓标识符，就是指变量、函数、属性的名字，或函数的参数；
• 标识符可以实按照下列格式规则组合起来的一个或多个字符：
  • 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；
  • 其他字符可以是字母、下划线、美元符号或数字。
• 按照惯例，ECMAScript 标识符采用驼峰命名法；
• 注意：JavaScript 中的标识符不能是关键字和保留字符。

关键字和保留字符

关键字：

保留字符：

其他不建议使用的标识符

变量

• 变量的作用是给某一个值或对象标注名称；

• 例如：我们的程序有一个值 123，这个值我们需要反复使用，这个时候最好将 123 这个值赋值给一个变量，然后通过变量去使用 123 这个值；

• 变量的声明：

  • 使用 var 关键字声明一个变量；

  • var a;
    

• 变量的赋值：

  • 使用 = 为变量赋值；

  • a=123;
    

• 声明和赋值同时进行：

  • var a = 123;
    

数据类型

• 数据类型决定了一个数据的特征，比如：123 和 “123”，直观上看这两个数据都是 123，但实际上前者是一个数字，而后者是一个字符串；
• 对于不同的数据类型，我们在进行操作时会有很大的不同；
• JavaScript 中一共有 5 中基本的数据类型：
  • String
  • Number
  • Boolean
  • Null
  • Undefined
• 这 5 中之外的类型都称为 Object，所以总的来看，JavaScript 中一共有 6 中数据类型。

typeof 运算符

• 使用 typeof 操作符可以用来检查一个变量的数据类型；

• 使用方式：

  • typeof 123;
    

• 返回结果：

  • typeof 123; //number
    typeof "123"; //string
    typeof true; //boolean
    typeof undefined; //undefined
    typeof null; //object
    

String

• String 用于表示一个字符序列，即字符串；
• 字符串需要使用 ‘’ 或 “” 括起来；
• 转义字符：
  • 
• 将其他数值转换为字符串有 3 中方式：toString()、String()、拼串

Number

• Number 类型用来表示整数和浮点数，最常用的功能就是用来表示十进制的整数和浮点数；
• Number表示的数字大小是有限的，范围是：
  • ±1.7976931348623157e+308 （1.7976931348623157*10的308次方）
  • 如果超过了这个范围，则会返回±Infinity
• NaN，即 Not a Number （非数值），是一个特殊的数值，JS 中当对数值进行计算时没有结果返回，则返回 NaN。

数值的转换

• 有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()；
• Number() 可以用来转换任意类型的数据，而后两者智能用于转换字符串；
• parseInt() 只会将字符串转换为整数，而 parseFloat() 可以转换为浮点数。

Boolean

• Boolean 也被称为逻辑值类型或者真假值类型；
• Boolean 只能够取 true 和 false，除此之外，其他的值都不被支持；
• 其他的数据类型也可以通过 Boolean() 函数转换为 Boolean 类型；
• 转换规则：
  • 

Undefined

• Undefined 类型只有一个值，即特殊的 undefined；

• 在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。例如：

  • var message;
    

  • message 的值就是 undefined

• 需要注意的是 typeof 对没有初始化和没有声明的变量都会返回 undefined。

Null

• Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null；
• 从语义上看 null 表示的是一个空的对象，所以使用 typeof 检查 null 会返回一个 Object；
• undefined 值实际上是由 null 值衍生出来的，所以如果比较 undefined 和 null 是否相等，会返回 true。

运算符

• JS 中为我们定义了一套对数据进行运算的运算符；
• 这其中包括：算数运算符、位运算符、关系运算符等。

算术运算符

• 算数运算符顾名思义就是进行算数操作的运算符；

• JS 中为我们提供了多种算数运算符；

• 算数运算符：

  • 运算符	说明
    +	加法
    -	减法
    *	乘法
    /	除法
    %	取模
    ++(前置)	自增
    ++(后置)	自增
    –(前置)	自减
    –(后置)	自减
    +	符号不变
    -	符号反转

自增和自减

• 自增和自减分为前置运算和后置运算；

• 所谓的前置运算就是将运算符放到变量的前面，而后置就是将运算符放到变量的后边；

• 例如：

  var a = 0;
  console.log(a++);     //输出0
  //           1       存储新值
  //           0       用旧值计算（输出）
  var a = 0;
  console.log(++a);        //输出1
  //           1          存储新值           
  //           1          用新值计算（输出）
  

逻辑操作符

• 一般情况下使用逻辑运算符会返回一个 Boolean 值；

• 逻辑运算符主要有三个：非、与、或；

• 在进行逻辑操作时如果操作数不是 Boolean 类型则会将其转换为布尔类型再进行计算；

• “非”使用符号 ! 表示，“与”使用 && 表示，“或”使用

  表示

  • 运算符	说明	短路规则
    !	逻辑非(NOT)	无
    &&	逻辑与(AND)	若左值为假，则不运算右值
    ||	逻辑或(OR)	若左值为真，则不运算右值

非

• “非”运算符使用 ! 表示；
• “非”运算符可以应用于任意值，无论值是什么类型，这个运算符都会返回一个 Boolean 值；
• “非”运算符回对原值取反，比如原值是 true 使用“非”运算符会返回 false，原值为 false 使用非运算符会返回 true。

与

• “与”运算符使用 && 表示；
• “与”运算符可以应用于任何数据类型，且不一定返回 Boolean 值；
• 对于非 Boolean 值运算，会先将非 Boolean 值转换为 Boolean 值；
• 对 Boolean 值做运算时，如果两个值都为 true 则返回 true，否则返回 false；
• 非 Boolean 值时：如果两个都为 true，则返回第二个值，如果两个值中有 false 则返回靠前的 false 的值。

或

• “或”运算符使用

  表示；

• “或”运算符可以应用于任何数据类型，且不一定返回 Boolean 值；
• 对于非 Boolean 值运算，会先将非 Boolean 值转换为 Boolean 值；
• 对 Boolean 值做运算时，如果两个值都为 false 则返回 false，否则返回 true；
• 非 Boolean 值时：如果两个都为 false，则返回第二个值，否则返回靠前 true 的值。

赋值运算符

• 简单的赋值操作符由 = 表示，其作用就是把右侧的值赋给左侧的变量；
• 如果在 = 号左边添加“加减乘除”等运算符，就可以完成复合赋值操作；
• +=、*=、-=、/=、%=
• a+=10 与 a=a+10相同

关系运算符

• <, >, <=, >= 这几个关系运算符用于对两个值进行比较，比较的规则与我们在数学课上所学的一样；
• 这几个运算符都返回一个 Boolean 值，用来表示两个值之间的关系是否成立
  • 5>10 false
  • 5<10 true
  • 5 <= 10 true
  • 5 >= 10 false

相等

• JS 中使用 == 来判断两个值是否相等，如果相等则返回 true；
• 使用 != 来表示两个值是否不相等，如果不等则返回 true；
• 注意：null 和 undefined 使用 == 判断时是相等的。

全等

• 除了 == 以外，JS 中还提供了 ===；
• === 表示全等，它和 == 基本一直，不过 == 在判断两个值时会进行自动的类型转换，而 === 不会；
• 也就是说，”55” == 55 会返回 true，而 “55” === 55 会返回 false；
• 同样我们还有 !== 表示不全等，同样比较时不会自动转型；
• 也就是说，”55” != 55 会返回 false，而 “55” !== 55 会返回 true。

逗号

• 使用逗号可以在一条语句中执行多次操作；

• 比如：

  • var num1 = 1, num2 = 2, num3 = 3;
    

• 使用逗号运算符分隔的语句会从左到右顺序依次执行。

条件运算符

• 条件运算符也称为三元运算符，通常运算符写为 ?:

• 这个运算符需要三个操作数，第一个操作数在 ? 之前，第二个操作数在 ? 和 : 之间，第三个操作数在 : 之后

• 例如：

  • x > 0 ? x : -x; //求 x 的绝对值
    

• 上面的例子，首先会执行 x > 0，如果返回 true 则执行冒号左边的代码，并将结果返回，这里就是返回 x 本身，如果返回 false 则执行冒号右边的代码，并将结果返回。

运算符的优先级

语句

• 前面的表达式和运算符等内容可以理解成一门语言中的单词，短语；
• 而语句（statement）就是这个语言中一句一句完整的话；
• 语句是一个程序的基本单位，JS 的程序就是由一条一条语句构成的，每一条语句使用 ; 结尾；
• JS 中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

代码块

• 代码块是在大括号 {} 中所写的语句，以此将多条语句的集合视为一条语句来使用；

• 例如：

  • {
    	var a = 123;
    	a++;
    	alert(a);
    }
    

• 我们一般使用代码块将需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号。

条件语句

• 条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句；
• 最基本的条件语句：
  • if…else
  • switch…case

if…else

• if…else 语句是一种最基本的控制语句，它让 JS 可以有条件的执行语句；

• 形式一：

  • if(expression)
    	statement
    

• 形式二：

  • if(expression)
    	statement
    else
    	statement
    

• 除了 if 和 else，还可以使用 else if 来创建多个条件分支。

例 1：

if(age >= 18) {
    alert("您已经成年");
}

例 2：

if(age >= 18) {
    alert("您已经成年");
} else {
    alert("您还未成年");
}

例 3：

if(age >= 18) {
    alert("您已经成年");
} else if(age <= 30){
    alert("您已经是个青年了！");
} else {
    alert("您已经是个中年了！");
}

switch…case 语句

• switch…case 是两一种流程控制语句；

• switch 语句更适用于多条分支使用同一条语句的情况；

• 语法：

  • switch(语句){
        case 表达式1:
            语句...
        case 表达式2:
            语句... 
        default:
            语句...
           }
    

• 需要注意的是，case 语句只是标识的程序运行的起点，并不是终点，所以一旦符合 case 的条件，程序会一直运行到结束。所以一般会在 case 中添加 break 作为语句的结束。

循环语句

• 和条件语句一样，循环语句也是基本的控制语句；
• 循环中的语句只要满足一定的条件将会一直执行。

while

• while 语句是一个最基本的循环语句；

• while 语句也被称为 while 循环；

• 语法：

  • while(条件表达式){
    	语句...
    }
    

• 和 if 一样，while 中的条件表达式将会被转换为 Boolean 类型，只要该值为真，则代码块将会一直重复执行；

• 代码块每执行一次，条件表达式将会重新计算。

do…while

• do…while 和 while 非常类似，只不过它会在循环的尾部而不是顶部检查表达式的值；

• do…while 循环会至少执行一次；

• 语法：

  • do{
    	语句...
    } while (条件表达式);
    

• 相比于 while, do…while 的使用情况并不是很多。

for

• for 语句也是循环控制语句，我们也称它为 for 循环；

• 大部分循环都会有一个计数器用以控制循环执行的次数，计数器的三个关键操作是初始化、检测和更新。for 语句就将这三步明确为语法的一部分；

• 语法：

  • for(初始化表达式;条件表达式;更新表达式){
    	语句...
    }
    

break 和 continue

• break 和 continue 语句用于在循环中精确地控制代码的执行；
• 使用 break 语句会使程序立刻退出最近的循环，强制执行循环后边的语句；
• break 和 continue 语句只在循环和 switch 语句中使用；
• 使用 continue 语句会使程序跳过当次循环，继续执行下一次循环，并不会结束整个循环；
• continue 只能在循环中使用，不能出现在其他的结构中。

label

• 使用 label 语句可以在代码中添加标签，以便将来使用；

• 语法

  • label: statement

• 例子：

  • start: for(var i = 0; i < count; i++) {
    	alert(i);
    }
    

• 这个例子中定义的 start 标签可以在将来由 break 或 continue 语句引用。加标签的语句一般都要与 for 语句等循环语句配合使用。

• Previous
  01.JavaScript入门笔记
• Next
  03.JavaScript入门笔记