如鹏网学习笔记（九）JavaScript
JavaScript笔记
一、JavaScript简介
1，JavaScript是一种计算机编程语言，可以像等其他编程语言那样定义变量，执行循环等。
2，JavaScript代码主要执行在浏览器上，为HTML页面提供动态效果
3，而且JavaScript是一种脚本语言，它的代码是解释执行的，也就是解释一句代码后就会执行这句代码
4，JavaScript可简称为 js
二、js变量声明
1，js是弱类型语言，弱类型并不是说数据本身没有类型，而是变量没有类型。
如一个变量a，a的值既可以是字符串类型，也可以是数值类型
2，js使用关键字var声明变量：var a;或者 var a = 1.2;或者var a,b,c;
3，由于js的弱类型特点，我们可以这样编写代码：
var a = 1.2;
a = "hello";
4，切记：js中没有int a = 1;这种写法
三、js数据类型
1，js定义了6中数据类型，其中有5中原始类型：
Boolean,Number,String,Null,Undefined,和一种Object类型
Boolean：true 、 false
Number：-(253 -1) 到 253 -1 之间的实数 、外加 Infinity、NaN 两个特殊值
String：使用一对双引号或者单引号包裹的任意字符序列，如"abc"
Null：null
Undefined：undefined
Object：Object类型的值称为对象（后面详细讲）
2，原始类型的值是不可改变的，比如var a = 1.2;虽然a可以重新赋值，但1.2这个值本身是不可改变的(常量)
3，Object类型的值是可以改变的，
比如var obj = new Object();我们可以使用obj.name="蛋蛋";这种语法向对象中添加数据，也就是说对象内部的数据是可以改变的
四、运算符和表达式
1，js也提供了一整套和其他编程语言相似的运算符
算数运算符：+ - * / % (++ -- += -= *= /= %=)
比较运算符：> >= < <= == === != !==
逻辑运算符：|| && !
位运算符：| & ~ << >> >>>（了解）
字符串连接符：+
其他：typeof instanceof new
运算符的优先级和其他编程语言相似
2，表达式：由运算符和操作数组成，一个表达式经过运算后一定会有一个结果，特别的，比如创建对象、调用函数等都属于表达式
五、比较两个操作数相等
1，js有两种比较相等的方式：标准比较（==）和严格比较（===）
严格比较：两个操作数的值以及数据类型都相同时，比较结果才为true
1===1 结果true
1===“1” 结果false
标准比较：先把两个操作数转换为数据类型相同的值，再进行严格比较
1==1 结果true
1==“1” 结果true
转换规则：（全部六种数据类型的转换较繁杂，只列出常见的两种转换）
Boolean和Number比较时，true转换为1，false转换为0
String和Number比较时，String转换为相应的数值
六、typeof运算符
1，typeof用来获取操作数的数据类型，返回字符串形式的类型描述，如typeof 1.2的结果是"number"
类型 结果（字符串类型）
Undefined undefined
Null null
Boolean boolean
Number number
String string
Function function
任何其他对象 object
typeof null有些特殊，结果为object，知道就可以了
七、instanceof运算符
1，instanceof用来判断一个对象是否是一个类的对象
var obj = new Object();
obj instanceof Object 结果为true
2，注意：此处的第一个操作符是对象，而不是原始类型的值
八、new 运算符
1，new 用来创建对象： var obj = new Object();
2，js还提供了一个String类，var str= new String("abc");
3，虽然String类的对象也是字符串，但是和原始类型的字符串是有差别的
var str1 = "abc"; //str1的值是原始类型的值
var str2 = new String("abc");//str2的值是对象
str1 == str2 //结果true
str1 === str2 //结果false
typeof str1 //结果string
typeof str2 //结果object
str1 instanceof String //结果false
str2 instanceof String //结果true
所以，尽量不要使用new创建String对象
注意：new Xxx();可以简写为 new Xxx;
九、关键字和保留字
1.js关键字：js已经在使用的含有特殊含义的单词
break、case、class、catch、const、continue、debugger、default、delete、do、else、
export、extends、finally、for、function、if、import、in、instanceof、let、new、return、
super、switch、this、throw、try、typeof、var、void、while、with、yield
2，js保留字：js将来可能会使用其作为特定用途的单词
enum、await、implements、package、protected、static、interface、private、public、abstract、
boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile
十、控制语句
js的流程控制语句大部分都是我们已经熟悉的
if else
switch
while
do while
for
for in
break
continue
return
十一、js的预定义类和预定义对象
1，js已经预先定义好了一些类和对象供我们使用
预定义类：
Object、Number、String、Boolean、Null、Undefined、Array、Function、Date、Math、RegExp 等
预定义对象：
arguments数组对象、和一些全局函数对象如：parseFloat()、parseInt()、eval()、isNaN()、isFinite()等
2，JavaScript是基于对象的编程语言，但并不是典型的面向对象的编程语言。
由于咱们并不去学习js的底层实现机制，只需要知道这一点就可以了
十二、Object类
1，Object是js最基本的类，用来创建普通对象，通常用这些对象存储数据
2，创建方式：
var obj = new Object();
添加属性（数据）：obj.name = "蛋蛋";
获取属性值：var name = obj.name; //obj["name"]
遍历属性：
for( var key in obj ){
var value = obj[key]
}
3，还有另一种创建对象的方式：
var obj = {};
var obj2 = {"name":"蛋蛋","age":24};
这种方式成为:JSON(JavaScript Object Notation)即js表示对象的方式
JSON格式的数据可被js直接识别为js对象，因为js在内存中就是这么表示对象的
JSON格式语法：
一个对象由一对{}花括号表示
对象中可以包含若干键值对数据，key必须是String类型的值，where可以是任意类型的值
在一些不严格写法中，可以省略key两遍的双引号或者单引号，但绝不建议这样做
一个键值对内部使用冒号分隔key和value，不同键值对之间使用逗号分隔
特别的，一个数组对象使用一对[]中括号表示，数组元素可以是任意类型的值
十三、Array类
var arr = [ "蛋蛋", "建国" , "赖宝" ];
数组对象的特点是支持索引操作：通过arr[index] 方式存取元素
数组有个length属性，表示元素个数（实际上length值为最大索引值+1）
建议使用for循环遍历数组元素：
for(var i = 0;i<arr.length;i++){
var element = arr[i];
}
Array类还提供了很多方法来操作元素：
push() 在末尾添加元素 （数组的元素个数是可以动态改变的）
unshift() 在开头添加元素
pop() 删除末尾元素
shift() 删除开头元素
注意：数组也支持普通对象的那套操作方式，但不建议这么做
十四、函数function
1，函数是js中第一等的对象，它不仅具有普通对象的构造函数、属性等，最重要的是它可以被调用
2，通常一个函数用来完成一个特定的动作，而且可被重复调用，和那些面向对象的编程语言中的方法相似
3，鉴于函数在js中的重要地位，js提供了多种语法来声明、使用函数
实际上声明函数就是创建js的Function类的对象
十五、函数声明方式
声明语法：
function 函数名(参数列表){
函数体
}
调用语法：函数对象();
示例代码：
function sum(n1,n2){
var sum = n1+n2;
return sum;
}
sum();
函数名：由字母、数字、下划线或者$ 组成，并且不能以数字开头
参数列表：函数希望接收的参数。由于js是弱类型语言，声明语法中参数列表就省略了var
函数体：实现特定需求的js代码。
返回值类型：声明语法中没有返回值类型，但函数可以在函数体中使用return语句返回任意类型的值。如果没有return语句，默认返回undefined
浏览器中的js引擎在执行js代码之前会解析并管理使用这种方式声明的函数。所以可以在这种函数声明之前就调用它
注意：
js没有函数重载的概念，多个同名函数中，无论参数个数、名称是否一样，后声明的会覆盖先声明的
十六、函数内的arguments数组对象
在函数体中，可以直接使用arguments数组对象，这个数组的元素是调用此函数时实际传入的所有参数
实际在调用函数时传入的参数个数可以和声明函数时不同，传入不同类型的参数也会导致结果不符合预期
由于js函数的返回值和参数个数以及参数类型都很灵活，我们在调用的时候应该确保传入函数期望的参数
function sum(n1,n2){
var sum = n1+n2;
return sum;
}
function sum2(n1,n2){
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum +=arguments[i];
}
return sum;
}
十七、函数的声明方式2，匿名函数
var 变量名 = function(参数列表){
函数体
}
var sum = function(n1,n2){
var sum = n1+n2;
return sum;
}
sum(1,2);//调用此函数
1，这种方式也被称为匿名函数，js引擎并不会事先就解析管理匿名函数，所以匿名函数不可提前调用，也不存在覆盖的情况
2，特别的，如果把变量名也省略，可以创建一个一次性的，声明后马上调用的函数：
(function(n1,n2){
var sum = n1+n2;
return sum;
})(1,2);
//把整个函数加上括号当做函数名，后面带上传入的参数，相当于直接调用
十八、函数声明方式3，原始声明方式
var 变量名 = new Function(参数列表，函数体);//参数列表和函数体都需要是字符串
var sum = new Function("n1","n2","var sum = n1+n2;return sum");
sum(1,2);//调用此函数
这是最原始的声明方式，但可读性很差，了解即可
既然函数是一个Function类的对象，那么函数不仅可以赋值给一个变量，
而且可以赋值给另一个对象的属性，
function sum(n1,n2){return n1+n2;}
var xx = sum;//把sum函数赋值给变量xx
xx();//调用sum函数
var obj={};
obj.xxx = sum;//把函数sum赋值给obj对象的xxx属性
obj.xxx();//调用sum函数
十九、js变量的作用域
1，在<script>标签内直接定义的变量是全局变量，对整个页面的所有js代码都有效
2，js预先定义了一些全局变量，比如说name，测试的时候要注意
3，js引擎在执行代码之前，会把所有的全局变量声明放在顶部，赋值语句位置不变
4，在if、循环等语句中声明的变量，只要声明语句执行过，变量就会被提升为全局变量
5，变量可重复声明并会发生覆盖，使用变量时值为前面最后一次声明的值
6，在函数内定义的变量是局部变量，局部变量不会提升为全局变量，所以外面不可访问
7，在两个嵌套的函数中，外层函数定义的变量对内层函数有效，反之无效
8，在两个不是嵌套关系的函数中定义的变量对彼此都无效
9，特别注意嵌套函数内变量的使用
function a(){
var i = 0;
var b = function(){
//函数声明时函数体代码并不会执行
var m = i;
alert(m);
}
i=10;
b();//函数执行时，函数体代码var m = i;才会执行，但此时i为10；
}
a();//结果是alert出来10
function a(){
var i = 0;
var b = function(){
alert(b.i);
}
b.i=i;//在i的值改变之前，把i值存储到某个地方
i = 10;
b();
a();//结果是0
二十、String类
1，无论是原始类型的String值还是String类的对象，都有下面的属性和方法
length属性：此字符串的字符个数
charAt(number): 获取指定索引位置的字符串
concat(string) 拼接字符串，效果等同于+字符串连接符
indexOf(string) 返回指定字符串在此字符串中首次出现的索引位置
lastIndexOf(string) 返回指定字符串在此字符串中最后一次出现的索引位置
replace(string1,string2)使用string2替换string1一次
substring(number1,number2) 取出number1到number2索引范围内的子字符串
split(string) 使用指定字符串切分此字符串，返回切分后的字符串数组
trim() 剪去两端的空白字符
二十一、Date类
Date类用来处理日期和时间，基于1970年1月1日（世界标准时间）起的毫秒数（时间戳）
有多种方式创建日期对象：
var now = new Date();//当前时间
var date = new Date(1000);//1970年1月1日起，过了1000毫秒的时间
var date = new Date(year,month,day,hour,minute,second,millisecond);//通过分别指定各个时间分量来创建日期对象
Date提供的方法：
getTime() 获取䘝Date对象所基于的时间戳
此外还提供了一系列getter/setter方法来操作各个时间分量，如getHours()
注意：除了getMonth()的返回值是从0开始的，其余的都是从1开始
二十二、Math数学函数
1，js中有一个Math，可以用来执行数学任务，但它没有构造函数，所以不能创建对象，但是它可以直接调用函数或属性，和其他编程语言的静态类类似
2，常用属性：
Math.E 欧拉常数，也是自然对数的底数, 约等于 2.718
Math.LN2 2的自然对数, 约等于0.693
Math.PI 圆周率，一个圆的周长和直径之比，约等于 3.14159
3，常用方法
Math.abs(x) 返回x的绝对值
Math.ceil(x) 返回x向上取整后的值
Math.floor(x) 返回小于x的最大整数
Math.round(x) 返回四舍五入后的整数
Math.max(n1,n2 ...) 返回0个到多个数值中最大值
Math.min(n1,n2...) 返回0个到多个数值中最小值
Math.pow(x,y) 返回x的y次幂
Math.random() 返回0到1之间的伪随机数
Math.sin(x) 返回正弦值
二十三、RegExp类，正则表达式
1，正则表达式是一组独立的规则，几乎每个编程怨言都提供了实现这组规则的类
2，两种方式创建正则对象：
var reg = new RegExp(pattern,flags)
var reg = /pattern/flags
//flags 如果为g，表示完全匹配，如果为i，表示忽略大小写
3，RegExp提供了两个常用的方法：
test() 测试一端文本是否和此正则表达式匹配
exec() 可获得一段文本中和正则匹配的部分（返回值是一个数组或者null）
4，exec()方法返回的数组的元素和属性
属性/索引 描述 例子
[0] 匹配的到的字符串 w
index 匹配到的字符位于原始字符串的索引位置
input 原始字符串 hello world
二十四、js顶层对象：window对象
1，在JavaScript中，无论是全局变量还是函数，都在window对象的属性
2，window对象表示整个浏览器窗口，不仅仅js内容，整个HTML页面（包括所有元素和CSS内容）也都在window对象的管理之下
3，浏览器每次打开一个标签页就会创建一个window对象，浏览器窗口有时候会打开多个页面，也就是对应多个window对象，每个window对象几乎互不影响
4，除此之外window对象还提供了另外一些全局对象
二十五、window的全局属性
1，location地址栏对象
href属性
reload()
screenX 浏览器左边框距显示屏左边界的距离
screenY 浏览器右边框距显示屏右边界的距离
document页面文档对象，表示一个html页面
二十六、window的全局函数
alert() //弹出提示框
confirm() //弹出确认框
prompt() //弹出输入框
close() //关闭当前页
open() //打开一个新标签
setInterval()、clearInterval()
setTimeout() //在指定的毫秒数后调用函数或计算表达式、clearTimeout()
二十七、JavaScript调试
1，js代码的执行有个特点：从上往下，解释一句执行一句，遇到错误就停止执行
2，js代码调试步骤：
按F12打开调试界面
选中Sources
点击要调试的页面
刷新页面（按需添加断点页面）
二十八，引入外部js文件
可以把js代码抽取出来，通过这种方式引入：
<script type="text/javascript" src="test.js"></script>
引入外部js文件的<script>标签内不能再写js代码，会被忽略，也不能写成单标签形式
