JavaScript高级程序设计零碎知识点

1.

3.

--src属性可以包含来自外部域的JavaScript文件，既跨域访问数据。这也是JSONP （一种非官方的跨域访问方法）的实现原理，动态添加

5.数据类型：5种基本类型（Underfined、NULL、Boolean、Number、String），1中复杂数据类型(Object)

1)Underfined：未声明或未初始化的值的类型 例如：var message;alert(message==underfined);//true

2)Null:空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值

3)Number:

1.isNaN(任意参数)：判断给定参数是否“不是数值” (或是否能够转换成数值)

isNaN(10);//返回false

isNaN("10");//返回false，

isNaN("blue"); //返回true，“blue”不能被转换为整数

isNaN(true);//返回false,true可以被转换成数值1

2.数值转换

Number();将任意类型转换成数字型 Number("001");//输出1;Number("");//输出0Number("feng");//输出NaN;

一元加号、减号操作符和这个Number()功能相同

parseInt():把字符串转换成整形，从第一个非空格字符开始，如果是数字字符则会接着解析后面的字符知道遇到一个非数字字符

parseInt("123abc");//输出123

parseInt(123.4);//输出123

parseInt("")||parseInt("abc");//输出NaN

parseFloat()把字符串转换成浮点型,（同上，就是多一个小数点）

4)String:按照Java的String来学习就可以了

1)转义字符被当做一个字符长度的字符来解析（注意，字符串的长度为字面上的+1）

2)不可变

3)var num = 10;num.toString();//num.toString(2);//按照二进制进行输出1010；

4)var result = 5+"5" //输出55

var result="result:"+5+10;//输出：result:510

var result="result:"+(5+10);//输出result:15

6.操作符和语句

1.一元减号操作符

var result=5-true;//输出4,自动把true转换成了1（字符串与数字进行比较，会首先尝试把字符串转换成为数字）

2.全等和不全等操作符(===,!==)

如果两个操作数未经转换就想等的情况下返回true。例如 var result = ''55"===55;//输出false (如果==，则输出true)

3.switch语句

可以再switch(expression)中使用任何类型的expression类型的数据，比较值是使用的是===，不会发生类型转换

4.递增递减操作符

递增、递减操作符应用于包含有有效数字的字符串、true/false时，现将其转换为数字，在进行递增、递减操作

7.函数初步

1)函数会执行到return之后立即退出，return可以不带返回值，如return;一般用于需要停止函数执行而又不需要返回值的情况下

2)ECMAScript函数并不关心传递了多少个参数，即使定义的函数只能接受两个参数，但是你可以传递进来多个或者0个。因为ECMAScript中的参数在内部是用一个数组来表示的，可以在函数内部是用arguments[0],argumengts[1],arguments.length等访问第一个参数，第二个参数或者参数列表的长度。arguments对象中的值会自动映射到对应的命名参数中去

function doAdd(){
      	if(arguments.length == 1){
      		alert(arguments[0]);
      	}else if(arguments.length == 2){
      		alert(arguments[0]+arguments[1]);
      	}else{
      		alert("something else");
      	}
      }

      //程序员可以用这种方式实现类似重载的功能。之所以类似，是因为JS中的函数没有签名，因为其参数是由包含零或多个值得数组来表示的(arguments对象)没有签名，也就没有重载

      //所以，一旦出现了调用同名函数，则后面的函数会覆盖前面的
      doAdd(10);
      doAdd(10,20);

3)每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境会被推入到一个环境栈中，而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。眉不变量可以通过作用域链访问所有的外围环境变量

8.内存机制

JavaScript不允许直接访问内存中的位置，也就是说不能直接操作内存中的对象（实际我们操作的都是对象的引用）。同时，我们只能够给引用类型的值动态添加属性(var person = new Object(); person.name="feng"//正确；换成var person = "Object"/，则添加属性时会报错)。引用变量的复制参考JAVA

9.JavaScript所有函数的参数传递都是值传递的，参考JAVA（

基本数值传递后不影响函数外，引用类型则会影响外部的值--即使值传递，也会访问统一对象）

 function setName(obj){
      	obj.name="feng";
      	obj = new Object();//等效于obj = {};
      	obj.name="beifeng";
      }
      var person = new Object;	
      setName(person);
      alert(person.name);
       /*输出feng,而不是beifeng.证明了是值传递而不是引用传递。否则obj会指向一个新的Object
       *即使在函数内部改变了参数的值，但是原始的引用依然保持不变（但是引用的属性会发生改变）
       *局部对象变量在函数执行完毕后被销毁了
       */

10 typeof &&instancof

1)alert(typeof s);判断s的类型

 2)alert(person instanceof Array);判断person是Array引用类型吗？

11 JavaScript中没有块级作用域，使用var定义的变量会被自动添加到最近的环境中（函数环境、全局环境）

12.JavaScript具有自动垃圾回收机制：标记清除法和引用计数法

13.JavaScript不具备类和接口

虽然ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构，所以使用应用类型的值代替对象的称呼

使用对象字面量的方式来定义对象

var person = { 
name:"feng",
 age:24 //注意此处没有,结尾
}

14.Array类型：1.数组大小动态调整 2.数组中的每一项都可以保存任何类型的数据

1).创建方式

//主动声明数组大小，var colors = new Array(20);
var colors = new Array("red","blue","green");//创建数组的第一种方式

var colors = ["red","blue","green"];//创建数组的第二种方式

2).可以动态修改大小

colors[3] = "grey";//新增第四项

colors.length = 2;//数组的length属性不是制度的，可以通过主动设置length的值动态移除或添加新项。本例中，主动删掉数组最后一个元素

colors[colors.length] = "black";//动态在数组后新增一个元素

3).alert(colors.join("||"));//输出red||blue||green

alert(colors);(或者alert(colors.toString());//输出red,blue,green

4).将数组表示成栈：colors.pop();&&colors.push("red","green");

push();将任意数量的参数，逐个添加到数组末尾，并返回修改后数组的长度

pop();从数组末尾移除最后一项，减少数组的length，然后返回移除的项

5).将数组表示成队列：push()&&shift();

push();将任意数量的参数，逐个添加到数组末尾，并返回修改后数组的长度

shift();移除数组中的第一项，并返回该项，同时数组长度减1

6).对数组排序：sort()和reverse()

对于sort()函数，会对数组中的每一项求toString()后进行比较，

      var values = [0,1,5,10,15];
      values.sort();
      alert(values);//输出0,1,10,15,5

这样的排序是很不理想的，也是不可控的，我们可以对sort()传入参数来进行控制

      //如果第一个数小于第二个数，就返回个负数
      function compare(value1,value2){
        if(value1 < value2){
          return -1;
        } else if(value1 > value2){
          return 1;
        }else{
          return 0;
        }
      }
      var values = [0,1,5,10,15];
      values.sort(compare);
      alert(values);//输出0,1,5,10,15

3.0升级版，对于对象，可以按照指定的属性进行排序输出

function compare(poppertyName){
          return function(object1,object2){
            var value1 = object1[poppertyName];
            var value2 = object2[poppertyName];
            if(value1 < value2){
              return -1;
            } else if(value1 > value2){
              return 1;
            } else {
              return 0;
            }
          }
      }
      var values = [{name:"feng",age:24},{name:"zi",age:18}];
      values.sort(compare("name"));
      alert(values[0].name);//输出feng

      values.sort(compare("age"));
      alert(values[0].name);//输出zi

7)数组的拼接：concat()

将传入的参数（数组，或其他东东）添加到原来数组的末尾

colors.concat("yellow",["black","brown"]);//输出red,green,blue,yellow,black,brown

8).数组的分割

返回当前数组中的从第一个参数开始到第二个参数结束的一个新数组，包前不包后，且不影响原来数组。

var colors = ["a","b","c","d","e"];

var colors2 = colors.slice(1,3);//等效于var colors2 = colors.slice(-4,-2);

alert(colors2);//输出b,c

9)splice()方法

删除splice(0,1);删除数组中【0，1）项，并返回被删除部分数组；原数组长度减一

10)indexOf()&&lastIndexOf()

用来返回要查找的想在数组中的位置,或者在没找到的情况下返回-1

15 Date类型

1)创建日期

var da1 = new Date(Date.UTC(2005,4,21,17,21,18));//GTM时间 2005年5月21日17点21分18秒，或直接 var da1 = new Date(2005,4,21,17,21,18)

2) Date.now();返回调用当时经过的历史毫秒数

16.RegExp正则类型 （坑，后面填）

17.Function类型

1)函数实际是对象,函数名实际上也是一个指向函数对象的指针，跟指针变量没有区别，所以一个函数可以有多个名字（两个指针指向内存中的同一位置）

正常定义函数，使用function sum(num1,num2){} 也等效于var sum = function(num1,num2){};，使用变量sum引用函数，但此时后面需要跟一个分号类似于声明变量）

(也可以使用 var sum = new Function("num1","num2","return num1+num2");//解析两次，第一次函数，第二次参数字符串，不推荐

2）没有重载

3) 函数声明方式：对代码求值时，JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部（解析器会在率先读取函数声明，并使其在执行任何代码之前可以访问）。即使声明函数的代码在调用他的代码后面

	
	alert(sum(10,10));
        function sum(num1,num2){
          return num1+num2;
        }
 
  
 
  
 
  
 
  
而对于函数表达是声明类型则会报错，相当于使用了未定义的指针变量
 
  
	alert(sum(10,10));
        var sum= function(num1,num2){
          return num1+num2;
        }
 
  
 
  
4）内部属性
 
  
1.arguments用来保存函数的参数列表。其中使用arguments.callee()获得函数的指针，可以用来代替函数名使用
 
  
 
  
function facotrial(n){
  if(n <=1) return 1;
  else return n*arguments.callee(n-1);//使函数的执行与函数的名称解耦
}
 
  
 
  
2.someFunction.call(作用域)，如someFunction.call(this),someFunction.call(windows),someFunction.call(o(某函数的名称))可以指定函数要执行的作用域为参数的范围
 
  

 
  
18.包装类型
 
  
每次读取一个基本类型的时候，后台会自动创建一个对应的基本包装类型的对象，从而调用一些方法
 
  
 
  
var s1 = "feng";
var s2 = s1.subtstring();//正常s1作为字符串基本类型，是不会拥有方法属性的
 
  后台做了如下处理 
  
 
  
 
  
var s1 = new String("feng");
var s2 = s1.substring(2);
s1 = null;//代码执行完毕后，立刻销毁，意味着我们不能在运行时为基本类型添加属性和方法，以为立刻被销毁了
 
  
 
  
 
  
 
  
19.String类型
 
  
1)查找指定位置的字符:charAt(position)
 
  
 
  
var str = "hello world";
alert(str.charAt(1));//输出e
 
  
 2）字符串截取:substring 
  
 
  
 
  
str.substring(3);//输出lo world
str.substring(3,7);//输出lo w,采用【）的方式,不影响原来字符串
 
  
 3）查找指定字符的位置:indexOf 
  
 
  
str.indexOf("o");//输出4
 
  
案例：遍历查找数组指定字符
 
  
 
  
      var stringValue="te ji jia te ji,wo de tou fa hao ,duang~";
      var positions = new Array();
      var pos = stringValue.indexOf("a");
      while(pos>-1){
        positions.push(pos);
        pos = stringValue.indexOf("a",pos+1);
      }
 
  
 4）字符串去前后空格：trim() 
  
 
  
 
  
var str1=" feng ";
var str2 = str1.trim();//输出feng,原来字符串str1不影响
 
  
 5）字符串大小写str.toLocaleUpperCase();str.toLocaleLowerCase() 
  
 
  

 
  
6）模式匹配方法：match（本质上等同于调用RegExp的exec()方法
 
  
var text = "cat,bat,sat,fat";
var pattern = /.at/;
var matchs=text.match(pattern);//返回一个匹配的数组
alert(matchs[0]);//输出cat
 
  
 ） 
  
 
  
7）替换子字符串replace(正则表达式或字符串，需要用来替换的字符串)
 
  
1）普通替换
 
  
      var text = "cat,bat,sat,fat";
      var result = text.replace(/.at/g,"word");
      alert(result);//输出word,word,word,word,匹配了所有的
2）将结果插入到某些字符串中 
  
      var text = "cat,bat,sat,fat";
      var result = text.replace(/(.at)/g,"feng ($1)");
      alert(result);//输出feng(cat),feng(bat),feng(sat),feng(fat)
 
  
 
  
 
  
8）分割字符串方法：split();
 
  
基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。
 
  
var color = "red,blue,green,yellow"；
 
  
var colors1 = color.split(",");//输出['red','blue','green','yellow'];
 
  
var colors2 = color.split(",",2)//输出['red','blue'];
 
  
var colors3 = color.split(/[^\,]+/);//分隔符也可以是FegExp对象
 
  

 
  
20.内置对象 Math
 
  
1）求数组最大值最小值
 
  
 
  
      //最基本的方式：Math.max(1,2,3)
      var values = [1,2,3,4,5,6];
      var max = Math.max(values);
  
 
  
 
  
 
  
 
  
 
  
 
  
2）舍入方法
 
  
Math.ceil()：向上射入 25.6->26;25.1->26
 
  
Math.floor()：向下舍入 25.4->25;25.9->25
 
  
Math.round()：标准四舍五入 25.6->26
 
  
 
  
3）随机数Math.random()，返回一个【0，1）的一个随机数
 
  
1.从某个整数范围内随机选择一个值
 
  
var result = Math.floor(Math.random()*总数+第一个开始的数);//例如，2~9 Math.floor(Math.random()*9+2);
 
  
 
  
2.封装成方法:每次都从数组中随机抽出一个元素
 
  
 
  
      function selectForm(min,max){
        var total = max - min + 1;
        return Math.floor(Math.random()*total + min); 
      }
      var kings = ["曹魏","袁绍","公孙瓒","刘备","刘表","孙权","袁术","马腾","刘焉","孟获"];
      var the_winner = kings[selectForm(0,kings.length-1)];
 
  
 
  
21 BOM(浏览器对象模型)中的核心windows对象
 
  
 
   1）作为ECMAScript的Global对象，所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法 
  
 
  
 
   1.widnwo.top指向最外层框架 
  
 
  
 
   
 
  
 
  
 
   2.windwo.parent指向当前框架的直接上层框架 
  
 
  
 
   
 
  
 
  
 
   3.window.open()导航到一个特定的URL， 
  
 
  
 
   
window.open("http://www.baidu.com","topFrame");
//等同于
 
   
 
  
 
  
 
  
 
   有一个返回值，var wroxWin = window.open()，可以通过返回值调用移动大小、位置，关闭的函数来操作弹出窗口 
  
 
  
 
  
 
   2）定时调用 
  
 
  
 
  
 
   1.setTimeout:指定多长时间后调用函数,并可以取消执行 
  
 
  
 
   
var timeoutId = setTimeout(function(){
        alert("hello world");
      },3000)
clearTimeout(timeoutId)；
 
   
setTimeout(function(){alert("abc");},3000);
 
   注：经过一段时间后也可能不会执行，因为JS是单线程的解释器，一段时间内只会执行一段代码。为了控制要执行的代码，就有一个JS任务队列，这些任务会按照将他们添加到队列的顺序执行。setTimeout()的第二个参数告诉JS多长时间吧当前人任务添加到队列中。如果队列为空，那么添加的代码会立刻执行，否则就要等前面的代码执行完毕后在执行 
  
 
  
 
   
2..setInterval:指定多长时间再次调用该函数
 
  
 
  
 
    
   
      setInterval(function(){
        alert("hello world");
      },3000)
可以像setTimeout里一样去取消调用，常用的使用间歇调用的方法 
  
 
  
 
    
   
      var num = 0;
      var max = 10;
      var intervalId = null;
      function increamentNumber(){
        num++;
        if(num == max) {
          clearInterval(intervalId);
          alert("Done");  
        }
      }
      intervalId = setInterval(increamentNumber,500);//通过跟踪超市调用ID在调用一定次数后取消调用
以上的函数可以用setTimeout来实现，此时不用跟踪超时调用ID 
  
 
  
 
   
 
  
 
  
 
    
   
      var num = 0;
      var max = 10;
      function increamentNumber(){
        num++;
        if(num < max) {
          setTimeout(increamentNumber,500); 
        }else{
          alert("Done");
        }
      }
      setTimeout(increamentNumber,500);
 
   
 3）系统对话框 
  
 
  
 
   系统对话框是同步和模态的，所以对话框关闭之前，代码会停止执行 
  
 
  
 
   1.alert()警告框 
  
 
  
 
   
 
  
 
  
 
   2.comfirm()确认框 
  
 
  
 
    
   
     if(confirm("are your sure ?")){
      alert("OK")
     }else{
      alert("No")
     }
 
   
 3.prompt提示框 
  
 
  
 
    
   
      var result = prompt("What's your name ?","");
      if(result !== null ){
        alert("Welcome, "+result);
      }
 
   
 4）location对象 
  
 
  
 
   提供了与当前窗口中加载的文档有关的信息，还提供了一些导航能力。 
  
 
  
 
   
 
  
 
  
 
   1.能够将URL解析为独立的片段 
  
 
  
 
   属性名 例子说明 
  
 
  
 
   hash#contests #号后面跟着的零活多个字符 
  
 
  
 
   hostwww.baiddu.com:80 返回服务器名称和端口号 
  
 
  
 
   hostnamewww.baidu.com 返回不带端口号的服务器名称 
  
 
  
 
   hrefhttp://www.baidu.com 返回当前加载页面的完整URL。location对象的toString()方法也返回这个值 
  
 
  
 
   port8080 端口号或空字符串 
  
 
  
 
   protocalhttp: 返回正在使用的协议http:或者https: 
  
 
  
 
   
 
  
 
  
 
   search?q=javascript 返回URL的查询字符串，这个字符串以问号开头 
  
 
  
 
    
   
//解析URI中的查询字符串数组，如?q=javascript&num=0
    fucntion getQueryStringArgs(){
      //取得查询字符串并去掉开头的问号
       var qs = (location.search.length>0?location.search.substring(1):""),
       //保存数据的对象
       args = {},
       //保存每一项
       items = qs.length?qs.split("&"):[],
       item =null,
       name = null,
       value = null;

       var i = 0;
       len = items.length;

       for(i = 0;i
 
   
 
   2.加载新的URL 
  
 
  
 
   
url:http://www.baidu.com
 
  
 
  
 
   替换成新的URL：window.location = "http://www.baidu1.com"; 
  
 
  
 
        location.href="http://www.baidu.com"浏览器的历史记录会生成一条新的纪录，所以使用回退，可以退到上一条记录
 修改端口号：location.port=8088;(其他的类似location.xxx = ""xxxx")浏览器的历史记录会生成一条新的纪录，所以使用回退，可以退到上一条记录 
  
 
  
 
   不可回退的方式:location.replace("http://www.baidu2.com"); 
  
 
  
 
   
 
  
 
  
 
   3.重新加载页面reload() 
  
 
  
 
   location.reload(true);//从服务器端重新加载 
  
 
  
 
   location.reload();//有可能从缓存中重新加载 
  
 
  

 
  
 
   4.histroy对象 
  
 
  
 
   保存着用户上网的历史记录，从窗口打开的那一刻算起 
  
 
  
 
   history.go(x);//前进x页 
  
 
  
 
   history.go(-x);//后退x页 
  
 
  
 
   history.go("baidu.com");//跳转到最近的baidu.com页面

 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
22.DOM文档对象模型
 
   
是针对HTML和XML文档的一个API(应用程序编程接口)。描绘了一个层次化的节点树，允许开发人员操作页面的某一部分。节点之间的关系形成了层次，而所有页面标记则表现为一个以特定结点为根节点的树形结构，以HTML为例
 
   
 
   


  
    
    
  
  
  

 
   JavaScript中所有的节点类型都继承自Node类型，每一个节点都有一个chileNodes属性，其中保存着一个NodeList对象。 
  
 
  
 
   var firstChild = someNode.childNodes[0]; 
  
 
  
 
   var count = someNode.childeNodes.length
 
   
 
   


 
   
1）Document类型
 
   
1.JavaScript通过Document来表示文档类型，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，同时也是window对象的一个属性
 
   
document.body：获得标签属性
 
   
document.title：获得