Javascript 高级程序设计--总结【一】
文档模式
混杂模式
标准模式
js 数据类型
Undefined
Null 看做是一种空对象的引用
Boolean
Number
String
Object
typeof 返回类型
"undefined" "boolean" "string" "number" "object" "function"
typeof null //object
null == undefined // true, undefined 实际上派生自 null
NaN==NaN // false
isNaN(obj) //如果传入的时对象，首先调用valueOf(), 然后调用toString()
parseInt() // 对于 ES 3 和 ES 5 转化八进制会有不同的结果
// ES-5 parseInt("070") ==>70 ， parseInt("070",8) ==>56 这里指定了转化的进制
// ES-3 parseInt("070") ==>56
String
toString() // null 和 undefined 不能使用 toString() , 但是可以使用 String() 的方式， String(null) =‘null’
num.toString(2) //获取二进制的值
num.toString(8) //获取八进制的值
Object
Constructor() //构造函数
hasOwnProperty() // 属性存在于对象本身，而不是原型链中
isPrototypeOf(object) // 传入的对象是否是另一个对象的原型
propertyIsEnumerable('') // 检查给定的属性是否能用 for-in 进行遍历
toLocaleString() //本地化字符串
toString()
valueOf() // 通常与 toString() 的方式的返回值相同
注意：BOM和DOM的对象都属于浏览器中的对象，都是属于宿主对象实现，可能不会继承object
++
可以应用于任何对象操作，
例如： 字符串不含有有效数字，就会转成 NaN 后执行操作；
如果是对象，先执行 valueOf(),得到操作数后执行，如果是NaN，再执行 toString()后，进行操作；
ES 中的所有数值都是 64位格式存储，但是实际操作过程是我们看到的操作是32位
>> 按位右移， 用符号位填充位
>>> 无符号右移，都是用0来填充空位
!! 两次逻辑非操作可以将一个值转换为bool 值，类似模拟的 Boolean()
例： !!1 //true
!!'a' //true
!!'' //false
&&
短路现象返回结果：
如果第一个操作数是对象，则返回第二个对象（因为第一个对象结果为true）
如果第二个操作数是对象，只有在第一个操作数是true 的情况下，才返回第二个操作数
如果两个都是对象，那么返回第二个操作数
有一个为null, 则返回null
NaN,返回NaN
undefined,返回undefined
||
如果第一个操作数是对象，则返回第一个操作数
如果第一个操作数结果false,则返回第二个操作数
如果两个都是对象，则返回第一个操作数
两个都是null,返回null
两个都是NaN, 返回NaN
两个都是undefined ，返回 undefined
注意：
逻辑或可以避免变量赋 null或undefined的值
var obj = val || str
*
Infinity * Infinity = Infinity
Infinity * NaN = NaN
Infinity * 0 = NaN
Infinity * 非0 = Infinity(-Infinity)
/
Infinity/Infinity = NaN
+
Infinity+ (-Infinity) = NaN
null + 1 = a
undefined + 1 = NaN
-
Infinity-Infinity=NaN
Number(undefined) //NaN
Number(null) //0
ES 中是不存在块级作用域的
for(var i=0;i<10;i++){
}
alert(i); // 正常访问的到
break 和 lable 的联合使用，类似 goto 的用法
lb:
for(){
for(){
....
break lb;
}
}
with:
with里面的变量会作为局部变量，如果没有该变量，就会查找with的对象里面的同名属性
严格模式不能使用with
不建议使用with ,影响性能
with(location){
console.log(href) // location.href
}
switch:
switch 语句在进行值的比较的时候，用的是全等操作符，比较类型和值
var i ="1"
switch(i){
case 1:
console.log(1)
break
case 2:
console.log(2)
break
default:
console.log("default")
break
}
//结果输出：default
函数 function:
参数：
ES 对参数实际上是一个 数组，所以对于参数的传递，对数量并没有什么要求
可以使用 arguments 对象进行参数的访问，他并不是Array的实例， 可以通过length 属性获取参数的个数
这里也就可以通过 length 知道参数的个数来实现函数的重载
function test(num1,num2) {
// "use strict"; // 如果严格模式的话，这里是不能修改num2的值的
arguments[1]=100;// 同时修改了num2的值，但如果只传了一个参数的话，这里是不能修改num2的值的
// num2=100;
console.log("num2: "+ num2);
console.log("arguments[1]: "+ arguments[1]); //如果只传了一个参数，arguments[1]: undefined
}
test(1,2)//
基本类型：
null undefined Number String Boolean
引用类型：
Object
可以动态添加属性，基本类型就不能
************************** Chapter 4 **************************************
instanceof
更适合引用类型的检测 obj instanceof Array
1 instanceof Object //基本类型的检测返回都是false
执行环境
环境变量对象，全局执行环境的对象是 window
执行环境中的变量对象有一个作用域链，全局执行环境的变量对象始终都是作用域链中的最后一个对象
延长作用域
try-catch 语句的 catch
with 语句
没有块级作用域
理论上作用域链上的变量查询搜索是有性能消耗的，局部变量访问比全局变量更快，但是影响不是太大
垃圾收集：
1. 标记清除（推荐）
标记所有变量，然后取消正在使用和被引用的变量的标记，剩下的被标记的变量就需要清除
2. 引用计数
容易造成的问题就是循环引用
function gc(){
var obj1 = new Object();
var obj2= new Object();
//这里造成的循环引用问题，导致变量都不会被回收
obj1.ele=obj2;
obj2.attr=obj1;
}
IE中的BOM\DOM对象就是以C++的COM对象实现的，COM的垃圾回收机制就是使用的引用计数，
不过从IE9开始BOM\DOM对象都装成了正真的JavaScript对象
window.CollectGarbage() //手动执行垃圾回收（不推荐）
管理内存：
内存优化，一旦数据不再使用， 就设置其为null, 解除引用
************************** Chapter 5 **************************************
Object:
1. var obj = new Objecet()
2. var obj={name:"hello"} //字面量的方式创建的对象时候，是不会调用Object 的构造函数的
obj.name
obj['name']
Array:
任何类型的保存；动态扩容；
var a1 = new Array(1); // var a1 = Array(1)
var a2 = new Array("str","test")
a=[1,]; // 不推荐，因为在IE8及以下中可能创建2个项，其他浏览器只存在1个项
可以通过设置数组length 的值， 可以从数组末尾移除项或添加新项
var arr = [1,2,3]
arr.length=2; // arr=[1,2]
arr[arr.length] = 3; // arr[1,2,3]
数组检测：
arr instanceof Array; // 单一的全局执行环境可以使用，但是对于同一页面有多个框架(frame)的时候，在不同的frame 之间传递的 变量对象却有不同的构造函数，该方式不适用了
Array.isArray(arr);// ES5 提供的方式
arr.toString();//"1,2" 得到字符串
arr.valueOf();// [1,2] 得到数组
arr.join('|'); // 如果数组中有undefine,null, 那么就返回的是''
栈操作：push() pop()
队列操作：
shift() //移除并获取第一项
unshift() //数组前端添加项
sort(): 默认的排序方式是调用数组每项的toString() 方法后，在进行字符串比较，所以不太适合
常用方式：自定义compare 方法
function(v1,v2){
return v2-v1;
}
arr.sort(compare)
concat():
arr.concat(1,2,[3,4]); //复制一个新的副本，然后在副本数组进行添加操作,不影响原来数组arr
slice(i,j):
返回新的数组，从开始位置i到结束位置j, 可以使用负数
对于一个5项的数组， slice(-2,-1) 等价于 slice(5-2,5-1). slice(3,4)
splice():强大的方法
splice(0,2);//删除数组前两项
splice(2,0,'a','b');//从第二项开始，删除0项，然后插入 'a','b'
indexOf() lastIndexOf() //没有找到的返回 -1
迭代方法：
every(function(item,index,array){})
some(function(item,index,array){})
forEach(function(item,index,array){})
filter(function(item,index,array){})
map(function(item,index,array){})
reduce 和 reduceRight
var arr = [1,2,3,4,5];
//默认从数组的第二项开始遍历,只有一项也不会报错
var res = arr.reduce(function (prev, cur, index, array) {
console.log('prev: ' + prev);//前一项
console.log('cur: ' + cur);//当前项
console.log('index: ' + index);//索引
console.log('array: ' + array);//当前数组
return prev + cur;
});
console.log(res);//15
Date；
Date.parse(''); //时间转换成毫秒， new Date() 构造函数里面也就是调用此方法
Date.UTC(年，月，日，时，分，秒) // 其中月份是从 0 开始计算的
ES5 新增 Date.now()，返回毫秒数， IE9+ 以上支持， 不支持 Date.now() 的浏览器使用 +new Date() 替换
valueOf() //返回毫秒数
RegExp:
标志： g(全局模式) i(不区分大小写) m(多行)
两种创建方式：
var pattern = /[a-z]test/i;
var pat2 = new RegExp('[a-z]test','i')
RegExp() 这里声明是需要双重转义的，因为里面是字符串表示 RegExp("\\[a\\]") 查找字符 \[a\]
注意：
在ES3中，字面量创建的表达式始终共享同一个RegExp 实例，但是构造函数每次创建一个新的实例
但是在ES5中（IE9+），已经修改了，都是创建一个新的实例
实例属性：
global: 是否设置 g
ignoreCase: 是否设置 i
lastIndex: 开始搜索下一个匹配项的字符位置，从0开始
multiline: 是否设置 m
source: 返回正则模式字符串
实例方法：
exec():
var txt = 'cat,bat ,sat,fat';
var pat = /.at/;// 没有使用 g 标志的时候，每次执行exec() 都是从头开始匹配
var matches = pat.exec(txt);
console.log(matches.index);//0
console.log(pat.lastIndex);//0
****************************
var txt = 'cat,bat ,sat,fat';
var pat = /.at/g;// 使用 g 标志的时候，每次执行exec() 都是上次匹配之后开始
var matches = pat.exec(txt);
console.log("index: " + matches.index);//0
console.log(matches[0]);//cat
console.log(pat.lastIndex);//3
//第二次执行 exec
matches = pat.exec(txt);
console.log("index: " + matches.index);//4
console.log(matches[0]);//bat
console.log(pat.lastIndex);//7
test():
返回是否匹配的bool 值
RefExp 构造函数属性
input : $_ 最近匹配的字符串
lastMatch: $& 最近的匹配项
lastParen: $+ 最近一次匹配的捕获组
leftContext: $` 匹配左边的文本
multiline: $* 是否支持多行模式
rightContext: $' 匹配后右边的文本
var txt=" hello ni hao "
var pat = /(.)i/g;
if (pat.test(txt)) {
console.log(RegExp.input);//hello ni hao
console.log(RegExp["$_"]);//hello ni hao 短属性的表示方式
console.log(RegExp.leftContext);//hello
console.log(RegExp.lastMatch);//ni
console.log(RegExp.lastParen);//n
console.log(RegExp.$1);//n
}
捕获组的方式：RegExp.$1 RegExp.$2 RegExp.$3 ... RegExp.$9 九组匹配
Function:
函数声明：函数声明提升
函数表达式 var f = function(){}
callee:
arguments.callee() // 调用函数自身
this：
函数的执行环境对象，如果实在全局调用的话，this的对象引用就是window
window.color = 'red';
function say() {
console.log(this.color);//red
}
say();
var obj = { color: "blue" };
obj.say = say;
obj.say();//blue
say.call(window); // red
say.call(obj); // blue
caller:
调用当前函数的函数的引用
function outer() {
inner();
}
function inner() {
console.log(inner.caller);//function outer() { inner(); }
}
outer();
length:
获取函数的参数个数
apply() 和 call():
fun.apply(this,arguments);
fun.call(this, arg,arg2,arg3)
bind():
function say() {
console.log(this.color);//red
}
var f = say.bind(obj);
f();//即使在全局作用域调用，this也是指向obj
String Boolean Number 基本包装类型:
后台的自动处理：
var str = 'test'; // str = new String('test'); 但是这种处理只存在执行瞬间
str.color= 'red';
console.log(str.color);//undefined , 因为对象已经被销毁
typeof obj;//object
typeof str;//'string'
Number:
num.toFixed(2);//四舍五入保留小数
num.toExponential(2);// 科学计数法 "3.14e+0"
num.toPrecision(2);// 返回指定有效位数
String:
charAt()\charCodeAt()
str[1];//IE8+ 以上支持的 返回指定位置字符
concat() slice() substring() substr()
var str = '0123456789';
console.log(str.slice(-3));//789 会将负数与长度相加的值
console.log(str.substring(-3));//0123456789 负数会转换为0
console.log(str.substr(-3));//789 负的第一个参数加上字符串长度，第二个负参数转化为0
console.log(str.slice(3, -4));//345
indexOf(arg1,arg2) lastIndexOf(arg1,arg2)
trim(); //IE9+ trimLeft() trimRight() 只是chrome 8+ 支持
toLowerCase() toLocaleLowerCase() toUpperCase() toLocaleUpperCase()
match(); //类似正则表达式的 exec()
search();//str.search('e'); 返回位置
replace();//
var txt = 'cat , bat, sat,fat';
var res = txt.replace(/(.at)/g, 'yy$1');//yycat , yybat, yysat,yyfat
console.log(res);
function htmlEscape(txt) {
return txt.replace(/[<>"&]/g, function (match, pos, originalText) {
switch (match) {
case '<':
return '<';
case '>':
return '<';
case '&':
return '&';
case '\"':
return '"';
};
});
}
console.log(htmlEscape('<p class="test" > Hello boy</p>'));
//<p class="test" < Hello boy</p<
split(arg1, arg2):
var txt = 'a,b,c,d';
console.log(txt.split(',', 2));//["a", "b"]
console.log(txt.split(/[^\,]+/));//非, 分隔的["", ",", ",", ",", ""]
String:
localeCompare():
字符串如果应该在参数之后，返回-1；
字符串如果应该在参数之前，返回 1；
字符串如果和参数相等，返回0；
var str='aaa';
str.localeCompare('AAA');//-1
fromCharCode():
String.fromCharCode(97,98);//'ab'
单体内置对象：
Global:
isNaN() isFinite() parseInt()
encodeURI(str);//"http://www.baidu.com" 空格会编码
encodeURIComponent(str);//"http%3A%2F%2Fwww.baidu.com"
decodeURI()
decodeURIComponent()
ES3已经废弃了 escape() 和 unescape()方法，这只能编码ASCII，不推荐使用
eval():
强大的类似于js解释器
eval('alert(1)');//等价于 alert(1)
一般不推荐使用，特别是用户输入，容易被恶意代码注入攻击
属性：
undefined NaN Infinity Object Function 等
window: 扮演着Global的角色
Math:
Math.E // e
Math.LN10 //10的自然对数
Math.LN2 //2的自然对数
Math.PI
Math.SQRT1_2 // 1/2的平凡根
min() \ max():
Math.max(23,1,223,45,72,12);//223
console.log(Math.max.apply(Math,arr));//223
Math.ceil()
Math.floor()
Math.round()
Math.random():
//获取 1-10 的随机数
console.log(Math.floor(Math.random()*10+1));
//获取 2-10 的随机数
console.log(Math.floor(Math.random()*9+2));
function getRandom(min,max){
var sp = max-min+1
return Math.floor(Math.random()*sp+min);
}
console.log(getRandom(1,10));
Math.abs() Math.pow() Math.sqrt() 等等
************************** 严格模式 **************************************
严格模式：
使用 delete v 对于没有声明的变量会报错
八进制自面量是无效的，会报错 a = 023
不能使用with 语句
函数的限制：
不能把函数命名为 eval 或 arguments；
不能把参数命名为 eval 或 arguments；
不能出现两个命名参数同名的情况
初始化未声明的变量会导致错误
访问arguments.callee 会导致错误，arguments.caller 也会报错
未指定环境对象而调用函数，this 不会指向window,而是undefined，除非使用 apply 或者 call
