JavaScript基础

最新推荐文章于 2024-07-27 14:51:01 发布
最新推荐文章于 2024-07-27 14:51:01 发布
阅读量431 收藏 1
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_numb/article/details/103802655
版权

这篇文章参考内容分为两部分：

  1. 西部开源-秦疆老师；
  2. https://www.w3school.com.cn/h.asp；

文章目录

JavaScript

JavaScript 是属于 HTML 和 Web 的编程语言；

编程令计算机完成您需要它们做的工作；

1. 简介

1.1 为什么学习 JavaScript？

JavaScript 是 Web 开发者必学的三种语言之一：

  • HTML 定义网页的内容
  • CSS 规定网页的布局（美化）
  • JavaScript 对网页行为进行编程

1.2 学习 JavaScript 能做什么？

  • JavaScript 能改变 HTML 的内容

  • JavaScript 能改变 HTML 的属性

  • JavaScript 能改变 CSS 样式

  • JavaScript 能够隐藏 HTML 元素

  • JavaScript 能够显示隐藏的 HTML 元素

    ……

1.3 JavaScript 的历史

  • JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。

  • ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 JavaScript 版本。

2. 入门

2.1 JavaScript 使用

  1. 内部标签

  • 在 HTML 中， JavaScript 代码必须位于 <script>与</script>标签之间（成对出现）

  • <head>中的 JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>内部标签 </title>
    
    <script>
        function myInputStyle01(){
            document.getElementById("demo").innerHTML = "段落已经被更改"
        }
    </script>
    
</head>

<body>
    <h2>Head 中的 JavaScript</h2>
    <p id="demo">这是将要被改变的段落。</p>
    <button type="button" onclick="myInputStyle01()"> Try </button>
</body>

</html>
  • <body>中的 JavaScript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>body中的 js</title>
</head>

<body>
    <h2>Body 中的 JavaScript</h2>
    <p id="demo">这个段落即将被更改</p>
    <button type="button" onclick="myInputStyle02()"> Try</button>
    <script>
        function myInputStyle02 () {
            document.getElementById("demo").innerHTML = "段落已经被改变！";
        }
    </script>
</body>

</html>
  1. 外部标签

  • 格式：

    JavaScript 代码：

    外部脚本不能包含 <script>标签；

    function myFunction{
    
}

    html 代码：

    <script src="*.js"></script>

  • 实例：

    JavaScript 代码：

    function myInputStyle03() {
    document.getElementById("demo").innerHTML = "段落已经被改变！";
}

    html 代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>外部标签</title>
    <script src="js/1.myJs01.js"></script>
</head>

<body>
<h2>外部 JavaScript</h2>
<p id="demo">这是将要被 改变的段落。</p>
<button type="button" onclick="myInputStyle03()">Try</button>
</body>

</html>

  • 优势：

    • 分离了 HTML 和代码；
    • 使得 HTML 和 JavaScript 更容易阅读和维护；
    • 已缓存的 JavaScript 文件可加速页面加载；

  • 文件路径：

    路径描述
    <img src="1.jpg">1.jpg 位于与当前网页相同的文件夹
    <img src="images/1.jpg">1.jpg 位于当前文件夹的 images 文件夹中
    <img src="/images/1.jpg">1.jpg 当前站点根目录的 images 文件夹中
    <img src="../1.jpg">1.jpg 位于当前文件夹的上一级文件夹中
  1. 一些注意：
  • 旧的 JavaScript 会使用 type 属性：<script type="text/javascript">;
  • type 属性不是必需的；JavaScript 是 HTML 中默认的脚本语言；

2.2 JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行；

例如，当发生事件时调用函数，比如当用户点击按钮，稍后会介绍，上边的例子也有，有兴趣的可先了解；

2.3 JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数

内建函数：编译器内部实现的函数，跟关键字一样可以直接使用；

  1. JavaScript 显示方案
  • 使用 window.alert()写入警告框；
  • 使用 document.write() 写入 HTML 输出；
  • 使用 innerHTML 写入 HTML 元素；
  • 使用 console.log() 写入浏览器控制台；

1. 使用 innerHTML

如果需要访问 HTML 元素， JavaScript 可使用 document.getElementById(id)方法；

id 属性定义 HTML 元素；

innerHTML 属性定义 HTML 内容；

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用innerHTML属性写入HTML元素</title>
</head>

<body>
<p id="demo01">
    在此段落，我将演示使用innerHTML属性写入HTML元素<br/>
    5 + 6 =
</p>

<script>
    document.getElementById("demo01").innerHTML = 5 + 6;
</script>
</body>

</html>

从结果中可以看出，innerHTML 属性是将整个标签内的所有东西都替换掉；
在这里插入图片描述注：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法；

2. 使用 document.write()

出于测试目的，使用 document.write()比较方便

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<h2>document.write()方法仅用于测试</h2>
<p>在HTML文档完全加载后使用 document.write()将删除所有已有的HTML文档</p>

<button type="button" onclick="myFunction()">点击之后，将删除所有已有的 HTML</button>
<script>
    function myFunction() {
        document.write('已经删除所有的HTML');
    }
</script>
</body>

</html>

3. 使用 window。alert()

使用警告框来显示数据（也就是弹窗）

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
</head>

<body>
<h2>弹窗演示</h2>
<p>使用警告框来显示数据</p>
<script>window.alert('你好，世界')</script>
</body>

</html>

4. 使用 console.log()

在浏览器中，一般较长使用console.log()方法来显示数据；

通过 F12 来激活浏览器控制台，并在菜单中选择“控制台(Console)”
在这里插入图片描述实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>console显示数据</title>
</head>

<body>
<h1>按 F12 启动</h1>
<p>在下方找到控制台（console）即可显示</p>
<script>
    console.log('Hello，World！')
</script>
</body>

</html>

2.4 JavaScript 语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”；

  1. JavaScript 程序

    计算机程序是由计算机“执行”的一系列“指令”。

    在编程语言中，这些编程指令被称为语句。

    JavaScript 程序就是一系列的编程语句。

  2. JavaScript 语句

    JavaScript 语句由一下构成：

    值、运算符、表达式、关键词和注释；

    大多数 JavaScript 程序都包含许多 javaScript 语句；

    这些语句会按照它们被编写的顺序逐一执行；

  3. 分号

    分号分隔 JavaScript 语句；

    如果有分号，允许在同一行写多条语句；

    以分号结束不是必须的，但是强烈建议这样做；

  4. JavaScript 空白字符

    JavaScript 会忽略多个空格；

    可以像脚本添加空格，增强可读性；

    如，下边两行是相等的，但是第二行可读性就很强；

    var x=y+z;
var x = y + z;

  5. JavaScript 行长度和折行

    为了达到最佳的可读性，程序员们常常喜欢把代码行控制在80个字符以内；

    如果 JavaScript 语句太长，对其进行拆行的最佳位置是逗号之后或者运算符之后；

  6. JavaScript 代码块

    JavaScript 语句可以用花括号P（{…}）组合在代码块中；

    代码块的作用是定义一同执行的语句；

    function myfunction(){
    代码块；
    此处的语句一同执行；
}

  7. JavaScript 关键词

    注：JavaScript 关键词是保留的单词，无法作为变量名

    关键词描述
    break终止 switch 或循环。
    continue跳出循环并在顶端开始。
    debugger停止执行 JavaScript，并调用调试函数（如果可用）。
    do … while执行语句块，并在条件为真时重复代码块。
    for标记需被执行的语句块，只要条件为真。
    function声明函数。
    if … else标记需被执行的语句块，根据某个条件。
    return退出函数。
    switch标记需被执行的语句块，根据不同的情况。
    try … catch对语句块实现错误处理。
    var声明变量。

2.5 JavaScript 语法

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构；

var x, y;  //如何声明变量
x = 7; y = 8; //如何赋值
z = x + y; //如何计算值

1. JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值；

  • 混合值：混合值被称为字面量（literal）；（个人理解就是常量）

    • 书写混合值最重要的规则：

      • 写数值有无小数点均可（个人理解就是整数和浮点数都可以同时定义，因为 JavaScript 只有 var 一种类型）：

        12.34
10000

      • 字符串是文本，由双引号或单引号包围：

        "String"
'String'

  • 变量值：被称为变量；

    • 在编程语言中， 变量用于存储数据值；

    • JavaScript 使用 var 关键词来声明变量；

    • =号用以为变量赋值；

      • 在本例中，x 被定义为变量， 然后，给 x 赋值为9；

        var x;
x = 9;

2. JavaScript 运算符

  • JavaScript 使用算术运算符(+ - * /)来计算值；
  • JavaScript 使用赋值运算符(=)向变量赋值；

3. JavaScript 表达式

  • 表达式是值、变量和运算符的组合，计算结果是值；

    12-10

  • 表达式也可以包含变量值；

    x + 10

  • 值可以是多种类型，比如数值和字符串；

    "你好" + "," + "世界"

    在这里插入图片描述

4. JavaScript 关键词

JavaScript 关键词用于标识被执行的动作；

var关键词告知浏览器创建新的变量；

var x = 1 + 2;
var y = x * 3;

5. JavaScript 注释

并非所有的 JavaScript 语句都被“执行”；

双斜杠 // 或 /* 注释 */ 被视为注释；

注释会被忽略，不会被执行

var x = 1;  //会执行
// var x = 2;  不会执行

6. JavaScript 标识符

标识符是名称；

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）；

在大多数编程语言中，合法名称的规则大多相同；

在 JavaScript 中，首字符必须是字母、下划线（_）或美元符号（$）；

连串的字符可以是字母、数字、下滑下你或美元符号；

数值不可以作为首字符；

7. JavaScript 对大小写敏感

所有的 JavaScript 标识符对大小写敏感；

变量 value1 和 Value1，是两个不同的变量；

value1 = "bob";
Value1 = "BOB";

注：JavaScript 不会把 VAR 或 Var 翻译为关键词 var；

8. JavaScript 与驼峰式大小写

历史上，程序员曾使用三种方法把多个单词连接为一个变量名：

  • 连字符：

    first-name, last-name;

    注：JavaScript 中不能使用连字符，它是为减法预留的；

  • 下划线：

    first_name, last_name;

  • 驼峰式大小写（Camel Case）：

    FirstName, lastName;

    **加粗样式**JavaScript 程序员倾向于使用小写字母开头的驼峰大小写；

9. JavaScript 字符集

JavaScript 使用 Unicode 字符集；

Unicode 覆盖世界上几乎所有的字符、标点和符号；

Unicode 可以通过不同的字符集来实现；

最常用的编码是 UTF-8 和 UTF-16

字符集描述
UTF-8UTF8 中的字符长度可以是 1 到 4 个字节。 UTF-8 可以代表 Unicode 标准中的任何字符。 UTF-8 向后兼容ASCII。 UTF-8 是电子邮件和网页的首选编码。
UTF-1616 位 Unicode 转换格式是 Unicode 的可变长度字符编码，能够编码整个 Unicode 编码。 UTF-16 用于主要的操作系统和环境，如 Microsoft Windows、Java 和 .NET。

Unicode 和 UTF - 8 区别

Unicode 是一个字符集。 UTF - 8 属于编码；

Unicode 是具有唯一十进制数字（代码点）的字符列表；A = 65； B = 66……

这个十进制数字表示字符串“hello”：104 101 108 108 111

编码指的是如何将这些数字转换成存储在计算机中的二进制数字：

UTF - 8 编码将像这样存储 “hello” （二进制）：01101000 01100101 01101100 01101100 01101111

字符集将字符转换为数字； 编码将数字转换为二进制；

3. 内容详解

3.1 注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性；

JavaScript 注释也可用于在测试替代代码时阻止执行；

1. 单行注释

单行注释以 //开头；

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）；

var x = 5;  //声明 x，其赋值为 5；

2. 多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */之间的文本都会被 JavaScript 忽略。

/*
下面的代码是对 x 进行声明并赋值
*/
var x = 5;

注：注释块常用于官方声明；

3. 使用注释来阻止执行

使用注释来防止代码执行很适合代码测试；

在代码之前添加 // 会把可执行的代码更改为注释；方便调试；

3.2 变量

JavaScript 变量是存储数据值的容器；

var x = 7;
var y = 8;
var z = x + y; 

var price1 = 7;
var price2 = 8;
var price2 = 12;
var total = price1 + price2 + price3;

1. 标识符：

所有的 JavaScript 变量必须以唯一的名称的标识；

这些唯一的名称为标识符；

标识符可以是短名称（比如 x 和 y），或者更具有描述性的名称（age、sum、totalVolume）；

构造变量名称（唯一标识符）的通用规则是：

  • 名称可包含字母、数字、下划线和美元符号；
  • 名称必须以字母开头；
  • 名称也可以 $ 和 _ 开头（但很少这么做）；
  • 名称对大小写敏感（y 和 Y 是不同的变量）；
  • 保留字（比如 JavaScript 的关键词）无法用作变量名称；

2. 赋值运算符：

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符；

3. 数据类型：

在编程过程中，数据类型是重要的概念；

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等；

var x = 7;   //数字
var lastName = "Gates";    //字符串
var cars = ["Porsche", "Volvo", "BMW"];   //数组
var oop = {fisrtName:"Bill", lastName:"Gates"};     //对象

  • 数值：

    JavaScript 只有一种数值类型；

    写数值时用不用小数点均可：

    var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

    超大或超小的数值可以用科学计数法来写：

    var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

  • 布尔值：

    布尔值只有两个值：true 或 false；

    var x = true;
var y = false;

  • 数组：

    JavaScript 数组用方括号书写；

    数组的项目由逗号分隔；

    var cars = ["Porsche", "Volvo", "BMW"];

    注：数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推

  • 对象：

    JavaScript 对象用花括号来书写；

    对象属性是 name:value 对，由逗号分隔；

    var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

    上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor；

  • 字符串值：

    文本值被称为字符串；

    字符串被包围在双引号或单引号中；

    var carName = "Porsche 911";   // 使用双引号
var carName = 'Porsche 911';   // 使用单引号

    可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

    var answer = "It's alright";             // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

    注：如果把数值放在引号中，会被视作文本字符串；

  • Undefined:

    在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined；

    var person;                  // 值是 undefined，类型是 undefined

    任何变量均可通过设置值为 undefined进行清空。其类型也将是 undefined；

    person = undefined;          // 值是 undefined，类型是 undefined

  • 空值：

    空值与 undefined 不是一回事；

    空的字符串变量既有值也有类型；

    var car = "";                // 值是 ""，类型是 "string"

  • Null；

    在 JavaScript 中，null是 “nothing”。它被看做不存在的事物。

    不幸的是，在 JavaScript 中，null 的数据类型是对象。

    可以把 null在 JavaScript 中是对象理解为一个 bug。它本应是 null。

    可以通过设置值为 null清空对象：

    var person = null;           // 值是 null，但是类型仍然是对象

    也可以通过设置值为 undefined清空对象：

    var person = undefined;     // 值是 undefined，类型是 undefined

  • Undefined 与 Null 的区别

    Undefined与 null的值相等，但类型不相等：

    typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

  • 原始数据：

    原始数据值是一种没有额外属性和方法的单一简单数据值。

    typeof运算符可返回以下原始类型之一：string、number、Boolean、undefined；

    typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

  • 复杂数据：

    typeof运算符可返回以下两种类型之一：function、object；

    typeof运算符把对象、数组或 null 返回 object;

    typeof 运算符不会把函数返回 object；

    typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" 
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

    注：typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象；

4. 创建 JavaScript 变量：

在 JavaScript 中创建变量被称为“声明”变量。

可以通过 var 关键词来声明 JavaScript 变量：

var carName;

声明之后，变量是没有值的。（技术上，它的值是 undefined）

变量赋值有两种方式：

  • 先创建后赋值；

    var carName;
carName = "porsche";

  • 创建的时候赋值；

    var carName = "porsche";

注：在脚本的开头声明所有变量是个好习惯；

5. 重复声明 javaScript 变量：

JavaScript 拥有动态类型，这意味着相同的变量可用作不同类型；

如果再次声明某个 JavaScript 变量，将不会丢它的值;

在这两条语句执行后，变量 carName 的值仍然是 “porsche”：

var carName = "porsche";
var carName;

6. JavaScript 算术：

//通过 JavaScript 变量进行算术运算，使用 ``=`` 和 ``+`` 之类的运算符：
var x = 3 + 5 + 8;   //16

//字符串也可以使用加号，但是字符串将被级联：
var x = "Bill" + " " + "Gates";  //Bill Gates

//如果把要给数值放入引号中，其余数值会被视作字符串并被级联
var x = "8" + 3 + 5;  //835
var x = 3 + 5 + "8";  //88

3.3 运算符

1. 算术运算符：

运算符描述
+加法
-减法
*乘法
**幂（将第一个操作数提升到第二个操作数的幂）
/除法
%系数（返回除法的余数）
++递增
–递减

2. 赋值运算符：

运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
<<=x <<= yx = x << y
>>=x >>= yx = x >> y
>>>=x >>>= yx = x >>> y
&=x &= yx = x & y
^=x ^= yx = x ^ y
|=x |= yx = x | y
**=x **= yx = x ** y

注：**=运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。慎用。

3. 比较运算符：

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

4. 逻辑运算符：

运算符描述
&&逻辑与
||逻辑或
!逻辑非

5. 类型运算符：

运算符描述
typeof返回变量的类型。
instanceof返回 true，如果对象是对象类型的实例。

typeof 运算符返回变量或表达式的类型：

typeof ""                  // 返回 "string"
typeof "Bill Gates"          // 返回 "string"
typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

注：typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象；

6. 位运算符：

位运算符处理 32 位数；

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数；

运算符描述例子等同于结果十进制
&与5 & 10101 & 000100011
|或5 | 10101 | 000101015
~非~ 5~0101101010
^异或5 ^ 10101 ^ 000101004
<<零填充左位移5 << 10101 << 1101010
>>有符号右位移5 >> 10101 >> 100102
>>>零填充右位移5 >>> 10101 >>> 100102

3.4 函数

JavaScript 函数是被设计为执行特定任务的代码块；

JavaScript 函数会在某代码调用它时被执行；

1. 函数语法：

JavaScript 函数通过 function关键词进行定义，其后是函数名和括号 ()；

function 函数名(){
    
}

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）；

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数（Function parameters）是在函数定义中所列的名称（形参）

函数参数（Function arguments）是当调用函数时由函数接收的真实的值（实参）

在函数中，参数是局部变量。

在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）；

2 . 函数调用：

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

3. 函数返回：

当 JavaScript 到达 return 语句，函数将停止执行；

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码；

函数通常会计算出返回值，这个返回值会返回给调用者：

var x = add(4, 3);        // 调用函数，返回值被赋值给 x

function add(a, b) {
    return a + b;                // 函数返回 a 和 b 的和
}

4. 为什么使用函数：

能够对代码进行复用：只要定义一次代码，就可以多次使用它；

能够多次向同一函数传递不同的参数，以产生不同的结果；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <style>
        div{
            border: 1px solid red;
            background: pink;
            width: 400px;
        }
    </style>
</head>

<body>
<div>
    <h2>JavaScript 函数</h2>
    <p>本例调用函数把华氏度转换为摄氏度：</p>
    <p id="test"></p>
    <script>
        function toCelsius(f) {
            return (5 / 9) * (f - 32);
        }

        document.getElementById('test').innerHTML = toCelsius(86);
    </script>
</div>

</body>

</html>

结果：
在这里插入图片描述
5. () 运算符调用函数：

使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius（） 引用的是函数结果；

此处验证toCelsius 引用的是函数对象：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数</title>
    <style>
        div{
            border: 1px solid red;
            background: pink;
            width: 400px;
        }
    </style>
</head>

<body>
<div>
    <h2>JavaScript</h2>
    <p>不使用（）访问函数将返回函数声明而不是函数结果：</p>
    <p id="test"></p>
</div>

<script>
    function toCelsius(f) {
        return (5 / 9) * (f - 32);
    }

    document.getElementById('test').innerHTML = toCelsius;
</script>
</body>
</html>

结果：
在这里插入图片描述6. 用作变量值的函数：

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中；

//使用变量来存储函数的值：
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

//把函数当做变量值直接使用：
var text = "The temperature is " + toCelsius(77) + " Celsius";

7. 局部变量：

在 JavaScript 函数中声明的变量，会成为函数的局部变量；

局部变量只能在函数内访问；

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // code here CAN use carName
}

// 此处的代码可以使用 carName

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量；

局部变量在函数开始时创建，在函数完成时被删除；

3.5 对象

1. 真实生活中的对象、属性和方法：

在真实生活中，汽车是一个对象；

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：
在这里插入图片描述所有汽车都拥有同样的属性，但属性值因车而异；

所有汽车都拥有相同的方法，但是方法会在不同时间被执行；

2. JavaScript 对象：

JavaScript 变量是数据值的容器；

对象也是变量，但是对象包含很多值；

定义（创建）一个 JavaScript 对象：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

空格和折行都是允许的。对象定义可横跨多行：

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

3. 访问对象属性：

//两种方式
objectName.propertyName   //person.lastName;

objectName["propertyName"]  //person["lastName"];

3.6 事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

1. HTML 事件：

HTML 事件可以是浏览器或用户做的某些事情；

下面是 HTML 事件的一些例子：

  • HTML 网页完成加载
  • HTML 输入字段被修改
  • HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事；

JavaScript 允许您在事件被侦测到时执行代码；

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序；

使用单引号：

<element event='一些 JavaScript'>
    
<button onclick='document.getElementById("demo").innerHTML=Date()'>
    现在的时间是？
</button>

使用双引号：

<element event="一些 JavaScript">
    
<button onclick="displayDate()">
    现在的时间是？
</button>

2. 常见的 HTML 事件：

事件描述
onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

3.7 字符串

JavaScript 字符串用于存储和操作文本；

1. 字符串定义：

JavaScript 字符串是引号中的零个或多个字符；

var carname = "Porsche 911";
var carname = 'Porsche 911';

2. 特殊字符：

由于字符串必须由引号包围，JavaScript 会误解这段字符串：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

该字符串将被切为 “中国是瓷器的故乡，因此 china 与”；

避免此问题的解决方法是，使用 \ 转义字符；

反斜杠转义字符把特殊字符转换为字符串字符：

代码结果描述
\'’单引号
\""双引号
\\\反斜杠
\b退格键
\f换页
\n新行
\r回车
\t水平制表符
\v垂直制表符

3. 长代码换行：

为了最佳可读性， 程序员们通常会避免每行代码超过 80 个字符串；

如果某条 JavaScript 语句不适合一整行，那么最佳换行位置是某个运算符之后：

document.getElementById("demo").innerHTML =
"Hello Kitty.";

您也可以在字符串中换行，通过一个反斜杠即可：

document.getElementById("demo").innerHTML = "Hello \
Kitty!";

\ 方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

document.getElementById("demo").innerHTML = "Hello" + 
"Kitty!";

4. 字符串可以是对象：

通常，JavaScript 字符串是原始值，通过字面方式创建：

但是字符串也可以通过关键词 new 定义为对象：

var x = "Bill";
var y = new String("Bill");

// typeof x 将返回 string
// typeof y 将返回 object

// (x == y) 为 true，因为 x 和 y 的值相等
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

注：一般不将字符串创建为对象，它会拖慢执行速度；new 关键字使代码复杂化，也可能产生一些意想不到的结果；

5. 字符串方法和属性：

原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）；

但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象；

  • 字符串长度： length

    length属性返回字符串的长度：

    var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

  • 查找字符串中的字符串： indexOf()

    indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

    var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

    JavaScript 从零计算位置；

    0 是字符串中的第一个位置，1 是第二个，2 是第三个 …

    lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引；

    如果未找到文本，indexOf() 和 lastIndexOf() 均返回 -1;

    两种方法都接受作为检索起始位置的第二个参数：

    var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);

    lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点：

    var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);

  • 检索字符串中的字符串：search()

    search() 方法搜索特定值的字符串，并返回匹配的位置：

    var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

    注：search() 方法无法设置第二个开始位置参数；

  • 提取部分字符串

    • slice() 方法

      slice() 提取字符串的某个部分并在新字符串中返回被提取的部分；

      该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）；

      该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）；

      slice(start,end);

      这个例子裁剪字符串中位置 7 到位置 13 的片段：

      var str = "Apple, Banana, Mango";
var res = str.slice(7,13);   //Banana

      如果某个参数为负，则从字符串的结尾开始计数；

      这个例子裁剪字符串中位置 -12 到位置 -6 的片段：

      var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);   //Banana

      如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

      或者从结尾计数：

      var str = "Apple, Banana, Mango";
var res = str.slice(7);  //Banana, Mango

var res = str.slice(-13);   //Banana, Mango

    • substring() 方法

      substring() 类似于slice()；

      不同之处在于 substring() 无法接受负的索引；

      substring(start, end)

      如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

    • substr() 方法

      substr() 类似于slice()；

      不同之处在于第二个参数规定被提取部分的长度；

      如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分；

      如果首个参数为负，则从字符串的结尾计算位置；

      第二个参数不能为负，因为它定义的是长度；

      substr(start, length

  • 替换字符串内容：replace()

    replace() 方法用另一个值替换在字符串中指定的值：

    replace() 方法不会改变调用它的字符串、它返回的是新字符串；

    默认地，replace() 只替换首个匹配：

    默认地，replace() 对大小写敏感；

    如需执行大小写不敏感的替换，请使用正则表达式/i（大小写不敏感）：

    str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

    如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

    str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

  • 转换为大写和小写

    • toUpperCase() 方法

      通过 toUpperCase() 把字符串转换为大写：

      var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

    • toLowerCase() 方法

      通过 toLowerCase() 把字符串转换为小写：

      var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1

  • 连接字符串：contact()

    concat() 连接两个或多个字符串：

    concat() 方法可用于代替加运算符。下面两行是等效的：

    var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

  • 删除字符串两端的空白符：trim()

    trim() 方法删除字符串两端的空白符：

    var str = "       Hello World!        ";
alert(str.trim());

    Internet Explorer 8 或更低版本不支持 trim() 方法；

    如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替；

  • 提取字符串字符

    • charAt() 方法

      charAt() 方法返回字符串中指定下标（位置）的字符串：

      var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

    • charCodeAt() 方法

      charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

      var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

  • 把字符串转换为数组：split()

    可以通过 split() 将字符串转换为数组：

    //分隔符：
var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

//如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
//如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：
var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

注：

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

3.8 数字

JavaScript 只有一种数值类型。

书写数值时带不带小数点均可。

1. JavaScript 数值始终是 64 位的浮点数

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等；

JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准；

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

2. 精度

整数（不使用指数或科学计数法）会被精确到 15 位；

var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

使用乘除法有助于解决上面的问题：

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

3. NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

不过，假如字符串包含数值，则结果将是数：

var x = 100 / "10";     // x 将是 10

可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：

var x = 100 / "Apple";
isNaN(x);               // 返回 true，因为 x 不是数

但是，NaN 类型是数：

typeof NaN;             // 返回 "number"

4. Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

除以 0（零）也会生成 Infinity：

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

Infinity也是数：

typeof Infinity;        // 返回 "number"

5. 数值方法

原始值（比如 3.14 或 2016），无法拥有属性和方法（因为它们不是对象）；

但是通过 JavaScript，方法和属性也可用于原始值，因为 JavaScript 在执行方法和属性时将原始值视作对象；

  • toString() 方法：

    toString() 以字符串返回数值；

    所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

    var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

  • toExponential() 方法：

    toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字；

    参数定义小数点后的字符数：

    var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

    该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

  • toFixed() 方法：

    toFixed() 返回字符串值，它包含了指定位数小数的数字：

    var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

  • toPrecision() 方法：

    toPrecision() 返回字符串值，它包含了指定长度的数字：

    var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

  • valueOf() 方法：

    valueOf() 以数值返回数值：

    var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

  • 把变量转换为数值：

    这三种 JavaScript 方法可用于将变量转换为数字：

    • Number() 方法
    • parseInt() 方法
    • parseFloat() 方法

    这些方法并非数字方法，而是全局 JavaScript 方法；

    JavaScript 全局方法可用于所有 JavaScript 数据类型。

    这些是在处理数字时最相关的方法：

    方法描述
    Number()返回数字，由其参数转换而来。
    parseFloat()解析其参数并返回浮点数。
    parseInt()解析其参数并返回整数。

    • Number() 方法：

      Number() 可用于把 JavaScript 变量转换为数值：

      x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1578226105206
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN  如果无法转换数字，则返回 NaN

    • parseInt() 方法：

      parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

      parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN  如果无法转换为数值，则返回 NaN

    • parseFloat() 方法：

      parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

      parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN    如果无法转换为数值，则返回 NaN

  • 数值属性

    属性描述
    MAX_VALUE返回 JavaScript 中可能的最大数。
    MIN_VALUE返回 JavaScript 中可能的最小数。
    NEGATIVE_INFINITY表示负的无穷大（溢出返回）。
    NaN表示非数字值（“Not-a-Number”）。
    POSITIVE_INFINITY表示无穷大（溢出返回）。
    // MAX_VALUE 返回 JavaScript 中可能的最大数字。
var x = Number.MAX_VALUE;  //1.7976931348623157e+308

//MIN_VALUE 返回 JavaScript 中可能的最小数字。
var x = Number.MIN_VALUE;   //5e-324

//溢出时返回 POSITIVE_INFINITY：
var x = 1 / 0;   //Infinity

//溢出时返回 NEGATIVE_INFINITY：
var x = -1 / 0;   //-Infinity

3.9 数组

JavaScript 数组用于在单一变量中存储多个值。

1. 什么是数组

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值；

2. 创建数组

使用数组文本是创建 JavaScript 数组最简单的方法；

var array-name = [item1, item2, ...];
                  
var cars = ["Saab", "Volvo", "BMW"];

//空格和折行并不重要。声明可横跨多行：  
//建议使用
var cars = [
    "Saab",
    "Volvo",
    "BMW"
];


//使用 JavaScript 关键词 new
var cars = new Array("Saab", "Volvo", "BMW");

3. 访问数组元素

我们通过引用索引号（下标号）来引用某个数组元素；

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

4. 改变数组元素

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

5. 访问完整数组

通过 JavaScript，可通过引用数组名来访问完整数组：

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

6. Length 属性

length 属性返回数组的长度（数组元素的数目）；

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

length 属性始终大于最高数组索引（下标）；

//访问第一个数组元素
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

//访问最后一个数组元素
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

7. 遍历数组元素

  • 遍历数组的最安全方法是使用 “for” 循环：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组遍历</title>
    <style>
        div{
            border: 1px red solid;
            background: pink;
            width: 400px;
        }
    </style>
</head>

<body>
<div>
    <h2>JavaScript 数组遍历--for 循环</h2>
    <p id="demo"></p>
</div>

<script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var text = "";
    for (var i = 0; i < fruits.length; i++) {
       text += fruits[i] + "\n";
    }
    document.getElementById('demo').innerHTML = text;
</script>
</body>

</html>

    结果：
    在这里插入图片描述

8. 数组和对象的区别

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

数组是特殊类型的对象，具有数字索引。

如果希望元素名为字符串（文本）则应该使用对象。

如果希望元素名为数字则应该使用数组。

9. 数组方法

  • toString()

    JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
//Banana,Orange,Apple,Mango

    join() 方法也可将所有数组元素结合为一个字符串。

    它的行为类似 toString()，但是还可以规定分隔符：

    var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(","); 
//Banana,Orange,Apple,Mango

  • Popping()、Pushing()

    在处理数组时，删除元素和添加新元素是很简单的；

    Popping 和 Pushing 指的是：

    从数组弹出项目，或向数组推入项目；

    //Popping
//pop() 方法从数组中删除最后一个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
//pop() 方法返回“被弹出”的值：
var x = fruits.pop();      // x 的值是 "Mango"

//Pushing
//push() 方法（在数组结尾处）向数组添加一个新的元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

//push() 方法返回新数组的长度：
var x =  fruits.push("Kiwi");   //  x 的值是 5

  • shfit()

    位移与弹出等同，但处理首个元素而不是最后一个；

    shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引；

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

    shift() 方法返回被“位移出”的字符串：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

    unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

    unshift() 方法返回新数组的长度：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

  • delete()

    既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

    使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之；

  • splice()

    splice() 方法可用于向数组添加新项：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

    第一个参数（2）定义了应添加新元素的位置（拼接）。

    第二个参数（0）定义应删除多少元素。

    其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

    splice() 方法返回一个包含已删除项的数组：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

10. 数组排序

sort() 方法是最强大的数组方法之一。

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

11. 反转数组

reverse() 方法反转数组中的元素。

可以使用它以降序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

12. 查找数组最值

  • 对数组使用 Math.max()

    可以使用 Math.max.apply 来查找数组中的最高值：

    function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

  • 对数组使用 Math.min()

    可以使用 Math.min.apply 来查找数组中的最低值：

    function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

  • 自制 Max 方法：

    function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

  • 自制 Min 方法：

    function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}

3.10 日期

1. 创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

  • new Date()
  • new Date(year, month, day, hours, minutes, seconds, milliseconds)
  • new Date(milliseconds)
  • new Date(date string)

new Date()

new Date() 用当前日期和时间创建新的日期对象：

var d = new Date();//Mon Jan 06 2020 09:12:23 GMT+0800 (中国标准时间)

日期对象是静态的。

new Date(year, month, day, …)

new Date(year, month, ...) 用指定日期和时间创建新的日期对象。

7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：

var d = new Date(2020, 0, 06, 09, 12, 23, 0);
//Mon Jan 06 2020 09:12:23 GMT+0800 (中国标准时间)

JavaScript 从 0 到 11 计算月份：一月是 0。十二月是11。

参数只有 6 个：年、月、日、小时、分钟、秒；

参数只有 5 个：年、月、日、小时、分钟；

参数只有 4 个：年、月、日、小时；

参数只有 3 个：年、月、日；

参数只有 2 个：年、月；

参数只有1 个：毫秒；

new Date(dateString)

new Date(dateString) 从日期字符串创建一个新的日期对象：

var d = new Date("January 06, 2020 09:22:21");
//Mon Jan 06 2020 09:22:21 GMT+0800 (中国标准时间)

new Date(milliseconds)

JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。

零时间是 1970 年 1 月 1 日 00:00:00 UTC。

现在的时间是：1970 年 1 月 1 日之后的 1578273916021 毫秒。

new Date(milliseconds) 创建一个零时加毫秒的新日期对象：

var d = new Date(0);  //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

一天（24 小时）是 86 400 000 毫秒。

2. 日期方法

创建 Date 对象时，可以使用许多方法对其进行操作。

日期方法允许您使用本地时间或 UTC（通用或 GMT）时间来获取和设置日期对象的年、月、日、小时、分钟、秒和毫秒；

显示日期

JavaScript（默认情况下）将以全文本字符串格式输出日期：

Mon Jan 06 2020 09:30:42 GMT+0800 (中国标准时间)

在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串；

d = new Date();
document.getElementById("demo").innerHTML = d;
//等同于
d = new Date();
document.getElementById("demo").innerHTML = d.toString();

toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）；

var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
//Mon, 06 Jan 2020 01:32:11 GMT

toDateString() 方法将日期转换为更易读的格式：

var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
//Mon Jan 06 2020

日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法描述
getDate()以数值返回天（1-31）
getDay()以数值获取周名（0-6）
getFullYear()获取四位的年（yyyy）
getHours()获取小时（0-23）
getMilliseconds()获取毫秒（0-999）
getMinutes()获取分（0-59）
getMonth()获取月（0-11）
getSeconds()获取秒（0-59）
getTime()获取时间（从 1970 年 1 月 1 日至今）

getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数：

var d = new Date();
document.getElementById("demo").innerHTML = d.getTime(); //1578274609305

getFullYear() 方法以四位数字形式返回日期年份：

var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear(); //2020

getMonth() 以数字（0-11）返回日期的月份：

var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth() + 1;  //1
//要获得正确的月份，您必须添加 1：

getDate() 方法以数字（1-31）返回日期的日：

var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();	//6

getHours() 方法以数字（0-23）返回日期的小时数：

var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();  //9

getMinutes() 方法以数字（0-59）返回日期的分钟数：

var d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes(); //40

getSeconds() 方法以数字（0-59）返回日期的秒数：

var d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();  //16

getMilliseconds() 方法以数字（0-999）返回日期的毫秒数：

var d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();   //837

getDay() 方法以数字（0-6）返回日期的星期名（weekday）：

var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();		//1

在 JavaScript 中，一周的第一天（0）表示“星期日”，即使世界上的一些国家认为周的第一天是“星期一”。

可以使用名称数组，并使用 getDay() 将星期名作为名称返回：

var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];	//Monday

UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates）：

方法描述
getUTCDate()等于 getDate()，但返回 UTC 日期
getUTCDay()等于 getDay()，但返回 UTC 日
getUTCFullYear()等于 getFullYear()，但返回 UTC 年
getUTCHours()等于 getHours()，但返回 UTC 小时
getUTCMilliseconds()等于 getMilliseconds()，但返回 UTC 毫秒
getUTCMinutes()等于 getMinutes()，但返回 UTC 分
getUTCMonth()等于 getMonth()，但返回 UTC 月
getUTCSeconds()等于 getSeconds()，但返回 UTC 秒

日期设置方法

设置方法用于设置日期的某个部分。下面是最常用的方法（按照字母顺序排序）：

方法描述
setDate()以数值（1-31）设置日
setFullYear()设置年（可选月和日）
setHours()设置小时（0-23）
setMilliseconds()设置毫秒（0-999）
setMinutes()设置分（0-59）
setMonth()设置月（0-11）
setSeconds()设置秒（0-59）
setTime()设置时间（从 1970 年 1 月 1 日至今的毫秒数）

setFullYear() 方法设置日期对象的年份：

var d = new Date();
d.setFullYear(2022);
document.getElementById("demo").innerHTML = d;
//Thu Jan 06 2022 09:47:03 GMT+0800 (中国标准时间)

setFullYear() 方法可以选择设置月和日：

var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
//Thu Dec 03 2020 09:47:49 GMT+0800 (中国标准时间)

setMonth() 方法设置日期对象的月份（0-11）：

var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
//Sun Dec 06 2020 09:48:27 GMT+0800 (中国标准时间)

setDate() 方法设置日期对象的日（1-31）：

var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
//Wed Jan 15 2020 09:49:02 GMT+0800 (中国标准时间)

setDate() 方法也可用于将天数添加到日期：

var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
//Tue Feb 25 2020 09:49:45 GMT+0800 (中国标准时间)

setHours() 方法设置日期对象的小时（0-23）：

var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
//Mon Jan 06 2020 22:50:22 GMT+0800 (中国标准时间)

setMinutes() 方法设置日期对象的分钟（0-59）：

var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
//Mon Jan 06 2020 09:30:57 GMT+0800 (中国标准时间)

setSeconds() 方法设置日期对象的秒数（0-59）：

var d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
//Mon Jan 06 2020 09:51:30 GMT+0800 (中国标准时间)

3.11 数学

1. Math 属性

属性描述
Math.E返回欧拉指数（Euler’s number）
Math.PI返回圆周率（PI）
Math.SQRT2返回 2 的平方根
Math.SQRT1_2返回 1/2 的平方根
Math.LN2返回 2 的自然对数
Math.LN10返回 10 的自然对数
Math.LOG2E返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E返回以 10 为底的 e 的对数（约等于0.434）

2. Math 方法

方法描述
abs(x)返回 x 的绝对值
acos(x)返回 x 的反余弦值，以弧度计
asin(x)返回 x 的反正弦值，以弧度计
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)返回从 x 轴到点 (x,y) 的角度
ceil(x)对 x 进行上舍入
cos(x)返回 x 的余弦
exp(x)返回 Ex 的值
floor(x)对 x 进行下舍入
log(x)返回 x 的自然对数（底为e）
max(x,y,z,…,n)返回最高值
min(x,y,z,…,n)返回最低值
pow(x,y)返回 x 的 y 次幂
random()返回 0 ~ 1 之间的随机数
round(x)把 x 四舍五入为最接近的整数
sin(x)返回 x（x 以角度计）的正弦
sqrt(x)返回 x 的平方根
tan(x)返回角的正切

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

document.getElementById("demo").innerHTML = Math.round(6.8);	// 返回 7
document.getElementById("demo").innerHTML = Math.round(2.3);	// 返回 2

Math.pow(x, y) 的返回值是 x 的 y 次幂：

document.getElementById("demo").innerHTML = Math.pow(8,2);   //64

Math.sqrt(x) 返回 x 的平方根：

document.getElementById("demo").innerHTML = Math.sqrt(64);   //8

Math.abs(x) 返回 x 的绝对（正）值：

document.getElementById("demo").innerHTML = Math.abs(-4.7));   //4.7

Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

document.getElementById("demo").innerHTML = Math.ceil(6.4);   //7

Math.floor(x) 返回 x 上舍入最接近的整数：

document.getElementById("demo").innerHTML = Math.floor(2.7);   //2

Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）：

document.getElementById("demo").innerHTML = Math.sin(90 * Math.PI / 180);   //1

Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）：

document.getElementById("demo").innerHTML =  Math.cos(0 * Math.PI / 180);   //1

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

document.getElementById("demo").innerHTML =
Math.max(0, 150, 30, 20, -8, -200);   //150

document.getElementById("demo").innerHTML =
Math.min(0, 150, 30, 20, -8, -200);		//-200

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：

document.getElementById("demo").innerHTML = Math.random();  //0.15763546243426818

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

返回 0 至 9 之间的数：

document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);  //2

返回 0 至 10 之间的数：

document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 11);  //5

返回 1 至 10 之间的数：

document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10) + 1;  //7

3.12 条件语句

条件语句用于基于不同条件执行不同的动作。

在 JavaScript 中，我们可使用如下条件语句：

  • 使用 if 来规定要执行的代码块，如果指定条件为 true
  • 使用 else 来规定要执行的代码块，如果相同的条件为 false
  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false
  • 使用 switch 来规定多个被执行的备选代码块

if 语句

使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

if (条件) {
    如果条件为 true 时执行的代码
}

注：if 使用小写字母。大学字母（IF 或 If）会产生 JavaScript 错误。

else 语句

使用 else 语句来规定假如条件为 false 时的代码块。

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

else if 语句

使用 else if 来规定当首个条件为 false 时的新条件。

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <style>
        div {
            border: 1px solid red;
            background: pink;
            width: 400px;
        }

        h2, p {
            text-align: center;
        }
    </style>
</head>

<body>
<div>
    <h2>基于时间的问候语</h2>
    <button onclick="myFunction1()">Try</button>
    <p id="test"></p>
</div>

<script>
    function myFunction1() {
        var greeting;
        var time = new Date().getHours();
        if (time < 10) {
            greeting = "早安！";
        } else if (time < 20) {
            greeting = "日安！";
        } else {
            greeting = "晚安！"
        }

        document.getElementById('test').innerHTML = greeting;
    }
</script>
</body>

</html>

结果：
在这里插入图片描述
Switch 语句

使用 switch 语句来选择多个需被执行的代码块之一。

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}
  • 计算一次 switch 表达式
  • 把表达式的值与每个 case 的值进行对比
  • 如果存在匹配，则执行关联代码

break 关键字

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键字

default 关键词规定不存在 case 匹配时所运行的代码：

默认的 case 不必是 switch 代码块中最后一个 case：

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <style>
        div {
            border: 1px solid red;
            background: pink;
            width: 400px;
            height: 150px;
        }

        h2 , p{
            text-align: center;
        }

        button {
            float: right;
        }
    </style>
</head>

<body>
<div>
    <h2>今天是星期几？</h2>
    <button onclick="myFunction2()">Answer</button>
    <p id="demo01"></p>
</div>

<script>
    function myFunction2() {
        var day;
        var today = new Date().getDay();

        switch (today) {
            case 0:
                day = "星期天";
                break;
            case 1:
                day = "星期一";
                break;
            case 2:
                day = "星期二";
                break;
            case 3:
                day = "星期三";
                break;
            case 4:
                day = "星期四";
                break;
            case 5:
                day = "星期五";
                break;
            case 6:
                day = "星期六";
        }
        document.getElementById('demo01').innerHTML = day;
    }
</script>
</body>

</html>

结果：
在这里插入图片描述

3.13 循环语句

循环可多次执行代码块。

假如需要运行代码多次，且每次使用不同的值，那么循环（loop）相当方便使用。

通常我们会遇到使用数组的例子：

不需要这样写：

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

可以这样写：

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

不同类型的循环

JavaScript 支持不同类型的循环：

  • for - 多次遍历代码块
  • for/in - 遍历对象属性
  • while - 当指定条件为 true 时循环一段代码块
  • do/while - 当指定条件为 true 时循环一段代码块

For 循环

for 循环是在创建循环时经常使用的工具。

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}
  • 语句 1 在循环（代码块）开始之前执行。
  • 语句 2 定义运行循环（代码块）的条件。
  • 语句 3 会在循环（代码块）每次被执行后执行。
var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

/*
	结果如下：
		The number is 0
        The number is 1
        The number is 2
        The number is 3
        The number is 4
*/

For / In 循环

JavaScript for/in 语句遍历对象的属性

var txt = "";
var person = {fname:"Bill", lname:"Gates", age:62}; 
var x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;  //Bill Gates 62

While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

while (条件) {
    要执行的代码块
}

var text = "";
var i = 0;
while (i < 10) {
  text += "<br>数字是 " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;

/*
	结果如下：
		数字是 0
        数字是 1
        数字是 2
        数字是 3
        数字是 4
        数字是 5
        数字是 6
        数字是 7
        数字是 8
        数字是 9
*/

如果忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

Do / While 循环

do/while 循环是 while 循环的变体。

在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

do {
    要执行的代码块
}while (条件);

下面的例子使用了 do/while 循环。

该循环会执行至少一次，即使条件为 false，因为代码块会在条件测试之前执行：

var text = ""
var i = 0;

do {
  text += "<br>数字是 " + i;
  i++;
}while (i < 10);  

document.getElementById("demo").innerHTML = text;

/*
	结果如下：
		数字是 0
        数字是 1
        数字是 2
        数字是 3
        数字是 4
        数字是 5
        数字是 6
        数字是 7
        数字是 8
        数字是 9
*/

Break 语句

break语句可以用于跳出switch语句；

也可以用于跳出循环；

break 语句会中断循环，并继续执行循环之后的代码（如果有）：

var text = "";
var i;
for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

/*
结果是：
    数字是 0
    数字是 1
    数字是 2
*/

Continue 语句

continue 语句中断（循环中）的一个迭代，如果发生指定的条件。

然后继续循环中的下一个迭代。

var text = "";
var i;
for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

/*
结果是：
    数字是 0
    数字是 1
    数字是 2
    数字是 4
    数字是 5
    数字是 6
    数字是 7
    数字是 8
    数字是 9
*/

JavaScript 标签

如需标记 JavaScript 语句，请将标签名和冒号置于语句之前：

label:
statements

break 和 continue 语句是仅有的可“跳出”代码块的 JavaScript 语句。

break labelname;
continue labelname;

continue 语句（不论有无标签引用）只能用于跳过一个迭代（循环）。

break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。

如果有标签引用，则 break 语句可用于跳出任意代码块。

3.14 异常机制

错误总会发生！

当执行 JavaScript 代码时，会发生各种错误。

错误可能是程序员的编码错误，由错误输入引起的错误，或者由于其他不可预见的问题。

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

1. try 和 catch

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。

JavaScript 语句 try 和 catch 成对出现：

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

2. 抛出错误

当发生错误时，JavaScript 通常会停止并产生错误消息。

技术术语是这样描述的：JavaScript 将抛出异常（抛出错误）。

JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。

Error 对象属性

属性描述
name设置或返回错误名
message设置或返回错误消息（一条字符串）

Error Name Values

错误名描述
EvalError已在 eval() 函数中发生的错误
RangeError已发生超出数字范围的错误
ReferenceError已发生非法引用
SyntaxError已发生语法错误
TypeError已发生类型错误
URIError在 encodeURI() 中已发生的错误

3. throw 语句

throw 语句允许创建自定义错误。

从技术上讲是能够抛出异常（抛出错误）。

异常可以是 JavaScript 字符串、数字、布尔或对象：

throw "Too big";    // 抛出文本
throw 500;          //抛出数字

如果把 throw 与 try 和 catch 一同使用，就可以控制程序流并生成自定义错误消息。

4. finally 语句

finally 语句允许在 try 和 catch 之后执行代码，无论结果：

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 
finally {
     无论 try catch 结果如何都执行的代码块
}

3.15 严格模式

"use strict";定义 JavaScript 代码应该以“严格模式”执行。

"use strict" 指令

"use strict" 是 JavaScript 1.8.5 中的新指令（ECMAScript version 5）。

它不算一条语句，而是一段文字表达式，更早版本的 JavaScript 会忽略它。

"use strict"; 的作用是指示 JavaScript 代码应该以“严格模式”执行。

例如，在严格模式中，无法使用未声明的变量。

以下版本的浏览器支持严格模式：

  • 版本 10 以后的 IE
  • 版本 4 以后的 Firefox
  • 版本 13 以后的 Chrome
  • 版本 5.1 以后的 Safari
  • 版本 12 以后的 Opera

1. 声明严格模式

通过在脚本或函数的开头添加 "use strict";来声明严格模式。

在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）：

x = 3.14;       // 这不会引发错误
myFunction();

function  myFunction() {
	"use strict";  //局部声明
	 y = 3.14;   // 这会引发错误
}

2. 为什么使用严格模式

严格模式使我们更容易编写“安全的” JavaScript。

严格模式把之前可接受的“坏语法”转变为真实的错误。

举例来说，在普通的 JavaScript 中，错打变量名会创建新的全局变量。在严格模式中，此举将抛出错误，这样就不可能意外创建全局变量。

在普通 JavaScript 中，如果向不可写属性赋值，开发者不会得到任何错误反馈。

在严格模式中，向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误。

3. 严格模式中不允许的事项

  • 在不声明变量的情况下使用变量，是不允许的：

    "use strict";
x = 3.14;                // 这将引发错误

  • 在不声明对象（对象也是变量）的情况下使用对象也是不允许的：

    "use strict";
x = {p1:10, p2:20};      // 这将引发错误

  • 删除变量（或对象）是不允许的：

    "use strict";
var x = 3.14;
delete x;                // 这将引发错误

  • 删除函数是不允许的：

    "use strict";
function x(p1, p2) {}; 
delete x;                 // 这将引发错误

  • 重复参数名是不允许的：

    "use strict";
function x(p1, p1) {};   // 这将引发错误

  • 八进制数值文本是不允许的：

    "use strict";
var x = 010;             // 这将引发错误

  • 转义字符是不允许的：

    "use strict";
var x = \010;            // 这将引发错误

  • 写入只读属性是不允许的：

    "use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 这将引发错误

  • 写入只能获取的属性是不允许的：

    "use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 这将引发错误

  • 删除不可删除的属性是不允许的：

    "use strict";
delete Object.prototype; // 这将引发错误

  • 字符串 “eval” 不可用作变量：

    "use strict";
var eval = 3.14;         // 这将引发错误

  • 字符串 “arguments” 不可用作变量：

    "use strict";
var arguments = 3.14;    // 这将引发错误

4. 注

"use strict" 指令只能在脚本或函数的开头被识别。

3.16 this 关键字

1. this 是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

  • 在方法中，this 指的是所有者对象。
  • 单独的情况下，this 指的是全局对象。
  • 在函数中，this 指的是全局对象。
  • 在函数中，严格模式下，this 是 undefined。
  • 在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

2. 方法中的 this

在对象方法中，this 指的是此方法的“拥有者”。

在本例子中，this 指的是 person 对象。

person 对象是 fullName 方法的拥有者。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

3. 单独的this

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。

在浏览器窗口中，全局对象是 [object Window]：

var x = this;
document.getElementById("demo").innerHTML = x;   //[object Window]

在严格模式中，如果单独使用，那么 this 指的是全局对象 [object Window]：

"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;  //[object Window]

4. 函数中的 this（默认）

在 JavaScript 函数中，函数的拥有者默认绑定 this。

因此，在函数中，this 指的是全局对象 [object Window]。

document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;		//[object Window]
}

5. 函数中的 this（严格模式）

JavaScript 严格模式不允许默认绑定。

因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。

"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this; 		//undefined
}

6. 事件处理程序中的 this

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：

<button onclick="this.style.display='none'">单击来删除我！</button> 
//可在html中删除页面

3.17 Let 关键词

1. 全局作用域

全局（在函数之外）声明的变量拥有全局作用域；

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

全局变量可以在 JavaScript 程序中的任何位置访问。

2. 函数作用域

局部（函数内）声明的变量拥有函数作用域；

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

局部变量只能在它们被声明的函数内访问。

3. 块作用域

通过 var 关键词声明的变量没有块作用域；

在块 { } 内声明的变量可以从块之外进行访问；

{ 
  var x = 10; 
}
// 此处可以使用 x

可以使用 let 关键词声明拥有块作用域的变量。

在块 { } 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

4. 重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

5. 循环作用域

再循环中使用 var：重新声明了循环之外的变量

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

再循环中使用 let：并没有重新声明循环外的变量

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

6. 函数作用域

在函数内声明变量时，使用 var 和 let 很相似。

它们都有函数作用域：

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

7. 全局作用域

如果在快外声明， 那么 var 和 let 也很相似。

它们都拥有全局作用域：

var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

8. HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

var carName = "porsche";
// 此处的代码可使用 window.carName

通过 let 关键词定义的全局变量不属于 window 对象：

let carName = "porsche";
// 此处的代码不可使用 window.carName

9. 重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;
// 现在，x 为 10
 
var x = 6;
// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

10. 提升

通过 var 声明的变量会提升到顶端、可以在声明变量之前就使用它：

// 在此处，您可以使用 carName
var carName;

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError。

变量从块的开头一直处于“暂时死区”，直到声明为止：

// 在此处，您不可以使用 carName
let carName;

3.18 Const 关键词

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

1. 在声明时赋值

JavaScript const 变量必须在声明时赋值：

//不正确
const PI;
PI = 3.14159265359;

//正确
const PI = 3.14159265359;

2. 不是真正的常数

关键字 const 有一定的误导性。

它没有定义常量值。它定义了对值的常量引用。

因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

3. 原始值

如果我们将一个原始值赋给常量，我们就不能改变原始值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

4. 常量对相关可以更改

// 可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 可以更改属性：
car.color = "White";

// 可以添加属性：
car.owner = "Bill";

注：但是无法重新为常量对象赋值：

const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

5. 常量数组可以更改

// 可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 可以更改元素：
cars[0] = "Honda";

// 可以添加元素：
cars.push("Volvo");

注：但是无法重新为常量数组赋值；

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

6. 重新声明

在程序中的任何位置都允许重新声明 JavaScript var 变量：

var x = 2;    //  允许
var x = 3;    //  允许
x = 4;        //  允许

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的：

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

7. 提升

通过 const 定义的变量不会被提升到顶端。

const 变量不能在声明之前使用：

carName = "Volvo";    // 您不可以在此处使用 carName
const carName = "Volvo";
S_numb
关注
专栏目录
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
javascript基础知识6~10
qq_41995845的博客
09-15 310
6、JavaScript 变量 JavaScript 变量是存储数据值的容器。 在本例中，x、y 和 z 是变量： 实例 var x = 7; var y = 8; var z = x + y; 亲自试一试 从上例中，您可获得： x 存储值 7 y 存储值 8 z 存储值 15 类似代数 在本例中，price1、price2 以及 total 是变量： 实例 var price1 = 7; var price2 = 8; var price3 = 12; var total = price1 + pri
JavaScript 知识总结
flow
08-29 597
生僻概念与规范 JavaScript 是属于 HTML 和 Web 的编程语言。 为何学习 JavaScript？ JavaScript 是 web 开发者必学的三种语言之一： HTML定义网页的内容 CSS规定网页的布局 JavaScript对网页行为进行编程 提示：JavaScript 同时接受双引号和单引号： JavaScript 能够改变 HTML 内容 JavaScript 能够改变 HTML 属性 JavaScript 能够改变 HTML 样式 (CSS) 改变 HTM...
javascript
小海洋的专栏
07-27 378
1.      HTML 中的脚本必须位于 与 标签之间。脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。脚本可被放置在 HTML 页面的 和 部分中。 2.      那些老旧的实例可能会在 标签中使用 type="text/javascript"。现在已经不必
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 2万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 6140
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3167
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
JavaScript基础入门
dangfulin的博客
08-21 5804
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
如何判断应该设计类、子类、抽象类或接口？
最新发布
S_numb的博客
07-27 807
来源：《Head First Java》第二版：227 页。
JavaScript - BOM
S_numb的博客
01-09 722
这篇文章参考内容分为两部分： 西部开源-秦疆老师； https://www.w3school.com.cn/h.asp； 文章目录BOM1.1 JS Window1.2 JS Screen1.3 JS Location1.4 JS History1.5 JS Navigator1.6 JS 弹出框1.7 JS Timing1.8 JS Cookies BOM JavaScript Wi...
Day22——HTML
S_numb的博客
12-17 683
文章目录HTML一、 关于 html 那些事1. 为什么要学 html？2. 什么是 html？3. 发展史4. 优势5. W3C 标准6. 学习 html 要达到的方法和目标7. 第一个 HTML 案例二、HTML 的基础知识1. HTML 的基本结构1.1 HTML 头部元素1.1.1 title 标签1.1.2 base 标签1.1.3 Link 标签1.1.4 style 标签1.1.5 ...
MySQL - 初识及安装
S_numb的博客
01-12 662
这篇文章参考内容分为两部分： 西部开源-秦疆老师； http://c.biancheng.net/view/2413.html； 文章目录MySQL1. 初始 MySQL1.1 MySQL 是什么？1.2 数据存储方式1.3 什么是数据库1.4 数据可的存储结构1.5 数据库在开发中的作用1.6 数据库系统1.7 了解 SQL 语言1.8 数据库访问技术1.9 MySQL 的优势1.10 ...
MySQL
S_numb的博客
01-29 657
文章目录1. 操作数据库1.1 创建数据库1.2 查看数据库1.3 修改数据库1.4 删除数据库1.5 使用数据库2. MySQL 存储引擎2.1 什么是存储引擎2.2 MySQL 5.7 支持的存储引擎2.3 如何选择 MySQL 存储引擎3. MySQL 常见数据类型3.1 整数类型3.2 小数类型3.3 日期/时间类型3.4 字符串类型4. 数据库的字段属性5.操作数据库表5.1 创建数据库...
MyBatis
S_numb的博客
02-19 644
文章目录1. MyBatis 简介1.1 什么是 MyBatis1.2 如何安装 MyBatis1.3 MyBatis 的功能架构1.4 MyBatis 的优缺点2. 快速入门2.1 引入依赖2.2 核心配置文件2.3 编写工具类操作数据库2.4 配置实体类2.5 持久层接口2.6 使用配置文件编写 SQL2.7 测试2.8 目录结构2.8 MyBatis 使用总结 1. MyBatis 简介 1...
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值