JavaScript基础部分总结

JavaScript是什么

Java 服务器端的编程语言

JavaScript 运行在客户端(浏览器)的编程语言

JavaScript是一种运行在***客户端*** 的***脚本语言***
JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript和HTML、CSS的区别

HTML：提供网页的结构，提供网页中的内容
CSS: 用来美化网页
JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

ECMAScript - JavaScript的核心

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript的书写位置

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入

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

注意点

引用外部js文件的script标签中不可以写JavaScript代码

变量

什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

如何使用变量

var声明变量

var age;

变量的赋值

var age;
age = 18;

同时声明多个变量

var age, name, sex;
age = 20;
name = 'aa';

同时声明多个变量并赋值

var age = 20, name = 'aa';

变量在内存中的存储

var age = 888;

变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for、while。
区分大小写

规范 - 建议遵守的，不遵守不会报错

变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

下面哪些变量名不合法

a;	    
1;
age18;
18age;
name;
$name;
_sex;
&sex;
theworld  theWorld;

数据类型

简单数据类型

Number、String、Undefined、Null

Number类型

数值字面量：数值的固定值的表示法

110 1024 60.5
浮点数

浮点数
	var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等

数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

数值判断
- NaN：not a number
  
  NaN 与任何值都不相等，包括他本身
- isNaN: is not a number

String类型

‘abc’ “abc”

字符串拼接使用 + 连接
```
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
```
1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

Object

获取变量的类型

typeof

var age = 18;
console.log(typeof age);  // 'number'

数据类型转换

转换成字符串类型

toString()

var num = 5;
console.log(num.toString());

String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()

拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

parseFloat()

parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束
如果解析的内容里只有整数，解析成整数

+，-0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

布尔操作符（逻辑运算符）

&&运算是与运算

只有所有都为true，&&运算结果才是true；

逻辑与操作可以应用于任何类型的操作数，而不仅仅是布尔值，在有一个操作数不是布尔值的情况下，逻辑与操作不一定返回布尔值：
1.如果第一个操作数是对象，则返回第二个操作数
2.如果第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才返回该对象
3.如果两个操作数都是对象，则返回第二个操作数
4.如果第一个操作数是null，则返回null
5.如果第一个操作数是NaN，则返回NaN
6.如果第一个操作数是undefined，则返回undefined
逻辑与是短路操作，即如果第一个操作数能够决定结果，那么就不会对第二个操作数求值。逻辑与操作中，当第一个操作数是false时，则无论第二个操作数是什么值，结果都是false
||运算是或运算

只要其中有一个true，||运算结果都为true；

与逻辑与相似，如果有一个操作数不是布尔值，则结果不一定是布尔值：
1.如果第一个操作数是对象，则返回第一个操作数
2.如果第一个操作数的求值结果为false，则返回第二个操作数
3.如果两个操作数都是对象，则返回第一个操作数
4.如果两个操作数都是null，则返回null
5.如果两个操作数都是NaN，则返回NaN
6.如果两个操作数都是undefined，则返回undefined
!运算是非运算

他是一个单目运算符，把true变成false，把false变为true；
将他的操作数转为一个布尔值，然后求其反
1.如果操作数是对象，则返回false
2.如果操作数是一个空字符串，则返回true
3.如果操作数是一个非空字符串，则返回false
4.如果操作数是0，则返回true
5.如果操作数是任意非0数值（包括Infinity），则返回false
6.如果操作数是null，则返回true
7.如果操作数是NaN，则返回true
8.如果操作数是undefined，则返回true

!!模拟Boolean()转型函数，获得一个值对应的布尔值

乘性操作符

乘（*）

用于计算两个操作数的乘积
处理特殊值的规则：
1.有一个操作数是NaN===>NaN
2.Infinity * 0==>NaN
3.Infinity * 非0数值===>Infinity/-Infinity（取决于符号）
4.Infinity * Infinity===>Infinity
5.乘积超过数值的表示范围，返回Infinity/-Infinity（取决于符号）
6.如果有一个操作数不是数值，在后台调用Number()，然后应用上面的规则
除（/）

处理特殊值的规则：
1.有一个操作数是NaN===>NaN
2.0 / 0，返回NaN
3.非0数值 * 0，返回Infinity/-Infinity（取决于符号）
4.Infinity / Infinity，返回NaN
5…Infinity /任意非0数值，返回Infinity/-Infinity（取决于符号）
6.乘积超过数值的表示范围，返回Infinity/-Infinity（取决于符号）
7.如果有一个操作数不是数值，在后台调用Number()，然后应用上面的规则
求模（%）

返回余数
处理特殊值的规则：
1.被除数无穷大而除数有限大（无穷大%有限大），返回NaN
2.有限大的值 % 0，返回NaN
3.被除数有限大除数无穷大，返回被除数
4.Infinity % Infinity，返回NaN
5.0%任意数，返回0
6.如果有一个操作数不是数值，在后台调用Number()，然后应用上面的规则

加性操作符

加法（+）
如果两个操作数都是数值，执行常规的加法计算，然后根据规则返回结果
.如果有一个操作数是NaN，则返回NaN
.有一个操作数是字符串：①如果两个操作数都是字符串，则第二个操作数与第一个操作数拼接起来；②如果只有一个操作数是字符串，则将另一个操作数转换为字符串，饭后拼接起来
.如果有一个操作数是对象、数值、或布尔值，则调用他们的toString()方法取得对应的字符串值，在应用前面的规则
.对于null、undefined，调用String()获得字符串值
减法（-）
规则：
.如果有一个操作数是NaN，则返回NaN
.有一个操作数是字符串、布尔值、null或undefined：先在后台调用Number()函数将其转换为数值，然后根据前面的规则执行
.如果有一个操作数是对象，则调用valueOf()取得该对象的数值，如果得到NaN，则减法结果为NaN；如果没有valueOf()，则调用toString()方法取得对应的字符串值，并将其转换为数值。

关系操作符

小于（<）、大于（>）、小于等于（<=）、大于等于（>=）

相等运算符

实际上，JavaScript允许对任意数据类型作比较，但特别要注意相等于算符。JavaScript在设计时，有两种比较运算符：
第一种是==，它会自动转换类型再比较。!=：不相等
第二种是===，他不会自动转换类型，如果两个表达式（包括他们的数据类型）相等，则结果为true。!==：不全等
注意： NaN与其他的值都不想等，包括他自己，唯一能判断NaN的方法是通过isNaN()

语句

if语句
语法结构

if (/* 条件表达式 */) {
    
    
  // 执行语句
}

if (/* 条件表达式 */){
    
    
  // 成立执行语句
} else {
    
    
  // 否则执行语句
}

if (/* 条件1 */){
    
    
  // 成立执行语句
} else if (/* 条件2 */){
    
    
  // 成立执行语句
} else if (/* 条件3 */){
    
    
  // 成立执行语句
} else {
    
    
  // 最后默认执行语句
}

do-while语句
do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。
基础语法：

do {
    
    
  // 循环体;
} while (循环条件);

while语句
基本语法：

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
    
    
  //循环体
}

for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
    
    
  // 循环体4
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

for-in语句：
迭代语句，用来枚举对象的属性
在使用for-in循环之前，先检测该对象的值是否是null、undefined，对象若为null、undefined，不执行for-in循环体
语法：

for(property in expression) statement

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

label:statement

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

break、continue
break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号） continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
with语句
将代码的作用域设置到一个特定的对象中。
语法：

with (expression) statement;

严格模式下不允许使用with语句，将视为语法错误

switch语句
语法格式:

switch (expression) {
    
    
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  case 常量...:
    语句;
    break;
}

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换

数组

通过数组字面量创建数组

// 创建一个空数组
var arr1 = []; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 
// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;
console.log(arr3.length);

通过构造函数的方式定义一个数组

  var arr1=new Array();//构造函数的方式---空数组   
  var arr2=new Array(5);//构造函数的方式定义了一个数组,数组中有5个元素,数组长度是5,每个数据是undefined
  var arr3=new Array(10,20,1000,40,50,60);
    console.log(arr3);

数组的赋值（新增元素）

// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

函数

函数的定义

函数声明

function 函数名(){
    
    
  // 函数体
}

函数表达式

var f1 = function() {
    
    
  // 函数体
  console.log("hello word");
}
console.log(f1);//f1函数的代码
console.log(f1());//hello word
console.log(typeof f1);//function函数也是一种类型

如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了

函数的调用

调用函数的语法：

函数名();//直接调用

特点：

函数体只有在调用的时候才会执行，调用需要()进行调用。
可以调用多次(重复使用)函数的参数

函数的返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
    
    
  //函数体
  return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

注：推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值

函数里面可以调用其他的函数

函数参数

函数作为参数使用
如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数

function sayHi(fn) {
  console.log("hi");
  fn();//fn此时应该是一个函数
}
function Say() {
  console.log("hello");
}
    sayHi(Say);

形参和实参

形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。

实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

函数作为参数

因为函数也是一种类型，可以把函数作为两一个函数的参数，在两一个函数中调用

函数做为返回值

作用域

作用域：变量可以起作用的范围

全局变量和局部变量

全局变量

在任何地方都可以访问到的变量就是全局变量，对应全局作用域
局部变量

只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁
全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
除了函数以外,其他的任何位置定义的变量都是全局变量
局部变量:在函数内部定义的变量,是局部变量,外面不能使用
全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存

隐式全局变量:声明的变量没有var,就叫隐式全局变量
全局变量是不能被删除的,隐式全局变量是可以被删除的

块级作用域

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域

作用域链

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。
就近原则，由里向外找，先找到的num的值就是num的值。

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：

把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
先提升var，在提升function

JavaScript的执行过程

// 如果变量和函数同名的话，函数优先
console.log(a);//a函数代码
function a() {
    
    
  console.log('aaaaa');
}
var a = 1;
console.log(a);//1

变量提升

变量提升

定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升

JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

内置对象及常用方法

string 字符串

String	对字符串的支持
String.charAt( )	返回字符串中的第n个字符
String.charCodeAt( )	返回字符串中的第n个字符的代码
String.concat( )	连接字符串
String.fromCharCode( )	从字符编码创建—个字符串
String.indexOf( )	检索字符串
String.lastIndexOf( )	从后向前检索一个字符串
String.length	字符串的长度
String.localeCompare( )	用本地特定的顺序来比较两个字符串

数组方法（Array）

constructor 所建立对象的函数参考
prototype 能够为对象加入的属性和方法
index 对于由正则表达式匹配创建的数组，字符串中匹配项的从零开始的索引
input 对于由正则表达式匹配创建的数组，反映正则表达式与之匹配的原始字符串
length 获取数组元素的个数,即最大下标加1
concat(array1,arrayn)将两个或两个以上的数组值连接起来,合并后返回结果
join(string) 将数组中元素合并为字符串,string为分隔符.如省略参数则直接合并,不再分隔
pop() 移除数组中的最后一个元素并返回该元素
push(value) 在数组的末尾加上一个或多个元素,并且返回新的数组长度值
reverse() 颠倒数组中元素的顺序,反向排列
shift() 移除数组中的第一个元素并返回该元素
slice(start, deleteCount, [item1[, item2[,…[,itemN]]]]) 返从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素
sort(compare Function) 在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组
splice() 为数组删除并添加新的元素
toSource() 显示对象的源代码
toString() 将数组所有元素返回一个字符串,其间用逗号分隔
unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
valueOf() 返回数组对象的原始值
valueOf() 返回数组对象的原始值

Array	对数组的内部支持
Array.concat( )	连接数组
Array.join( )	将数组元素连接起来以构建一个字符串
Array.length	数组的大小
Array.pop( )	删除并返回数组的最后一个元素
Array.push( )	给数组添加元素
Array.reverse( )	颠倒数组中元素的顺序
Array.shift( )	将元素移出数组
Array.slice( )	返回数组的一部分
Array.sort( )	对数组元素进行排序
Array.splice( )	插入、删除或替换数组的元素
Array.toLocaleString( )	把数组转换成局部字符串
Array.toString( )	将数组转换成一个字符串
Array.unshift( )	在数组头部插入一个元素

时间对象 Data

时间对象是JavaScript的内置对象,使用前必须先声明
基本语法
var curr=new Data();
注意这里的关键字new的用法，Data()的首字母必须大写

Date对象提供了以下3类方法：

Date	操作日期和时间的对象
Date.getDate( )	返回一个月中的某一天
Date.getDay( )	返回一周中的某一天
Date.getFullYear( )	返回Date对象的年份字段
Date.getHours( )	返回Date对象的小时字段
Date.getMilliseconds( )	返回Date对象的毫秒字段
Date.getMinutes( )	返回Date对象的分钟字段
Date.getMonth( )	返回Date对象的月份字段
Date.getSeconds( )	返回Date对象的秒字段
Date.getTime( )	返回Date对象的毫秒表示
Date.getTimezoneOffset( )	判断与GMT的时间差
Date.getUTCDate( )	返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )	返回该天是星期几(世界时)
Date.getUTCFullYear( )	返回年份(世界时)

显示当前时间

    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth()
    var date = now.getDate()
    ar hours = now.getHours()
    var min = now.getMinutes()
    var sec = now.getSeconds()
    var wee = now.getUTCDay()
    document.write(year+'-'+(month+1)+'-'+date+'   '+hours+':'+min+':'+sec+'  '+'星期'+wee)

Math对象

Math对象的作用是执行常见的算术任务。

Math属性中最常用的属性就是PI了，我们一般用Math.PI来调用它。在控制台中输出它的值为3.1415926，也就是圆周率.Math对象的常用的属性主要就是PI了，其他的用的比较少.

Math	算术函数和常量
Math.abs( )	计算绝对值
Math.acos( )	计算反余弦值
Math.asin( )	计算反正弦值
Math.atan( )	计算反正切值
Math.atan2( )	计算从x轴到一个点之间的角度
Math.ceil( )	对一个数上舍入
Math.cos( )	计算余弦值
Math.E	算术常量e
Math.exp( )	计算ex
Math.floor( )	对一个数下舍入
Math.LN10	算术常loge10
Math.LN2	算术常量loge2
Math.log( )	计算一个数的自然对数
Math.max( )	返回最大的参数
Math.min( )	返回最小的参数