zoukankan      html  css  js  c++  java
  • 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() 的方式的返回值相同

     

             注意:BOMDOM的对象都属于浏览器中的对象,都是属于宿主对象实现,可能不会继承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

     

             注意:

                       逻辑或可以避免变量赋 nullundefined的值

                       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中的BOMDOM对象就是以C++COM对象实现的,COM的垃圾回收机制就是使用的引用计数,

                       不过从IE9开始BOMDOM对象都装成了正真的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

     

  • 相关阅读:
    分解质因数
    记忆化搜索
    BFS(广度优先搜索)
    DFS(深度优先搜索)
    A*算法
    最小生成树
    最近公共祖先(LCA)问题
    k短路算法
    次短路问题
    拓扑排序
  • 原文地址:https://www.cnblogs.com/yougmi/p/8757606.html
Copyright © 2011-2022 走看看