JavaScript | 总结

引入JavaScript

内部标签

<script>
	//.....
</script>

外部标签

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

数据类型

严格检查模式

'use strict';

• 支持ES6语法
• 严格检查模式，用于检查JavaScript随意产生的问题
• 必须写在第一行
• 局部变量建议使用let

字符串

• 字符串方法

Method	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将指定的 Unicode 值转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

1. 字符串可以是插入到引号中的任何字符。可以使用单引号或双引号。
2. 转义字符

代码	输出
\’	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

3. 多行字符串编写

var a = `你好
		你好
		你好`

4. 模板字符串

let name = "xiaoming";

let msg = 'hi,${name}';

5. 字符长度

控制台（console）打印

console.log(str.length)

6. 字符串的可变性——不可变
7. 大小写转换

//方法
console.log(str.toUpperCase())
console.log(str.toLowerCase())

8. 字符所在的位置

console.log(str.indexOf('s'))

9. 截取字符串

console.log(str.substring())

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];

1. 长度

arr.length

注意：给arr.length赋值，数组打小就会发生变化，如果赋值过小，元素就会丢失。

2. indexOf，通过获得下标索引
3. slice() ，截取Array的一部分，返回一个新的数组，类似于String中的substring
4. push() pop() 尾部
5. unshift() shift() 头部
6. sort() 排序
7. reverse() 元素反转
8. concat() 增加数组
   但不会修改数组，只会返回新的数组
9. join() 连接符
   打印拼接数组，使用特定的字符连接
10. 多维数组

对象

若干个键值对

var 对象名 = {
	属性名 : 属性值,
	属性名 : 属性值,
	属性名 : 属性值
}

//例如
var person = {
	name: 'xiaoming',
	age: 5,
	score: 0
}

1. 对象赋值

person.name = "xiaohong"

2. 动态的删减属性，通过delete删除对象的属性

delete person.name

3. 动态的添加属性，直接给新的属性添加值即可

person.sex = 'man'

4. 判断属性值是否在这个对象中 xxx in xxx

'age' in person

5. 判断一个属性是否是对象自身拥有的 hasOwnProperty()

hasOwnProperty('age')

流程控制

1. if 判断
2. while循环，避免死循环
3. for循环
4. forEach循环
5. for in和for of

• for in下标
• for of 值

var arr = [3,4,6]
for (var x of arr){
	console.log(x);
}

Map和Set

Map

var map = new Map([['tom',18],['jack',18],['rose',18],]);
var name = map.get('tom');//通过key获取value值
map.set('xiaoming',10);//新增
map.delete("jack");//删除

Set

set.add(1);//添加
set.delete(1);//删除
console.log(set.has(1));//是否包含1元素

iterator

遍历数组

var arr = [3,4,6]
for (var x of arr){
	console.log(x);
}

遍历Map

var map = new Map([['tom',18],['jack',18],['rose',18],]);
for (let x of map){
	console.log(x);
}

遍历Set

var set = new Set([5,6,7]);
for (var x of set){
	console.log(x);
}

对象

数字对象

• 数字属性

属性	描述
MAX_VALUE	最大的可能值在 JavaScript 中的数量可以有 1.7976931348623157E+308
MIN_VALUE	最小的可能值在 JavaScript 中的数量可以有 5E-324
NaN	等价于一个值不是一个数字。
NEGATIVE INFINITY	比 MIN-VALUE 小的值。
POSITIVE_INFINITY	比 MAX-VALUE 大的值。
prototype	数字对象的静态属性。使用原型对象的属性来给当前文档中的数字对象分配新的属性和方法。

• 数字方法

方法	描述
constructor()	返回创建此对象的实例的函数。默认这是数字对象。
toExponential()	将一个数字强制以指数表示法显示，即使这个数字在 JavaScript 通常规定使用标准符号表示的范围之内。
toFixed()	格式一个数为小数点右边有特定位数的小数。
toLocaleString()	返回当前数字的字符串值版本的格式可能根据浏览器的区域设置不同而发生变化。
toPrecision()	定义了总共有多少有多少为来显示一个数（包括小数点左边和右边的数）
toString()	返回数的值的字符串表示形式。
valueOf()	返回数的值。

布尔对象

• 布尔属性

属性	描述
constructor	返回创建这个对象的布尔函数的一个引用。
prototype	原型属性允许您添加对象的属性和方法。

• 布尔方法

方法	描述
toSource()	返回一个包含布尔对象来源的一个字符串；你可以使用这个字符串来创建一个等效的对象。
toString()	根据对象的值来返回“真”或者“假”。
valueOf()	返回布尔对象的原始值。

字符串对象

• String 属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许向对象添加属性和方法

• String 对象方法

方法	描述
charAt()	返回在指定位置的字符
charCodeAt()	返回在指定的位置的字符的 Unicode 编码
concat()	连接字符串
indexOf()	检索字符串
lastIndexOf()	从后向前检索字符串
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toString()	返回字符串
toUpperCase()	把字符串转换为大写
valueOf()	返回某个字符串对象的原始值

数组对象

• 数组属性

属性	描述
constructor	返回对创建该对象的函数的引用
index	从零开始检索匹配的字符串
input	只见于通过正则表达式创建的数组
length	设置或返回数组中元素的数目
prototype	允许向对象添加属性和方法

• Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果
every()	对数组元素应用指定的函数进行判断，当且仅当所有返回值为 true，返回 true，否则返回 false
filter()	创建一个新数组，数组中的元素是原数组中满足过滤函数返回值为空的元素
forEach()	从头到尾遍历数组，为每个元素调用制定的函数
indexOf()	从头到尾检索，返回给定元素在数组中的索引
join()	把数组的所有元素放入一个字符串。元素通过制定的分隔符进行分割
lastIndexOf()	从尾到头检索，返回给定元素在数组中的索引
map()	创建一个新数组，用来存储原数组中每个元素调用指定函数的返回值
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	同时对数组中的两个值应用一个函数，使减少到一个单一值（从头到尾）
reduceRight()	同时对数组中的两个值应用一个函数，使减少到一个单一值（从尾到头）
reverse()	颠倒数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
some()	对数组元素应用指定的函数进行判断，只有有一个返回值为 true，返回 true，否则返回 false
toSource()	返回该对象的源代码
sort()	将数组中的元素进行排序
splice()	在数组中插入或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	将一个或多个元素添加到数组的前面,并返回新数组的长度。

时间对象

• Date属性

属性	描述
constructor	返回对创建该对象的函数的引用
prototype	允许向对象添加属性和方法

• Date方法

方法	描述
Date()	返回当日的日期和时间
getDate()	根据本地时从Date对象返回一个月中的某一天（1 ~ 31）
getDay()	根据本地时从Date对象返回一周中的某一天（1 ~ 6）
getFullYear()	根据本地时从 Date 对象以四位数字返回年份
getHours()	根据本地时返回 Date 对象的小时 (0 ~ 23)
getMilliseconds()	根据本地时返回 Date 对象的毫秒(0 ~ 999)
getMinutes()	根据本地时返回 Date 对象的分钟 (0 ~ 59)
getMonth()	根据本地时从Date对象返回月份（1 ~ 11）
getSeconds()	根据本地时返回 Date 对象的秒数 (0 ~ 59)
getTime()	根据本地时返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)
getYear()	弃用,返回在指定的日期根据当地时间。使用getFullYear()代替。
setDate()	根据本地时设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear()	根据本地时设置 Date 对象中的年份（四位数字）
setHours()	根据本地时设置 Date 对象中的小时 (0 ~ 23)
setMilliseconds()	根据本地时设置 Date 对象中的毫秒 (0 ~ 999)
setMinutes()	根据本地时设置 Date 对象中的分钟 (0 ~ 59)
setMonth()	根据本地时设置 Date 对象中月份 (0 ~ 11)
setSeconds()	根据本地时设置 Date 对象中的秒钟 (0 ~ 59)
setTime()	根据本地时以毫秒设置 Date 对象
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)
setYear()	弃用,设置为指定的日期根据当地时间。使用 setFullYear() 代替。
toDateString()	把 Date 对象的日期部分转换为字符串
toGMTString()	弃用,将日期转换为一个字符串,使用互联网格林尼治时间约定。使用 toUTCString() 代替。
toLocalDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串
toLocalFormat()	将日期转换为一个字符串,使用格式化字符串。
toLocalString()	根据本地时间格式，把 Date 对象转换为字符串
toLocalTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串
toSource()	返回一个字符串代表一个等价的日期对象的源码,您可以使用这个值来创建一个新的对象
toString()	把 Date 对象转换为字符串
toTimeString()	把 Date 对象的时间部分转换为字符串
toUCTString()	根据世界时，把 Date 对象转换为字符串
valueOf()	返回 Date 对象的原始值

• Date 静态方法

方法	描述
Date.parse()	返回 1970 年 1 月 1 日午夜到指定日期（字符串）的毫秒数
Date.UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数

算数对象

• Math属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于 2.718）
LN2	返回 2 的自然对数（约等于 0.693）
LN10	返回 10 的自然对数（约等于 2.302）
LOG2E	返回以 2 为底的对数（约等于 1.414）
LOG10E	返回以 10 为底的对数（约等于 0.434）
PI	返回圆周率（约等于 3.14159）
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回2的平方根（约等于 1.414）

• Math方法

属性	描述
abs()	返回数的绝对值
acos()	返回数的反余弦值
asin()	返回数的反正弦值
atan()	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2()	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil()	对数进行上舍入
cos()	返回数的余弦
exp()	返回 e 的指数
floor()	对数进行下舍入
log()	返回数的自然对数（底为e）
max()	返回 x 和 y 中的最高值
min()	返回 x 和 y 中的最低值
pow()	返回 x 的 y 次幂
random()	返回 0~1 之间的随机数
round()	把数四舍五入为最接近的整数
sin()	返回数的正弦
sqort()	返回数的平方根
tan()	返回角的正切
toSource()	返回该对象的源代码

JSON

* JSON 是用于存储和传输数据的格式。
* JSON 通常用于服务端向网页传递数据 。

什么是JSON

• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 。

JSON 语法规则

• 数据为 键/值 对，key:value。
• 数据由逗号分隔。
• {} 保存对象
• [] 保存数组

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

函数

定义

方式一

function a(x){
	return x;
}

方式二

var a = function(x){
	return x;
}

function(x){}是一个匿名函数

调用

• 作为函数调用

函数名();

• 函数作为方法调用

函数名.方法名();

• arguments
  代表，传递进来的所有的参数，是一个数组。

var abs = function(x){
	for(var i = 0; i<arguments.length;i++){
	console.log(arguments[i];
	}
}

• rest
  ES6引入新特性，获取除了已经定义的参数之外的所有参数

function abs(a,b,...rest){
	console.log(a);
	console.log(a);
	console.log(rest);
}

变量的作用域

• 局部 JavaScript 变量
  在 JavaScript 函数中声明的变量，会成为函数的局部变量。
  局部变量的作用域是局部的：只能在函数内部访问它们。
  建议使用let定义局部变量。let解决了局部作用域冲突问题。
• 全局 JavaScript 变量
  函数之外声明的变量，会成为全局变量。
  全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

全局对象:window
所有的全局变量，都会自动绑定在window对象下。

• 自动全局
  如果您为尚未声明的变量赋值，此变量会自动成为全局变量。
  这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

ES6引入了常量关键字const

方法

定义

把函数放入对象的里面。

在方法中，this 表示该方法所属的对象。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

BOM

浏览器对象模型 (BOM)

• 浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
• 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象

• 所有浏览器都支持 window 对象。它代表浏览器的窗口。
• 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• 甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");

Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
• window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

其他方法

方法	描述
window.open()	打开新窗口
window.close()	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	重新调整当前窗口

Screen

代表屏幕尺寸
window.screen 对象不带 window 前缀也可以写：

属性	描述
screen.width	宽度
screen.height	高度
screen.availWidth	可用宽度
screen.availHeight	可用高度
screen.colorDepth	色深
screen.pixelDepth	像素深度

Location

当前页面的URL信息。

属性	描述
location.hostname	返回 web 主机的域名
location.pathname	返回当前页面的路径和文件名
location.port	返回 web 主机的端口 （80 或 443）
location.protocol	返回所使用的 web 协议（http: 或 https:）

History

浏览器历史记录
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

属性	描述
history.back()	与在浏览器点击后退按钮相同
history.forward()	与在浏览器中点击向前按钮相同

Navigator

window.navigator 对象可以不带 window 前缀来写。

属性	描述
navigator.appName	返回浏览器的应用程序名称
navigator.appCodeName	返回浏览器的应用程序代码名称
navigator.platform	返回浏览器平台（操作系统）
navigator.appVersion	返回有关浏览器的版本信息

Document

HTML DOM 的文档数

• 获取具体的文档数节点
• 获取cookie

DOM

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

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

查找 HTML 对象

属性	描述
document.anchors	返回拥有 name 属性的所有 元素。
document.applets	返回所有 元素（HTML5 不建议使用）
document.baseURI	返回文档的绝对基准 URI
document.body	返回 元素
document.cookie	返回文档的 cookie
document.doctype	返回文档的 doctype
document.documentElement	返回 元素
document.documentMode	返回浏览器使用的模式
document.documentURI	返回文档的 URI
document.domain	返回文档服务器的域名
document.domConfig	废弃。返回 DOM 配置
document.embeds	返回所有 元素
document.forms	返回所有 元素
document.head	返回 元素
document.images	返回所有 元素
document.implementation	返回 DOM 实现
document.inputEncoding	返回文档的编码（字符集）
document.lastModified	返回文档更新的日期和时间
document.links	返回拥有 href 属性的所有 和 元素
document.readyState	返回文档的（加载）状态
document.referrer	返回引用的 URI（链接文档）
document.scripts	返回所有

属性	描述
innerHTML	获取、改变或替换 HTML 元素的内容