本章内容为JavaScript基础（变量、数据类型、运算符、流程语句、数组、函数、字符串函数、正则表达式、DOM基本操作、Window 对象、JS对象、JSON、Cookie），博主自己以前整理的学习笔记，如有整理不对的地方，请各位大大指点出来

简介

0. 简介

JavaScript 对网页行为进行编程

javascript 是脚本语言，是一种轻量级的编程语言

JavaScript 是动态类型语言，而 Java 是静态类型语言

JavaScript 是弱类型的，Java 属于强类型

1. 命名规范

• 区分大小写

• 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）;其他字符可以是字母、下划线、美元符号或数字

• 不能含有空格和其他标点符号。

• 不能以关键字或保留字命名

2.书写规范

1. 缩进的最小单位是4个空格

2. 所有的变量应该在使用前声明

3. 命名应该由26个大小写字母(A .. Z, a .. z)，10个数字(0 .. 9)和_(下划线)组成。不要在名字里使用$(美元符号)或(反斜线符号)。

3. 使用

1、JavaScript 代码必须位于 < script > 与 </ script > 标签之间。

<script>
  document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

2、JavaScript 文件放置外部脚本引用。

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

4. 注释

5. 输出

输出

代码|详解 -|-|- window.alert()|【弹出警告框】 document.write()|【将内容写到HTML文档中】 innerHTML|【写入到HTML中】 console.log()|【写入到浏览器控制台】

语句标识符（关键词）

关键词|详解 -|-|- break|用于跳出循环。 catch|语句块，在 try 语句块执行出错时执行 catch 语句块。 continue|跳过循环中的一个迭代。 do ... while|执行一个语句块，在条件语句为 true 时继续执行该语句块。 for|在条件语句为 true 时，可以将代码块执行指定的次数。 for ... in|用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 function|定义一个函数 if ... else|用于基于不同的条件来执行不同的动作。 return|退出函数 switch|用于基于不同的条件来执行不同的动作。 throw|抛出（生成）错误 。 try|实现错误处理，与 catch 一同使用。 var|声明一个变量。 while|当条件语句为 true 时，执行语句块。

变量

1. 变量

变量是用于存储某种/某些数值的存储器。

2. 命名方法

2.1 匈牙利命名法

变量名 = 类型 + 对象描述

var s_webname = 'hello world'

2.2 驼峰式命名法

当标识符由一个或多个单词连接在一起，第一个单词的首字母小写，后面的单词首字母大写，其它字母全部小写。

var webName = 'hello world'

2.3 帕斯卡命名法

与骆驼式命名法类似，不过第一个单词首字母也大写

var WebName = 'hello world'

3.变量声明

var - 声明全局变量

let - 声明块级变量，即局部变量。(即：所声明的变量，只在let命令所在的代码块内有效。)

const - 用于声明常量，也具有块级作用域 ，也可声明块级。(const声明的变量不得改变值， 这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。不可重复声明。)

4.变量类型

此处不作介绍，详情可看 2.数据类型 →

5.变量作用域

在 JavaScript 中, 作用域是可访问变量的集合。

JavaScript 函数作用域: 作用域在函数内修改。

一个变量的作用域（scope)是程序源代码中定义这个变量的区域。

5.1 全局变量

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

5.2 局部变量

变量在函数内声明，变量为局部作用域。

局部变量的优先级高于同名的全局变量

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

数据类型

1. 数据类型

JavaScript 的数据类型，共有 七 种（其中 Symbol 是ES6新增），分为“基本类型”和“引用类型”

基本类型： 字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、空(Null)、未定义(Undefined)

引用类型： 对象(Object)

原始类型： 符号(Symbol)

null 和 undefined 通常被认为是特殊值，这两种类型的值唯一，就是其本身。

数据类型|说明 --|:--:|--: 字符串（String）|使用双引号 " 或单引号 ' 括起来的一个或多个字符 数字(Number)|包括整数和浮点数（包含小数点的数或科学记数法的数） 布尔(Boolean)|表示 true 或 false 这两种状态 空（Null）|变量或内容值为空（null），可以通过给一个变量赋 null 值来清除变量的内容 未定义（Undefined）|变量被创建后，未给该变量赋值，该类型只有一个取值：undefined 数组(Array)|var cars=new Array(); 对象(Object)|JavaScript 操作的对象 符号(Symbol)|Symbol 值通过Symbol函数生成。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。（PS：Symbol函数前不能使用new命令，否则会报错。）

2. js弱类型语言

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

js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型。

3. 数据类型转换

JavaScript 拥有动态类型，可以不需要指定数据类型，在执行时会自动转换

JavaScript 变量可以转换为新变量或其他数据类型：

• 通过使用 JavaScript 函数
• 通过 JavaScript 自身自动转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

4.数据类型判断

4.1 typeof 操作符

typeof 操作符用来检测变量的数据类型。

1. 写法

• typeof() 括号

• typeof object 中间加空格

2. 返回的数据类型

• number
• string
• boolean
• object
• undefined
• function
• Symbols

4.2 instanceof

instanceof 其实适合用于判断自定义的类实例对象, 而不是用来判断原生的数据类型

function judgeType2 (obj) {
  if (obj === null) return "null";
  if (obj instanceof Array)  return "array";
  return (typeof obj);
} 
judgeType2("123")   // "string"

4.3 Object.prototype.toString.call()

使用 Object.prototype.toString.call() 方法, 可以获取到变量的准确的类型.

console.log(Object.prototype.toString.call('asd'));  // [object String]

5. null、undefined、NaN

1. null

null 表示“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

2. undefined

undefined 表示“未定义”，可以把undefined看作是空的变量。

3. NaN

NaN，即非数字值，是一个特殊的数值，属于Number类型。

NaN的特点:

1. 任何设计NaN的操作都会返回NaN，这个特点在多步计算中有可能导致问题。
2. NaN与任何值都不相等，包括其本身。

运算符

1. 算数运算符

+（加法）、-（减法）、*（乘法）、/（除法）、%（取余）、++（自加）、--（自减）

// +（加法）
console.log( 1 + 1) // 2

// -（减法）
console.log( 2 - 1) // 1

// *（乘法）
console.log( 2 * 2) // 4

// /（除法）
console.log( 4 / 2) // 2

// %（取余）
console.log( 5 % 2) // 1

2. 赋值运算符

=（等于）、+=、-=、*=、/=、%=

// =（等于）
var a = 10 
console.log(a)  // 10

// +=
var a = 10 
console.log(a+=1) // 11

// -=
var a = 10 
console.log(a-=1) // 9

// *=
var a = 10 
console.log(a*=2) // 20

// /=
var a = 10 
console.log(a/=2) // 5

// %=
var a = 10 
console.log(a%=3) // 1

3. 字符串运算符

+、+=

+ 运算符也可用于对字符串进行相加

+= 赋值运算符也可用于相加（级联）字符串

4. 关系(比较)运算符

（大于）、<（小于）、>=（大于等于）、<=（小于等于）、!=（不等于）、==（等于）、===（全等）、！===（真不等）

5. 逻辑运算符

&&（逻辑与/并且）：当两边表达式均为真运算结果才为真，否则为假

||（逻辑或/或者）：当两边有一个表达式为真则结果即为真

！（逻辑非/取反）：取反

6. 位运算符

7. 其他运算符

7.1 三元运算符( ? : )

条件？条件成立执行：条件不成立执行；

2>1?console.log("true"):console.log("false")  // true

7.2 typeof

数据类型中已写过，点此跳转到对应位置

7.3 逗号(,)

逗号运算符的作用是将若干表达式连接起来。它的优先级别在所有运算符中是最低的，结合方向是"自左至右"的。 （即：逗号运算符：是按顺序执行表达式，并且获得右边表达式的值。）

逗号表达式的一般形式是：表达式1，表达式2，表达式3……表达式n

x=2*2,x*2;
console.log(x)  // 4

7.4 void

void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值

作用一：返回undefined

function tan(){
  return 33;
}
console.log(void tan());  // undefined

作用二:防止不必要的行为。在页面中有个a标签，但是该a标签又不是为了指向跳转页面的话，这个时候void运算符就派上大大的用场了。

<a href='javascript:void(0)'>点我将不会执行任何行为</a>

流程语句

1. 循环语句

1.1 while

1. 语法：

while(条件表达式){
  循环执行的代码块
}

2. 流程：

• 当指定的条件为 true 时循环指定的代码块
• 当指定的条件为 false 时退出循环体

3. 特性：

• 先检查条件，再执行循环，条件不满足则循环一次也不执行

4. 例子

var i = 0;
while(i < 2){
  console.log(i)
  i++;
}
// 0
// 1

1.2 do...while

1. 语法：

do{
  循环执行的代码块
}while(条件表达式);

2. 流程：

• 先执行循环体内代码块再进行判断
• 如果表达式的值为 true ，循环执行代码块
• 如果表达式的值为 false ，退出循环体

3. 特性：

• 先执行循环体，再进行条件判断，循环体内代码至少执行一次

4. 例子

var i = 0;
do{
  console.log(i)
  i++;
}while(i < 2)
// 0
// 1

1.3 for

1. 语法：

for(循环变量=初值;循环条件;递增/递减计数器){
  循环执行的代码块
}

2. 流程：

• 用循环变量初始值与循环条件相比较，确定返回值
• 如果返回值为 true ，执行循环体
• 执行完后进行递增/递减云算
• 将运算结果与循环条件相比较
• 如果返回值为 true 则继续执行，为 false 则退出循环

3. 例子

for(var i = 0;i < 2;i++){
  console.log(i)
}
// 0
// 1

1.4 for...in

1. 语法：

for(声明变量 in 对象){
  代码块
}

2. 例子

var arr= ['a','b','c'];
for(var x in arr ){
  console.log(arr[x]);
}
// a
// b
// c

2.跳转语句

2.1 return

终止循环体的运行，并返回一个值

2.2 break

终止整个循环，不再进行判断，只能用在循环或 switch 中。

2.3 continue

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。(即：结束本次循环，接着去判断是否执行下次循环)

3.条件判断语句

3.1 if

1. 语法：

if(条件表达式1){
  代码块 1
}else if(条件表达式2){
  代码块 2
}else{
  代码块 3
}

2. 流程：

• 判断条件1，如果返回值为 true ，执行代码块1
• 判断条件1的返回值为 false 则跳过语句块并检测条件表达式2
• 如果所有表达式的值均为 false 则执行 else 后面的语句

3. 例子

var a = 1
var b = 2
if(a > b){
  console.log("true")
}else{
  console.log("false")
}
// false

3.2 switch

1. 语法：

switch(条件表达式){
  case 标签1 ：
    代码块 1;
    break;
    …… ……
  default:
    代码块n;
}

2. 流程：

• 计算表达式的值，并与各标签比较
• 若找到与之匹配的标签，则执行其后的代码块
• 若没有找到与之匹配的标签，则直接执行 default 之后的代码块

3. 例子

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 = "周六";
}
console.log("今天是" + day)

//假设 new Date().getDay() 得到的值是5 那么最后输出是
//今天是周五

4.异常处理语句

4.1 throw

主动抛出异常

4.2 try

指明需要处理的代码块

4.3 catch

捕获异常

4.4 finally

后期处理

数组

1. 创建方法

1. 空数组

var Obj = new Array();

2. 指定长度数组

var Obj = new Array( Size );

3. 指定元素数组

var Obj = new Array( 元素1,元素2,元素3,...,元素N );

4. 单维数组

var Obj = [元素1,元素2,元素3,...,元素N];

5. 多维数组

var Obj = new Array( [数组序列1],[数组序列2],[数组序列3],...,[数组序列N] );

2. 数组属性

2.1 constructor

constructor 属性返回对象的构造函数

2.2 length

length 返回数组的长度

2.3 prototype

prototype 通过增加属性和方法扩展数组定义

3. 遍历数组

3.1 使用 for 循环

for(var i = 0;i < 5;i++){
  console.log(i)
}
// 0
// 1
// 2
// 3
// 4

3.2 使用 for...in

var arr = ['a','b','c'];
for(i in arr){
  console.log(arr[i])
}
// a
// b
// c

3.3 使用 forEach

var arr = ['a','b','c'];
arr.forEach(function(item) {
  console.log(item);
});
// a
// b
// c

4. 数组方法

4.1 concat()

连接两个或更多的数组，并返回结果。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

例子

var a = [1,2,3];
var b = a.concat(4,5)
console.log(b)
// [1,2,3,4,5]

4.2 join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

语法

arrayObject.join(separator)

例子

var a = [1,2,3];
var b = a.join(",")
console.log(b)
// 1,2,3

4.3 pop()

删除并返回数组的最后一个元素

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

语法

arrayObject.pop()

例子

var a = [1,2,3];
var b = a.pop()
console.log(b)  // 3
console.log(a)  //[1,2]

4.4 push()

向数组的末尾添加一个或更多元素，并返回新的长度。

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

语法

arrayObject.push(newelement1,newelement2,....,newelementX)

例子

var a = [1,2,3];
var b = a.push(4)
console.log(b)  // 4
console.log(a)  //[1,2,3,4]

4.5 reverse()

颠倒数组中元素的顺序。

语法

arrayObject.reverse()

例子

var a = [1,2,3];
var b = a.reverse()
console.log(b)  // 3,2,1
console.log(a)  // 3,2,1

4.6 shift()

删除并返回数组的第一个元素

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

语法

arrayObject.shift()

例子

var a = [1,2,3];
var b = a.shift()
console.log(b)  // 1
console.log(a)  // [2,3]

4.7 slice()

从某个已有的数组返回选定的元素

语法

arrayObject.slice(start,end)

例子

var a = [1,2,3];
var b = a.slice(1,2)
console.log(b)  // [2]
console.log(a)  // [1,2,3]

4.8 sort()

对数组的元素进行排序

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

语法

arrayObject.sort(sortby)

例子

var a = ['c','d','a','f'];
a.sort()
console.log(a)  // ["a", "c", "d", "f"]

4.9 splice()

删除元素，并向数组添加新元素。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

例子

var a = [1,2,3];
var b = a.splice(1,2)
console.log(b)  // [2,3]
console.log(a)  // [1]

4.10 toSource()

返回该对象的源代码。

该原始值由 Array 对象派生的所有对象继承。

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

语法

object.toSource()

例子

function employee(name,sex,born){
  this.name=name;
  this.sex=sex;
  this.born=born;
}
var bill = new employee("miluluyo","girl",1997);
document.write(bill.toSource());
//({name:"miluluyo", sex:"girl", born:1997}) 

4.11 toString()

把数组转换为字符串，并返回结果。

当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

语法

arrayObject.toString()

例子

var a = [1,2,3];
var b = a.toString()
console.log(b)  // 1,2,3
console.log(a)  // [1,2,3]

4.12 toLocaleString()

把数组转换为本地数组，并返回结果。

首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

语法

arrayObject.toLocaleString()

例子

var a = [1,2,3];
var b = a.toLocaleString()
console.log(b)  // 1,2,3
console.log(a)  // [1,2,3]

4.13 unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

语法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

例子

var a = [1,2,3];
var b = a.unshift(0,4,5)
console.log(b)  // 6
console.log(a)  // [0,4,5,1,2,3]

4.14 valueOf()

返回数组对象的原始值

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

语法

arrayObject.valueOf()

例子

var boo = new Boolean(false)
document.write(boo.valueOf())
// false

函数

1. 定义方法

1. 静态方法

function 函数名([虚参列表]){
  函数体;
  [return[函数返回值;]]
}

2. 动态匿名方法

var 函数名 = new function(["虚参列表"],"函数体")

3. 直接量方法

函数名 = function([虚参列表]){函数体;}

2. 调用方法

2.1 直接调用

函数名(实参列表)

2.2 链接中调用

<a href="javascript:函数名()">a标签</a>

2.3 在事件中调用

事件类型 = "函数名()"

2.4 递归调用

在函数体内部调用函数自身

function 函数名(){
  代码
  函数名();
}

3.方法

apply

将函数作为对象的方法来调用，将参数以数组形式传递给该方法

语法

function.apply(thisObj,[arg1,arg2,....argN])

call

将函数作为对象的方法来调用，将指定参数传递给该方法

语法

function.call(thisObj, arg1,arg2,...argN)

var foo = {
  value: 1
};
function bar() {
  console.log(this.value);
}
bar.call(foo); // 1
//call 改变了 this 的指向，指向到 foo
//bar 函数执行了

toString

返回函数的字符串表示

4. arguments 对象

arguments是一个对应于传递给函数的参数的类数组对象。

arguments对象是所有（非箭头）函数中都可用的局部变量。

属性

4.1 length

获取函数实参的长度

4.2 arguments.callee

返回当前正在指向的函数

function test() {
  console.log(arguments.callee) 
}
test();  //fn test

4.3 caler

返回调用当前正在执行函数的函数名

5. 函数参数

参数类型

5.1 形参

定义函数时使用的参数，接收调用该函数时传递的参数

5.2 实参

调用函数时传递给函数的实际参数

特性

1. 参数个数没有限制；

实参 < 形参： 多余形参 = undefined

实参 > 形参： 多余形参被忽略

2. 参数的数据类型没有限制；

3. 通过 arguments 对象访问参数数组

4. 参数始终按值传递

**基本类型：**传值

**引用类型：**传址

6. 指针标识

6.1 this

指向当前操作对象

6.2 callee

指向参数集合所属函数

6.3 prototype

指向函数附带的原型对象

6.4 constructor

指向创建该对象的构造函数

7. 箭头函数 （ES6）

和普通函数的区别

1. 不绑定this,arguments
2. 更简化的代码语法。

function(){
    console.log('hello')
}
//写成箭头函数后如下：
()=> conosle.log('hello')

8. 闭包

JavaScript 变量属于本地或全局作用域。

全局变量能够通过闭包实现局部（私有）。

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

console.log(add());  // 1
console.log(add());  // 2
console.log(add());  // 3

变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

字符串函数

1. 查找方法

1.1 字符串方法

chartAt()

chartAt() 返回字符串中第N个字符

chartCodeAt()

chartCodeAt() 返回字符串中第N个字符的代码

fromCharCode()

fromCharCode() 根据字符编码创建字符串

1.2 位置方法

indexOf()

indexOf() 从前向后检索字符串，看其是否含有指定字符串

lastIndexOf()

从后向前检索字符串，看其是否含有指定字符串

1.3 匹配方法

match()

match()找到一个或多个正则表达式的匹配

search()

search()检索字符串中与正则表达式匹配的字符串

replace()

replace()替换一个与正则表达式匹配的字符串

split()

split()根据指定分隔符将字符串分割成多个字符串，并返回数组

2. 操作方法

2.1 拼接方法

concat()

将指定字符串连接到此字符串的结尾

语法

string.concat(value..)

String str = "abc";
str = str.concat("123");
System.out.println(str);//abc123

2.2 获取方法

根据长度截取字符串

2.3 空格处理

trim 清除前置及后缀空格

timLeft 清除前置空格

trimRight 清除后缀空格

2.4 比较方法

localCompare() 用本地特定顺序比较两个字符串

3. 编码方法

字符串常规编码与解码 escape()、unescape()

URI字符串编码与解码 encodeURI()、decodeURI()

4. 转换方法

4.1 大小写转换

转为大写 toUpperCase()、toLocaleUpperCase()

转为小写 toLowerCase()、toLocaleLowerCase()

URI组件编码与解码 encodeURIComponent()、decodeURIComponent()

正则表达式

0. 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

1. 方式：

字面量

var 变量名 = /表达式/模式修饰符

构造函数

var 变量名 = new RegExp("表达式","模式修饰符")

2. 表达式

单个字符与数字

空白字符

定位符

限定符

分组

引用

或迷失

3. 模式修饰符

4. 属性

实例属性

构造函数属性

5. 方法

实例方法

exec

exec 在字符串中执行匹配检索，返回结果数组

test

test 在字符串中测试模式匹配，返回true或false

字符串方法

DOM 基本操作

0. DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1. 获取节点

document

节点指针

2. 节点操作

创建节点

插入节点

替换节点

复制节点

删除节点

3. 属性操作

获取属性

设置属性

删除属性

4. 文本操作

Window 对象

1. navigator 导航器对象

2. screen 显示器对象

3. history 历史对象

4. location 位置对象

属性

方法

5. document 文档对象

集合

属性

方法

6. 窗口控制

7. 焦点控制

8. 打开关闭窗口

open

close

9. 定时器

10. 对话框

11. 属性

状态栏

窗口位置

其他属性

JS 对象

1. javascript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

在 JavaScript 中，对象是数据（变量），拥有属性和方法。

2. 创建 javascript 对象

方法一：

let Person = new Object(); // 声明一个空对象

方法二：

let Person = {};   // 声明一个空对象

3. 对象属性及对象方法

JavaScript 属性 属性指的是与 JavaScript 对象相关的值。

JavaScript 对象是无序属性的集合。

属性通常可以被修改、添加和删除，但是某些属性是只读的。

访问语法 objectName.propertyName

JavaScript 方法

方法是存储为对象属性的函数。

访问语法 objectName.methodName()

let Person = new Object();
Person.name = "麋鹿鲁哟"  //设置对象属性
Person.age = 22
Person.getDate = function(){  //设置对象方法
  return new Date();
}

console.log(Person) // {name: "麋鹿鲁哟", age: "22"}

console.log(Person.name)  // 麋鹿鲁哟      //访问对象属性
console.log(Person.getDate()) //输出当前时间   //访问对象方法

delete Person.age  // delete 关键词从对象中删除属性

4. 对象访问器(get、set)

为什么使用 Getter 和 Setter？

• 它提供了更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

JavaScript Getter（get 关键词）

var Person = {
  name: "麋鹿鲁哟",
  age : 22,
  get lang() {
    return this.age;
  }
};
console.log(Person.lang)  // 22 

JavaScript Setter（set 关键词）

var Person = {
  name: "麋鹿鲁哟",
  age : 22,
  set lang(lang) {
    this.age = lang;
  }
};
// 使用 setter 来设置对象属性：
Person.lang = 3
console.log(Person.age)  // 3

5. 对象构造器

function Person(name,age){
  this.name = name;
  this.age = age;
}

函数 Person() 就是对象构造器函数。

通过 new 关键词调用构造器函数可以创建相同类型的对象：

var me = new Person("麋鹿鲁哟",22);

this 关键词

在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。

this 的值，在对象中使用时，就是对象本身。

在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。

请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

6. JavaScript 对象原型

原型继承

所有 JavaScript 对象都从原型继承属性和方法。

• 日期对象继承自 Date.prototype。
• 数组对象继承自 Array.prototype。
• Person 对象继承自 Person.prototype。
• Object.prototype 位于原型继承链的顶端：
• 日期对象、数组对象和 Person 对象都继承自 Object.prototype。

prototype 属性

JavaScript prototype 属性允许您为对象构造器添加新属性、方法

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.github = "https://github.com/miluluyo";

7. ES5 对象方法

7. prototype 继承

语法

子类.prototype = new 父类()

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

指向了一个对象，这个对象正式调用该构造函数而创建的实例的原型

proto

__proto__这是每一个 javascript 对象( null 除外)都具有的属性，这个属性会指向该对象的原型

8. Number 对象

9. Math (算数) 对象

执行常见的算数任务。

JSON

1. JSON

• JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
• JSON 是一种轻量级的数据交换格式
• JSON 具有自我描述性且易于理解
• JSON 独立于语言*

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用

交换数据

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

JSON.parse()

JSON 格式写的字符串转换为原生 JavaScript 对象

JSON.parse()  

JSON.stringify()

JSON.stringify() 把 JavaScript 对象转换为字符串。

var obj = { name:"麋鹿鲁哟", age:22};
JSON.stringify(obj)  

2. JSONP

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。

JSONP 使用 <script> 标签取而代之。

简介 JSONP 指的是 JSON with Padding。

从另一个域请求文件会引起问题，由于跨域政策。

从另一个域请求外部脚本没有这个问题。

JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。

就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

Cookie

1. Cookie

Cookie实际上是一小段的文本信息，客户端请求服务器，如果服务器需要记录该用户状态，就使用 response 向客户端浏览器颁发一个Cookie。客户端会把Cookie存起来，当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器，服务器检查该Cookie，以此来辨认用户状态，服务器也可根据需求修改Cookie的内容

2. 优点

1. 极高的扩展性和可用性

可以控制保存在cookie中的session对象的大小；

通过加密和安全传输技术（SSL），减少Cookie被破解的可能性；

只在Cookie中存放不敏感数据，被盗不会有重大损失；

控制Cookie的生命期，使之不会永远有效，偷盗者可能会拿到一个过期的Cookie；

基于文本轻量结构；

Cookie存储在客户端并在发送后由服务器读取；

3. 缺点

1. Cookie 数量和长度的限制

每个domain最多只能有20条cookie，每个cookie的长度不能超过4KB，否则被截掉；

2. 安全性

Cookie可能被拦截、篡改。如果Cookie被人拦截了，那人就可以取得所有的session信息

3. 有些状态不可能保存在客户端

例：防止重复提交表单，在服务端保存计数器，如果将此计数器保存在客户端，无用。

4. 延伸

Cookie 和 session 的区别

1. cookie数据 ==》 客户的浏览器 session数据 ==》 服务器

2. Cookie不是很安全，别人可以分析存放在本地的Cookie并进行Cookie欺骗，考虑到安全应当使用session

3. session会在一定时间内保存在服务器上，当访问增多，会比较占用服务器的性能，考虑到减轻服务器性能方面，应当使用Cookie

4. 单个Cookie数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie