javaScript的很多方法的参数以及参数个数非常灵活。请充分思考这句话的涵义！
javaScript大总结es6++(next)部分请移步juejin.cn/post/698665…
1. 基本语法
- 1.1引入
// 内联试
<a href="javascript:void(0)" onclick="alert('ok')">点击</a>
// 内嵌式
<script> alert('ok'); </script>
// 外链式
<script src="demo.js"></script>
- 1.2 调试输出
alert(*):将内容通过对话框弹出到浏览器
confirm(message)方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。
document.write(*):将内容直接输出到浏览器
console.log(*):将内容输出到浏览器的控制台console.log('hello');console.info('信息');console.error('错误'); console.warn('警告')
console.table(arr or obj):将数组和obj对象内容输出到浏览器的控制台
console.dir(obj)可以显示一个对象所有的属性和方法。
console.trace()用来追踪函数的调用轨迹。
console.time()和console.timeEnd()，用来显示代码的运行时间。
console.profile()的性能分析
console.assert(a==b)用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常
console.dirxml(node)用来显示网页的某个节点（node）所包含的html/xml代码。
console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）如：console.log("%d年%d月%d日",2011,3,26);
- 1.3 语句
javascript严格区分大小写
javascript会忽略多余的空格
javascript是脚本语言，浏览器在读取代码时，逐行的执行脚本代码。而对于传统的编程来说，会在执行前对所有代码进行编译（解释型语言）
程序都是从0开始计数
javascript代码的末尾不必须添加分号，但是推荐加上
- 1.4 注释
单行注释：(双斜杠) // 注释
多行注释：/* 注释 */
- 1.5 变量：
存储信息的“容器”
变量的命名规则：变量名由字母，数字，下划线和$组成，且不能以数字开头
申明变量： var username = 'zhangsan';
同时申明多个变量：var username = 'zhangsan', age = 30, sex = '男';
申明变量但是不赋值：var username; // 不使用var申明变量 username = 'zhangsan';
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
- 1.6 数据类型
字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）
使用typeof检测数据类型
Object.prototype.toString.call(obj).slice(8, -1) // 描述某个对象数据类型的字符串，如自定义的对象没有被覆盖，则会返回“[object type]”
- 1.6.1 字符串（String）
• 使用单引号和双引号定义字符串
• 单双引号需要注意的内容
• 单双引号没有区别，都不解析变量
• 单双引号可以相互嵌套
• 不可以嵌套自身，除非使用转义字符转义
- 1.6.2 数字（Number）
• 整型
• 浮点型（计算的时候有计算损耗，不建议进行精确计算）
• NaN(Not a number)
• NaN与任何值运算都为NaN
• NaN与任何值都不想等，包括自身
• isNaN():判断一个值是否时NaN
- 1.6.3 布尔（Boolean）
true
false
- 1.6.4 数组
// 1. 创建数组的方式
var cars = new Array(); cars[0] = 'BMW'; cars[1] = 'BYD'; cars[2] = 'BenZ';
// 2.直接定义数组
var cars = new Array('BMW', 'BYD', 'Benz');
// 3.简单定义
var cars = ['BMW', 'BYD', 'Benz'];
// 4.数组元素的值可以是任何值
var shoplist = ['zhangsan',20,true,null,undefined,[1,2,3],{}];
// 5.常用的一种复合数据(瀑布流，AngularJS中$scope.shoplist)
var shoplist = [ {id:1,username:"zhangsan",age:20,sex:"男"},
{id:2,username:"lisi",age:18,sex:"女"},
{id:3,username:"wangwu",age:32,sex:"男"}
];
1.6.5 对象
1.｛｝
var obj = { username:"zhangsan", age:20, sex:"男", say:function(){}, eat:function(){} }
2.使用new Object()定义
var obj = new Object(); obj['username'] = 'zhangsan'; obj.age = 20; obj.say = function(){}
3.使用构造函数定义
function Ball(){ this.x = 100; this.y = 100; this.radius = 50; this.draw = function(){} }
// 通过new关键字生成对象 var b = new Ball();
4类数组对象动态key
var obj={
["key"]:12
}
var keys="key"
var obj={
[keys]:12
}
var obj={}
obj["key"]=12
var keys="qwe"
var obj={}
obj[keys]=12
console.log(obj[keys],obj.key,obj["key"])
- 1.6.6 Undefined
• 未定义的变量 alert(typeof age)
• 定义但是未赋值的变量 var sex; alert(typeof age)
- 1.6.7 Null
• 空的引用
• 将值设置为null清空变量
注意 Object.create(null)与{}的区别
- 1.6.8 == 与 ===
== 与 ===的区别：是否进行类型转换
== 比较原理：
对于 == 来说，如果对比双方的类型不一样的话，就会进行类型转换。判断流程为：
首先会判断两者类型是否相同。相同的话比大小，类型不相同的话，那么就会进行类型转换
会先判断是否在对比 null 和 undefined，是的话就会返回 true
判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number
判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断
判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型(object.toString())再按照类型继续进行判断
===比较原理
判断两者类型和值是否相同，类型不一致，直接返回false；否则继续比较两值的大小
- 1.7 数据类型的相互转化
- 1.7.1 转化为字符串
String()
- 1.7.2 转化为布尔
• Boolean()
• ” 0 0.0 NaN false null undefined->false
• 其余都为真（’false’,’0’,’null’）
- 1.7.3 转化为数值 不包含进制之间的转化
• Number()
普通字符串->NaN
纯数字字符串,数值->原型输出
空字符串”,空格字符串’ ‘,null->0
true->1 false->0
undefined->NaN
• parseInt() 从第一个字符开始查找，直到找到非法字符(非数字)截止，返回找到的数字
• parseFloat() 从第一个字符开始查找，直到找到非法字符(除数字和第一个小数点之外的字符)截止，返回找到的数字
- 1.8 运算符
- 1.8.1 算术运算符
+ - * / % ++ --
- 1.8.2 赋值运算符
= += -= *= /= %=
- 1.8.3 连接运算符 +
• ＋号两边是纯数字：＋代表加法运算
• 除此之外，＋都是连接运算
- 1.8.4 比较运算符
= = = = = != ! = = > < <= > >=
- 1.8.5 逻辑运算符
• &&（两真为真，其余都为假）
• ||（两假为假，其余都为真）
• ! （取反）
- 1.8.6 条件运算符（三元运算符）
3==3 ? value1 : value2; // value1
- 1.8.6 表达式判值运算符
let data={}
data.obj?.obj
- 1.9 流程控制：条件语句
- 1.9.1 if条件语句(范围判断)
let arr=[]
if (Array.isArray(arr.children)&& arr.children.length){
// option
}
- 1.9.2 switch语句（具体值判断）
var month = 1;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log('31天');
break;
case 4:
case 6:
case 9:
case 11:
console.log('30天');
break;
case 2:
console.log('28天');
break;
default:
console.log('输入的月份有问题');
}
- 2.0 流程控制－循环语句
- 2.0.1 for循环
for (var i = 0; i<=10;i++){
((i)=>{
setTimeout(()=>{
console.log(i)
},i*1000)
})(i)
}
- 2.0.2 while循环
var i = 0; while (i>0){}
- 2.0.3 do…while循环
var i = 0; do { console.log(i); i++; } while (i=100)
- 2.0.4 for…in…(key或 index)循环
var data = {username:'张三',age:20,sex:'男'};
for (var i in data) { console.log(i+'===>'+data[i]); }
- 2.0.5 for…of…（值）循环
var data = {username:'张三',age:20,sex:'男'};
for (var i of data) { console.log(i); }
- 2.0.6 break和continue语句
break是结束整个循环体
continue是结束单次循环
for (var i = 0; I < 10; i++){
if( i % 2 === 0){
continue
}
cnsole.log(i)
}
- 2.0.7 通用循环
自定义实现一个通过回调里面return false可以终止整个循环的类似于forEach这样掉用的迭代器，并且可以遍历对象，数组等
考察类型判断，循环的终止方法，迭代器设计模式，回调函数，this的动态声明等
function each(object, callback) {
// 可终止循环each方法
var type = (function (obj) {
switch (obj.constructor) {
case Object:
return 'Object';
break;
case Array:
return 'Array';
break;
case NodeList:
return 'NodeList';
break;
default:
return 'null';
break;
}
})(object);
// 为数组或类数组时, 返回: index, value
if (type === 'Array' || type === 'NodeList') {
// 由于存在类数组NodeList, 所以不能直接调用every方法
[].every.call(object, function (v, i) {
return callback.call(v, i, v) === false ? false : true;
});
}
// 为对象格式时,返回:key, value
else if (type === 'Object') {
for (var i in object) {
if (callback.call(object[i], i, object[i]) === false) {
break;
}
}
}
}
- 2.1 正则表达式
- 2.1.1 元字符
• [0-9]:任意一个数字
• [a-z]:任意一个小写字母
• [x|y]:匹配x或者y（匹配其中的一个）
• [^0-9]:匹配一个任意非数字
• [\d]:任意一个数字
• [\s]:任意一个空白字符(\r\n\t)
• [\w]:约等于A-Za-z0-9_
• ^[a-z]{6,12}$:必须是6-12位的小写字母
- 2.1.2 量词
• 相当于{0,} 任意数量
• 相当于{1,} 至少一个
• ? 相当于{0,1} 至多一个
• {6,18}
- 2.1.3 模式修正符
• i:不区分大小写
• g:执行全局匹配
• m:执行多行匹配
- 2.1.3 模式修正符
• str.match(reg) // 正则reg匹配字符串str，返回null或[]
• reg.test(str) // 字符串str是否满足正则
• str.replace(/\B([A-Z])/g, '-$1').toLowerCase() // 小驼峰str转成连字符
• str.replace(/(\w*)-(\w*)/g, function($1, $2, $3) {
return $2 + $3[0].toUpperCase() + $3.slice(1)
}) // 连字符转成小驼峰
- 2.2 JSON：只有属性的对象
- 2.2.1 JSON功能
存储和传输数据的格式
不能添加注释
解析时从第一个字符开始解析并写内存
解析遇见错误直接抛出 json.input error
- 2.2.2 实例
// JS对象
// 与普通对象区别：只有属性，键用引号 {"username":"zhangsan", "age":20, "sex":"男"}
2.2.3 JSON方法
• 将JSON字符串转化为JSON对象：JSON.parse()
• 将Javascript对象转换为JSON字符串:JSON.stringify()
- 2.3 函数
- 2.3.1 函数定义
• 普通函数 function demo(){ console.log('第一种定义函数方式'); }
• 匿名函数 (function(){ console.log('第二种定义函数方式'); })()
• 使用Function定义函数 new Function('x','y','return x+y;');
2.3.2 函数的特点
• 普通函数在同一个script标签之内，可以先调用后定义，但是跨script标签则不支持
• 定义函数而不调用等于没写
• 同名函数会覆盖，不会报错
• 变量的作用域
• 在函数外申明的变量为全局变量，函数内可以直接调用
• 在函数内使用var申明的变量为局部变量，只能在函数内调用
• 在函数内直接定义变量为全局变量
• 参数个数
• 形参 > 实参：多余的形参的值为undefined
• 实参 > 形参：多余的实参被忽略
• argument函数内置对象
• 函数中内置的的所有参数组成的对象
- 2.3.3 函数分类
1.功能函数 执行一个功能，而不需要返回值
1.创建表格函数：createTable()
2.$.get('1.php',function(msg){ // 此处回调函数功能：判断用户名是否被注册，没有返回值 if (msg == 'yes') { spanObj.innerHTML = '该用名可用'; } else { spanObj.innerHTML = '该用户名已经被注册'; } })
3.返回值函数 1.AngularJS中getShopIndex(id),getCartIndex(id)都是具有返回值的函数，返回对应的索引值
4.获取结果 function demo(){ return 'ok'; } var d = demo(); alert(d); function test(){ alert('ok'); } var t = test(); alert(t);
- 2.4 内置对象
- 2.4.1 Array数组对象
arr.length:数组arr长度
• arr.join(*):把数组中的所有元素以*连接为一个字符串。
• arr.push(*):向数组的末尾添加一个或多个元素，并返回新的长度。
• arr.pop():用于删除并返回数组的最后一个元素。
• arr.shift():用于把数组的第一个元素从其中删除，并返回第一个元素的值。
• arr.unshift():可向数组的开头添加一个或更多元素，并返回新的长度。
• arr.sort([函数:排序规则]):arr.sort(function(a,b){return a-b;})用于对数组的元素进行排序。
• arr.reverse():用于颠倒数组中元素的顺序。
以上操作皆会改变原数组；
• arr.indexOf(*):可返回某个指定的字符串值在字符串中首次出现的位置。
• arr.lastIndexOf(*):可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置):可提取字符串的某个部分，并以新的字符串返回被提取的部分。
• arr.splice(起始位置,长度):从数组中添加或删除元素。
• arr.map(function(currentValue,index,arr){ // return newvalue about currentValue or other option }, thisValue):通过指定函数处理数组的每个元素，并返回处理后的数组。
• arr.filter(function(currentValue,index,arr){ return newvalue about currentValue or other option }, thisValue):检测过滤数值元素，并返回符合条件所有元素的数组。
• arr.some(function(currentValue,index,arr){ return bool }, thisValue):为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值，如果找到了这样一个值，some 将会立即返回 true。否则，some 返回false。
• arr.every(function(currentValue,index,arr){return bool}, thisValue):同上检测数值元素的每个元素是否都符合条件。
• arr.reduce (): [x1, x2, x3, x4].reduce(function f(x,y){return newvalue about xANDy}))相当于f(f(f(x1, x2), x3), x4)，Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。
2.4.2 Boolean布尔对象 • new Boolean(value); //构造函数 返回布尔值true or false和布尔值对象。 • Boolean(value); //转换函数 返回布尔值true or false 说明： 当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。 如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。 注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 "false"）。
- 2.4.3 Date对象
• var d = new Date()
• new Date() new Date(时间戳) new Date('2019/1/10 0:28:30'):注意这种格式的兼容性 new Date(2019,1,10,0,28,19,178)
• d.getFullYear():年
• d.getMonth():月
• d.getDate():日
• d.getHours():小时
• d.getMinutes():秒
• d.getSeconds():毫秒
• d.getTime():时间戳
扩展Date.prototype.format：
Date.prototype.format = function(format) {
//new Date( year, month, date, hrs, min, sec)
//new Date() //参数可以为整数 也可以为字符串 但格式必须正确 example: new Date(2009,1,1) //正确 new Date("2009/1/1") //正确
//example new Date().format( "当前日期为：YYYY-MM-DD，星期W，为第Q季度，时间为：hh:mm:ss:c")
let o = {
"Y+": this.getFullYear() + '',
"M+": this.getMonth() + 1, //month MM
"D+": this.getDate(), //day DD
"h+": this.getHours(), //hour hh
"m+": this.getMinutes(), //minute mm
"s+": this.getSeconds(), //second ss
"Q+": Math.floor((this.getMonth() + 3) / 3), //quarter 季度 q
"c+": this.getMilliseconds(), //millisecond 毫秒 c
"W": ['一', '二', '三', '四', '五', '六', '日'][this.getDay() - 1] //week 星期
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr((("" + o[k]).length >= 2 ? 2 : ("" + o[k]).length)))
}
}
return format
}
- 2.4.4 Math对象
• PI:圆周率π，即圆的周长和它的直径之比。这个值近似为 3.141592653589793
方法
• abs():可返回数的绝对值
• ceil():执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数
• floor():执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数
• round():把一个数字舍入为最接近的整数
• max():两个指定的数中带有较大的值的那个数
• min():两个指定的数中带有较小的值的那个数
• random():介于 0 ～ 1 之间的一个随机数
• sin(*)，cos(*),tan(*):三角函数，*为弧度, 1度转弧度写法为1*Math.PI/180。
• asin(x)，acos(x)反三角函数，x是-1.0 ~ 1.0 之间的数，返回的值是 0 到 PI 之间的弧度值，除此以外返回NAN。
• atan（x）表示求的是x的反正切，其返回值为[-pi/2,+pi/2]之间的一个数。
• atan2（y，x）求的是y/x的反正切，其返回值为[-pi,+pi]之间的一个数。
- 2.4.5 Number对象
• MAX_VALUE:最大的数
• MIN_VALUE:最小的数
• toFixed():把 Number 四舍五入为指定小数位数的数字
• Number("123456.123456").toLocaleString() // "123,456.123" 此方法默认最多小数位只保留3位
Number.prototype.toLocaleString(locales,options)
locales:'zh-Hans-CN'
options:{
minimumIntegerDigits:使用的整数数字的最小数目.可能的值是从1到21,默认值是1.
minimumFractionDigits:使用的小数位数的最小数目.可能的值是从 0 到 20；默认为普通的数字和百分比格式为 0；默认为货币格式是由 ISO 4217 currency code list 提供 (如果列表中没有提供则值为 2)。
maximumFractionDigits:使用的小数位数的最大数目。可能的值是从 0 到 20；纯数字格式的默认值是minimumfractiondigits 和 3 中大的那一个；货币格式默认值是 minimumfractiondigits 和 ISO 4217 currency code list 中大的那一个(如果列表中没有提供则值为2)；百分比格式默认值是 minimumfractiondigits 和 0 中大的那一个。
minimumSignificantDigits:使用的有效数字的最小数目。可能的值是从1到21；默认值是1。
maximumSignificantDigits:使用的有效数字的最大数量。可能的值是从1到21；默认是 21.
notation:该号码应显示的格式，默认为 “standard”。"standard" 纯数字格式；"scientific" 返回格式化数字的大小顺序；"engineering" 当被三除时返回十的指数；"compact" 代表指数的字符串，默认使用 “short” 格式a；"compactDisplay" 仅在 notation 为 “compact” 时使用，采用 “short”（默认）或“long”
}
- 2.4.6 String对象
• length:长度
• split():把一个字符串分割成字符串数组 例如split(" ")返回单词数组；
• search():检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
• match():在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
• replace():用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
• slice(start,end):可提取字符串的某个部分，并以新的字符串返回被提取的部分
• indexOf():某个指定的字符串值在字符串中首次出现的位置
• lastIndexOf():一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
• charAt():返回指定位置的字符
• charCodeAt():指定位置的字母对应的Unicode编码
• String.formCharCode():将Unicode编码转为字符
2.4.7 RegExp对象
• reg.test(str):使用正则表达式检验str是否符合要求
- 2.5改变this指针的 apply(),call(),bind()的使用及区别
• JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在以下五种不同的情况下 ，this 指向的各不相同。
• a全局范围内this;它将会指向全局对象。浏览器中运行的 JavaScript 脚本，这个全局对象是 window。
• b函数调用 func*()这里 this 也会指向全局对象。ES5 注意: 在严格模式下（strict mode），不存在全局变量。 这种情况下 this 将会是 undefined。
• c方法调用 some.func* () ,this 指向 some对象。
• d调用构造函数new func* ();如果函数倾向于和 new 关键词一块使用，则我们称这个函数是 构造函数。 在函数内部，this 指向新创建的对象。
• e形如以下显式的设置this
• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81
• 当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法，后面加上括号。而 apply/call 则会立即执行函数。
• apply()
somefunc.call(this作用域所指代的目标对象，[arg1, ...,argn])
• call ()
somefunc.call(this作用域所指代的目标对象，arg1, ...,argn)
• bind ()
somefunc.call(this作用域所指代的目标对象，arg1, ...,argn)
- 2.5JavaScript中运算符优先级，从高到低
优先级
运算类型 关联性 运算符
20
圆括号( …)
19
成员访问 从左到右 … . …
需计算的成员访问 从左到右 …[ …]
new (带参数列表) new … ( … )
函数调用 从左到右 … ( … )
18
new (无参数列表) 从右到左 new …
17
后置递增(运算符在后) … ++
后置递减(运算符在后) … --
16
逻辑非 从右到左! …
按位非 从右到左 ~ …
一元加法 从右到左 + …
一元减法 从右到左 - …
前置递增 从右到左++ …
前置递减 从右到左-- …
typeof 从右到左 typeof …
void 从右到左 void …
delete 从右到左 delete …
15
幂 从右到左 … ** …
14
乘法 从左到右 … * …
除法 从左到右 … / …
取模 从左到右 … % …
13
加法 从左到右 … + …
减法 从左到右 … - …
12
按位左移 从左到右 … << …
按位右移 从左到右 … >> …
无符号右移 从左到右 … >>> …
11
小于 从左到右 … < …
小于等于 从左到右 … <= …
大于 从左到右 … > …
大于等于 从左到右 … >= …
in 从左到右 … in …
instanceof 从左到右 … instanceof …
10
等号 从左到右 … == …
非等号 从左到右 … != …
全等号 从左到右 … === …
非全等号 从左到右 … !== …
9
按位与 从左到右 … & …
8
按位异或 从左到右 … ^ …
7
按位或 从左到右 … | …
6
逻辑与 从左到右 … && …
5
逻辑或 从左到右 … || …
4
条件运算符（三目） 从右到左 … ? … : …
3
赋值 从右到左
… = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= … 左移
… >>= … 右移
… >>>= … 无符号右移
… &= … 位与
… ^= … 位异或
… |= … 位或
2
yield 从右到左 yield …
yield * 从右到左 yield * …
1
展开运算符 ... …
0
逗号 从左到右 … , …
2.BOM（Window对象）
- 2.1 全局属性和函数
• 所有的全局变量是window对象的属性
• 所有的全局函数是window对象的方法
• 系统方法
• alert()
• confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框
• prompt()提示用户输入的对话框
• moveBy():可相对窗口的当前坐标把它移动指定的像素、
• moveTo()把窗口的左上角移动到一个指定的坐标、
• resizeBy()按照指定的像素调整窗口的大小、
• resizeTo()、把窗口的大小调整到指定的宽度和高度
• scrollBy()按照指定的像素值来滚动内容、
• scrollTo()把内容滚动到指定的坐标
• open(‘1.html’,”,’width=200,height=”200’):打开一个新窗口
• close():关闭窗口
• setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式、
• setTimeout()在指定的毫秒数后调用函数或计算表达式、
• clearInterval(timeout)取消由 setInterval() 设置的 timeout、
• clearTimeout(timeout):取消由 setTimeout() 方法设置的 timeout
- 2.2 Navigator对象（浏览器相关的信息）
• appCodeName 返回浏览器的代码名。
• appName 返回浏览器的名称。
• appVersion 返回浏览器的平台和版本信息。
• cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
• platform 返回运行浏览器的操作系统平台。
• userAgent 返回由客户机发送服务器的 user-agent 头部的值。
• userLanguage 返回 OS 的自然语言设置。
- 2.3 Screen对象（屏幕相关的信息）
• width
• height
• availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)。
• availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)。
- 2.4 Frames对象:返回窗口中所有命名的框架
- 2.5 History对象（当前那浏览器的历史记录）
• length:返回浏览器历史列表中URL数目
• back():加载 history 列表中的前一个 URL。
• forward():加载 history 列表中的下一个 URL。
• go():加载 history 列表中的某个具体的页面
• history.pushState(data,”,下标) 与window.onpopstate()结合使用
- 2.6 Location对象（当前浏览器的url地址信息）
• hash:锚点 历史回退
• window.onhashchange()
• href
• reload()
HTML DOM对象
- 3.1 DOM Document对象
- 3.1.1 Form表单对象
• document.forms[0]
• document.forms['formName']
• document.formName
• 表单元素对象:formObj.inputName
- 3.1.2 Select对象
属性：
disabled
length
selectedIndex
方法：
add()
remove()
- 3.1.2 table表格对象
• table.rows：获取表格行
• talbe.insertRow(index)：添加行
• table.deleteRow(index)：删除行
• row.cells:获取单元格对象
• row.insertCell(index)：添加单元格
- 3.1.3 Cookie对象
document.cookie = 'username=zhangsan;expires=date;path=/;
domain=qq.com;secure'
cookie.get()/set()
- 3.1.4 localStorage与sessionStorage
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。
localStorage[“somekey”]= JSON.stringify(value) //存
JSON.parse(localStorage[“somekey”]);//取
localStorage.getItem(“somekey”);//获取值
localStorage.setItem(“somekey”,value);//设置值
localStorage.removeItem(“somekey”,);//删除某条缓存
localStorage.clear();//清除所有缓存
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
sessionStorage用法类同localStorage
- 3.2 DOM 功能（通过功能确定DOM是做什么的）
- 3.2.1 获取并改变HTML标签
document.getElementById()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector('css选择器#box .a div'):匹配复合条件的第一个元素
• document.querySelectorAll()：匹配所有的复合条件的元素
• ID名直接获取（用于测试，不推荐用于正式环境）
- 3.2.2 获取并改变HTML属性
• obj.src
• obj.getAttribute('attr'):通过名称获取属性的值
• obj.setAttribute('attr','value'):创建或改变某个新属性
• obj.removeAttribute('attr'):删除指定的属性
- 3.2.3 获取并改变CSS样式
obj.style.width:获取样式
获取最终的样式（兼容）
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];
}
- 3.2.4 事件处理
- 3.2.4.1 鼠标事件 • onclick:单机 • ondblclick:双击 • oncontextmenu:右击 • onmouseover:移入 • onmouseout:移出 • onmousedown:按下 • onmouseup:抬起 • onmousemove:移动
- 3.2.4.2 键盘事件
• onkeydown:按下
• onkeyup:抬起
• onkeypress:在键盘按键被按下并释放一个键时发生
- 3.2.4.3 表单事件
• onfocus:聚焦
• onblur:失焦
• onsubmit:提交
• onchange:表单元素改变事件
• onreset:重置按钮被点击时
• onselect:文本被选定
- 3.2.4.4 框架对象事件
• onload:当页面加载完成的时候
• onunload:用户退出页面
• onresize:当页面大小发生改变的时候
• onerror:当图片加载失败的时候
• onabort:图像加载被中断
• onscroll:当页面发生滚动的时候
• 延迟加载：onscroll
- 3.2.4.5 鼠标键盘属性值
• altKey:Alt 键是否被按下并保持住了
• shiftKey:
• ctrlKey:
• clientX:鼠标指针向对于浏览器页面（或客户区）的水平坐标
• clientY:鼠标指针向对于浏览器页面（或客户区）的垂直坐标
- 3.2.4.6 事件冒泡
• event.stopPropagation() 阻止事件冒泡，之后的代码继续执行
• event.cancelBubble = true
注意 return false; 代表终止函数，之后的代码将不执行
- 3.2.4.7 a标签事件默认行为（preventDefault自己查阅资料解决）
• 点击a链接默认跳转页面
• 点击提交按钮默认提交表单
• 点击鼠标右键出现右键菜单
• a标签建立锚点 点击a自动滚动至百度内容div
<a href="#baidu-id">百度</a>
<div id="baidu-id">百度内容</div>
// 阻止a链接跳转（如果要用a链接做点击事件，务必将这里禁止） <a href="javascript:void(0);">百度</a>
// 表单 formObj.onsubmit = function(){ return false; }
- 3.2.4.8 js默认事件绑定与解绑
var btn = document.getElementById("btn");
第一种
绑定：
btn.事件名= function(){
alert("btn1事件绑定成功！");
}
解绑：
btn1.onclick =null;
alert("btn1所绑定的事件已经被移除！");
}
第二种
attachEvent 绑定：
btn.attachEvent ('onclick',function(){alert('1');});
detachEvent 解绑：
btn.detachEvent ('onclick',function(){alert('1');});
第三种
addEventListener绑定：
btn.addEventListener('click', function(){alert('1');},false);
removeEventListener解绑
btn.removeEventListener('click', function(){alert('1');},false);
说明：同一事件多次注册会导致事件累加和冒泡，注册前请解除该事件后再重新注册；
- 3.2.4.9 针对node(所选择的dom)节点（select，input，textarea）值改变的实时监听，
var node = document.getElementById("inputele");
node.addEventListener('input', function(e) {
console.log(e.target.value);
})
- 3.3 DOM 节点操作
- 3.2.1 标签元素的属性
• attributes:属性返回包含被选节点属性的 NamedNodeMap
• className:属性可设置或返回元素的 class 属性
• childNodes/children:所有子节点的集合/子节点
• firstChild/firstElementChild:第一个子节点/第一个元素子节点
• lastChild/lastElementChild:最后一个子节点/最后一个元素子节点
• nextSibling/nextElementSibling:下一个节点/下一个元素节点
• previousSibling/previousElementSibling:前一个兄弟节点/前一个元素节点
• parentNode:定位到一个节点，找到他的父节点
• nodeName:节点的名称
• nodeType:节点的类型。
• nodeValue:节点的值。
• innerHTML:获取或设置的是元素中的所有内容，包含标签
• clientWidth:获取浏览器的宽度
• clientHeight:获取浏览器的高度
• offsetHeight:获取div对象的高度(宽度 = 自身宽度+边框厚度+padding值)
• offsetWidth:获取div对象的宽度
• offsetLeft:获取div距离页面(父级元素有定位，则相对于父级元素)的左边距
• offsetTop:获取div距离页面(父级元素有定位，则相对于父级元素)的上边距
• scrollWidth:获取页面的总宽度
• scrollHeight:获取页面的总高度
• scrollTop:获取浏览器滚动的高度
• scrollLeft:获取浏览器滚动的宽度
- 3.2.2 标签元素的方法
• appendChild():向节点的子节点列表的末尾添加新的子节点
• insertBefore():在已有的子节点之前插入一个新的子节点
• replaceChild():用其他节点替换某个子节点
• removeChild():删除指定节点
• cloneNode():创建指定的节点的精确拷贝
brower对象
- 4.1 window 对象
var window = window || {};
window.addComment = function () { };
window.adsbygoogle = function () { };
window.alert = function () { };
//对象实现HTML5对应WEB离线功能
window.applicationCache = function () { };
//将ascii字符串或二进制数据转换成一个base64编码过的字符串 解码
window.atob();
// 编码
window.btoa("Hello, world");
// 分享
window.bdShare();
// 方法可把键盘焦点从顶层窗口移开。
window.blur();
// 它用来存储 Response 对象的。也就是说用来对 HTTP ，响应做缓存的。虽然 localStorage 也能做，但是它可能更专业。
window.caches();
// 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.
window.cancelAnimationFrame();
// requestIdleCallback 是新API，当浏览器稍作喘息的时候，用来执行不太重要的后台计划任务
window.requestIdleCallback()
// 注册窗口以捕获指定类型的所有事件
window.captureEvents();
// 方法可取消由 setInterval() 设置的 timeout ,参数必须是由 setInterval() 返回的 ID 值
window.clearInterval();
// 同上
window.clearTimeout();
// 包含关于 Web 浏览器的信息
window.clientInformation()
// 关闭当前页面
window.close();
// 确认弹窗
window.confirm();
// 位图裁剪 返回一个位图 ，可以设置宽高 附上:demo
window.createImageBitmap();
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();
image.onload = function () {
Promise.all([
createImageBitmap(this, 0, 0, 32, 32),
createImageBitmap(this, 32, 0, 32, 32)
]).then(function (sprites) {
ctx.drawImage(sprites[0], 0, 0);
ctx.drawImage(sprites[1], 32, 32);
});
}
image.src = 'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1349487841,1262002022&fm=85&s=E1B876DBCA1075C4922022380300D057';
// 数据加密
window.crypto();
// 文档对象
window.document
// Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。
window.fetch()
// 查找字符串 返回true or false
window.find();
// 打印
window.print();
// 跨域通信
window.postMessage()
// 允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据
window.Performance() ==> now || mark
// screen
window.screen();
