博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 高级编程
阅读量:4117 次
发布时间:2019-05-25

本文共 11829 字,大约阅读时间需要 39 分钟。

一、基本概念

1、语句

1)for(property in expression) statement

for(var propName in window){        document.write(propName);        document.write("
");}
 

2)with 语句将代码的作用域定义到一个特定的对象中

   语法:with(expression) statement

 

var qs = location.search.substirng(1);var hostName = location.hostname; var url = location.href;

 

with(location){var qs = search.substring(1);var hostName = hostname;var url = href;}
 

3) switch语句:(两种情况并列时候进行的处理)

var num=25;switch(true){    case num<0:       alert("Less than 0.");       break;   case num>=0 && num<=10:       alert("Between 0 and 10");       break;   case num>10 && num<=20:       alert("between 11 and 20");
 
}

 

var i = 25;

switch(i){

       case 25:

            /*合并两种情形*/

        case 35:

           alert("25 or 35");

           break;

        case 45:

            alert("45");

            break;

        default:

            alert("Other");

}

switch(expression) -- expression可以是任意类型如字符串型

* 这个例子首先在switch语句外面声明了变量num。而之所以给switch语句传递表达式true,是因为每个case值都可以返回一个布尔值。这样,每个case按照顺序被求值,直到找到匹配的值或者遇到default语句为止。

 

2、函数

1) 理解参数

实际上,在函数体内可以通过arguments对象来访问这个参数数组如:

arguments[0] 、arguments[1]

2) js中不能和java一样实现重载。

            如果在js中定义了两个名字相同的函数,则改名字只属于后定义的函数。

 

二、变量、作用域和内存问题

1)基本类型和引用类型的值

基本类型指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。

引用类型则是指那些保存在堆内存中的对象,意思是变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象。

五种基本数据类型:

Undefined、Null、Boolean、Number和String

注意:

        如果赋给变量的是一个引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定,因此不能把它们保存到栈内存中。但是内存地址的大小

是固定的,因此可以将内存地址保存在栈内存中。这样,当查询引用类型的变量时,就可以首先*从栈中*读取内存地址,然后再“顺藤摸瓜”地找到保存在堆内存中的值。

这种查询变量值的方式,叫做“按引用访问”

 

2)复制变量值

复制基本类型和引用各类型值时,它们也是不一样的

如果从一个变量向另一个变量复制基本类型的值,会在栈中创建一个新值,然后把该值复制到为新变量分配的位置上。

var num1=5;

var num2 = num1;

引用类型复制值时

当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在栈中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针,而这个指针指向堆内存中的一个对象。复制操作结束后,两个变量实际上将引用同一个对象。因此,改变其中一个变量,就会影响另一个变量

var obj1 = new Object();

var obj2 = obj1;

obj1.name = "Jane";

alert(obj2.name);// Jane

 

3)传递参数

基本数据类型参数的传递和引用数据类型参数的传递都是按值进行传递的。

访问变量有按值和按引用两种方式,而参数只能按值传递。

向参数传递基本数据类型时,被传递的值会复制给一个局部变量。在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量

P79以后可以回来看看

4)检测类型

typeof - 确定一个值时哪种基本类型可以使用该操作符

instance of - 确定一个值时哪种引用类型可以使用该操作符

 

5)执行环境

执行环境有全局执行环境和局部执行环境之分。

每次进入一个新执行环境,都会创建一个用于搜索变量和函数的作用域链

函数的局部环境不仅有权访问函数作用域中的变量,而且有权访问其包含(父)环境,乃至全局环境;

全局环境只能访问在全局环境中定义的函数和变量,而不能直接访问局部环境中的任何数据;

变量的执行环境有助于确定应该何时释放内存

 

三、引用类型

1、Object对象

创建Object实例的方式有两种------1) new

                                                      2) 对象字面量表示法

1) var person = new Object();

person.name = "Nicholas";

person.age  = 29;

 

2) var  person ={

            name : "Nicolas",

            age : 29

};

2、Array类型

数组的每一项可以保存任意类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二个位置来保存数值,用第三个位置来保存对象,以此类推。

而且,js中数组的大小事可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

1)创建数组的基本方式有两种:

第一种是使用Array构造函数

var colors = new Array();--- new 关键字可以省略

如果预先知道了数组中保存项目的数量

var colors = new Array(20);

拓展:

var colors  = new Array("Greg");

第二种方式:数组字面量表示法

var colors = ["red","white","blue"];

 

join()方法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串。

var colors = ["red","green","blue"];

alert(colors.join(",")); // red,green,blue

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

 

2)栈方法:

栈是一种先进后出的数据结构,也就是最后添加的项最早被移除,而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置---栈的顶部

push()和 pop()方法

push() - - 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。

pop() -- 方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

例子:

var colors = new Array(); //创建一个数组var count = colors.push("red","green"); // 推入两项alert(count); //2count = colors .push("black");alert(count); //3 var item = colors.pop();alert(item); // "black"alert(colors.length); //2

 

 

3)队列方法:

访问规则是先进先出。队列在列表的末尾添加项,从列表的前端移除项目

shift()和push()方法,可以像使用队列一样使用数组

var colors = new Array(); //创建一个数组var count = colors.push("red","green"); // 推入两项alert(count); // 2count = colors.push("black"); // 推入另一项alert(count); // 3var item= colors .shift(); //取得第一项alert(item); // “red”alert(colors.length); // 2

 

js还为数组提供了unshift()方法。顾名思义,unshift()与shift()的用途相反:它能在数组前添加任意个项并返回新数组的长度。因此,同时使用unshift()与shift()的用途

可以从相反的方向来模拟队列,即在数组的前端添加项

 从数组末端移除项。

var colors = new Array();var count = colors.unshift("red","green");//推入两项alert(count);//2count = colors.unshift("black"); // 推入另一项alert(count); //3var item = colors.pop(); // 取得最后一项   调用pop()方法时,移除并返回的是最后一项,即“green”alert(item); // greenalert(colors.length);  //2

 

 

4)重排序方法:

数组中已经存在两个直接用来重排序的方法 : sort();  reverse(); 

var values = [1,2,3,4,5];values.reverse();alert(values); -- //5,4,3,2,1

 

sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。

即使数组中的每一项都是数值,sort()方法比较的也是字符串,如下所示:

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

 

所以sort()方法这种排序方式在很多情况下都不是最佳方案。

sort()可以接收一个比较函数作为参数,以便我们制定哪个值位于哪个值的前面。

function compare(value1 ,value2){       if(value1 < value2){            return -1;// -1 升序 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

 

5)操作方法:

js为操作已经包含在数组中的项提供了很多方法,concat()基于当前数组的所有项创建一个新的数组。

concat()复制当前数组并返回副本。

一般是 arr1.concat(arr2);

也有一种 arr1.concat("red",["green","black"])

 

slice()--就是相当于java中的substring() 截取字符串

能够基于当前数组中的一或多个项创建一个新数组。slice()可以接受一个或两个参数,纪要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法会返回起始和结束位置之间的项-单不高扩结束位置的项。

注意slice方法不会影响到原始数组

 

var colors = ["red","green","blue","yellow","purple"];var colors2 = colors.slice(1);var colors3 =  colors.slice(1,4);alert(colors2); // green,blue,yellow,purplealert(colors3); //  "green","blue","yellow --不包含最后一个项

 

拓展:

如果slice()方法的参数中有一个负数,则用数组的长度加上该数来确定相应的位置。例如:

一个包含五项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。

如果结束位置<起始位置,即返回空数组。

 

 *splice()方法

是向数组中部插入项,使用方法有三种

删除——可以删除任意数量的项,只需要制定2个参数:要删除的第一项的位置和要删除的项数如: splice(0,2);

插入——可以在指定位置插入任意数量的项,只需要提供3个参数:起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四第五,以至任意多个项。例如,

splice(2,0,"red","green")会从当前数组的位置2开始插入字符串“red”和"green"。

替换——可以向指定位置插入任意数量的项,并且同时删除任意数量的项目,三个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数一致。r

如:splice(2,1,"red","green")会删除当前数组位置2的项,然后再从位置2开始插入字符串“red”和"green"。

splice()方法始终都会返回一个数组,该数组是删除的项(如果没有删除任何项,则返回一个空数组)。

插入:第二的参数为0,第二个参数是可以删除项目的数量;替换:第二个参数不能为0,要替换就要删除旧的项目

实例:var colors = ["red","green","blue"];var removed = colors.splice(0,1); //删除第一项alert(colors); // green,bluealert(removed); // red,返回的数组半包含刚删除的一项“red”removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1开始插入两项alert(colors); //  green,yellow,orange,bluealert(removed); //返回的是一个空数组removed = colors.splice(1,1,"red","purple"); // 在位置2,删除一项“yellow”并插入两项“red”,"purple"alert(colors); // green,red,purple,orange,bluealert(removed); // yellow 返回的数组中值包含一项

 

3、Date类型

1)创建日期对象

var now = new Date();

 

如果创建一个根据指定日期和时间的日期对象,必须传入表示该日期的毫秒数,可以用js提供的两个方法Date.parse()和Date.UTC()

var someDate = new Date(Date.parse("May 25, 2004"));

如果传入的Date.parse()方法的字符串不能表示日期,那么她会返回NaN。实际上,如果直接把字符串传递给Date构造函数,也会在后台调用Date.parse().换句话说,下面的代码与前面的例子是等价的:

var someDate = new Date("May 25, 2004");

 

Date.UTC()也会返回时间的毫秒数,因为不是常用就不做介绍了

 

2)继承的方法

toString()

toLocalString()

valueOf() 方法,根本不返回字符串,而是返回日期的毫秒数表示。因此,可以方便使用比较操作符(小于或大于)来比较日期值。var date1 = new Date(2007, 0, 1); // "January 1, 2007"var date2 = new Date(2007,1,1); // "February 1, 2007"alert(date1 < date2); // true;alert(date1> date2); // false;

 

3) 日期格式化方法

toDateString() —— 以特定于实现的格式显示星期几、月、日和年;

toTimeString()——以特定于实现的格式显示时、分、秒和时区;

toLocalDateString() —— 以特定于地区的格式显示星期几、月、日和年;

toLocalTimeString()——以特定于实现的格式显示时、分、秒;

toUTCString() —— 以特定于实现的格式完整的UTC日期;

 

4)日期/时间组件方法:

列举几个常见的方法:

getTime() —— 返回表示日期的毫秒数;与valueOf()返回值相同

getFullYear ——取得四位数的年份(如2007而非仅07)

getMonth —— 返回日期中的月份,其中0表示1月,11表示12月;

getDate——返回日期月份中的天数(1-31)

getDay() —— 返回日期中星期的星期几

getHours() —— 返回日期中的小时数(0到23)

getMinutes()—— 返回日期中的分钟数(0-59)

getSeconds()——返回日期中的秒数(0-59)

getMilliseconds()——返回日期中的毫秒数

4、RegExp类型

正则表达式

var expression = / pattern / flags;

pattern 部分可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、向前查找,

以及反向引用。每个正则表达式都可带有一或多个标志(flags),用以标明正则表达式的行为。

正则表达式的匹配模式支持下列3个标志:

g ——表示全局模式(global),即模式将被应用于所有字符串,而非发现第一个匹配项时立即停止;

i ——表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;

m——表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在于模式匹配的项。

 

5、函数

 

 

6、基本包装类型

Boolean String 和Number

String类型:

var s1 = "some text";

var s2 = s1.substring(2);

当第二行代码访问s1时,访问过程初语一种读取模式,也就是iyaocong内存中读取这个字符串的值。

而在读取模式中访问字符串时,后台都会自动完成下列处理:

1)创建String类型的一个实例。

2)在实例上调用指定的方法。

3)销毁这个实例。

 

Boolean类型

var falseObject = new Boolean(false);var result = falseObject && true;alert(result);  // truevar falseValue = false;var result = falseValue&& true;alert(result);  // false

 

在这个例子中,我们使用false值创建了一个Boolean对象。然后,将这个对象与基本类型值true构成了逻辑与表达式。在布尔运算中,false && true等于false。 可是,示例中的这行

代码是对falseObject而不是对它的值(false)进行求值。前面讨论过,布尔表达式中的所有的对象都会转换成true,所以,falseObject && true =true。

 

基本类型和引用类型的布尔值还有两个区别:

1 typeof操作符对基本数据类型返回“boolean”,而对引用类型返回“object”。

2 由于Boolean对象时Boolean类型的实例,所以使用instanceof操作符测试Boolean对象会返回true, 而测试基本数据类型的布尔值则返回false。例如:

 

alert(typeof falseObject); // objectalert(typeof falseValue); // booleanalert(falsObject instanceof Boolean); // truealert(falseValue instanceof Boolean); // false

 

 Number类型

toFixed()方法会按照指定的小数位返回数值的字符串表示

var num = 10;

alert(num.toFixed(2)); // “10.00”

toFixed()方法里传入了数值2,意思是显示几位小数。0填补了必要的小数位。如果数值本身包含的小数位比指定的还多,那么接近指定的最大小数位的值就会舍入

var num = 10.005;

alert(num.toFixed(2)); // "10.01"

 

 String 类型

1. 字符方法

charAt() 和 charCodeAt()这两个方法都接收一个参数,即基于0的字符位置。其中,charAt()方法以单字符字符串的形式返回给定位置的那个字符

var stringVal = "hello world";

alert(stringVal.charAt(1)); // "e"

如果你想得到字符编码就要用charCodeAt()

var stringVal = "hello world";

alert(stringVal.charCodeAt(1));  // 输出"101"

 

2. 字符串操作方法

----concat()

var stringValue = "hello ";

var result = stringVal.concat("world");

alert(result); // "hello world"

alert(stringValue); "hello "

stringValue调用concat()方法返回的结果是“hello world”---但stringValue的值则保持不变。实际上,concat()方法可以接收任意多个参数,

也就是说可以通过它拼接任意多个字符串。

var stringValue = "hello ";

var result = stringVal.concat("world","!");

alert(result); // "hello world"

alert(stringValue); "hello "

更多的时候是使用“+”号,比较简单

----slice(),substring(), substr()

都会返回子字符串,而且也接收一到两个参数。第一个参数指定子字符串开始位置,第二个参数(在指定的情况下)表示到哪个位置结束。具体来说,slice(),substring()是指定子字符串最后一个字符后面的位置。而substr()返回的是字符个数。如果第二个参数没有传递,就默认是字符串的长度。

** 与concat一样,slice(),substr(), substring()也不会修改字符串本身的值——它们只是返回一个基本类型的字符串值,对原始字符串没有影响。P120

 

 传入的参数是负数的情况下,它们的行为就不相同了。其中,slice()将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,负的第二个

参数转换为0.最后substring()方法会吧所有负值的参数都转换为0.

例子:

var stringValue = "hello world";

alert(stringValue.slice(-3)); // "rld"

alert(stringValue.substring(-3)); //"hello world"

alert(stringValue.substr(-3)); // "rld"

alert(stringValue.slice(3,-4));// "lo w"

alert(stringValue.substring(3,-4)); // "hel"

alert(stringValue.substr(3,-4)); // " " 空字符串

这个例子清晰地展示了上述三个方法之间的不同行为。在给slice(),substr()传递一个负值参数时,它们的行为相同。这是因为-3会被转换成8(负值参数【-3】+字符串长度【11】)

,实际上相当于调用了slice(8)和substr(8)。但substring()方法则返回了全部字符串,因为它将-3转换成了0。

 

第二个参数是负值时候:

slice()方法会把第二个参数转换为7,==slice(3,7)

substring方法会把第二个参数转换为0 == substring(3,0),而由于这个方法会将较小的数作为开始位置,较大数作为结束位置,因此最终相当于调用了

substring(0,3).

substr()也会将第二个参数转换为0,这也就意味着返回包含零个字符的字符串,也就是一个空字符串。

 

 

 

 

7、内置对象

Global和Math

1) Global对象

Global对象的方法:

a. URI编码方法

Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,以便发送给浏览器。

有效的uri中不能包含某些字符,例如空格。而这两个URI编码方法就可以对URI进行编码,它们用特殊的utf-8编码替换所有的无效字符,从而让浏览器能够接受和理解。

decodeURI()

decodeURIComponent()

 

b.eval()方法

就像是一个完整的ECMAScript解析器,它只接收一个参数,即要执行的ECMAScript(或JavaScript)字符串。

eval("alert('hi')");

//相当于执行alert('hi')

 

c.Global对象的属性

p128

 

d.window对象

 

 

2)Math对象

min()和max()方法

用于确定一组数值中的最小值和最大值,这个两个方法都可以接收任意多个数值参数var max = Math.max(3,54,32,16);alert(max); //54var min = Math.min(3,54,32,16);alert(min); //3

 

 

舍入方法

Math.ceil()  —— 执行向上舍入,即它总是将数值向上舍入为最接近的整数

Math.floor() ——执行向下舍入,即它总是将数值向下舍入为最接近的整数

Math.round() —— 执行标准舍入,即它总是将数值四舍五入为最接近的整数

 

random()方法

Math.random()方法返回介于0和1之间一个随机数,不包括0和1.对于某些站点来说,这个方法非常实用,因为可以用它来随机显示一些名人名言和新闻事件。套用下面的公式,

就可以利用Math.random()从某个整数方位内随机选择一个值:

值 = Math.floor(Math.random()*可能值的总数+第一个可能的值)

Math.floor()方法其实就是取整数部分,去掉小数部分

function selectFrom(lowerValue, upperValue){      var choices = upperValue - lowerValue+1;      return Math.floor(Math.random()*choices+lowerValue);}var num = selectFrom(2,10);alert(num); // 介于2和10之间(包括2和10)的一个数值

 

主要用途还是利用方法的随机性,随机从数组中抽出一项

var colors = ["red","green","blue","yellow","black","purple","brown"];var color = colors[selectFrom(0,colors.length-1)];alert(color); //可能是数组中包含的任何一个字符串在这个例子中,传递给selectFrom()的第二个参数是数组的长度减一,也就是数组中最后一项的位置

 

三、面向对象的程序设计

 

面向对象-(Object-oriented, OO)

 

 

你可能感兴趣的文章
More Effective C++中文版
查看>>
jsday6
查看>>
常用的用户以及文件管理命令有哪些,并演示命令以及用法。
查看>>
实例源码--Android日历实例源码
查看>>
北京电子科技学院(BESTI)实验报告1
查看>>
于用cocoapods添加第三方库,并且cocoapods添加成功,但是却在任何一个文件上都导入不了头文件...
查看>>
JavaScript 创建对象的几种方式?
查看>>
第四次课程总结
查看>>
【NOIP2016提高A组集训第14场11.12】随机游走——期望+树形DP
查看>>
判定覆盖和条件覆盖的测试用例
查看>>
Spring实现Ioc的多种方式--控制反转、依赖注入、xml配置的方式实现IoC、对象作用域...
查看>>
20169211《Linux内核原理与分析》课程总结
查看>>
EAS远程调试简述
查看>>
设计模式——单例模式(饿汉式、懒汉式)
查看>>
nio学习四
查看>>
第7章 jQuery插件的使用和写法
查看>>
python socket
查看>>
BootStrap 模态框禁用空白处点击关闭[转]
查看>>
BZOJ[4127] Abs
查看>>
找出最小高度
查看>>