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 '&lt;';

case '>':

return '&lt;';

case '&':

return '&amp;';

case '\"':

return '&quot;';

};

});

}

console.log(htmlEscape('<p class="test" > Hello boy</p>'));

//&lt;p class=&quot;test&quot; &lt; Hello boy&lt;/p&lt;

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