正文
JavaScript小记
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
JavaScript小记
1. 简介
1. 语言描述
1. 语言描述
JavaScript 是一门跨平台、面向对象的弱类型动态脚本编程语言
JavaScript 是一门基于原型、函数先行的语言
JavaScript 是一门多范式的语言，它支持面向对象程序设计、命令式编程以及函数式编程
其最初被创建的目的是“使网页更生动”
脚本被以纯文本的形式提供和执行；它们不需要特殊的准备，编译即可运行
2. 名称渊源
JavaScript 原型于 1995年4月 被在NetScape工作的布兰登•艾克 （Brendan Eich ; Moizlla/Brave浏览器创始人） 创造
诞生之初名为“LiveScript ”，后因推广搭上当时的编程热词“Java”，所以更名为 JavaScript
JavaScript 和 Java 除了语法上有一些类似，两者的应用领域以及后续的发展均无联系
语言标准化：
1997年6月，ECMA （European Computer Manufacturers Association 后更名 Ecma International） 以 JavaScript为语言基础
制定了 ECMAScript标准规范 ECMA-262, JavaScript 也成为了 ECMAScript 最著名的实现之一
3. 其它简介
随着 JavaScript不断发展，JavaScript 不仅可以在浏览器中执行，也可以在服务端执行（node.js），甚至可以在任意搭载 JavaScript 引擎的设备中执行
浏览器中嵌入了 JavaScript 引擎，有时也称作 “JavaScript 虚拟机”
不同的引擎有不同的 “代号”
- V8 ———— Chrome 和 Opera 中的 JavaScript 引擎
- SpiderMonkey ———— Firefox 中的 JavaScript 引擎
- Chakra ———— IE 中的 JavaScript 引擎
- ChakraCore ———— Microsoft Edge 中的 JavaScript 引擎
- Nitro 和 SquirrelFish ———— Safari 中的 JavaScript 引擎
引擎是如何工作的 ？
引擎很复杂，但是基本原理很简单
- 引擎（如果是浏览器，则引擎被嵌入其中）读取（“解析”）脚本
- 然后，引擎将脚本转化（“编译”）为机器语言
- 然后，机器代码快速执行
-
引擎会对流程中的每个阶段都进行优化；它甚至可以在编译的脚本运行时监视它
分析流经该脚本的数据，并根据获得的信息进一步优化机器代码
浏览器中的 JavaScript 能做什么？
现代的 JavaScript 是一种 “安全的” 编程语言；
它不提供对内存或 CPU 的底层访问；因为它最初是为浏览器创建的，不需要这些功能
浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情
- 在网页中添加新的 html ，修改网页已有的内容和网页的样式
- 响应用户的行为，响应鼠标的点击，指针的移动，按键的移动
- 向远程服务器发送网络请求，下载和上传文件（AJAX 和 COMT 技术）
- 获取或设置 cookie ，向访问者提供问题或发送消息
- 记住客户端的数据（“ 本地存储 ”）
浏览器中的 JavaScript 不能做什么 ？
为了用户的（信息）安全，在浏览器中的 JavaScript 的能力是受限的
目的是防止恶意网页获取用户私人信息或损害用户数据
-
网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件；它没有直接访问操作系统的功能
现代浏览器允许 JavaScript 做一些文件相关的操作，但这个操作是受限制的
仅当用户做出特定的行为，JavaScript 才能操作这个文件
例如： 用户把文件” 拖放“ 到浏览器中 或者通过
<input>标签选择了文件 -
不同的标签页/窗口之间通常互不了解
有时候，也会有一些联系
例如： 一个标签通过 JavaScript 打开的另一个标签页；但即使在这种情况下
如果两个标签页打开的不是同一个网站（URL中协议、域名或者端口任一不相同的网站），他们都不能相互通信
这就是所谓的 “ 同源策略 ” （同源策略仅适用于脚本）
为了解决“同源策略”问题，两个标签必须都包含一些处理这个问题的特定的 JavaScript 代码，并均允许数据交换
-
JavaScript 可以轻松的通过互联网与当前所在的服务器进行通信；但是从其他网站/域的服务器中接收数据的能力被削弱了
尽管可以，但需要来自远程服务器的明确协议（在 HTTP header 中）
倘若在浏览器外（例如在服务器上）使用 JavaScript，则不会存在此类限制
现代浏览器还允许安装可能会要求扩展权限的插件/扩展
JavaScript “上层” 语言
随着发展推进，JavaScript的语法无法满足所有人的需求，因此出现了很多新语言
这些语言在浏览器中执行之前，都会被 编译 （转化）成 JavaScript
此类语言诸如：CoffeeScript 、TypeScript 、Flow 、Dart 、Brython 等
2. 语法
1. JavaScript引入方式
1.内嵌
在 html 文档中可以放置任意数量的 JavaScript脚本
-
<head>中的 JavaScript脚本
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="段落被更改";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()"> 试一试</button>
</body>
</html>
-
<body>中的 JavaScript 脚本
<!DOCTYPE html>
<html>
<head>
<title>body中的JavaScript脚本</title>
<style type="text/css">
#Oliva{
color: blue;
font-family: serif;
font-style: italic;
}
</style>
</head>
<body>
<p id="Oliva">Oliva is a beautiful words!</p>
<script>
document.getElementById("Oliva").style.color= "gray";
document.getElementById("Oliva").style.fontFamily= "san-serif";
document.getElementById("Oliva").style.fontStyle= "oblique";
/*注意 italic与oblique的区别；italic指文本样式为斜体,而oblique是人为倾斜字体*/
/*通常把脚本置于<body>元素底部*/
</script>
</body>
</html>
2. 外联
当然也可通过完整的 URL 或相对于当前网页的路径引用外部脚本
<script src=“xxxxx”></script>
放在 head 和 body 都可以
-
完整的 URL 链接脚本
<!DOCTYPE html>
<html>
<head>
<title>一个椭圆</title>
<style type="text/css">
#oval{
width= 200px;
height= 100px;
border-width: 1px;
border-style: groove;
border-color: rgb(129,60,133);
border-radius: 40px/20px;
}
</style>
</head>
<body>
<div id="oval">Draw an oval</div>
<script src="https://github.com/Kuiperabxy/libertas/tree/main/oval.js">
/*通过完整的 URL 来链接至脚本*/
</script>
</body>
</html>
-
引入当前网站上指定文件夹中的脚本
<script src="/Kuiperabxy/libertas/tree/main/oval.js">
/*引入当前网站指定文件夹的脚本*/</script>
-
引入与当前页面相同文件夹的脚本
<div id="oval">Draw an oval</div>
<script src="oval.js"> /*引入当前网站相同文件夹的脚本*/</script>
<!--若需要引入多个JavaScript文件 需要多个script标签-->
外联的优势：
- 分离了 html 和 JavaScript 代码
- 使 html 和 JavaScript 更易于阅读和加载
- 已缓存的 JavaScript 文件可加速页面加载
2. JavaScript 输出方式
JavaScript 不提供任何内建的打印或显示函数
JavaScript 能够以不同的方式 “显示”数据：
-
使用 window.alert( ) 写入警告框
-
使用 document.write( ) 写入 html 输出 ( 仅用于测试 )
-
使用 innerHTML 写入html 元素 ( 更改 html 元素的 innerHTML 属性是在 html 中显示数据的常用方法 )
-
使用 console.log( ) 写入浏览器控制台
<!DOCTYPE html>
<html>
<head>
<title>JavaScript不同的输出方式</title>
</head>
<body>
<script>window.alert(2+8);</script>
<script>document.write(2+8);</script>
<p>更改 html 元素</p>
<p id="nua">改变的内容在这里</p>
<script>
document.getElemntById("nua").innerHTML="SiChuan University is best university in SiChuan!"
</script>
<script>console.log(2+8);</script>
</body>
</html>
3. JavaScript 基础语法
计算机程序是计算机“执行”的一系列的“指令”
在编程语言中，这些编程“指令“被称为语句
JavaScript 程序 就是一系列编程语句
1. JavaScript 语句构成
值 、 运算符 、 表达式 、 关键词 和 注释
2. JavaScript 值
JavaScript 语句定义两种类型的值： 混合值( 字面量值 literal ) 和 变量值 ( 变量 )
字符串属于字面量的一种；用双引号或者单引号包围
常量也属于字面量的一种
Javascript 变量
在编程语言中， 变量是 存储 数据值的容器
例如：
var x = 7; var y = 10;
(x 存储 7 ； y 存储 10)
类似代数
例如：
var total = x + y;
( total 也是一个变量，采用类似代数的方式表达)
3. JavaScript 表达式
表达式是值、变量和运算符的组合，计算结果是值
如：
6*10
、
“Bill” + “ ” + “Gates”
4. JavaScript 关键词
JavaScript 语句常常通过某个关键词来 标识 需要执行的 JavaScript 动作
-
附：JavaScript关键词
关键词 描述 break 终止 switch 循环 continue 跳出循环并在顶端开始 debugger 停止执行 JavaScript，并调用调试函数(若可用) do……while 执行语句块，并在条件为真时重复执行代码块 for 标记需要被执行的语句块，在条件为真的情况下 function 声明函数 if……else 标记需要被执行的语句块，根据某个条件 return 退出函数 try……catch 对语句块实现错误处理 var 声明变量
5. JavaScript 代码块
代码块的作用是 定义一同执行的语句
代码块的内容一般需要空格缩进，增强可读性
注意：
- 分号分隔 JavaScript 语句，一定要加
- 给 JavaScript 语句添加空格以增强可读性（在运算符旁）
- 为了达到最佳可读性，代码行字符往往控制在80个以内
6. JavaScript 注释
并非所有 JavaScript 语句 都被 “执行”
双斜杠 // (单行) 或者 介于 / / (多行) 之间的代码被视为注释
7. JavaScript 标识符
标识符是名称， JavaScript 标识符对大小写敏感 且 具有唯一性
在 JavaScript 中，标识符用于 命名变量（以及关键词 、 函数、 标签)
大多数编程语言，合法名称的规则近乎相同
规则： 首字符必须是 字母、下划线 (__) 或者 美元符号 ( $)
连串字符可以是字母、数字、下划线或美元符号
连串字符用 驼峰式大小写方式 （eg: getElementById）
8. JavaScript 字符集
JavaScript 使用 Unicode ( 万国码 ) 字符集
Unicode 覆盖世界上 几乎所有的字符、标点和符号
9. JavaScript 运算符
详情查阅网址：https://www.w3school.com.cn/js/js_operators.asp
10. JavaScript 数据类型
数据类型即具体的值类型
-
5 种 可能包含值得数据类型
- 字符串值 (string)
- 数字值 (number)
- 布尔值 (boolean)
- 对象 (object)
- 函数( function)
-
3种 对象类型
- 对象(object)
- 日期(date)
- 数组(array)
-
2 种 不能包含值的类型
- null
- undefined
JavaScript 拥有动态类型，意味着相同变量可用作不同类型 ；例如：
var x = 10; var x = “bill”
在 JavaScript 中，没有值的变量，其值是 undefined ，类型也是 undefined； 即任何变量可以将其值设为 undefined 进行清空
空值 (“ ”) 和 undefined 不是一回事，空的字符串既有值也有类型
null 的值是 null ，数据类型是 对象；当然也可设置值为 null 清空对象
在 JavaScript中 ，数组也是对象
例如：
typeof [3,5,6,8]
返回的是 object 而非 array
原始数据： 原始数据值是一种没有额外属性和方法的单一简单数据值
例如：string 、 number 、boolean 、undefined
对象 、 函数 属于 复杂数据
11. JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块；通常只要定义一次，就可多次调用
JavaScript 函数 会在某代码调用它时被执行
语法结构
function myFuncationName ( param 1 , param 2 , param 3 ) {
要执行特定任务的代码；
}
myFuncationName 是函数名 ，在被调用时使用
param 是在调用函数时，由函数接收的真实的值
在函数中 ， param 是局部变量，即仅在函数内部才能被访问；在函数开始时创建，完成时被删除
在其他编程语言中，函数近似 程序（ Procedure ）或 子程序（ Subroutine ）
函数调用
- 当事件发生时（用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
函数返回
当 JavaScript 到达 return语句时，函数停止执行
通常函数会计算返回值返回给调用者
12. JavaScript 对象
在真实生活中，汽车是一个对象
汽车有诸如 车重 和 颜色 等属性；也有诸如 启动 和 停止 等方法
所有汽车都拥有同样的 属性，但 属性值 因车而异
所有汽车都拥有相同的 方法，但是方法会在不同时间被执行
对象也是变量；但是对象包含很多值(即对象属性)；对象无法被比较
对象属性以 名称：值 对的方式来书写
JavaScript 对象 是被命名值 (对象属性) 的容器
例如：
var car = {type: "porsche", model: "911", color: "white"};
对象的方法是在对象上执行的动作
方法以 函数定义 被存储在属性中； 即 方法是作为属性来存储的 函数
例如： var person = {
firstName: “Bill” ,
lastName: “Gates” ,
fullName: function( ) {
return this.firstName + “ ” + this.lastName ;
}
}
this关键词
在函数定义中，this 引用 该函数的 “拥有者”，即当前对象； 上述例子中， this.firstName 等价于 person.firstName ;
访问对象属性
有两种方式可访问对象的属性
- objectName.propertyName 即 对象名：属性名
- objectName[“ propertyName ”] 即 对象名[“ 属性名” ]
访问对象方法
objectName.methodName( ) 即 对象名.方法名( )
13. JavaScript 事件
html 事件是发生在 html 元素上的 “事情”，JavaScript 能够 “应对” 这些事件
html 事件可以是 浏览器 或 用户做的某些事情，通常事件发生时，用户会希望做某件事
通过 JavaScript 代码，可以在 html 元素添加事件处理程序
事件处理程序 可用于 处理、验证用户输入、用户动作和浏览器动作
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
代码格式 （单/双引号都可）
< element event= “一些 JavaScript">
例如：
改变 id=“demo”的元素的内容
<button onclick = ‘document.getElementById(“demo”).innerHTML = Date( )'>现在时间是？</button>
改变当前元素自身的内容
<button onclick = ‘this.innerHTML = Date( )'>现在时间是？</button>
事件属性直接调用函数
<button onclick = 'displayDate()'>现在时间是？</button>
在 Js 文件中声明一个 displayDate( ) 函数，html 文档中直接调用
14. JavaScript 字符串
JavaScript 字符串 用于 存储和操作文本
可用 + 对字符串进行换行
例如：
document.getElementById("demo").innerHTML ="Hello"+
“Kitty”!;
字符串可通过 关键词 new 定义为对象；但是会拖慢执行速度
例如：
var x = new String("Bill");
创建一个 Bill 对象
字符串相加 叫级联 ( concatenation)
字符串中的原始属性和方法
-
length 属性返回字符串的长度
var txt = "ABCDEFGHIJKMNA"
var sln = txt.length;
-
indexOf( ) / lastIndexOf( ) 方法 分别返回字符串中指定文本首次/最后一次 出现的索引
var txt = "ABCDEFGHIJKMNA"
var pos = txt.indexOf("A");
// JavaScript 从0开始索引，若未找到对应文本，indexOf()/lastIndexOf()均返回 -1
-
search( ) 方法搜索特定值的字符串，并返回匹配的索引
var txt = "ABCDEFGHIJKMNA"
var pos = txt.search("A");
注意 indexOf( ) 和 search( ) 的区别
- search( ) 方法无法设置第二个开始位置的参数
- indexOf( ) 方法无法设置更强大的搜索值 (正则表达式)
-
slice( ) / substr( ) 提取字符串的某个部分并在新字符串中返回被提取的部分
slice( param 1 ,param 2 )
param 1 表示起始索引，param 2 表示结束索引
var txt = "ABCDEFGHIJKMNA"
var pos = txt.slice(7,14);
// 若某个参数为负数，则从字符串的结尾开始计数（从右向左）
// 若省略第二个参数，则改方法将裁剪字符串的剩余部分
-
replace( ) 方法用另一个值替换在字符串中指定的值
默认地， replace( ) 只替换首个匹配 且对大小写敏感
var txt = "ABCDEFGHIJKMNA"
var pos = txt.replace(/A/g,"a");
//替换所有匹配，使用正则表达式 g 修饰符(全局搜索) 且正则表达式不带引号
-
toUpperCase( ) / toLowerCase( ) 分别把字符串转换为 大/小写
var txt = "ABCDEFGHIJKMNA"
var pos = txt.toUpperCase();
-
concat( ) 方法连接两个或多个字符串
var txt1 = "ABCD"
var txt2 = "abcd"
var txt3 = "EFGH"
var txt = txt1.concat("",txt2).concat("",txt3);
// concat() 方法可用于代替加运算符，txt 和 txt4 是等效的
var txt4 = "ABCD" + "" + "abcd" + "EFGH";
-
charAt( ) / charCodeAt( ) 分别返回字符串指定下标(索引)的字符串 和 指定索引的字符 Unicode编码
var txt = "ABCDEFGHIJKMNA"
var pos = txt.charAt(0);
// 若找不到字符，返回空串
-
split( ) 将字符串转换为数组
var txt = "a,b,c,d,e"
var arr = txt.split(",")/txt.split("")/txt.split("|");
// 分别用 逗号、空格、竖线 分隔符分隔数组
// 若省略分隔符，返回数组包含整个字符串
15. JavaScript 数字
JavaScript 与其他编程语言不同的是 只有一种数值类型 且书写数值时带不带小数点都可
JavaScript 数值始终是以 64 位的双精度浮点数来存储，根据国际 IEEE 754标准
整数精度(不使用科学计数法) 会被精确到15位
小数精度是17位，但浮点的算数并不总是100%精准
例如：
var x = 0.2 + 0.1
得到的结果将是0.30000000000000004
使用乘除法可有助于解决上述问题：
var x = (0.2 * 10 + 0.1 * 10) // x = 0.3
数字字符串
在所有数字运算中，JavaScript 会尝试将字符串转换为数字进行运算
var x = "100"; var y = 10 ; var z = x / y; // z = 10
需要注意的是，数字相加 和 字符串级联 都用 + 号表示，所以上述只适用于 */- 三种运算
var x = "100" ; var y = 10 ; var z = x + y // z = 10010 而非110
NaN (非数值) 数据类型是number
NaN (Not a Number ) 属于 JavaScript 保留词，指示某个数 不是合法数
var x = 100 / "a" // x = NaN
对于确定某个值是否是数值，可用全局 JavaScript 函数 isNaN( ) 来判定，返回布尔值
var x = 100 / "a" ; isNaN(x); //返回true
关于 NaN 的一些有趣例子：
var x = NaN; var y = 6; var z = x + y; // z = NaN而非 6
var x = NaN; var y ="6"; var z = x + y; // z = NaN5 而非NaN 此处是级联
Infinity (无穷) 数据类型是number
Infinity/-Infinity 是 JavaScript 在计算数时超出最大可能数范围时返回的值
除以0 返回的也是 Infinity
var num1 = 2; while (num1 != Infinity) { num1 = num1 * num 1;} //执行直到Infinity
十六进制 / 八进制
JavaScript 会把前缀为 0x 的数值常量解释为 十六进制
JavaScript 会把前缀为 0 的数值常量解释为 八进制
var x = 0xff; //x = 255
var x = 077; // x = 63 而非 77
使用 toString( ) 方法可以实现 二进制 / 八进制 / 十六进制进型转换(以字符串形式返回)
var x = 128; var y = x.toString(16); //y = 80
Number 中的 方法和属性
所有数字方法均可用于任意类型的数字(字面量(常量)、变量、表达式)
-
toString( ) 方法 以字符串返回数值
var x = 123;
x.toString(); //从变量x 返回 123
(123).toString(); // 从常量 返回 123
(100 + 24).toString(); // 从表达式 返回 124
-
toExponential( param ) / toFixed(param ) 方法 分别以返回字符串值,包含已被四舍五入并使用指数计数法/ 直接返回指定位数小数 的数字
param 定义小数点后的字符数，参数可选，若未设置，JavaScript 不会对数字进行舍入
var x = 98.8998;
x.toExponential(3); // 返回 9.890e+1
x.toExponential(); // 返回 9.88998e+1
x.toFixed(2); // 返回 98.90 适合处理关于金钱的数字
-
toPrecision(param ) 以字符串返回数值，包含了指定长度
var x = 98.8998
x.toPrecision(3) //返回 98.9
-
valueOf( ) 以数值返回数值
在 JavaScript 中， 数字可以是 原始值(typeof = number ) 或 对象 (typeof = object )
在 JavaScript 内部 使用 valueOf( ) 方法可将 Number 对象 转换为 原始值
所有 JavaScript 数据类型 都有 valueOf( ) 和 toString( ) 方法
var x = 123;
x.valueOf(); // 从变量 x 返回 123
(123).valueOf(); // 从字面量 123 返回 123
(100+25).valueOf(); // 从表达式 100+25 返回 125
-
关于数值的全局方法
JavaScript 全局方法 可用于 所有 JavaScript 数据类型
-
Nubmer( ) 方法 把 JavaScript 变量 转换为数值， 由其参数转换而来
x = true ; Number(x); // 返回 1
x = new Date(); Number(x); // 返回 1611294882633 以时间戳形式
x = "10 20" ; Number(x); // 返回 NaN
-
parseInt( ) / parseFloat( ) 方法解析一段字符串，允许空格，分别以 整数/浮点数形式返回首个数字
parseInt ("10.33"); // 返回 10
parseFloat ("10.33"); // 返回 10.33
数字属性
数字属性属于名为 number 的 JavaScript 数字对象包装器，仅对number这个数字对象有效
-
MAX_VALUE / MIN_VALUE 属性分别返回 JavaScript 中可能的最大 / 最小 数字
var x = Number.MAX_VALUE; //返回 1.7976931348623157e+308
var x = Number.MIN_VALUE; //返回 5e-324
-
POSITIVE_INFINITY / NEGATIVE_INFINITY 属性表示 正/负 的无穷大，溢出时返回该属性
var x = Number.POSITIVE_INFINITY; //返回 infinity
var x = Number.NEGATIVE_INFINITY; //返回 -infinity
-
NaN 属性 表示非数字
var x = Number.NaN;
16. JavaScript 数组
数组是一种特殊的变量，它能够一次存放一个以上的值；并可以通过引用索引号来访问这些值
语法结构
var arrayName = [item 1 , item 2 , …] ;
访问数组及其元素
数组是对象，可直接通过引用 数组名来访问完整的数组
通过引用索引号(即下标号) 来访问某个数组元素
var varName = arrayName[ n] ;
数组元素也可以是对象
JavaScript 变量可以是对象；数组是特殊类型的对象
正因如此，可以在相同数组中存放不同类型的变量
数组中可以保存对象，数组中也可以保存函数，甚至数组中可以保存数组
数组的原始属性和方法
-
length 属性 返回数组的长度( 数组元素的数目)
var person = [Jim,Tom,Sam,Tim]
var personNumber = person.length; // personNumber = 4
-
访问第一个/最后一个 数组元素
var person = [Jim,Tom,Sam,Tim]
var firstPerson = person[0]; // 返回 firstPerson = Jim
var lastPerson = person[person.length - 1]; // 返回 lastPerson = Tim
-
遍历数组元素
for 循环 / Array.foreach( ) 都可用来遍历数组
var person , personNumber , personText , i;
person = [Jim,Tom,Sam,Tim];
personNumber = person.length;
personText = "<ol>"
for (i = 0 ; i < personNumber;i++ ) {
personText += "<li>" + person[i] + "</li>";
}
text += "</ol>" var person , personText;
person = [Jim,Tom,Sam,Tim];
personText = "<ul>";
person.forEach(myFunction);
personText += "</ul>";
document.getElementById("demo").innerHTML = personText; function myFunction(value){
personText += "<li>" + value + "</li>";
}
-
push( ) 方法 和 length 属性 可向数组添加新元素； pop( ) 方法 从数组中删除最后一个元素
var person = [Jim,Tom,Sam,Tim];
person.push("Dom"); // 从数组最后添加一个元素"Dom"
person.push(); // 返回 新数组的长度 5
person[person.length] = "Xom"; person.pop(); // 删除最后一个元素 “Xom”;返回被弹出的值"Xom"
-
关联数组
很多编程元素支持命名索引的数组
具有命名索引的数组被称为 关联素组（或散列）
JavaScript 不支持 命名索引的数组
在 JavaScript中， 数组只能使用 数字索引
var person = [];
person[0] = "Jim";
person[1] = "Tom";
person[2] = "Sam";
var x = person.length; // x = 3；
var y = person[0]; // y = "Jim"; // 若在JavaScript 中使用命名索引，JavaScript 会把数组重定义为标准对象
// 之后，所有数组的方法和属性将产生非正确的结果 var person = [];
person["fistName"] = "Jim";
person["secondName"] = "Tom";
person["lastName"] = "Sam";
var x = person.length; // x = 0 ;
var y = person[0]; // y = undefined;(未定义)
-
数组和对象的区别
JavaScript 中 ，数组使用 数字索引 ； 对象使用 命名索引
即 元素名为字符串(文本) 应该用对象；元素名为数字应该用数组
- 如何识别某个变量是否为数组
-
ECMAScript 5 定义了新方法 Array.isArray( ) ，返回布尔值判断
Array.isArray(person);
-
创建 isArray( ) 函数， 返回布尔值判断
function isArray(person){
return person.constructor.toString().indexOf("Array")> -1 ;
}
// 若对象原型包含单词"Array"，则返回true
-
若对象由给定的构造器创建，则 instanceof 运算符 返回 true
var person = [Jim,Tom,Sam,Tim];
person instanceof Array
-
toString( ) / join( ) 方法 把数组转换为数组值的字符串
var person = [Jim,Tom,Sam,Tim];
person.toString(); // 返回 Jim,Tom,Sam,Tim 默认逗号分隔 person.join("*"); // 返回 Jim * Tom * Sam * Tim 可指定分隔符
17. JavaScript 数组综合
位移元素
位移与弹出等同，但处理首个元素而非最后一个
-
shift ( ) 方法会删除首个数组元素 ，并把所有其它元素“位移”到更低的索引
var person = [Jim,Tom,Sam,Tim];
person.shift(); // 删除首个元素“Jim”,可返回被删除的元素“Jim”
-
unshift( ) 方法(在开头) 向数组添加新元素，并“反向位移”旧元素
var person = [Jim,Tom,Sam,Tim];
person.unshift("Dom"); // 在person数组开头添加新元素“Dom”
person.unshift(); // 返回新数组的长度 5
拼接和删除元素
-
delete 运算符 可删除数组中指定索引的元素的值, 而数组结构不变
var person = [Jim,Tom,Sam,Tim];
delete person[1]; // 把person数组中第二个元素“Tom”删除
// 使用delete 会在数组中留下未定义(undefined)的空洞；请使用 pop() 或 shift()取而代之
-
splice(param 1 ,param 2 , param 3 … ) 方法可用于向数组添加新项
param 1 定义应添加新元素的索引位置(拼接)
param 2 定义了应删除多少元素
其余参数 定义需要添加的新元素值
var person = [Jim,Tom,Sam,Tim];
person.splice(1,1,"Dom","Xom"); // 删除"Tom"，并在其后添加“Dom”和"Xom"
通过 splice( ) 方法 删除指定元素，可避免出现未定义的空洞
var person = [Jim,Tom,Sam,Tim];
document.getElementById("demo1").innerHTML ="第二个人是："+ person[1];
person.splice(1,1);
document.getElementById("demo2").innerHTML ="第二个人是："+ person[1]; // 元素id ="demo1" 返回"Tom"
// 元素id =”demo2“ 返回"Sam"
// 可以发现删除了”Tom“,原数组结构即数字索引发生了改变
合并(连接)数组
- concat( ) 方法通过合并(连接) 现有数组来创建一个新数组
改方法不会更改现有数组，而总是返回一个新数组 ； 且可使用任意数量的数组参数(合并多个数组)
var arr1 = ["1","2","3"];
var arr2 = ["4","5"];
var arr3 = ["6","7","8"];
var arr4 = ["9","10"];
var arr0 = arr1.concat(arr2,arr3,arr4); // 连接4个数组
var arr5 = arr1.concat("6","7");
// concat参数也可以是具体的元素值
裁剪数组
-
slice( param 1 , param 2 ) 方法 用数组的某个片段切出新数组
该方法是新建一个数组，而不会从源数组中删除任何元素
param 1 定义了截取的开始索引位置；param 2 定义了截取的结束索引位置(不包括结束索引)
var person = [Jim,Tom,Sam,Tim];
var american = person.slice(1,3); // 返回新数组 [Tom,Sam] var nords = person.slice(1); // 返回新数组 [Tom,Sam,Tim]
数组排序
-
sort ( ) 方法 以字母顺序对数组进行排序
var person = [Jim,Tom,Sam,Dom];
person.sort(); // 返回[Dom,Jim,Sam,Tom]
-
通过 sort( ) 对数字数组进行 升序 / 降序
// 升序
var points = [2,5,68,83,3,6,14,48];
points.sort(
function (a,b) {
return a - b;
}
); // 降序
var points = [2,5,68,83,3,6,14,48];
points.sort(
function (a,b) {
return b - a;
}
);
// 这里是比值函数，当 sort()函数比较两个值时，会将值发送到比较函数
// 并根据所返回的值(负/零/正值)，对两个数进行排序
// 比如 48 和 14 ; 48-14=34>0 排序函数将把38排序为比14更高的值
// a-b>0 即返回值为正，则a排b后面 ; a-b<0 即返回值为负 则a排b前面
-
reverse( ) 方法 对数组进行反向排序(降序)
var person = [Jim,Tom,Sam,Dom];
person.reverse(); // 返回 [Tom,Sam,Jim,Dom]
查找数组中的最值
-
JavaScript 不提供查找数组中最大或最小数值得内建函数
不过通过排序之后，可根据数组索引来获得最高或最低值；当然这种效率是极低的
var points = [2,5,68,83,3,6,14,48];
points.sort(
function (a,b){
return a - b;
}
);
var pointsMin = points[0]; // 返回数组最小值 2
var pointsMax = points[points.length-1]; // 返回数组最大值 83
-
Math.max.apply / Math.min.apply 分别可以查找出数组中最大/最小 值
Math.max.apply( [ 1 , 2 , 3 ] ) 等价于 Math.max( 1 , 2 , 3 )
function myArrayMax(points) {
return Math.max.apply(null ,points);
}
// 返回最大值 83
-
自己构造函数达到目的
通过遍历数组，用找到的最高值与每个值进行比较
var points = [2,5,68,83,3,6,14,48];
function myArrayMax(points) {
var pointsLength = points.length;
var pointsMax = - Infinity;
while (pointsLength --) {
if (points[pointsLength] > pointsMax ) {
pointsMax = points[pointsLength];
}
}
return pointsMax;
}
// 返回 pointsMax = 83;
对象数组排序
-
JavaScript 数组 经常会包含对象
即使对象拥有不同数据类型的属性，sort( ) 方法仍可通对比其属性值来对数组进行排序
// 比较数字属性
var car = [{type:"Volvo",year:2016},{type:"Cadillac",year:2018},{type:"BWM",year:2017}];
car.sort(
function (a,b) {
return a.year - b.year;
}
); // 比较字符串属性
var car = [{type:"Volvo",year:2016},{type:"Cadillac",year:2018},{type:"BWM",year:2017}];
car.sort(
function (a,b) {
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
}
);
数组迭代
- forEach( ) 方法 为每个数组元素调用一次函数(回调函数)
var txt = "";
var points = [2,5,68,83,3,6,14,48];
points.forEach(myFunction);
function myFunction(value,index,array) {
txt = txt + value + "<br>";
}
// 该调用的函数可接收3个参数 分别是 项目值：value ; 项目索引：index;数组本身：array
// myFunction该函数被作为参数传递，是回调函数的特征
- map( ) 方法对每个数组元素执行函数来创建新数组
该方法不会对没有值的数组元素执行函数；且不会更改源数组
var points = [2,5,68,83,3,6,14,48];
var newPoints = points.map();
function myFunction(value,index,array ) {
return value * 2;
}
// 返回新数组 newPoints = [4,10,136,166,6,12,28,96]
- filter( ) 方法创建一个包含通过某种条件过滤数组元素的新数组
var points = [2,5,68,83,3,6,14,48];
var over20 = points.filter(myFunction);
function myFunction(value,index,array) {
return value > 20;
}
// 返回新数组 over20 = [68,83,48]
- reduce( ) / reduceRight( ) 方法在每个数组元素上运行函数，以生成(减少它 )单个值
该方法默认在数组中从左到右工作,区别于 reduceRight( ) ；且不会减少源数组
reduceRight( ) 从右到左工作，即从数组末尾向数组起始位置
var points = [2,5,68,83,3,6,14,48];
var sum = points.reduce(myFunction);
function myFunction(total,value,index,array) {
return total+value;
}
// 返回 sum = 229
// 该调用的函数可接收4个参数
// 分别是 总数(初始值/先前返回的值)：total;项目值：value;项目索引：index;数组本身:array
// reduce() 方法能够接收一个初始值
var points = [2,5,68,83,3,6,14,48];
var sum1 = points.reduce(myFunction,100);
function myFunction(total,value,index,array) {
return total+value;
}
// 返回 sum1 = 329
- every( ) 方法检查数组中的所有元素是否通过某个条件的过滤，返回布尔值
该方法区别于 some( )
some( ) 方法是检测数组中某些数组元素值是否通过过滤，只要存在1个，则返回 true
var points = [2,5,68,83,3,6,14,48];
var allOver20 = points.every(myFunction);
function myFunction(value,index,array) {
return value > 20;
}
// 返回 allOver20 = false
- indexOf( item ,start ) / lastIndexOf( item,start) 方法在数组中搜索元素值并返回位置，分别从起始到结束/从结束到起始
item 定义需要检索的项目 ; start 定义开始搜索的位置
var points = [2,5,68,83,3,6,14,48];
var a = points.indexOf(3); // 返回 a = 4
var b = points.lastIndexOf(3); // 返回 b = 3
// 若没有检索到指定的值，返回 -1
-
findIndex( ) 方法返回通过某个条件过滤数组的第一个数组元素的索引
var points = [2,5,68,83,3,6,14,48];
var first = points.findIndex(myFunction); function myFunction(value,index, array) {
return value > 18;
}
// 返回 first = 2
18. JavaScript 日期
UTC ( Coordinated Universal Time) 世界协调时、世界统一时间、世界标准时间
是世界上最主要的时间，其以 原子时 秒长为基础，在时刻上尽量接近于GMT
GMT (Greenwish Mean Time) 格林威治标准时间、格林尼治平均时间
是指位于英国伦敦郊区的皇家格林尼治天文台当地的平太阳时
因为本初子午线被定义为通过那里的经线
北京是时间 等于 UTC+8 等于 GMT+8
默认情况下， JavaScript 将使用浏览器的时区并将日期显示为全文本字符串
Sat Jan 23 2021 00:15:13 GMT+0800 (GMT+08:00)
注意：JavaScript 从 0 到 11 计算月份
-
new Date( ) 用当前日期和时间创建新的 静态 日期对象
Date( ) 对象有新的Date( ) 构造函数创建
var now = new Date(); -
new Date( year , month , day ,hours, minutes ,seconds,milliseconds) 用指定日期和时间创建新的日期对象
7个数字分别代表 年 / 月/日/小时/分/秒/毫秒，顺序不能变
var now = new Date(2021,1,22,00,21); //返回 Mon Feb 22 2021 00:21:00 GMT+0800 (GMT+08:00)
-
new Date (dateString) 从日期字符串创建一个新的日期对象
var now = new Date("Janury 22 ,2021 ,00:23:47") // 返回 Fri Jan 22 2021 00:23:47 GMT+0800 (GMT+08:00) -
new Date(milliseconds) 以时间戳的形式创建一个新日期对象
注意转换格式是以 毫秒(milliseconds) 进行转换
var now = new Date(1611333032000); //返回 Sat Jan 23 2021 00:30:32 GMT+0800 (GMT+08:00)
日期格式
完整格式：( YYYY-MM-DDTHH:MM:SS )
短日期格式：(MM/DD/YYYY) 例如：( “02/19/2018” )
长日期格式：(MMM DD YYYY) 例如：(“Feb 23 2021”)
日期和时间通过大写字母 T 来分隔
UTC 时间通过大写字母 Z来定义
时区
在设置/获取 日期时，如果不规定时区，JavaScript 默认会使用浏览器的时区
换句话说，假如日期/时间以 GMT 创建 ，该日期/时间将被转换为 CST (中国标准时间)，用户在中国境内使用浏览器的情况下
设置/获取日期的方法
设置 (set) / 获取 (get)
需要注意的是：JavaScript 月、周、小时、分钟、秒、毫秒 均是从0开始计数，而天是从1开始计数
例如：getDate( ) 方法 以数值返回天 (1-31)
getMinutes( ) 方法 获取分的数值 (0-59)
设置日期：https://www.w3school.com.cn/js/js_date_methods_set.asp
获取日期：https://www.w3school.com.cn/js/js_date_methods.asp
19. JavaScript 数学综合
JavaScript Math
JavaScript Math 对象可对数字执行数学任务
-
8个数学常量
JavaScript 提供了可由 Math 对象访问的8个数学常量
属性 含义 Math.E 返回欧拉指数(e) e = 2.718281828459045 Math.PI 返回圆周率 π = 3.141592653589793 Math.SQRT2 返回 2 的平方根 \(\sqrt{2}\) = 1.4142135623730951 Math.SQTR1_2 返回 ½ 的平方根 \(\sqrt{½}\) = 0.7071067811865476 Math.LN2 返回2的自然对数 \(\log_e 2\) = 0.6931471805599453 Math.LN10 返回10的自然对数 \(\log_e 10\) = 2.302585092994046 Math.LOG2E 2为底的自然对数 \(\log_2 e\) = 1.4426950408889634 Math.Log10E 10为底的自然对数 \(\lg e\) = 0.4342944819032518 -
Math.round(x) 方法返回值是 x 四舍五入后最接近的整数
Math.round(8.8); //返回 9 -
Math.pow(x,y) 方法返回值是 x 的 y 次幂
Math.pow(3,3); // 返回 9 -
Math.sqrt(x) 方法返回 x 的平方根
Math.sqrt(16); //返回 4 -
Math.abs( x) 方法返回 x 的绝对(正)值
Math.abs(-3.8) // 返回 3.8 -
Math.ceil(x) / Math.floor(x) 方法返回值时 x 向上/向下 舍入最接近的整数
Math.ceil(6.3); // 返回 7Math.floor(6.3); // 返回 6 -
Math.sin(x) / Math.cos(x) / Math.tan(x) / Math.asin(x) / Math.acos(x) / Math.atan(x)
方法 返回 x (以弧度计) 的 正 / 余弦(介于 -1 到 1之间的值) / 正切 / 反正/余弦 /正切
角度 = 弧度 * Math.PI /180
Math.sin( 90 * Math.PI/180) // 即 sin (π/2) = 1 -
Math.random( ) 方法返回 大于等于 0 且小于 1之间的随机数（16位小数）
Math.random(); // 返回 0.7163944549620018Math.random( ) 和 Math.floor( ) 一起使用可以返回随机整数
Math.floor(Math.random() * 10); // 返回0~9之间的整数
Math.floor(Math.random() * 100); // 返回0~99之间的整数
Math.floor(Math.random() * 10) + 1 ; // 返回 1~10之间的整数
Math.floor(Math.random() * 11); // 返回 0~10之间的整数
一个适当的随机函数
document.getElementById("demo").innerHTML = getRndInteger(1,10);
function getRndInteger(min,max) {
return Math.floor(
Math.random() * ( max - min)
) + min;
}
// 返回 1 >= 且 <= 9 之间的随机整数 即 （min <= x< max） document.getElementById("demo").innerHTML = getRndInteger(1,10);
function getRndInteger(min,max) {
return Math.floor(
Math.random() * ( max - min + 1)
) + min;
}
// 返回 1~10(均包含)的随机整数 即( min =< x <= max)
-
atan2(y,x) 方法返回从 x 轴 到 点(x,y) 的角度
Math.atan2(0,1); //返回 0 -
log(x) 方法返回 x 的自然对数（e为底）
Math.log(1); // 返回 0
JavaScript Boolean(逻辑)
通常，在编程中，两个值之一的数据类型有很多
诸如 YES/NO ; ON/OFF ; TRUE/FALSE
鉴于此，JavaScript 提供一种布尔数据类型，它只接收 值 true 或 false
-
Boolean( ) 方法 确定表达式(或变量) 是否为真
Boolean(10 > 8); //返回true
Boolean(0); //返回false
Boolean(-0); //返回false
Boolean(""); //返回false
Boolean(x); //在x申明未赋值情况下返回false
Boolean(null); //返回false
Boolean(false); //返回false
Boolean(NaN); //返回false
20. JavaScript 条件循环
条件语句用于基于不同条件执行不同的动作
if 语句
-
语法
if(条件) {
如果条件为 true 时 执行的代码
}
if (hour < 18) {
greeting = "Good day";
}
// 如果时间早于18:00,则发出"Good day"的问候
if…else 语句
-
语法
if(条件) {
条件为 true 时执行的代码块
} else {
条件为 false 时执行的代码块
}
if (hour< 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
// 如果时间早于18：00,发出"Good day"的问候，否则 发出"Good evening"
else…if 语句
-
语法
if(条件1) {
条件1 为 true 时执行的代码块
} else if(条件2) {
条件1 为 false 且条件2 为 true 时执行的代码块
} else {
条件1 和 条件2 同时为 false 时执行的代码块
}
if (hour < 10) {
greeting = "Good morning";
} else if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
// 如果时间早于10：00 ,发出"Good moring"的问候，如果不是，且时间早于 18:00,发出"Good day"的问候
// 如果上述都不是,则发出"Good evening"的问候
switch 语句
switch 语句用于选择多个需要被执行的代码块之一
-
语法
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
// 计算一次 switch 表达式;把表达式的值与每个case的值进行对比;如果匹配，则执行关联代码
// break 关键词 中断跳出switch代码块
// default关键词 规定不存在case匹配时默认运行的代码;并不是最后一个，可放在任意位置
var day;
switch (new Date().getDay()) {
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 = "星期六";
// 不必中断 switch代码块中的最后一个case;代码块在此处自然会结束
}
// 不同的case 使用相同的代码 var text;
switch(new Date().getDay()) {
case 4:
case 5:
text = "周末快到了:)";
break;
case 0:
case 6:
text = "今天是周末~";
break;
default:
text = "期待周末！";
}
如果多种case匹配一个case值，则选择第一个case
如果未找到匹配的case且未找到默认执行的代码块,程序将继续 switch 后的语句
switch case 的值必须与要匹配的类型相同(严格比较 ===)
三元运算
三元运算适用于基于某些条件向变量赋值的情况
-
语法
varName = (条件)? value1 : value2
// 如果条件为 true 则 varName被赋值value1;否则被赋值value2
var voteable = (age < 18) ? "To young" "Mature enough"
循环 适用于 需要运行某代码多次，且每次使用不同的值的情况
for 循环
for 循环 多次遍历代码块
-
语法
for(语句1 ; 语句2 ; 语句3) {
要执行的代码块
}
// 语句1在循环开始之前执行 (初始化值,可以是多个,用","逗号隔开)
// 语句2定义运行循环的条件 (什么条件下才执行循环)
// 语句3会在循环每次被执行后执行 (通常递增/减初始变量的值)
// 语句1 和 语句3都可在其他位置申明，但是";"分隔符不能少
var cars = ["BMW","Volvo","Porsche","Ford"];
var i,len,text;
for(i = 0 ,len = car.length ,text = "";i < len ;i ++) {
text += car[i] + "<br>";
}
for / in 循环
for / in 循环 遍历对象的属性
-
示例
var person = { fanme:"Bill",lname:"Gates",age:62};
var text = "";
var x ;
for (x in person) {
text += person[x];
}
while 循环
while 循环会一直循环代码块，只要指定的条件为 true
-
语法
while(条件) {
要执行的代码块
}
var i,text;
while (i < 10) {
text += "数字是" + i;
i ++ ;
}
// 只要 变量 i<10，代码块会一直执行;切记要对变量进行递增/减操作
do / while 循环
do / while 循环 是 while 循环的变体
在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环
-
语法
do {
要执行的代码块
}
while (条件)
var i = 0.1;
var text = "";
do {
text += "<br>数字是" + i;
i++;
}
while (i < 10)
for 循环 与 while循环 的区别
-
示例
var cars = ["BWM","Volvo","Saab","Ford"];
var i = 0;
var text = "";
for(;cars[i];) { //分隔号不能少
text += cars[i] + "<br>";
i ++;
} var cars = ["BWM","Volvo","Saab","Ford"];
var i = 0;
var text = "";
while(cars[i]) {
text += cars[i] + "<br>";
i ++;
}
break 和 continue
break 语句 不仅可用于跳出 switch 代码块 ,也可以用于跳出循环
continue 语句 “跳过” 循环中的一个迭代
注意两者之间的区别
-
示例
var text = "";
var i = 0;
for (i = 0;i < 10;i ++) {
if(i===3){ break;}
text += "数字是" + i + "<br>";
}
// 这个循环只能遍历 i = 0 , 1 ,2 这三种情况
// 当 i = 3时，已经通过 break语句跳出循环，执行循坏后面的代码了
var text = "";
var i = 0;
for (i = 0;i < 10;i ++) {
if(i===3){ continue;}
text += "数字是" + i + "<br>";
}
// 这个循环能遍历除了 i = 3这种情况，其他情况都遍历了
// 当 i = 3时，已经通过 continue 语句跳出当前循环的迭代，执行循坏中下一迭代了
21. JavaScript 异常
当执行 JavaScript 代码时，可能会发生各种错误
错误可能是编码错误、由输入格式引起的错误或是其它不可预见的问题
JavaScript 拥有当错误发生时提供错误信息的内置 error 对象
error 对象提供两个有用的属性： name 和 message
-
name 属性：设置或返回错误名
name属性返回值 描述 EvalError 已在 eval( ) 函数中发生的错误 RangeError 已发生超出数字范围的错误 ReferenceError 已发生非常引用 SyntaxError 已发生语法错误 TypeError 已发生类型错误 URIError 在 encodeURI( ) 中已发生的错误 -
message 属性：设置或返回错误消息( 一条字符串)
和其它编程语言一样，当程序运行发生异常时，将抛出异常(错误) 给程序员，以便处理异常或错误
try 和 catch 语句
JavaScript 语句 try 和 catch 成对出现
try 语句 允许您定义一个代码块，以便执行时检测错误
catch 语句 允许您定义一个要执行的代码块，如果 try 代码块发生错误 (如何对错误进行处理)
-
语法
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
<p id = "demo"> </p>
<script>
try {
adddlert("欢迎访问！");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
// 返回 adddlert is undefinded
throw 语句
throw 语句 用来抛出一个用户自定义的异常
如果把 throw 与 try 和 catch 一同使用，就可以控制程序流并生成自定义错误消息
-
示例
function getRectArea(width,heigth) {
if (isNaN(width) || isNaN(heigth)) {
throw `Parameter is not a number!`;
}
}
try {
getRectArea(3,'A')
}
catch (err) {
console.error(err);
}
// 返回 `Parameter is not a number!`
finally 语句
finally 语句 在 try 和 catch 之后执行自定义的代码，无论结果如何
-
语法
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
finally {
无论 try 和 catch 结果如何都执行的代码块
}
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误：" + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
22. JavaScript 作用域
作用域是指您有权访问的变量集合
作用域决定了 从代码不同部分对变量 、 对象 和函数的可访问性
JavaScript 作用域的3种 类型
- 全局作用域 ( Global scope )
- 局部作用域 （ Local scope）
- 块作用域 （ Block scope）
JavaScript 拥有 函数作用域，即每个函数创建一个新的作用域，作用域决定了这些变量的可访问性(可见性)
函数内部定义的变量从函数外部是不可访问的(不可见的)
局部 / 全局 变量
在 JavaScript 函数内 声明的变量，会成为函数的局部变量 ；局部变量的作用域是局部的，即仅能在函数内部访问它们
函数参数也是函数内的局部变量
局部变量在函数开始时被创建，在函数结束是会删除它们
函数之外声明的变量，会成为全局变量 ； 全局变量的作用域是全局的，即 网页的所有脚本和函数都能访问它
除非有意为之，否则勿创建全局变量，全局变量容易被覆盖
JavaScript Hoisting
hoisting (提升) 是 JavaScript 将 所有声明提升到当前作用域顶部的默认行为(提升到当前脚本或当前函数的顶部)
hoisting 不适用于 JavaScript严格模式
JavaScript 只提升 变量声明 ，不提升变量初始化
-
示例
var x = 5;
var y = 7; // 初始化 x / y elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + "" + y; // 显示元素 x和y
返回 5 7 var x = 5 ; elem = document.getElementById("demo");
elem.innerHTML = x + "" + y ;
var y = 7 ;
返回 x undefinded
// y仅被声明，但未被赋值，所以是undefinded
JavaScript Strict 模式
严格模式 定义了 JavaScript 代码应以 “严格模式” 规范 执行；来兼容更早版本的 JavaScript
通过 在 脚本或函数的开头 添加 “use strict” ; 来声明严格模式 且仅在脚本或函数开头才能被识别
在严格模式中，类如 错打变量名 、 向不可写属性赋值这种情况，会抛出异常或者错误；而普通模式则不会
注意：
- 在 strict 模式中，在未声明 变量(对象等) 前提下 直接给变量赋值 是不允许的
- 删除变量(对象、函数等) 是不允许的
- 八进制数值文本 、 转义字符 是不允许的
- 写入 只读、只能获取的 属性 是不允许的
- “eval” 、 “arguments” 字符串不能作为变量 ；且 eavl( ) 函数在被调用时不能传递参数
- with 语句 是不允许的
let 和 const
let 和 const 两个关键字 在 JavaScript 中 提供了声明 块作用域变量和常量
通过 var 关键词 声明的变量 没有 块作用域 ; 即 在块 { } 内 声明的变量可以从块 之外 进行访问
-
示例
var x = 10 ;
{
var x = 6 ;
}
// 块作用域
// 此处 x 为 6 var i = 7 ;
for ( var i = 0 ; i < 10 ; i ++) {
// 一些语句
}
// 循环作用域，i 可以被循环外访问,即循环外可见
// 此处 i 为 10
而 let 解决了这一问题
-
示例
let i = 7 ;
for (let i = 0 ; i < 10 ; i ++) {
// 一些语句
}
// 此处 i 为 7
HTML 中的全局变量
在HTML 中 全局作用域是 window 即所有全局变量均属于 window 对象
通过 var 关键词定义的 全局变量 属于 window 对象
通过 let 关键词 定义的 全局变量 不属于 window 对象
-
示例
var carName = " porsche";
// 此处的代码可用 window.carName let carName = "porsche";
// 此处的代码不可用 window.carName
var 和 let / const 的其它区别
-
允许在程序的任何位置 使用 var 重新声明 JavaScript 变量
var x = 10;
var x = 5;
// 现在 x 为 5
-
在相同的作用域 或 相同块中，通过 let 重新声明 一个 (var 变量 / let 变量) / 通过 var 重新声明 一个 let变量 都是不允许的
var x = 10; // 允许
let x = 6; // 不允许
{
var x = 10; // 允许
let x = 6; // 不允许
} let x = 5 ; // 允许
var x = 6 ; // 不允许
{
let x = 5; // 允许
var x = 6; // 不允许
} let x = 5; // 允许
let x = 6; // 不允许
{
let x = 5; // 允许
let x = 6; // 不允许
}
-
在不同作用域 或 块 中 ，通过 let 重新声明变量是允许的
let x =6; // 允许
{
let x = 7 ; // 允许
}
{
let x = 8 ; // 允许
}
-
通过 var 声明的 变量会被提升到顶端 ； 而 通过 let 声明的变量 则不会
// 在此处，您可以使用 carName
var carName;
// 在此处，您不可以使用 carName
let carName;
23. JavaScript this关键词
JavaScript this 关键词指的是 它所属的对象
它拥有不同的值，具体取决于它的使用位置
-
在方法中， this 指的是 所有者对象
-
单独的情况下， this 指的是 全局对象
-
在函数中， this 指的是全局对象
-
在函数中， 严格模式下 this 是 undefined
-
在事件种， this 指的是接收事件的元素
// 在方法中，this指的是 person 对象;person 对象是 fullName 的拥有者
var person = {
firstName : "Bill",
lastName : "Gates",
id : 9527,
fullName : function () {
return this.firstName + " " + this.lastName;
}
}; //默认模式，单独的 this, this指的是 全局对象; 在浏览器窗口中，全局对象是 [object Window]
var x = this;
// 返回 [object Window] // 在严格模式中，如果单独使用，那么 this 指的是全局对象 [ object Window]
"use strict";
var x = this;
// 返回 [object Window] function myFunction( ) {
return this;
}
// 默认模式下，this指的是函数拥有者 即全局对象 [object Window] "use strict";
function myFunction( ) {
return this;
}
// 严格模式下,this是未定义状态 undefined <button onclick = "this.style.display = 'none' "> 点击可删除我！</button>
24. JavaScript 保留词
-
JavaScript 保留词
在 JavaScript 中，应避免 将保留词 作为变量、标记或 函数名来使用
| abstract | double | in | super |
| :--: | | | |
| arguments | else | instanceof | switch |
| await | enum | int | synchronized |
| boolean | eval | interface | this |
| break | export | let | throw |
| byte | extends | long | throws |
| case | false | native | transient |
| catch | final | new | true |
| char | finally | null | try |
| class | float | package | typeof |
| const | for | private | var |
| continue | function | protected | void |
| debugger | goto | public | volatile |
| default | if | return | while |
| delete | implements | short | with |
| do | import | static | yield | -
JavaScript 对象、属性和方法
在 JavaScript 中 应避免使用 JavaScript 内建对象的名称、属性和方法
| Array | Date | eval | function |
|---|---|---|---|
| hasOwnproperty | Infinity | isFinite | isNaN |
| isPrototypeOf | length | Math | NaN |
| name | Number | Object | prototype |
| String | toString | undefined | valueOf |
-
Java 保留词
JavaScript 常 与 Java 一起使用，应该避免把某些 Java 对象 和属性作为 JavaScript 标识符
getClass java javaArray javaClass javaObject javaPackage -
HTML 和 Window 对象和属性
JavaScript 能够在很多应用程序种被用作编程语言，应该避免使用HTML 和 Window 对象和属性的名称
alert element navigator plugin all elements frames prompt anchor embed frameRate propertyIsEnum anchors embeds hidden radio area encodeURI history rest assign encodeURIComponent image screenX blur escape images screenY button event offscreenBuffering scroll checkbox fileUpload open secure clearInterval focus opener select clearTimeout form option self clientInformation forms outerHeight setInterval close frame outerWidth setTimeout closed innerHeight packages submit confirm innerWidth pageXOffset taint constructor layer pageYOffset text crypto layers parent textarea decodeURI link parseFloat top decodeURIComponent location parseInt unescape defaultStatus mimeTypes password untaint document nevigate pksc11 window -
HTML 时间处理程序
还应该避免使用 所有 HTML 事件处理程序的名称
onblur onclick onerror onfocus onkeydown onkeypress onkeyup onmouseover onload onmouseup onmousedown onsubmit
