javascript高级程序设计--笔记01

概述

JavaScript的实现包含三个部分：

　　1  核心(ECMAScript)   提供核心语言功能

　　2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API

　　3  浏览器对象模型(BOM)  一套提供了与浏览器交互的API

　　ECMAScript仅仅定义了这门语言的基础，如定义了：语法、类型、语句、关键字等，实际上这门语言本身不包含输入输出定义。

　　而现实中，ECMAScript大多借用了某些宿主环境(如web浏览器,Node,Adobe Flash)来实现丰富的功能，这些宿主环境不仅提供了基本的ECMAScript实现，还提供了该语言的扩展(DOM  BOM都是扩展之一)，这些扩展利用ECMAScript的语法等提供更多具体的功能。

　　通过DOM，将html页面映射为一个多层的节点结构：整个html是一个根节点，根节点下分为head和body子节点，这两个子节点下的所有html标签都是一个又一个的子标签节点……  通过使用DOM提供的属性或者方法我们可以快速锁定到每一个我们想要锁定的节点。

　　BOM则负责处理浏览器窗口和框架，如：  弹出浏览器窗口，移动、缩放、关闭浏览器窗口，cookies支持等等

ECMAScript

--------------------------------------------------------<<<<<<基本概念>>>>>>---------------------------------------------------------------

语法注意事项：

　　1  区分大小写

　　2  标识符，如变量名，函数名，属性名等第一个字符必须是字母或者下划线或者美元符，其余可以为数字、字母、下划线、美元符

　　3  单行注释为 //           多行注释为  /*   注释内容   */

　　4  建议将语句使用 分号  ;  隔开

　　5  具有严格模式  'use strict'

变量：

　　1  松散类型，可以保存任何类型的数据。

　　2  定义变量时，建议使用  var 关键字进行声明或初始化。不用 var 关键字的变量为全局变量。解释器会率先读取使用var声明的变量(变量提升)

　　    var  name = 'mncu' , age = 88 ;   定义多个变量时使用逗号分隔

数据类型：

　　共有六种

　　　　包括5种简单数据类型，分别是:  Undefined    Null   Boolean   Number   String  

　　　　和 1 种复杂数据类型：Object，而Object类型还有许多'子'类型，比如：Array  Date ……

　　1  判断数据类型时，可以使用typeof()  或者 typeof

var a = 'hello'
typeof a    //"string"
typeof(a)    //"string"
//  数据类型      typeof()后返回的值
/*  Undefined   --->   undefined
 *  Null        --->   object
 *  Boolean     --->   boolean
 *  Number      --->   number
 *  String      --->   string
 *  Object      --->   object
 *  函数         --->   function
 */

　　2  Null类型，值为null，表示一个空对象指针(所以typeof(null)才会返回object) .

　　3  Boolean类型，值为true或者false，可使用Boolean()函数将任意值转换为对应的Boolean值

　　　　-  数字0和NaN，空字符串，null，undefined  ------经过Boolean()函数转换-------->  false

　　　　-  其他为 true

　　　　-  Boolean存在基本包装类型，存在基本包装类型的目的是为了方便操作基本类型。基本包装类型属于引用类型，' 基类 '为Object。

　　　　　　　同时，基本包装类型对应于基本类型，每当读取一个基本类型时，都会在后台创建一个对应的基本包装类型实例，基本包装类型有　　　　　　　　许多属性和方法，然后我们就可以使用这些方法对基本包装类型进行操作，基本包装类型的值会映射到基本类型中。当我们操作完　　　　　　　　成后，基本包装类型的实例会被删除。

　　　　　　　如果上段话没看懂的话，不要紧，只需要知道在javascript中Boolean类型也有属性以及方法就行了。

　　4  Number类型

　　　　-  NaN  ： Not a Number  非数值类型

　　　　-  可使用Number()函数将其他类型转换为数字类型,转换规则：

/* true    --->  1
 * false   --->  0
 * null     --->  0
 * undefined  ---> NaN
 * 转换字符串时，若字符串中只包含数字，则转换为数字，否则转换为NaN，空字符串转换为0
 * 转换对象时，则调用该对象的valueOf()方法，对该方法返回的值进行转换
 */

　　　　-  parseInt()函数比Number()函数在转换字符串时更合理，所以推荐使用该函数，规则如下：

/*  忽略字符前的空格，若第一个非空字符不是数字或者负号，则返回NaN，若第一个
 *  非空字符串是数字，则向后解析，直到碰到第一个非数字字符。
 */
//  parseInt()函数可以接受第二个参数，用来明确指定基数。建议明确指定基数
parseInt('22dkfj')    //  22
parseInt('22.5')    //  22，转换为整形
parseInt('070',8)    //  八进制转换
parseInt('0x23')    //  十六进制转换

　　　　-  parseFloat()  转换为浮点型，规则同上

　　　　-  Number类型也存在基本包装类型

//Number的基本包装类型的方法

    // 方法

    //toFixed(num)  将数字转换为字符格式，若指定num，则按照指定的num返回数字的小数位格式
    var a = 2;
    a.toFixed(2);  // '2.00'
    //toExponential(num) 类似于toFixed()，返回数字的指数字符串格式
    a.toExponential(); //'2e+0'

    //不建议直接实例化Number类型，因为在使用typeof 和 instanceof测试基本类型与引用类型，结果不同
    var b = new Number(2);
    alert(typeof b); // 'object'
    alert(typeof a); // 'number'
    alert(b instanceof Number ); // false
    alert(a instanceof Number ); // true

　　5  String类型

　　　　-  使用toString()转换为字符串

// 布尔，数值，对象，字符串类型都有 toString()方法 。 Null Nndefined 类型无此方法
var a = 21;
a.toString();  // '21'
a = true;
a.toString()  //  "true"

　　　　-  使用String()转换为字符串

String(null)  //"null"
String(undefined)  //"undefined"

　　　　-  String存在基本包装类型

    str.length  　　　　　　　　  返回字符串长度
    str.charAt(index)　　　　　　 返回str索引为index数值的单个字符,index为空则默认为0，没有找到返回空字符串；
    str.charCodeAt(index)　　　　返回str索引为index数值的单个字符的unicode(统一码),index为空则默认为0，没有找到返回NaN；
    str1.concat(str2)　　　　　　 字符串连接，两个字符串连接用空格隔开，返回新连接的字符串；
    str.indexOf(str1)　　　　　　 返回子字符串str1在查找字符串str中第一次出现的位置，没有找到则返回-1,； 
    str1.localeCompare(str2)　　 判定两个字符串排序，如果str1排在str2,之前那么返回-1，之后返回1，相等返回0；
    str.match(regexp)　　　　　　 在str中匹配正则，以数组形式返回匹配到的字符串；
    str.replace(old,new) 　　　　在字符串str中查找old字符串(可以是正则)，用new字符串来替换；返回替换后的新字符串；
    str.search(str1) 　　　　　　 在字符串str中查找str1，返回第一次出现str1的位置，没有找到返回-1；
    str.slice(start,end(可选))   返回start和end数值下标之间的字符串.end为空返回start后全部字符串；
    str.split(" ")　　　　　　　　 把str用split方法中的符号为间隔切割字符串返回一个数组；可以使用正则pattern
    str.substr(start,length(可选))返回以start下标开始以length为长度之间的字符串，若length为空，则返回下标后得全部字符  串；
    str.substring(start,end)　　　　一个参数的话返回下标后所有字符串，两个参数的话，以小的为开始以大的为结束，返回量下标之间的字符   串 ；
    str.toString()　　　　　　　　　　把str或obj返回字符串对象；
    str.trim()　　　　　　　　　　　　除去str两端的空格，返回去空格的字符串，不支持IE8及前面版本； 
    str.valueOf() 　　　　　　　　　　返回str原始值;
    str.toUpperCase()　　　　　　　　把str字母全部转成大写；
    str.toLowerCase()　　　　　　　　把str字母全部转成小写； 
    str.toLocaleUpperCase()　　　　以本地方式把str字母全部转换成大写；
    str.toLocaleLowerCase()　　　　以本地方式把str字母全部转换成小写； 

　　6  Object类型 

　　　　-  定义一个对象：  var obj = new Object()

　　　　-  Object是几乎所有类型的基础，因此所有对象都共享Object的属性与方法。列出两个常见的Object方法：

　　　　　　valueOf()

　　　　　　toString()

　　6.1  Array类型

　　　　与Python中的list类似，Array是一个  可存储任意类型  数据的  有序  列表。

　　　　来看看该对象的属性以及方法。

//创建-----------------------------------
/*  创建分为两种方式
 *    1  使用构造函数
 *    2  使用字面量
 */
    var a = new Array();  // 第一种方式，创建一个空的数组
    a = [];               // 第二种方式，创建一个空的数组


//属性----------------------------------
    a = [1,'df',true];

    //1  获取数组的长度
    r = a.length;       // 3
        //请注意，直接给Array的length赋一个新的值会导致Array大小的变化
        a.length = 2;   // a:[1, "df"]


//方法----------------------------------

    //----------操作方法
    // concat() 连接      一个参数：数组
    // slice()  切片      两个参数：开始索引,结束索引
    // splice()     参数：指定起始索引，从该索引开始删除的项数，要插入的项1，要插入的项2 ……
    a = [1,2,3];
    var r = a.concat([4,5]);  // r: [1,2,3,4,5]  a:[1,2,3]

    a = [1,2,3];
    a.slice(1,2);   // 从索引1开始到索引2结束，但不包括2   [2]
    a.slice(1);     // 从索引1开始到最后   [2,3]
    a.slice();      //  从头至尾 [1,2,3]

    a = [1,2,3,4,5];
    a.splice(1,2);  //返回删除的项组成的数组[2,3]  a:[1,4,5]
    a.splice(1,0,2.1,2.2);  //返回[]  a:[1, 2.1, 2.2, 4, 5]

    //----------栈方法，先进后出。
    // pop()    删除最后一个元素
    // push()   在数组后添加若干元素 多个参数：
    a.push(4,5);    // 返回数组的长度 a: [1,2,3,4,5]
    a.pop();        // 返回删除的元素，  a: [1,2,3,4]

    //---------队列方法，先进先出。
    //shift()   删除头部元素
    //unshift() 在头部添加元素
    a = [1,2,3];
    a.shift();      //  返回删除的元素  a:  [2,3] , 若数组为空，则返回undefined
    a.unshift(4,5);  //  返回数组长度   a: [4,5,1,2,3]

    //---------重排序方法
    //reverse()     反转
    //sort()        排序,默认按照升序排序，可接收一个比较函数作为参数，比较函数接收两个参数，
                    // 若第一个参数应该位于第二个参数之前，则返回负数；……之后，则返回正数；
                    // 若相等，则返回0
    a = [1,2,3];
    a.reverse();    // a: [3,2,1]
    a.sort();       // 返回 [1,2,3]
    a.sort(function(v1,v2){
        return v2 - v1;
    });                      //  返回[3,2,1]

    //----------位置方法
    //indexOf()     两个参数：要查找的项，表示查找位置起点的索引
    a = [1,2,3];
    a.indexOf(2);   //返回1
    a.indexOf(3);   // 返回 -1，如果要检索的字符串值没有出现，则该方法返回 -1。


    //----------转换方法
    //join()  它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
    a = [1,2,3];
    a.join('-');    //返回"1-2-3"

    //----------迭代方法
    //一共5个，都接受两个参数：函数，运行该函数的作用域对象
    //every()       对每一项运行给定函数，若每项都返回true，则返回true
    // filter()     对每一项运行给定函数，返回函数返回true的项数
    // forEach()    对每一项运行给定函数，无返回值
    // map()        对每一项运行给定函数，返回每次含数调用的结果组成的数组
    // some()       对每一项运行给定函数，若有一项项返回true，则返回true
    a = [1,2,3];
    a.every(function(v1){
        return v1 >= 2;
    });     //返回 false
    a.filter(function(v1){
        return v1 >= 2;
    });     //返回[2,3]
    a.map(function(v1){
        return v1 >= 2;
    });     //返回[false,true,true]
    a.some(function(v1){
        return v1 >= 2;
    });    //返回true

    //------------缩小方法
    //reduce()  支持两个参数：函数，初始值
        //第一次运行时，将数组的第一个元素作为参数一，第二个元素作为参数二；
        //第二次运行时，将第一次运行的结果作为参数一，第三个元素作为参数二，以此类推。
    a = [1,2,3];
    a.reduce(function(v1,v2){
        return v1 + v2;
    });     //返回6

 　　6.2  Date类型

　　　　在说明Date类型之前，我们来说一下时间戳的概念：

　　　　时间戳是个什么东西？时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。假设浏览器所在电脑的　　　　　　时间是准确的，那么世界上无论哪个时区的电脑，它们此刻产生的时间戳数字都是一样的，所以，时间戳可以精确地表示一个时刻，并且与时区　　　　　　无关。

//获取当前时间
//注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。
    var now = new Date();

// 创建指定日期和时间的Date对象
    var d = new Date(2015, 5, 19, 20, 15, 30, 123);
    d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

// 创建指定日期的时间戳
    var d = Date.parse('2015-06-24T19:49:22.875+08:00');
    d; // 1435146562875
    var d = new Date(1435146562875); //根据时间戳创建Date对象
    
// 方法
    now; // Thu Oct 13 2016 21:05:16 GMT+0800 (中国标准时间)
    now.getFullYear(); // 2016, 年份
    now.getMonth(); // 9, 月份，注意！！月份范围是0~11，9表示10月
    now.getDate(); // 13, 表示13号
    now.getDay(); // 4, 表示星期4
    now.getHours(); // 21, 24小时制
    now.getMinutes(); // 05, 分钟
    now.getSeconds(); // 16, 秒
    now.getMilliseconds(); // 875, 毫秒数
    now.getTime(); // 1476363916265, 以number形式表示的时间戳

//Date对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，
// 也可以显示调整后的UTC时间：
    now.toLocaleString(); // "2016/10/13 下午9:05:16"，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
    now.toUTCString(); // "Thu, 13 Oct 2016 13:05:16 GMT"，UTC时间，与本地时间相差8小时

　　6.3  RegExp类型

　　　　正则表达式----一种强悍的匹配字符串的武器

/*创建
*分为两种方式：
*  1  字面量
*  2  使用构造函数
*/

    /* 使用字面量创建的格式为：         var expression = /pattern/flags ;
     * 使用构造函数进行创建的格式：      var expression = new RegExp('pattern','flags')
     *      flags:
     *          g:  全局模式，将pattern应用于所有字符串，而非在发现第一个字符串时停止
     *          i:  不区分大小写
     *          m:  多行模式
     *
     *      pattern:
     *          模式中所使用的所有元字符必须转义
     *          d      匹配一个数字
     *          w      匹配一个数字或者字母
     *          s      匹配一个空格
     *          .       匹配任意一个字符
     *
     *          [a-z]   匹配任意一个a-z之间的字符
     *          [amn]   匹配任意一个a或者m或者n
     *          a|A     匹配a或者A
     *          \      特殊字符需要进行转义，也就是添加一个反斜杠
     *              特殊字符包括： - + { } [ ]  | . ( ) ^ $ ? _
     *
     *          *       匹配前面的字符任意次
     *          +       匹配前面的字符一次或者多次
     *          ?       匹配前面的字符0次或1次
     *          {n}     匹配前面的字符n次
     *          {n,m}   匹配前面的字符n-m次
     *
     *          ^       匹配行首
     *          $       匹配行尾
     */

    var re1 = /ABC-001/;
    var re2 = new RegExp('ABC\-001');// 因为构造函数传入的pattern是字符串，所以需要双重转义

    re1; // /ABC-001/
    re2; // /ABC-001/

/* 方法
 * 存在两个方法：
 *      1  exec()  接受一个参数，也就是将要应用模式的字符串，然后返回第一个匹配信息的数组，
 *          若没有匹配项，则返回null。全局标识 g 对该方法无效。
 *          返回的数组是一个array，且包含两个额外的属性：index input
 *          index: 匹配项在字符串中的位置   input：应用正则的字符串
 *      2  text()  接受一个字符串餐宿，若匹配则返回true，否则返回false
 */

操作符：

　　1  一元操作符

　　　　-  递增和递减，仿照C中的++  --

　　　　-  一元加和减

+true  // 1
+'01'  // 1
+'undefined'   // NaN
+null   // 0

　　2  布尔操作：

　　　　非  ：  !

　　　　与  ：  &&

　　　　或  ：  ||

　　3  乘性操作符   

　　　　*   乘

　　　　/   除

　　　　%  求模

　　4  加性操作符(拼接)

　　　　var  a = 'hello' + 'world'     //hello world

　　　　拼接优先级高于一元加，下面来两个小例子，自己试验一下，想一想为什么是这个结果吧。

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);   // 111

var foo = "11"+2+"1";    //体会加一个字符串'1' 和 减去一个字符串'1'的不同
console.log(foo);
console.log(typeof foo);  //1121

　　5  关系操作符

　　　　<  >  <=  >=

　　　　注意事项： 

　　　　   1  两个字符串进行比较时，比较两个字符串中的第一个字符对应的字符编码值，若相等则比较第二个字符……以此类推

　　　　   2  一个字符串(或布尔)一个数值进行比较时，关系操作符倾向于将比较的值转换为数字类型 。

　　　　   　2.1---当字符串无法转换为合法的数字时，将字符串转换为NaN(not a number)，NaN与任何操作数比较，结果都是false(包括它自己)。

'10' < '5'    //  true  注意事项 1
'10' < 5     // false  注意事项 2
'a' < 5     //  false  注意事项 2.1
'a' >= 5    //false  注意事项 2.1 

　　6  相等操作符

　　　　==  不全等，只要数值相等即可，类型可以不等    1 == ‘1’   // true

　　　　===  全等 ，数值与类型必须相等。建议使用全等。

　　条件操作符

　　　　variable = boolean_expression ? true_value : false_value ;

　　　　当boolean_expression为true时，variable值为true_value，反之则为false_value

 

函数

　　function  function_name(arg1,arg2...){   }

　　　　-  参数只提供便利，非必需。

　　　　- ECMAScript 不介意传入多少个参数，也不在乎传入的参数是什么类型

　　　　- 函数无重载

　　　　- 解释器会率先读取使用function声明的函数(函数提升)

　　　　- 函数名是变量，函数也可以作为值使用

　　　　- 函数具有内部属性 arguments 和 this

　　　　　　arguments 是一个包含当前函数参数的类数组对象

　　　　　　this引用的是函数据以执行的环境对象，比如：在全局中调用函数，则this引用的是window对象。

　　　　- 函数的属性

　　　　　　FunctionName.length   函数希望接受的参数的个数

　　　　　　FunctionName.prototype  指向函数的原形对象

　　　　- 函数的方法

　　　　　　apply()  call()  在特定的作用域中调用本函数，实际上就是定义this的值。