1.数组的方法：
join() :把元素转换成字符串
reverse():颠倒数组元素
sort():数组排序
contact():将元素添加到数组后
slice():返回一个指定数组片段
splice():插入或删除数组
var a =[1,2,3,4,3,2,3,4]
a.splice(4) // return [3,2,3,4] a=[1,2,3,4]
a.splice(1,2) // return [2, 3] a=[1,4]
a.splice(2,0,'a','b') return [] a=[1, 4, "a", "b"]
push():将元素加到数组尾部
pop():删除数组的最后一个元素
unshift():将元素插入到数组头部
shift():删除数组的第一个元素
toString()、 toLacaleString()、indexOf()、lastIndexOf()、forEach()、map()、filter()
2.函数
2.1构造函数
初始化一个对象的属性并且专门和new运算符一起使用的一个函数
//声明一个"人"的构造函数,目的是通过new出来的对象都是一个个的具体的"人"
var Person=function(){
//私有属性,该属性new出来的对象时无法获取到的.
var prx="other";
//定义了name的属性
//在这里name是实例属性,也就是说,通过new出来的对象都具备name的属性
this.name="double";
//我们用var 申明了一个私有方法,该方法 不能被 new Person 调用到,
//一般的,我们只需要再内部使用到的方法可最好声明称私有方法.
var prxMethond=function(){
console.log("in prxMethod");
}
//定义了say的方法
//同name,say是一个实例方法,new出来的对象都有say的方法
this.say=function(){
console.log("hi i am "+this.name);
}
}
//为Person定义了一个原型方法eat,该方法为公共方法,
//每一个通过new Person 实例出来的对象都共享同一个eat方法,
//当然如果不想共享可在新对象中进行重写覆盖
Person.prototype.eat=function(){
console.log(this.name+"eat something...");
}
在Js中使用new 关键字调用一个函数的问题:
var Chinese=new Person();
实际上内部是这样的：
var Chinese={};
Chinese.__proto__=Person.prototype;
Person.call(Chinese);
上面三句代码的说明:
声明了一个Chinese的空对象
将Person的prototype赋值给Chinese的proto属性
关于对象的prototype和proto概念如下:
prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。
proto是一个对象拥有的内置属性（每个对象都有一个proto属性），是JS内部使用寻找原型链的属性。
这就是为什么Chinese可以调用到Person原型(Person.prototype)方法的原因
调用Person函数,并且把Chinese当成是this传入函数中,这就是为什么Chinese可以调用Person函数定义的this.属性或this.方法的原因
2.2 apply() 、call()、bind()
第一个参数都是要调用的函数的对象
call:剩余参数是传递给要调用的函数的值
apply：要传递给函数的参数是由数组指定的
call :第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。
var obj = {
message: 'My name is: '
}
function getName(firstName, lastName) {
console.log(this.message + firstName + ' ' + lastName)
}
getName.call(obj, 'Dot', 'Dolby')
apply
apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。
var obj = {
message: 'My name is: '
}
function getName(firstName, lastName) {
console.log(this.message + firstName + ' ' + lastName)
}
getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby
call和apply 可以用来绑定this指针,做继承
var funOne= function () {
this.enName= 'Mike';
}
var funTwo= function () {
this.getEnName = function () {
console.log(this.enName);
}
funOne.call(this); // funTwo继承了funOne的属性和方法
}
var person = new funTwo();
person.getEnName() //Mike
bind
和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。
var obj = {
name: 'Dot'
}
function printName() {
console.log(this.name)
}
var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot() // Dot
2.3函数作用域和闭包
当一个函数被调用的时候，调用对象也从作用域链中移除。当没有涉及嵌套的函数的时候，作用域链是对调用对象的唯一的引用。
JavaScript函数是将要执行的代码以及执行这些代码的作用域构成的一个综合体，代码和作用域的综合体叫做闭包。
例子：
uniqueId = (function(){
var id = 0
return function() { return id++ }
})
使用闭包的断点：
例子：
function inspect(inspector, title) {
var expression, result
if ("ignore" in arguments.callee) return
while (true) {
var message = ""
if (title) message = `${title} \n`
if (expression) message = `\n ${expression} ==> ${result} \n`
else expression = ''
message += "Enter an expression to evaluate"
expression = prompt(message, expression)
if (!expression) return
result = inspector(expression)
}
}
属性读取：基于原型链继承。（先查属性，再查原型链）
JavaScript基于原型的继承而不是类的继承（有别于Java、C等）
任何对象属性都是一个实例属性
每个实例方法由一个类的所有实例来共享
类属性与类自身相关，与类的每一个实例无关
2.4超类和子类
基于原型的继承包含了一个原型对象的链
Object.prototype.name = 'Owen'; //超类的原型属性
var d = Date.prototype;
alert(d.name); //Owen，子类继承超类
function Me() {}
var m = Me.prototype;
alert(m.name); //Owen，子类继承超类
prototype由构造函数Object()创建,所以它本身也是一个Object实例,而任何Object实例都可以从Object.prototype中继承属性；于是prototype就也具有了这种能力；
简而言之，超类就是爸爸，子类就是儿子。
3.鸭子类型识别（duck typing）
如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。
只关注对象的行为，不关注对象本身面向接口编型 ，而不是面向实现编程，是设计模式中最重要的思想
var duck = {
duckSinging: function() {
console.log('呱呱呱');
}
}
alert('duck');
var chicken = {
duckSinging: function() {
console.log('呱呱呱');
}
}
alert('chicken');
var chior = [];
var joinChior = function(animal) {
if (animal && typeof animal.duckSinging === 'function') { //typeof就是判断参数是什么类型的实例
chior.push(animal);
console.log('恭喜你加入合唱团');
console.log('当前已募集' + chior.length + '只鸭子');
}
}
joinChior(duck);
joinChior(duck);
joinChior(chicken);
4.正则表达式
基本的字符串操作
search 变量名.search('要查找的元素')； 出来的结果是该元素的位置下标。如果不存在，则返回-1；
substring 变量名.substring('起始‘,'结束'); 查找从开始到结束前一个的字符串，不包括结束的。
charAt 变量名.charAt('元素下标号');通过下标查找某个元素；
split 变量名.split(' ') ;把字符串分割成数组；
找出字符串中的所有数字
传统方法：
var str = '12 dd 34 h 34';
var arr = [];
var tmp = ' ';
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) >= 0 && str.charAt(i) <= 9) {
tmp += str.charAt(i);
} else {
if (tmp) {
arr.push(tmp);
tmp = ' ';
}
}
if (tmp) {
arr.push(tmp);
tmp = ' ';
}
}
用正则表达式：
str.match(/\d+/g)
用正则表达式表达的两种方法：
JS风格:
new RegExp("a","i");
perl风格：
/a/i
正则中的特殊字符：
\ 转义字符；
. 任意字符；
\d 数字0-9；
\w 数字0-9、字母a-z及A-Z（大小写）,或下划线
\s 空格符、Tab、换页符、换行符
\D 除了数字0-9；
\w 除了 数字0-9、字母a-z及A-Z（大小写）,或下划线
\s 除了空格符、Tab、换页符、换行符
\t \r \n \v \f tab回车 换行 垂直制表等 换页符
[...] 中括号表示字符范围
[^...] 字符范围以外
^ 行首 ^abc 表示abc必须放在行首
abc 表示abc必须放在行尾
\b 零宽单词边界
\B 非\b
(x) 分组，并记录匹配到的字符串 /(abc)/
\n 表示使用分组符(x)匹配到的字符串 --> /(abc)\1/.test('abcabc');
(?:x) 仅分组 --> /(?:abc)(def)\1/.test(abcdefdef);
x?, x+? 如： abc? 在字符串abcccccc中将匹配ab，abc+？则匹配abc
x{n}, 重复 n 次
x{n,}, 重复 >=n 次
x{n,m}， 重复次数x满足： n <= x <= m
正则表达式中的4中对象方法：
1.正则.exec("字符串") 匹配字符串
2.正则.test reg.test("def"); // ture
3.正则.compile()改变正则的值 var reg = /abc/; reg.compile("def"); 将"abc"变成"def",用complie来改变正则的规则和属性
4.正则.toString()输出整个正则 /abc/.toString(); // "/abc/"
正则中的三个标签：
global（全局匹配），ignoreCase（忽略大小写），multiline（跨行）
使用方法
1.正则对象后直接接“gim”，gim分别对应以上三个标签，顺序与个数不定
2.RegExp(正则表达式, "mgi")
正则中的相关方法：
search() 字符串搜索
match() 字符匹配
replace('匹配内容','替换内容') 替换所有匹配
split(" ") 把字符串转换成数组
邮箱验证格式：
var re=/^\w@[a-z0-9]+.[a-z]+$/i;
5.web浏览器中的JavaScript
在客户端JavaScript中，表示HTML文档是document对象，window对象代表显示该文档的窗口（帧）。
事件：
DOM事件流（三阶段）
事件捕获、处于目标、事件冒泡
事件捕获
当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。（父元素监听子元素，就应用了这个原理）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.addEventListener('click',function (){
alert('a');
},true);
b.addEventListener('click',function(){
alert('b')
},true)
p.addEventListener('click',function(){
alert('p')
},true)
//addEventListener 有三个参数
//第一个是 事件名
//第二个是 函数方法
//第三个是 布尔值 （判断是事件冒泡还是事件捕捉 true 是事件捕捉 false 是事件捕捉）
</script>
</html>
事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.onclick=function(){
alert('a')
}
b.onclick=function(){
alert('b')
}
p.onclick=function(){
alert('p')
}
</script>
</html>
阻止事件冒泡
event.stopPropagation()
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
