JavaScript知识点（摘要）

目录

JavaScript简介

JavaScript语法

规范

使用

建议

数据类型

数字

字符串

null

undefined

Symbol

数组

对象

ECMAScript6（ES6）

JavaScript函数

数字

字符串

数组

日期类

数学

DOM（Document Object Model）

概念

JavaScript事件

输入事件

鼠标事件

点击事件

加载事件

事件添加及移除

Document对象

对象集合

对象属性

对象方法

BOM（Browser Object Model）

概念

window

location

history

弹出框

警告框

确认框

提示框

Timing（定时）事件

Cookie

---

JavaScript简介

JavaScript（简称“js”） 是一种具有函数优先特征的轻量级，解释型或即时编译型的编程语言。js 支持面向对象、命令式、声明式、函数式编程范式。

js的标准是ECMAScript 。

js 使用 Unicode 字符集。

完整的js实现包含三个部分：

(1).ECMAScript:                         描述了该语言的语法和基本对象。

(2).文档对象模型（DOM）:       描述处理网页内容的方法和接口。

(3).浏览器对象模型（BOM）:    描述与浏览器进行交互的方法和接口

JavaScript语法

规范

1. js严格区分大小写。

2. 变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是js的关键字。

3. 非strict模式下，变量可不经var声明【全局变量】。strict模式下【第一行加上 'use strict';】变量必须经过var声明【局部变量】。

4. 变量只能用var申明一次，但可以被多次赋值【=】为不同数据类型值【动态语言特征】。

5. 单行注释可用//，多行注释可用/* */。

6.在 HTML 中，js 代码应放在 <script> 与 </script> 标签之间。type 属性【 type="text/javascript"】在HTML5页面里不是必需的，因为js 是 HTML5及新版浏览器中的默认脚本语言。

7. 使用外部js脚本，需在<script>标签的 src属性中设置脚本的引入路径及名称。在外部文件里放在js脚本，好处有：

        (1). 实现了html和js的文件分离，便于阅读和维护js。

        (2). 浏览器可缓存js文件提升页面加载速度。

使用

1. for(;;)里可用break语句跳出循环，以避免造成死循环。

2. for ... in循环可用于读取对象的属性。如：for(var t in obj){...}。

    for ... in循环也可用于遍历数组，通过索引对数组元素进行操作。

3. do{ ... }while()相比较while(),在运行后，其循环体至少执行了一次。

4. 可用typeof运算符判断变量类型，注意array、null、object被视作object。可通过typeof o.length ==’number’或用o instanceof Array辨明出array，可通过===null辨明出null。

5. js输出数据【调试】的四种方法：

        (1). window.alert() 弹出提示框。

        (2). document.write() 向页面输出内容。

        (3). innerHTML   通过id属性标识元素，然后重写其内容。

        (4). console.log() 写入到浏览器的控制台。

建议

1. 每条语句结尾不省略分号;，以增强程序可读性，及避免在某些情况下js引擎自动加分号改变程序的语义。

2.书写 if(){...}else{...}语句时不省略{}。

3. 对Number做比较时，用严格【===】比较。

4.通过 [] 方式【 而非 new Array() 方式 】创建数组。

5.不要通过length属性直接修改Array的大小，访问数组索引时要确保索引不会越界。

数据类型

六种值类型【基本类型】，三种引用类型。

六种值类型：数字、字符串、布尔值、null、undefined、Symbol【ES6】。

三种引用类型：数组、对象、函数。

所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。

数字

js不区分整数和浮点数，统一用Number表示。NaN表示Not a Number，Infinity表示无限大。

浮点数的运算要注意把握好精确度。

1 / 3 === (1 - 2 / 3); // false

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

var x = 0.2 + 0.1;             // x 将是 0.30000000000000004

var x = (0.2 * 10 + 0.1 * 10) / 10;        // x 将是 0.3

NaN 属于 JavaScript 保留字，指示数字并非合法的数字。NaN与所有其他值都不相等，包括它自己。唯一能判断NaN的方法是通过isNaN()函数。

NaN === NaN; // false

isNaN(NaN);  // true

字符串

【BV>IE7】可以像数组一样取出字符串里的字符，超出索引范围则返回undefined，但要注意不能直接通过索引修改字符串。可用length 属性获取字符串的长度。

示例代码：

var s = 'Hello, world!';
console.log(s.length); // 13
s[0] = 'X';
console.log(s[0]);  // ‘H’
console.log(s[13]); // undefined

布尔值

一个布尔值只有true、false两种值。

js允许对任意数据类型做比较。可以直接用true、false表示布尔值，也可以通过布尔运算计算出来。

非严格比较时，js会把null、undefined、0、NaN和空字符串’’视为false。

示例代码：

console.log(false == 0);  // true
console.log(false === 0); // false
console.log(''==false);   // true
console.log(''===false);  // false

null

null表示“空”值，不同于0【数字】和''【长度为0的字符串】。

undefined

undefined表示“未规定”，访问未声明的值或者未规定的属性时，都会得到undefined返回值。

Symbol

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。每个从Symbol()返回的symbol值都是唯一的，一个symbol值能用来规定对象的唯一属性名。作为构造函数来说Symbol并不完整，因为它不支持语法："new Symbol()"。

Symbol.for()会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

示例代码：

var sym1 = Symbol();

var sym2 = Symbol('foo');

var sym3 = Symbol('foo');

var sym5 = Symbol.for('foo');

var sym6 = Symbol.for('foo');

console.log(sym2===sym3); //false

console.log(sym5===sym2); //false

console.log(sym5===sym3); //false

console.log(sym5===sym6); //true

注意可以通过引入一些文件等方式让IE浏览器支持ES6 新特性。

数组

js数组是一组按顺序排列的集合，数组里可以包含不同数据类型的元素。可以通过数组索引【起始值0】来访问或者修改数组里的元素。

可通过length属性来获取或修改数组的长度。

注意通过数组索引修改数组时，如果索引超出了范围，会导致数组大小的变化。

示例代码：

var arr = [1, 2, 3];

arr[5] = 'x';

console.log(arr); // arr变为[1,2,3,null,null,"x"]

arr.length=2;

console.log(arr); // arr变为[1,2]

对象

js的对象是一组由键-值组成的无序集合，用{...}表示对象。不要在最后一个键值对末尾加逗号，避免有的浏览器报错。

js对象的键都是字符串类型，值可以是任意数据类型。

获取一个对象的属性，可以用“对象变量.属性名”的方式。如果属性名包含特殊字符【如'-'】，就必须用’’括起来,访问这个属性也无法使用.操作符，必须用[‘xxx’]来访问。

示例代码一：

var person={name:'Bob',age:20,'middle-school':'???'};

console.log(person.name); //'Bob'

console.log(person['middle-school']); //'???'

console.log(person.middle-school); //ReferenceError: school is not defined

要检测一个js对象是否拥有某一属性，可以用in操作符。要判断一个属性是否是某个js对象自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法。

示例代码二：

var xiaoming={

name:'小明'

};

xiaoming.age=18; //新增age属性

console.log(xiaoming.age);//18

delete xiaoming.age; //删除age属性

console.log(xiaoming.age); //undefined

console.log('name' in xiaoming); //true

console.log('toString' in xiaoming); //true

console.log(xiaoming.hasOwnProperty('toString')); //false

instanceof 运算符用于检测构造函数的 prototype 【原型】是否出现在某个实例对象的原型链上。

语法：

        object【实例对象】 instanceof constructor【构造函数】

示例代码三：

function Person(){};

function Student(){};

var p =new Person();

Student.prototype=p;//继承原型

var s=new Student();

console.log(s instanceof Student);//true

console.log(s instanceof Person);//true

函数

在js中函数也是一种数据类型，这种类型就是 function。这种类型有两个重要的特征：

(1). 它所包含的是代码。

(2). 它们是可执行的（或者说是可调用的）。

既然函数是一种数据类型，那么自然就可以相互赋值、删除，函数的命名规则也跟一般变量相同。

1. 回调函数。将函数作为参数传递给其它函数。

代码示例：

function add(a,b){ return a()+b()}

function one(){ return  1;}

function two () { return  2;}

add(one ,two); //3

2. 自调函数。匿名函数后面直接加一个括号。

代码示例：

( function (name){alert(name+ "");}  )( "M") ;

3. 内部（私有）函数。在一个函数中规定另外一个函数。

代码示例：

var a= function(p){ 
     var b= function(t){
        return t* 2;
     };          
      return  "结果是"+b(p);
}
console.log(a( 6)); //结果是12

4. 返回函数的函数。

代码示例：

function a(){alert( 'A');  return  function (){alert( 'B')};}

var t=a();

t(); //等价于a()() ,先弹窗显示A，关闭弹窗后，弹出弹窗显示B。

5. 重写自己的函数。

代码示例：

function a(){
      alert( 'A'); 
a= function(){ 
alert( 'B');
};  
} 
a(); //弹窗显示A
a(); //弹窗显示B
a(); //弹窗显示B

ECMAScript6（ES6）

见 文档 《ECMAScript6（ES6）知识积累》。

JavaScript函数

数字

toString()      以字符串返回数值。

toFixed()       返回字符串值，它包含了指定位数小数的数字【四舍五入】。

toPrecision() 返回字符串值，它包含了指定长度的数字。

Number()       把 JavaScript 变量转换为数值。

parseInt()       解析其参数并返回整数或NAN。

parseFloat()   解析其参数并返回浮点数。

字符串

indexOf()       返回字符串中指定文本首次出现的索引【可指定起始位置】。

lastIndexOf() 返回指定文本在字符串中最后一次出现的索引。

search()        搜索特定值的字符串【可用正则表达式】，并返回匹配的位置。

slice()           提取字符串的某个部分并返回被提取的部分。

substring()   类似于 slice()，但不能接受负的索引。

substr()        类似于 slice()，第二个参数设置截取长度，而非截止位置。

replace()      返回替换后的字符串，大小写敏感【可用正则】，默认替换一次。

toUpperCase()  把字符串转换为大写。

toLowerCase()  把字符串转换为小写。

concat()             连接两个或多个字符串。

trim()                  删除字符串两端的空白符。【BV>IE8】

charAt()             返回字符串中指定下标（位置）的字符串。

charCodeAt()    返回字符串中指定索引的字符 unicode 编码。

split()                 把字符串转换为数组。

数组

toString()         把数组转换为数组值（逗号分隔）的字符串。

join()                把所有数组元素结合为一个字符串。

pop()               从数组中删除最后一个元素，返回被删除的元素。

push()             在数组结尾处添加一个新的元素，返回新数组的长度。

shift()              删除首个数组元素，并把所有其他元素“位移”到更低的索引。

unshift()          向数组头部添加新元素，并把旧元素往后位移。

splice()           向数组添加新项，还可删除旧元素。

concat()         合并（连接）现有数组来创建一个新数组。

slice()            切割数组，并返回切割部分的数组。

sort()             以字母顺序对数组进行排序,对数值排序时可使用a-b之类的技巧。

reverse()       反转数组中的元素。

forEach()      为每个数组元素调用一次函数（回调函数）。【BV>IE8】

map()           对每个数组元素执行函数来创建新数组。【BV>IE8】

filter()           创建一个包含通过测试的数组元素的新数组。【BV>IE8】

indexOf()     在数组中搜索元素值并返回其位置。【BV>IE8】

lastIndexOf() 从数组结尾开始搜索元素值并返回其位置。【BV>IE8】

Math.max.apply(null, arr)  查找数组arr中的最大值。

Math.min.apply(null, arr)   查找数组arr中的最小值。

日期类

getTime()          返回时间（从1970年1月1日至今毫秒数）

getFullYear()     返回年份（yyyy）

getMonth()        返回月份（0-11对应1月至12月）

getDay()           返回星期几。（0-6对应周日至周六）

getDate()          以数值返回天（1-31）

getHours()        获取小时（0-23）

getMinutes()     获取分（0-59）

getSeconds()    获取秒（0-59）

getMilliseconds() 获取毫秒（0-999）

toString()             把 Date 对象转换为字符串。

toUTCString()     根据世界时，把 Date 对象转换为字符串。

toLocaleString()  根据本地时间格式，把 Date 对象转换为字符串。

toLocaleDateString()根据本地时间格式把 Date 对象日期部分转换为字符串。

toLocaleTimeString()根据本地时间格式把 Date 对象时间部分转换为字符串。

将上面方法【除getDay()】里get换成set即可得到一组设置时间参数的方法。

注意toLocaleString()，toLocaleTimeString()可能会让凌晨0点显示为上午12点，这会造成一些人的困惑，直接用toString()则凌晨0点会显示为0点，而不是12点。也可以写个自定义函数自定义日期格式化字符串显示。

数学

abs(x)         返回 x 的绝对值

ceil(x)         对 x 进行上舍入

round(x)     把 x 四舍五入为最接近的整数

floor(x)       对 x 进行下舍入

pow(x,y)    返回 x 的 y 次幂

sqrt(x)       返回 x 的平方根

random()   返回 0 ~ 1 之间【包括0，不包括1】的随机数

max(x,y,z,...,n)   返回最大值

min(x,y,z,...,n)    返回最小值

DOM（Document Object Model）

概念

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

HTML DOM 模型被结构化为对象树。

DOM 是一项 W3C (World Wide Web Consortium) 标准，规定了访问文档的标准。

W3C DOM 标准被分为 3 个不同的部分：

(1).Core DOM - 所有文档类型的标准模型

(2).XML DOM  - XML 文档的标准模型

(3).HTML DOM - HTML 文档的标准模型

HTML DOM 是 HTML 的标准对象模型和编程接口。它规定了：

(1).作为对象的 HTML 元素

(2).所有 HTML 元素的属性

(3).访问所有 HTML 元素的方法

(4).所有 HTML 元素的事件

JavaScript事件

输入事件

onfocus           输入字段获得焦点。

onchange       更改输入内容【含 下拉框的选中选项发生变化】。

onblur            对象失去焦点。

onkeydown    按下某个键【识别任何键盘键，不区分字母大小写】。

onkeypress    按住某个键【仅识别字母数字键，字母区分大小写】。

onkeyup         释放按键。

onselect         文本被选取。

鼠标事件

onmousedown  鼠标按钮被按下。

onmousemove  鼠标被移动。

onmouseout      鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseup       鼠标按键被松开。

点击事件

onclick       单击。

ondblclick  双击。

onsubmit   点击提交按钮。

onreset     点击重置按钮。

加载事件

onload      加载后。

onabort     图像的加载被中断。

onerror      加载时发生错误。

onunload   用户退出页面。

onresize    窗口或框架被重新调整大小。

事件添加及移除

事件添加

addEventListener() 方法为指定元素指定事件处理程序【可指定多个】。此函数无返回值。        

语法：

        element.addEventListener(event, function, useCapture);

        参数：

        event 指定事件类型。

        function 指定当指定事件发生时需要调用的函数。

        useCapture指定是使用冒泡传播还是捕获传播【默认为false，表示使 用冒泡传播】。为true表示使用捕获传播。

注意：

        IE8及更早版本的IE浏览器不支持addEventListener() 方法和removeEventListener() 方法，需要用attachEvent() 方法和detachEvent() 方法来替代。

事件移除

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件处理程序【事件句柄】。此函数无返回值。

语法：

        element.removeEventListener(event, function, useCapture) ;

注意：

        removeEventListener() 不能移除匿名函数，只能移除有名字的函数。

Document对象

对象集合

forms[]     返回对文档中所有 Form 对象引用。

images[]  返回对文档中所有 Image 对象引用。

links[]      返回对文档中所有 Area 和 Link 对象引用。

对象属性

cookie            设置或返回与当前文档有关的所有 cookie。

domain          返回当前文档的域名。

lastModified   返回文档被最后修改的日期和时间。

referrer          返回载入当前文档的文档的 URL。

title                返回当前文档的标题。

URL              返回当前文档的 URL。

对象方法

getElementById()               返回对拥有指定 id 的第一个对象的引用。

getElementsByName()       返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

open()    擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

write()     向文档写 HTML 表达式 或 JavaScript 代码。

writeln()  等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

close()    关闭用 document.open() 方法打开的输出流，并显示选定的数据。       

注意：

        调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。

BOM（Browser Object Model）

概念

浏览器对象模型（BOM）允许 JavaScript 与浏览器对话，不存在浏览器对象模型的官方标准。

window

这里window代表浏览器的窗口，所有浏览器都支持 window 对象。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性。

//获取浏览器窗口的高度和宽度（不包括工具栏和滚动条）的浏览器兼容方案

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

window.open()          打开新窗口

window.close()         关闭当前窗口

window.moveTo()     移动当前窗口

window.resizeTo()    重新调整当前窗口

location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面，其window 前缀可省略。

window.location.href                 返回当前页面的 href (URL)

window.location.hostname       返回 web 主机的域名

window.location.pathname       返回当前页面的路径或文件名

window.location.protocol          返回使用的 web 协议（http: 或 https:）

window.location.port                返回（当前页面的）互联网主机端口的编号。

window.location.assign            加载新文档

history

window.history 对象包含浏览器历史，其window 前缀可省略。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

history.back()       等同于在浏览器点击后退按钮

history.forward()   等同于在浏览器中点击前进按钮

弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。这三种框都可以省略window前缀，文本换行可用\n。

警告框

window.alert("sometext");

确认框

如果用户单击“确定”，则返回 true。

如果用户单击“取消”，则返回 false。

window.confirm("sometext");

提示框

如果用户单击“确定”，该框返回输入值。

如果用户单击“取消”，该框返回 NULL。

window.prompt("sometext","defaultText");

Timing（定时）事件

window 对象允许以指定的时间间隔执行代码，这些事件可称为定时事件。

setTimeout、clearTimeout、setInterval、clearInterval可省略window前缀。     

   

setTimeout(function, milliseconds)  在等待指定的毫秒数后执行函数。

对应的停止方法为clearTimeout()方法：

        window.clearTimeout(timerVariable)

setInterval(function, milliseconds) 等同于 setTimeout()，但重复执行。

对应的停止方法为clearInterval()方法：

        window.clearInterval(timerVariable)

Cookie

Cookie 是为存储用户信息，而保存在计算机里的小的文本文件里的数据。

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

默认情况下，在浏览器关闭时会删除 cookie。可以在创建cookie时通过expires参数指定有效日期（UTC 时间）。

默认情况下，cookie 属于当前页。可以在创建cookie时通过path参数指定cookie路径。

删除 cookie 时不必指定 cookie 值，直接把 expires 参数设置为过去的日期即可。