前端笔记：JavaScript

Array对象

Array即我们所说的数组，js中的数组对象不像java中那么严谨，Array是长度自动变化的数组。我们可以这样创建一个数组：

var arr = [1,2,3];//直接创建
//使用构造器创建
var arr1 = new arr();
var arr2 = new arr(4);//只写一个数字则表示初始化数组长度
var arr3 = new arr(1,2,3);

Array的三个属性：constructor、property、length。
Array常用的方法：

• pop()：删除数组的末尾元素，返回删除元素。
• push()：向数组末尾添加元素，返回数组length。
• unshift()：删除数组的头部元素，返回删除元素。
• shift()：向数组头部添加元素，返回数组length。
• slice()：slice是片的意思，所以slice方法是截取数组的一部分并返回。比如arr.slice(1,3)就是截取arr数组的角标为1~2的元素，不包含3。无参数默认为(0,length)。
• join(str)：将数组转换为字符串，并以str为分隔符将数组每个元素分开，返回该字符串，不会改变原数组。
• reverse()：翻转数组。
• toString() || toLocalString()：转为字符串。
• sort()：数组排序，默认使用Ascall码排序，也可以使用自定义函数进行排序，如从小到大排序：

function sortby(a,b){
    return a-b;
}
var arr = new arr(3,2,7);
arr.sort(sortby);

Boolean对象

Boolean值只要ture或false。

var b1 = new Boolean(value);//返回具有value的Boolean值的对象
var b2 = Boolean(value);//返回value的Boolean值

Date对象

Date对象是用来处理日期和时间的对象，初始化时会将当前时间作为初始化值。
常用方法如下：

• Date()：返回当前日期时间，如Sat Sep 29 2018 16:22:30 GMT+0800
  然后就是获取和设置年月日分秒等的方法：

var date = new Date();//自动将当前时间作为初始化值
var year = date.getFullYear();//年份
var month = date.getMonth()+1;//月份(0~11)，所以真实月份+1
var day = date.getDate();//月的天数(1~31)
var week = date.getDay();//周的天数(0~6)，0是周天
var hour = date.getHours();//时
var minutes = date.getMinutes();//分
var seconds = date.getSeconds();//秒
var milliseconds = date.getMilliseconds();//毫秒
var time = date.getTime();//返回 1970 年 1 月 1 日至今的毫秒数。
var s1 = date.toString();//返回日期字符串
var s2 = date.toTimeString();//返回时间部分字符串
var s3 = date.toDateString();//返回日期部分字符串
//字符串本地化
var s4 = date.toLocaleString();
var s5 = date.toLocaleTimeString();
var s6 = date.toLocaleDateString();

Math对象

Math对象不像Array和Date一样的类，没有构造函数，所以不用创建直接调用其方法即可。
常用属性：Math.PI、Math.E。
常用方法：

• abs(x)：绝对值
• sin(x)、cos(x)、tan(x)
• asin(x)、acons(x)、atan(x)
• atan2(y,x)：返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
• ceil(x)：上舍入。（不是四舍五入，只要小数位不是0就上1）
• floor(x)：下舍入。（直接去掉小数位取整）
• round(x)：四舍五入
• exp(x)：返回e的指数
• log(x)：返回自然对数(e为底)
• max(x,y)、min(x,y)
• random()：返回0~1随机数
• sqrt(x)：返回数的平方根
• pow(x,y)：返回x的y次方

Mumber对象

Number()和new 一起使用时，作为构造函数调用，返回Number对象，不和new使用时当做Number方法调用，并将参数转化为数字并返回，如果无法转化为数字，则返回NaN。
方法：

• toString() || toLocaleString()
• toFixed(index)：将数字转为为指定位数的字符串(四舍五入)
• toPrecision(index)：将数字精确到指定位数（整数+小数）。如果无参数执行toString()方法。
• toExponential()：将数字转化为指数计数法。

String对象

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
String.length可返回字符串长度。
常用方法：

• anchor(str)：返回锚点为str，内容为字符串的a标签字符串。比如：var txt = "你好";
  var a = txt.anchor("hello");那么a就是你好。的字符串。
• 有很多样式类的方法，比如big()、small()，其实就是用返回对应标签包裹的字符串，这里不再赘述。
• charAt(index)：返回指定位置的字符。
• concat()：同Array对象的concat一样，起到合并作用。
• String.fromCharCode(code1,code2...)：将传入的Unicode值转换为字节，最后拼成字符串。
• indexOf(searchStr,fromIndex)：搜索字符串中是否包含字符串searchStr，找到返回第一次匹配的角标，否则返回-1。
• lastIndexOf(searchValue,fromIndex)：从后往前匹配。
• match(str || RegExp)：该方法也是匹配字符串，如果匹配到返回str自身，否则返回null。另外，该方法还支持匹配正则表达式。
• replace(str/RegExp,newstr)：替换字符串。
• slice(start,end)：如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。如果省略 end ，那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前，不复制任何元素到新数组中。
• substr(start,length)：也是获取区域字符串，但第二个参数是获取字符串的长度不是角标。
• substring(start,stop)：和slice超级像，但start和stop为负或NaN时直接换为0处理。
• split(str)：与Array的join(str)方法对应。
• toLowerCase()||toLocaleLowerCase()、toUpperCase()||toLocaleUpperCase()。

RegExp对象

js中的正则表达式对象，是处理字符串模式匹配的强大工具。
我们有两种方法来使用：

 var patt  = new RegExp(pattern,attributes);//方式一：使用构造函数，其中pattern是字符串或是正则表达式；attributes是修饰符，如果使用了正则表达式就可以不用attributes参数，因为正则表达式可以携带修饰符。
 var patt1 = /pattern/attributes//方式二：直接写法，这个patt1就是正则表达式。

修饰符
g：全局匹配（默认是匹配到字符串就停止，而全局匹配是直到所有元素都匹配完）
i：不区分大小写
m：支持多行匹配

var str = "hello JAVAscript javascriPT";
var patt1 = /JaVascript/i;//这样匹配到的是不区分大小写，返回数组，但只包含第一次匹配到的字符串：[JAVAscript ]
var patt2 = /JAVAscript/ig;//多了g修饰符，所以结果是[JAVAscript ,javascriPT]

方括号
匹配某个集合内的字符：

元字符
包含特殊含义的字符：

我们记住常用的几个就好了：
.：注意，没有反斜杠。
\w：word的意思，匹配单词字符。注意，和 .的区别在于汉字、标点符号等都不是单词字符，但是是字符。单词字符等同于： [a-zA-Z_0-9]。数字+字母+_
\d：digital的缩写，匹配数字字符。
\s：space的缩写，匹配空白字符。
\b：boundary的缩写，匹配单词边界。比如：

var str = "boundary";
var patt1 = /\bbou/;//匹配单词中以bou开头的字符，有则返回bou
var patt2 = /ry\b/;//匹配以ry结尾的单词的字符，有则返回ry

\B：匹配单词的非边界字符。（不是很好理解）

var str="Visit W3School "; 
var patt1=/.\B/ig;//V,i,s,i,W,3,S,c,h,o,o, 
var patt2=/\B./ig;//i,s,i,t,3,S,c,h,o,o,l 

虽然不好理解，但我们可以找到一些规律（其实就是和\b反过来），比如patt1是排除以.结尾的字符，等同于匹配除了单词结尾的字符以外的其他字符。这里面比较难的点在于空格，单独或连续的空格都算作一个单词，连续的很好判断开头和结尾，但是单个空格有所区别，主要有两点：空格在字符串中间，即空格前后还有内容，那么这个空格既是单词开头也是单词结尾，也就是说中间出现单空格那么这个空格永远算作边界字符；另一个点在于单空格在字符串的两端（" hello"或"hello "）这种情况，那么在字符串前端的空格只作为边界头，在字符串后端的只作为边界尾。可以自行实验一下。
\n：换行符。
其他的一些注意大小写的区别即可。
量词
关于字符串数量匹配的一些用法。

这些规则中注意(str1|str2|str3)的特别之处。
属性

适配方法
注意search()方法，返回值是匹配到的下标，且不支持全局匹配。

Function全局函数

常用方法：

注意parseFloat()和parseInt()方法是强制转换，所以类似”34sasdas“的这种字符串也可以转化为34。

Event对象

下面是Browser相关对象

Window对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
常用属性：
closed：窗口是否关闭。
defaultStatus：读写状态栏默认文本
status：读写状态栏文本，与默认文本不一样。
outerHeight/outerWidth：读取窗口外部宽高，即包含了菜单栏，滚动条这些。
innerHeight/innerWidth：读取窗口内部宽高（内容区域）。
这些值属性都返回一个数字，因为单位默认是像素。
然后window对象自带一些对象的引用作为其属性：document history location navigator self localStorage sessionStorage。
还有关于坐标的属性信息：
pageXOffset/pageYOffset：页面相对于窗口的坐标
screenX,screenY：窗口相对于屏幕的坐标。
常用方法：
三个提示框：
alert()
confirm()：确认返回true，取消返回false。
confirm()：可提供用户输入信息的提示框，返回用户输入字符串。
时间控件：
setTimeout和setInterval：设置
clearTimeout和clearInterval：清除
前者是设置固定时间后执行某函数或代码，后者是每隔多长时间执行一次。都有三个参数（function/code,time,param1,param2）传递的参数可供执行的function函数使用。
focus()：将键盘焦点给予一个窗口。
blur()：将键盘焦点从顶部窗口移开。
print()：打印当前窗口内容。
stop()：停止页面加载。
open(URL,name,space,replace)：

打开一个新窗口：以上参数都为可选参数，URL即窗口的url地址，name有以下参数可选：

space参数是一个逗号分隔的项目列表，可以初始化新窗口的一些属性，常用的项有：height/width设置宽高、left：左侧位置，top:顶部位置（仅限ie）、location是否显示地址字段，默认显示，其余大多都是默认yes属性，不需要的手动改为false.
replace参数表示规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。（即是否更新历史浏览记录）

var win = window.open("http://www.cnblogs.com/fzz9/","_blank","height=500,wodth=500,left=100,top=100",true);
//返回值是新窗口这个对象。

resizeTo() || resizeBy()
重新调整窗口的大小，默认单位为像素。resizeTo(w,h)是为窗口设置规定的宽高，而resizeBy(indexW,indexH)是在原窗口的宽高上增加或减少相应的像素（负数即为减）
moveTo() || moveBy()
scrollTo() || scrollBy()
Navigator对象
Navigator对象包含有关浏览器的相关信息。
属性：
userAgent：返回客户机发送给服务器时user-agent的头部值。包含了浏览器的基本信息：如使用window版firefox返回值是：Mozilla/5.0 (Windows NT 6.3; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0。
而这其中具体的值我们也可以通过其他属性来获得：appCodeName浏览器代码名(Mozilla)，appName浏览器名(Netspace)，appVersion浏览器版本号(5.0(Windows))，platform：平台信息(Win32)。cookieEnabled是否启用了cookie。
目前方法只有两个：javaEnabled和taintEnabled分别为是否在浏览器中启用了java和是否启用了数据污点。（true|false）
Screen对象
包含客户端显示屏的相关信息。
width/height：显示器的宽高，这两个的值其实就是屏幕的分辨率。
availHeight/availWidth：显示器的可用宽高，比如windows系统的任务栏就不计入其中。（其实有时候并不准确，也计入其中了）。
目前暂未提供相关方法。
History对象
包含了当前窗口访问过的URL的历史记录列表。
length属性可返回历史记录地址列表的数量。
三个方法：back()后退，forward()前进，go(number/url)打开列表中的地址，一般使用number参数，正数表示前进number页，负数表是后退number页。
Location对象
Location对象包含当前URL的相关信息。
我们写一个比较完成的URL：

var url = "https://www.nihao.com:8080/lookme/sing#love?name=tom&age=18";
//假设这个就是当前地址的URL
location.href;//读写当前URL
location.protocol;//url的协议即https:
location.host;//主机名+端口号：www.nihao.com:8080
location.hostname;//主机名www.nihao.com
location.pathname;//路径名:/lookme/sing
location.hash;//url锚点值:love
location.search;//查询值，其实就是参数信息，更具体来说就是rul地址?后面的部分。

方法：
assign(url) || replace(rul)：打开指定连接URl替换当前页面，和使用location.href=url;一样的效果。assign方法和replace的不同在于，前者可以go(-1)而后者不行。（来自网络，未验证）
reload()方法重载当前页面。
localStorage和sessionStorage
这两个对象是H5新增的Web存储的对象，localStorage对象存储时间不限，而sessionStorage对象是会话对象，即关闭当前会话就会清空存储。
两者都是以键值对存储信息的，length属性可以返回当前存储对象的键值对数量。
方法:

以下是两者作用域的一些区别：

最后一部分就是DOM 对象
document对象
DOM结点： html文档可以解析为DOM结点：html文档就是一个文档结点，所有的元素都是元素结点，所有属性都是属性结点，文本被插入到html元素中是文本结点text-nodes,注释是注释结点。
而document对象就是html文档的根结点，通过document对象我们就能对html进行操作。 注意，我们获取到了某个元素，这个元素也能使用自带的一些属性和方法，即html自带的而非js提供的属性和方法。
常用属性和方法：
document.querySelector() || document.querySelectorAll()
document.addEventListener() || document.removeEventListener()
document.write() || document.writeln()
document.getElementById() || getElementsByClass || getElementsByTagName || getElemntsByName
document.createElement() || createAttribute() || createTextNode
在 W3C DOM核心，文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的，应该避免使用，以这里不再列举。
元素对象常用属性和方法：
有很多关于属性的方法，我们可以使用getAttribute、setAttribute、removeAttribute来操作。

• cloneNode()克隆某个元素.
• firstChild 、lastChild
• focus() hasFocus()
• hasAttribute() || hasAttributes()
• hasChildNodes()：文本结点也算其子节点
• element.id elemnet.innerHTML element.style
• insertBefore(newNode,targetNode) appendChild()
• nodeType:返回节点类型，元素节点返回1，属性节点返回2，文本节点3，注释节点返回8。
  事件对象
  onmouseenter和onmouseover两者都是鼠标进入元素时触发，但不同点在于onmouseenter事件不冒泡而onmouseover事件冒泡，所以当鼠标进入子元素时前者不再触发而后者仍然会触发事件。同样的，和这两个事件相对的事件分别为onmouseleave和onmouseout.
  onkeydown和onkeyup相对，onkeypress是键盘按下并放开触发。
  onpageshow和onpagehide(不是很好用)相对，分别表示页面被访问和跳转到其他页面时触发,一般绑定到框架或body标签上。onscroll是页面滚动时触发，onresize表示尺寸变化时触发。
  还有表单事件、剪切板事件、拖动事件、多媒体事件、动画事件等事件此处不再一一赘述，可参考：
  http://www.runoob.com/jsref/dom-obj-event.html
  console对象
  log() || info()：打印信息到控制台
  clear()清空
  table(array||object,[colTitle])：表格形式显示数据
  time() || timeedn() 结合使用，可以用来计算某个操作的执行时间。
  trace()方法用于显示当前执行的代码在堆栈中的调用路径
  CSSStyleDeclaration对象

js知识点（随机）

• XMLHttpRequest对象（Ajax核心对象）

  
  
  

• 函数定义方式：

  
  
  
• console.log('Value is ' + (val != '0') ? 'define' : 'undefine');中val已经定义可能为任意值，那么输出结果可能为？
• 
  
  
  
• 跨域
  https://www.cnblogs.com/2050/p/3191744.html
• 闭包
• js中的数字占8字节
• null == undefined返回true；null === undefined返回false；false == null返回false.

• var a=b=3 相当于 var a = 3；b = 3；b是全局的

• var i = 4399<0 || typeof(4399+"");之后i值为。