[JavaScript你真的以为这么简单吗]JavaScript高级
✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！ 个人主页：Philosophy7的csdn博客
系列专栏： 哲学语录: 承认自己的无知，乃是开启智慧的大门
如果觉得博主的文章还不错的话，请点赞+收藏⭐️+留言支持一下博>主哦
⭐学习目标:
-掌握script标签的具体用法
-理解行内脚本与外部脚本的区别
-理解文档模式对JavaScript的影响
-ECMAScript的语法
文章目录
- 一、JavaScript初体验
-
- 1、script元素
-
- 1.1 标签位置
- 1.2 废弃的语法
- 2.行内代码与外部文件
- 3.文档模式
- 4.小结
- 二、ECMAScript语法
-
- 1、语法
-
- 1.1、区分大小写
- 1.2、标识符
- 1.3、注释
- 1.4、严格模式
- 1.5、语句
- 1.6、关键字与保留字
- 2、变量
-
- 2.1、var关键字作用域
- 2.2、let关键字
- 2.3、const关键字
- 3、数据类型
-
- 3.1、深入字符串
-
- 字符串的特点:
- 字符出的转换:
- 字符串的字面量
- 3.2、Symbol 类型(了解即可)
- 3.3、Object类型
- 4.运算符
-
- 1.算数运算符
-
- 减法
- 乘法
- 除法
- 取余
- 2.赋值运算符
- 5.语句
-
- 1.if语句
- 2.do-while
- 3.while
- 4.for
- 5.for-in
- 6.break-continue语句
- 7.switch
![[JavaScript你真的以为这么简单吗]JavaScript高级_第1张图片](http://img.e-com-net.com/image/info8/6f0deddf91e344b487383fe41bd2236e.jpg)
一、JavaScript初体验
1、script元素
在HTML中插入JavaScript，我们使用的是script标签。这个元素是被网景公司创造出来的，并最早在Netscape Navigator 2 中实现的。后来，这个元素被正式加入到 HTML 规范。script元素有下列八个属性，分别为:
- async : 可选。表示立即下载脚本，但不阻止其他页面的效果。只对外部脚本有效
- charset : 可选。使用src属性指定的代码字符集。不常用，因为大多数浏览器不在乎。
- crossorigin : 配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。
- language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2” 或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
- src：可选。表示包含要执行的代码的外部文件。
- type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯 例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript" 都已经废弃了。
使用JavaScript方式有两种:
HTML中直接使用
外部引入
使用 src 属性。这个属性的值是一个 URL，指向包含 JavaScript 代码的文件，比如：下面的例子
这个例子在页面中加载了demo.js
注意:
使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
<body>
<script>
//内部使用script
alert("Hello World")
</script>
<!--2.外部引入Js文件-->
<script src="demo.js"/>
</body>
Js文件
document.write("Hello Alert")
浏览器的执行流程:
在有多个script标签时，浏览器会依照从上到下的顺序去解释并执行它们，前提是没有defer和async属性。
1.1 标签位置
我们可以看到有的script标签被放在head标签内，如下:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JS初体验</title>
<script src="demo.js"></script>
<script src="demo.js"></script>
</head>
<body>
<script>
//内部使用script
alert("Hello World")
</script>
<!--2.外部引入Js文件-->
<script src="demo.js"/>
</body>
</html>
为什么这样做呢：
主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。
不过，把所有 JavaScript 文件都放在里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲 染页面（页面在浏览器解析到的起始标签时开始渲染）。
对于需要很多 JavaScript 的页面，这会 导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。
为了解决这个问题，我们将script引用到了body标签内，这就表示浏览器在解释JS代码之前就完全渲染了整个页面。
1.2 废弃的语法
自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。
type 属性使用 一个 MIME 类型字符串来标识
script的内容 但 MIME 类型并没有跨浏览器标准化。即使浏览器默 认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行） 相关代码。
在最初采用 script 元素时，它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应 用特殊的解析规则，而这在不支持 JavaScript 的浏览器（特别是 Mosaic）中会导致问题。不支持的浏览器会把script元素的内容输出到页面中
Netscape 联合 Mosaic 拿出了一个解决方案，对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代 码。最终方案是把脚本代码包含在一个 HTML 注释中
2.行内代码与外部文件
可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代 码放在外部文件中
使用外部文件的好处:
- 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存 所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑 代码。
- 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都 用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快
- 适应未来。通过把 JavaScript 放到外部文件中，包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。
在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中， 预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。
3.文档模式
IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。
最初的文档模式有两种：混杂 模式（quirks mode）和标准模式（standards mode）。
前者让 IE 像 IE5 一样（支持一些非标准的特性）， 后者让 IE 具有兼容标准的行为。
虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对 JavaScript 也有一些关联影响，或称为副作用。
4.小结
- 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同 一台服务器上，也可以位于完全不同的域
- 所有script元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的 情况下，包含在script元素中的代码必须严格按次序解释
- 对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码,才能继续渲染页面
![[JavaScript你真的以为这么简单吗]JavaScript高级_第2张图片](http://img.e-com-net.com/image/info8/0086647bdfc04e62a0973a0c8fba734b.jpg)
二、ECMAScript语法
1、语法
ECMAScript很大程度上借鉴了Java中的语法，熟悉Java的小伙伴应该学习起来会非常的容易，并且熟悉，
而且JavaScript是一门弱类型语言，也就意味着语法的约束倒没有那么严格，可以轻松的掌握。
1.1、区分大小写
ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。
换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因
为它是一个关键字（后面会介绍）。但 Typeof 是一个完全有效的函数名。
<script>
//这是两个不同的变量名
var test = 1;
var Test = 2;
</script>
1.2、标识符
所谓标识符，就是变量、函数、属性或函数参数的名称。标识符的规则:
- 第一个字符必须是字母、下划线_ 或者美元符号($)
- 剩下的字母可以是数字、字母、美元符号下划线
按照我们熟悉的方式，ECMAScript标识符也使用了驼峰命名的规则，即第一个单词首字母小写，后面的每个单词首字母大写。
例如:
- firstName
- selectStudent
- myMoney
虽然这些不做强制要求，但是为了增加我们代码的可读性，还是建议如此的去命名。
关键字、保留字、布尔类型、null不能作为标识符
1.3、注释
ECMAScript和Java中的注释一致
<script>
//这是单行注释 双斜杠
/*
这是多行注释
*/
</script>
1.4、严格模式
ECMAScript 5 增加了严格模式（strict mode）的概念。严格模式是一种不同的 JavaScript 解析和执
行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。
<script>
//在开头就采用严格模式
"use strict"
//这是两个不同的变量名
var test = 1;
var Test = 2;
</script>
1.5、语句
ECMAScript 中的语句以分号结尾。
加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。
加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。
<script>
var a = 10 //没有分号 不报错 但不推荐
var b = 5; //推荐加上分号
</script>
1.6、关键字与保留字
这些关键字，有着独特的作用，因此，按照规定关键字和保留字不能作为标识符或属性名。
有关键字如下:
| break | do | in | typeof |
|---|---|---|---|
| case | else | instanceof | var |
| catch | export | new | void |
| class | extends | return | whild |
| const | finally | super | with |
| continue | for | switch | yield |
| debugger | function | this | throw |
2、变量
ECMAScript 变量是松散类型的，意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。
有 3 个关键字可以声明变量：var、const 和 let。
其中，var 在ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript 6 及更晚的版本中使用。
<script>
//1.定义变量的语法: var 变量名 = 初始化值;
var name = "张三";
//注意:在我们不初始化的时候，值会显示undefined
var age;
alert(age)
</script>
2.1、var关键字作用域
定义变量格式: var 变量名 = 初始化值
<script>
//1.定义一个函数
function test(){
//在函数内部使用var修饰变量，意味着该变量会在函数退出时被销毁。
var a = 10; //局部变量
}
test();
consolo.log(a) //打印到控制台 报错:Uncaught ReferenceError: consolo is not defined
</script>
当我们省略var关键字在函数内部定义变量，这个变量就是全局变量
去掉之前的var关键字定义变量，然后调用一次test()方法 我们就可以访问到变量a中的值了；
注意: 虽然通过省略var操作符定义全局变量，但不推荐这么操作。
因为在严格模式下，像这样没有初始化值，就会抛出异常 ReferenceError: a is not defined
<script> //严格模式 "use strict" //1.变量a a; console.log(a) </script>
2.2、let关键字
let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域， 而 var 声明的范围是函数作用域。
下面演示区别:
使用let修饰的变量age不能被if块外部访问，因为它的作用域仅限于内部。块作用域属于函数作用域的子集，因此适用于var的作用域限制同样也适用于let。
简单来说就是:
自上向下，可兼容，自下向上不可能。
<script>
if (true){
var name = "张三";
document.write(name) //张三
}
document.write(name) //张三
if (true){
//let修饰
let age = 20;
document.write(age) //20
}
document.write(age) //没有访问到age
</script>
2.3、const关键字
const 的行为与 let 基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const 声明的变量会导致运行时
错误。
<script>
const age = 26;
age = 36; //TypeError
//不允许重复声明
const name = "s";
const name = "zhangsan"; // Identifier 'name' has already been declared
//const作用域也是块
if (true){
const a = 10;
}
console.log(a) //无法访问到变量a并抛出异常
</script>
3、数据类型
ECMA中的数据类型有6种,分别为:
- undefined : 值未定义的
- Null : 表示空
- Boolean : 布尔值，true false
- Number : 数值
- String : 字符串
- Symbol : 值是符号
注意:
undefined
即使未初始化的变量会被自动赋予 undefined 值，但我们仍然建议在声明变量的 同时进行初始化。这样，当 typeof 返回"undefined"时，你就会知道那是因为给定的变 量尚未声明，而不是声明了但未初始化。
数值转换:
3 个函数可以将非数值转换为数值：
Number()、parseInt()和 parseFloat()。后两个函数主要用于将字符串转换为数值。
- Number()函数基于如下规则转换:
- 布尔值 ture == 1 false == 2
- null 返回 0
- undifined 返回 NaN
- 字符串的规则较多:
- 如果字符串包含数值字符 包括数组前面带－号的情况，则 转换为十进制数字
- 如果是空字符串 则返回 0
- 如果字符串包含浮点数值 则会转换为响应的浮点数
- 如果字符串是一个十六进制的格式 就会转换为十进制整数值
- 如果上述情况都不存在 则返回NaN
<script> var flag = true //true == 1 false == 2 document.write(Number(flag)) var num = 10; //数值直接返回 document.write(Number(num) + "") var age; //undefined 返回 NaN document.write(Number(age)) //返回NaN </script>
<script>
//1.使用typeof 检查数据类型
var a = "张三";
document.write(typeof(a)) //string
document.write(typeof 30) //number
//2.演示undefined
let b;
document.write(b + "")
//未声明变量的时候也会检测出undefined
document.write(typeof num1)
//3.Null 表示空对象指针
var car = null;
document.write(typeof car) //返回的是一个对象object
//4.Boolean
var flag = true
//5.Number -- 有趣的数据类型
var num1 = 10; //整数
var num2 = 0xA; //十六进制10
/*
存储浮点值使用的内存空间是存储整数值的两倍，
所以 ECMAScript 总是想方设法把值转换为整数。
*/
var num3 = 1.1; //浮点值
var num4 = .1; //有效 但不推荐
/*
值的范围:
内存是有限制的，ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE
最大数值 Number.MAX_VALUE
*/
var result = Number.MIN_VALUE + Number.MAX_VALUE
document.write(result) //1.7976931348623157e+308
//NaN not a number 不是一个数字
document.write(0/0) //如果分子或分母为0 就会返回NAN
//String 字符串
var name2 = "法外狂徒张三";
</script>
3.1、深入字符串
字符串的特点:
不可变的，一旦创建，它们的值就无法改变。要修改的话，必须销毁原来的字符串。
字符出的转换:
有两种方式把一个值转换为字符串。首先是使用几乎所有值都有的 toString()方法。这个方法唯 一的用途就是返回当前值的字符串等价物。比如：
<script>
var age = 20;
var newString = age.toString(); //字符串20
document.write(typeof(newString))
//除了null 和 undefined没有tostring方法其他数据类型都有
</script>
字符串的字面量
| 字面量 | 含义 |
|---|---|
| \n | 换行 |
| \t | 制表符 |
| \b | 退格 |
| \r | 回车 |
| \f | 换页 |
| \\ | \ 反斜杠 |
| ’ | 单引号 |
3.2、Symbol 类型(了解即可)
Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。
符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。
尽管听起来跟私有属性有点类似，但符号并不是为了提供私有属性的行为才增加的（尤其是因为 Object API 提供了方法，可以更方便地发现符号属性）。
相反，符号就是用来创建唯一记号，进而用作非 字符串形式的对象属性。
3.3、Object类型
在后续的对象会有更深的讲解，在这里介绍对象的基本用法，以及定义格式
<script>
//创建一个对象
var student = Object();
//如果没有参数的话 可以胜率括号
var student = Object;
</script>
每个Object实例都有如下属性和方法:
- constructor：用于创建当前对象的函数。在前面的例子中，这个属性的值就是 Object() 函数
- hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属 性。要检查的属性名必须是字符串（如 o.hasOwnProperty(“name”)）或符号。
- isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。（后续将详细介绍 原型。）
- propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用（本章稍后讨 论的）for-in 语句枚举。与 hasOwnProperty()一样，属性名必须是字符串。
- toLocaleString()：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。
- toString()：返回对象的字符串表示。
- valueOf()：返回对象对应的字符串、数值或布尔值表示。通常与 toString()的返回值相同。 因为在 ECMAScript 中 Object 是所有对象的基类，所以任何对象都有这些属性和方法。在接下来我们将介绍对象间的继承机制。
4.运算符
1.算数运算符
算数运算符用于对数字执行算数运算：
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 取模（余数） |
| ++ | 递加 |
| – | 递减 |
<script>
//加法运算
var a = 10;
var b = 5;
var result = a + b; //相加 -- 15
alert(result)
</script>
减法
<script>
//减法操作
var a = 10;
var b = 5;
var result = a - b; //相减 -- 5
</script>
乘法
<script>
//乘法操作
var a = 10;
var b = 5;
var result = a * b; //相乘 -- 50
</script>
除法
<script>
//除法操作
var a = 10;
var b = 5;
var result = a / b; //2
</script>
取余
<script>
//取余操作
var a = 10;
var b = 5;
var result = a % b; // 10 除以 5 == 商为2 余数为0 所以输出0
alert(result)
</script>
介绍完了算术运算的常用操作，在这介绍一下优先级。
在小学我们就知道加减乘除的优先级关系了 :
先乘除，后加减括号括起来的优先级是最高的
2.赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| <<= | x <<= y | x = x << y |
| >>= | x >>= y | x = x >> y |
| >>>= | x >>>= y | x = x >>> y |
| &= | x &= y | x = x & y |
| ^= | x ^= y | x = x ^ y |
| |= | x |= y | x = x | y |
| **= | x **= y | x = x ** y |
这里就不一一演示了，大家可以亲自去测试。
5.语句
ECMA-262 描述了一些语句（也称为流控制语句），而 ECMAScript 中的大部分语法都体现在语句中。
我们首先来看 ECMA 是什么。ECMA，读音类似“埃科妈”，是欧洲计算机制造商协会（European Computer Manufacturers Association）的简称，是一家国际性会员制度的信息和电信标准组织。
后面的-xxx数字 代表的就是ECMAScript采用的标准
1.if语句
条件判断语句，在我们的代码中会多次频繁的出现，现在就来介绍它们的语法以及基本使用。
定义格式:if (条件){
返回true 执行的代码块
}else{
返回false 执行的代码块
}
<script>
var a = 10;
var b = 20;
if (a > b){
document.write("确实大于B")
}else{
document.write("a 怎么能大于 B ?")
}
</script>
2.do-while
这是一种后测试语句，也就是说循环体中的代码执行完之后才会进行判断求值。
下述这个例子 只要a < 10 就会一直循环。 a从0开始 每次递增2
<script>
var a = 0
do {
a += 2
}while (a < 10);
</script>
3.while
有后测试语句，就有先测试语句，while就是先测试语句
<script>
var a = 0;
while (a < 10){
a += 2;
}
//每次循环递增2 只要a不小于10了 循环就结束了
</script>
4.for
for 语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式。
与Java中的for循环写法几乎保持一致。
<script>
for (var i = 0; i < 10; i++){
document.write(i + "")
}
</script>
5.for-in
这是一种严格迭代语句，用于枚举对象中。
//循环显示了BOM对象window里面的所有属性 每次都会给propName变量赋值 直到window对象所有属性遍历完之后 循环就结束了
for (const propName in window) {
document.write(propName);
}
6.break-continue语句
break语句用于立即退出循环，而continue语句也一样。但是continue会跳过本次循环 执行下一次的循环
<script>
for (var i = 0; i < 10; i++){
if (i == 5){
break;
}
document.write(i + "") //当 i = 5的时候 这个循环就终止了 被break语句所终止。
}
</script>
<script>
for (var i = 0; i < 10; i++){
if (i == 5){
continue;
}
document.write(i + "") //当 i = 5的时候 跳过本次循环，继续判断下一次是否满足条件
}
</script>
7.switch
switch语句跟if语句紧密相连。
基本语句如下:
<script>
var a = 10;
switch (a){
case 5:
console.log("5");
break;
case 10:
console.log("10");
break;
}
</script>