js笔记

https://github.com/biaochenxuying/blog/issues/12
重点
1.合并数组，最好不要使用Array.concat()
var array1=[1,2,3];
var array2=[4,5,6];
console.log(array1.concat(array2));
不适合合并大的数组，因为需要创建新数组，消耗内存。
使用Array.push.apply(arr1,arr2)来代替创建新的数组，
可以把第二个合并到第一个，减少内存

2.!!
0/null/""/NAN/undefined的时候才会返回false，
其他情况都返回true

3.+
只能作用于字符串数值，否则返回NAN
function toNumber(strNumber){
return +strNumber;
}
console.log(toNumber(“123”));
console.log(toNumber(“abc”));
console.log(+new Date());

4.if条件
if(token){
getUser();
}
可以通过&&操作符组合两个变量来缩短他
token&&getUser();

5.||短路表达式
如果第一个参数返回为false，第二个值为默认值，用来设置默认参数
function getUser(token){
var token=token||“XXXX”;
console.log(‘token’,token)
}
getUser(666);
getUser();

6.获取数组最后一个元素
var array=[1,2,3,4];
console.log(array.slice(-1));//[6];
console.log(array.slice(-1)[0]);//6
console.log(array.slice(-2));//[5,6]

7.打乱数组顺序
不适用Lodash等这些库打乱数组元素顺序，
var list = [1,2,3];
console.log(list.sort(function(){Math.random()-0.5}))

8.伪数组转换为真数组
var elements=document.querySelectorAll(“p”);
//NodeList 节点列表对象，但这个对象并不具有数组的全部方法，
如sort(),reduce(),map(),filter();

var arrayElements=[].slice().call(elements);
//转为数组了
var arrayElement=Array.from(elements);

9.截断数组
var arr=[1,2,3,45,5];
arr.length=2;
console.log(arr); //1,2,3

*********函数作用域
记住是函数定义时的作用域，不是引用时的作用域

var a=1;
var x=function(){
console.log(a);
}
function f(){
var a=2;
x();
}
f(); //1;
上述代码，函数x是在函数f外部声明的，所以他的作用域绑定外层，
内部变量a不会到函数体f体内取值，所以输出为1，而不是2；

总之，函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。

很容易犯错的一点是，如果函数 A 调用函数 B，却没考虑到函数 B 不会引用函数 A 的内部变量。
var x = function () {
console.log(a);
};

function y(f) {
var a = 2;
f();
}

y(x)
// ReferenceError: a is not defined
上面代码将函数 x 作为参数，传入函数 y。但是，函数 x 是在函数 y 体外声明的，作用域绑定外层，因此找不到函数 y 的内部变量 a，导致报错。

同样的，函数体内部声明的函数，作用域绑定函数体内部。

function foo() {
var x = 1;
function bar() {
console.log(x);
}
return bar;
}

var x = 2;
var f = foo();
f() // 1
上面代码中，函数 foo 内部声明了一个函数 bar，bar 的作用域绑定 foo。当我们在 foo 外部取出 bar 执行时，变量 x 指向的是 foo 内部的 x，而不是 foo 外部的 x。正是这种机制，构成了 “闭包” 现象。

立即调用的表达式
(function(){}());
(function(){})();
分号是必须的

1.目的：不必命名函数，避免全局污染
2.内部形成单独作用域，可以封装一些外部无法读取的私有变量。

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 写法二
(function () {
var tmp = newData;
processData(tmp);
storeData(tmp);
}());

1.var student=[1,2,3]
var people=[];
people[0]=student;
console.log(people[0][0]);
//打印的值为1

2.关联数组
var student= [];
student[‘age’]=12;
student[‘name’]=‘guodi’;
var people=[];
people[0]=student;
console.log(people[0][“age”]);
people[‘name’]=student;
console.log(people[‘name’][‘name’])

3.局部变量和全局变量区别
函数内部如果使用了全局变量的名字，即便有局部变量，javascript也会被认为
引用全局变量

function square(num){
total = num*num;
return total;
}
var total = 50;
var number= square(20);
alert(total);

function square(num){
var total =num*num;
return total;
}
var total=50;
var number=square(20);
alert(total);

4.对象
对象里的数据可以通过属性、方法访问
属性是隶属于某个特定对象的变量
方法是只有某个特定对象的才能调用的函数
访问都是通过.访问

对象实例化使用new关键字
var student= new People();

DOM常用
getElementById、getElementsByTagName、getAttribute和setAttribute

getElementsByTagName()返回是对象数组
getElementById()返回是对象
节点中的每个都是一个对象

getAttribute()方法是一个函数，只有一个参数
setAttribute()允许对属性的节点做出修改

this关键字
1.在方法中，this指向所有者对象
2.在单独情况下，this指向全局对象
3.在函数中，this指向全局对象
4.在函数中，严格模式下，this是underfined
5.在事件中，this指向是接收事件的元素。

对象属性
使用for…in语句遍历对象的属性
为每个属性执行一次

添加属性
对象.属性名=‘值’；

添加方法
向对象添加方法是在构造函数内部完成的

this关键字
在JavaScript，被称为this的事物，指的是’拥有‘当前代码的对象
this的值，在函数中使用时，时“拥有”该函数的对象

call()和apply()之间的区别
call()方法分别接收参数
apply()方法接收数组形式的参数

JavaScript闭包
JavaScript变量属于本地或者全局作用域
全局变量能够通过实现闭包实现局部·

全局变量
函数能够访问函数内部定义的所有变量

鼠标事件
onmousedown，onmouseup，onclick

onload页面完成加载事件
onfocus输入字段获取焦点
鼠标事件

Dom事件监听器
addEventlistener()方法
element.addEventListener(event,function,useCapter);
第一个参数是事件的类型(比如’click’和mousedown)
第二个参数是当事件发生时我们需要调用的函数
第三个参数是布尔值，指定事件是事件冒泡还是事件捕获，此参数是可选的

向相同元素添加多个事件处理程序
addEventListener()方法允许向相同元素添加多个事件，同时不覆盖原有事件

也可以向相同元素添加不同类型的事件
element.addEventListener(“mouseover”,myFunction);
element.addEventListener(“click”,mysecondFunction);
element.addEventListener(“mouseout”,myThirdFunction);

向window对象添加事件处理程序
addEventListener()允许您将事件监听器添加到任何HTML DOM对象上，
比如HTML对象，window对象，比如XmlhttpRequest对象

window.addEventListener(“resize”,function(){
document.getElementById(“demo”).innerHTML=sometext;
})

事件冒泡还是事件捕获
Dom事件传播两种方法
事件冒泡和事件捕获
事件冒泡中，最里面的元素的事件会被首先处理，然后是外侧的
在捕获中，最外侧的元素的事件会首先被处理，然后是内侧的

addEventlistener(event,function,useCapture)
默认值是false，使用冒泡传播，如果该值为true，事件采用捕获传播

removeEventListener()方法

DOM根节点
document.body-文档的body
document.documentElement -完整文档

JavaScript对象
BOM浏览器对象
Window对象
全局变量是window对象的属性
全局函数是window对象的方法
甚至document对象也是window对象属性

窗口尺寸
这两个属性都以像素返回尺寸
window.innerHeight -浏览器窗口的内高度（以像素计）
window.innerWidth -浏览器窗口的内高度 （以像素计）

对于IE 8，7，6，5
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth

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

window.screen 对象包含用户屏幕的信息
属性：
screen.width 访问者屏幕宽度
screen.height 访问者屏幕高度
screen.availWidth 返回访问者屏幕的宽度，以像素计，减去窗口工具条
之类界面的特征。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口
工具条之类的界面特征
screen.colorDepth 色深
screen.pixelDepth 用于返回屏幕像素深度

window.location对象可用于捕获当前页面地址url，并把浏览器
重定向到新的界面
window.location对象可以不带window前缀
window.location.href 返回当前页面的url
window.location.hostname 返回web主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的web协议 (http: 或https:)
window.location.assign 加载新文档

window.history对象包含浏览器历史
Window History
history.back() - 浏览器点击回退按钮
history.forward() -浏览器前进按钮

window.navigator 对象包含有关访问者的信息
navigator.appName 浏览器应用程序名称
navigator.appCodeName 浏览器的应用程序代码名称
navigator.platform 浏览器平台
navigator.appVersion 属性返回有关浏览器的版本信息
navigator.userAgent 属性返回浏览器发送到服务器的用户代理报头（user-agent header)
navigator不应该用于检测浏览器版本
navigator.language返回是浏览器操作语言
navigator.online,浏览器是否在线
navigator.javaEnabled()方法返回为true，如果java已启用

浏览器Cookie
navigator.cookieEnabled属性返回true，cookie已启用
否则返回false

alert(),confirm(),prompt()提示框

javascript Timing 事件（定时事件）
1.setTimeout(function,milliseconds)
在等待指定的毫秒数后执行函数
setInterval(function,milliseconds)
等同于setTimeout(),但持续重复执行该函数
setTimeout（）和setInterVal()都属于HTML DOM Window 对象的方法

setTimeout（）方法
第一个参数是要执行的函数
第二个参数指示执行之前的毫秒数

如何停止执行
clearTimeout();
clearInterval();
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

javascript cookies 存储用户信息
cookies计算机小的文本文件中的数据
当web服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户一切

Cookie是为了解决“如何记住用户信息”而发明的
当用户访问网页时，他的名字可以存储在cookie中
下次用户访问该页面，cookie会’记住’他的名字

通过JavaScript创建cookie
js可以通过document.cookie属性创建、读取、删除cookie
通过JavaScript，可以这样创建cookie
document.cookie=“username=Bill Gates”;

添加有效时间。浏览器关闭会删除cookie,添加path
document.cookie = “username = John Doe; expires= Sun, 31 Dec 2017 12:00:00 UTC;path=’/”;

通过JavaScript可以这样读取cookie
var x = document.cookie
删除cookie，指定path路径
document.cookie=“username=;path=/”

AJAX
特点：
不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

ajax仅仅组合了
内建的XMLHttpRequest对象（从web服务器请求数据）
JavaScript和HTML DOM（显示或使用数据）

工作：
浏览器（发生某个事件，创建XMLHttpRequest对象，发送HTTPRequest）
----》Internet----》服务器（处理HttpRequest，创建响应并将数据返回
浏览器）—》internet----》使用js处理被返回的数据，更新页面内容

1.网页中发生一个事件（页面加载、按钮点击）
2.由JavaScript创建XMLHttpRequest对象
3.XMLHttpRequest对象向web服务器发送请求
4.服务器处理该请求
5.服务器将响应发送回网页
6.由JavaScript读取响应
7.由JavaScript执行正确的动作（比如更新页面)

创建XMLHttpRequest对象
var xhttp;
if(window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}else{
//code for IE6,IE5
xhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

XMLHttpRequest对象方法
1.new XMLRequest（）创建新的XMLHttpRequest对象
2.abort（） 取消当前请求
3.getAllResponseHeaders（）返回头部信息
4.getResponseHeader() 返回特定的头部信息
5.open(method,url,async,user,psw)

规定请求：
method：请求类型GET或者POST
url：文件位置
async：true（异步）或false（同步）
user： 可选的用户名称
psw： 可选的密码

send()将请求发送到服务器，用于GET请求
send（string），将请求发送到服务器，用于post请求
setRequestHeader（） 向要发送的报头添加标签、值对

XMLRequest对象属性
onreadystatechange 定义当readyState属性发生变化时被调用的函数
readyState
保存XMLHttpRequest的状态
0：请求未初始化
1.服务器连接已建立
2.请求已收到
3.正在处理请求
4.请求已完成且响应已就绪

responseText 以字符串返回响应数据
responseXML 以XML数据返回响应数据
status 返回请求的状态号
200 “OK”
403: “Forbidden”
404: “Not Found”

statusText: 返回状态文本（比如OK、NotFound）

缓存文件不是选项（更新服务器上的文件数据库）
向服务器发送大量数据（POST无大小限制）
发送用户输入（可包含未知字符），POST比GET更强大更安全

对象转为JSON
JSON.stringify(myObj);
将JSON转为对象
JSON.parse(myJSON);

//存储数据：
myObj = { name:“Bill Gates”, age:62, city:“Seattle” };
myJSON = JSON.stringify(myObj);
localStorage.setItem(“testJSON”, myJSON);

//接收数据：
text = localStorage.getItem(“testJSON”);
obj = JSON.parse(text);
document.getElementById(“demo”).innerHTML = obj.name;

JSON是JavaScript对象标记法
JSON是一种轻量级的数据交换格式
JSON具有自我描述性，易于理解
JSON独立于语言

JSONP无需考虑跨域问题，即可传送JSON数据的方法。
JSONP不使用XMLHttpRequest对象
JSONP使用