JavaScript基础

简介

• JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript
• 为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript
• JS的特点
  1. 解释型语言
  2. 类似于 C 和 Java 的语法结构
  3. 动态语言
  4. 基于原型的面向对象

基本语法

编写位置

• JS代码需要编写到html文件的的head标签中的<script>标签中
• 一个单独的.js文件，然后再head标签中使用<script>标签引入js文件

严格区分大小写

JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西

注释

• 注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。
• JS中的注释和Java的的一致，分为两种：
  1. 单行注释：//注释内容
  2. 多行注释：/*注释内容*/

标识符

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

关键字和保留字符

• 关键字

• 保留字符

• 其他不建议使用的标识符

变量

• 变量的作用是给某一个值或对象标注名称
• 变量的声明：使用var关键字声明一个变量
• 变量的赋值：使用=为变量赋值
• 声明和赋值同时进行：var a = 123

数据类型

• 数据类型决定了一个数据的特征，比如：123和"123"，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。
• 对于不同的数据类型我们在进行操作时会有很大的不同。
• JavaScript中一共有5种基本数据类型：
  1. 字符串型（String）
  2. 数值型（Number）
  3. 布尔型（Boolean）
  4. null型（Null）
  5. undefined型（Undefined）
• 这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

typeof运算符

• 使用typeof操作符可以用来检查一个变量的数据类型
• 使用方式：typeof 数据，例如 typeof 123
• 返回结果：
  1. typeof 数值 number
  2. typeof 字符串 string
  3. typeof 布尔型 boolean
  4. typeof undefined undefined
  5. typeof nul lobject

String

• String用于表示一个字符序列，即字符串。
• 字符串需要使用'或"括起来。
• 转义字符：

  转义字符	含义
  \n	换行
  \t	制表
  \b	空格
  \r	回车
  \	斜杠
  \’	单引号
  \”	双引号

• 将其他数值转换为字符串有三种方式：toString()、String()、拼串。

Number

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

Boolean(布尔型)

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

  数据类型	转换为true	转换为false
  Boolean	true	false
  String	任何非空字符串	""（空字符串）
  Number	任何非0数字	0和NaN
  Object	任何对象	null
  Undefined	\	undefined

Undefined

• Undefined类型只有一个值，即特殊的undefined
• 在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined
• 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined

Null

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

运算符

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

算数运算符

• 算数运算符顾名思义就是进行算数操作的运算符。
• JS中为我们提供了多种算数运算符。
• 算数运算符：

  运算符	说明
  +	加法
  -	减法
  *	乘法
  /	除法
  %	取模
  ++（前置）	自增
  ++（后置）	自增
  --（前置）	自减
  --（后置）	自减

自增和自减

自增++ 自减--

• 自增和自减分为前置运算和后置元素。
• 所谓的前置元素就是将元素符放到变量的前边，而后置将元素符放到变量的后边。
• 例子：
  • 前置自增：++a
  • 后置自减：a--
• 运算符在前置时，表达式值等于变量变更以后的值。
• 运算符在后置时，表达式值等于变量原值。

逻辑操作符

• 一般情况下使用逻辑运算符会返回一个布尔值。
• 逻辑运算符主要有三个：与、或、非。
• 在进行逻辑操作时如果操作数不是布尔类型则会将其转换布尔类型在进行计算。
• 非使用符号!表示，与使用&&表示，或使用||表示。

非

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

与

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

或

• 或运算符使用||表示。
• 或运算符可以应用于任何数据类型，且不一定返回布尔值。
• 对于非布尔值运算，会先将非布尔值转换为布尔值。
• 对布尔值进行运算时，如果两个值都为false则返回false，否则返回true。
• 非布尔值时：如果两个都为false，则返回第二个值，否则返回靠前true的值。

赋值运算符

• 简单的赋值操作符由等于号（=）表示，其作用就是把右侧的值赋给左侧的变量
• 如果在等于号左边添加加减乘除等运算符，就可以完成复合赋值操作
• +=、*=、-=、/=、%=
• 比如：a+=10和a=a+10是一样的

关系运算符

• 小于（<） 、大于（>） 、小于等于（<=）和大于等于（>=）这几个关系运算符用于对两个值进行比较，比较的规则与我们在数学课上所学的一样。
• 这几个运算符都返回一个布尔值。用来表示两个值之间的关系是否成立。

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则执行冒号右边的代码，并将结果返回

运算符的优先级

1. .、[]、new
2. ()
3. ++、--
4. !、~、+(单目)、-(单目)、typeof、void、delete
5. %、*、/
6. +(双目)、-(双目)
7. << 、 >>、 >>>
8. <、<=、>、>=
9. ==、!==、===
10. &
11. ^
12. |
13. &&
14. ||
15. ?:
16. =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
17. ,

条件语句

if...else语句

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

var a
var b
// ....
if(a > b){
    // statement
} else {
    // statement
}

var age
// ...
if(age < 18) {
    alert("你还未成年！");
} else if(age <= 30) {
    alert("您已经是个青年了！")
} else {
    alert("你已经是个中年了！");
}

switch...case语句

• switch...case是另一种流程控制语句
• switch语句更适用于多条分支使用同一条语句的情况
• 需要注意的是case语句只是标识的程序运行的起点，并不是终点，所以一旦符合case的条件程序会一直运行到结束。所以我们一般会在case中添加break作为语句的结束

var age
// ...
switch(age){
case 18:
    // statement
    break
case 20:
    // statement
    break
default:
    // statement
}

循环语句

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

while

• while语句是一个最基本的循环语句
• 和if一样while中的条件表达式将会被转换为布尔类型，只要该值为真，则代码块将会一直重复执行
  代码块每执行一次，条件表达式将会重新计算

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

do...while

• do...while和while非常类似，只不过它会在循环的尾部而不是顶部检查表达式的值。
• do...while循环会至少执行一次。
• 相比于while，do...while的使用情况并不是很多

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

for

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

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

break和continue

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

label

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

语法：
label: statement

示例：

for (var i = 1; i <= 2; i++) {
    console.log(`i = ${i} 时:`);
    // 声明标签 start
    start:
    for (var j = 1; j <= 2; j++) {
        console.log(`i = ${i}, j = ${j}`);
        for (var k = 1; k <= 2; k++) {
            console.log(`i = ${i}, j = ${j}, k = ${k}`);
            // 立刻会跳出start标记的第二层循环，
            // 继续正常执行第一层循环
            break start;
            // continue start;
        }
    }
}

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