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 中的标识符不能是关键字和保留字符。

关键字和保留字符

关键字:

breakdoinstanceoftypeofcase
elsenewvarcatchfinally
returnvoidcontinueforswitch
whiledefaultifthrowdelete
intryfunctionthiswith
debuggerfalsetruenull

保留字符:

classenumextendssuperconstexport
importimplementsletprivatepublicyield
interfacepackageprotectedstatic

其他不建议使用的标识符

abstractdoublegotonativestaticboolean
enumimplementspackagesuperbyteexport
importprivatesynchronizecharextendsint
protectedthrowsclassfinalinterfacepublic
transientconstfloatlongshortvolatile
argumentsencodeURIInfinityNumberRegExpundefined
isFiniteObjectStringBooleanErrorRangeError
parseFloatSyntaxErrorDateevalJSONReferenceError
TypeErrordecodeURIEvalErrorMathURIErrordecodeURIComponent
FunctionNaNisNaNparseIntArrayencodeURIComponent

变量

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

  • 例如:我们的程序有一个值 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 使用 == 判断时是相等的。
表达式
null == undefinedtrue
“NaN” == NaNfalse
5 == NaNfalse
NaN == NaNfalse
NaN != NaNtrue
false == 0true
true == 1true
true == 2false
undefined == 0false
null == 0false
“5” == 5true

全等

  • 除了 == 以外,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 则执行冒号右边的代码,并将结果返回。

运算符的优先级

运算符描述
. [] ()字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void一元运算符、返回数据类型、对象创建、未定义值
* / %乘法、除法、取模
+ - +加法、减法、字符串连接
<< >> >>>移位
< <= > >= instanceof小于、小于等于、大于、大于等于、instanceof
== != === !==等于、不等于、严格相等、非严格相等
&按位与
^按位异或
|按位或
&&逻辑与
||逻辑或
?:条件
= oP=赋值、运算赋值
,多重求值

语句

  • 前面的表达式和运算符等内容可以理解成一门语言中的单词,短语;
  • 而语句(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 语句等循环语句配合使用。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页