Rumah >hujung hadapan web >tutorial js >Pengaturcaraan Lanjutan JavaScript (Edisi Ketiga) Nota Kajian Bab 1~5_kemahiran javascript
Bab 2, Menggunakan JavaScript dalam html
Html memperkenalkan skrip js luaran
<script type="text/javascript" src="test.js">两个</script>之间不应放脚本,因为并不会被执行</script>
855348821b2e8f2cc4b633bf98f064df mempunyai atribut tangguh yang boleh menangguhkan pelaksanaan skrip, tetapi ia tidak menjamin bahawa ia akan dilaksanakan mengikut susunan skrip itu
Cadangan: Letakkan pengenalan skrip selepas semua kandungan teg 6c04bd5ca3fcae76e30b72ad730ca86d dan bukannya dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e
Kandungan dalam teg
dalam teg.
Kandungan
Bab 3, Konsep Asas
Pengecam
Gunakan penamaan huruf unta: huruf pertama adalah huruf kecil, dan huruf pertama setiap perkataan berikutnya ditulis dengan huruf besar
//Ini adalah ulasan satu baris
/*Ini
Komen
*/
jenis – Tentukan jenis data pembolehubah yang diberikan
Pulangan:
“tidak ditentukan” – jenis data tidak ditentukan
“boolean” – nilai Boolean
"rentetan" – Rentetan
“nombor” – nilai berangka
“objek” – objek atau NULL
“fungsi” – fungsi
Nota: Fungsi ialah objek dalam js, bukan jenis data, jadi anda perlu menggunakan typeof untuk membezakan fungsi dan objek
Typeof kadangkala mengembalikan nilai yang mengelirukan tetapi betul secara teknikal, contohnya, null dan object, kedua-duanya mengembalikan "objek"
Null dan undefined adalah sama, null == undefined akan kembali benar
Apabila melakukan pengiraan aritmetik, semua nombor perlapanan dan heksadesimal akan ditukar kepada perpuluhan
Infinite ialah infiniti, termasuk infinite positif dan negatif Anda boleh menggunakan isFinite() untuk menentukan sama ada infinite
Number.MAX_VALUE dan Number.MIN_VALUE masing-masing menyimpan nilai maksimum dan minimum jenis angka
Nombor.NEGATIVE_INFINITY dan Number.POSITIVE_INFINITY masing-masing menyimpan infiniti negatif dan positif
NaN bukan nilai angka Anda boleh menggunakan isNaN untuk menentukan sama ada pembolehubah bukan nilai angka
Paksa penukaran kepada Number(), tetapi hasilnya tidak munasabah. Adalah disyorkan untuk menggunakan fungsi parseInt() dan membawa masuk pangkalan untuk ditukar
Contoh:
parseInt(“10”,2); //以二进制解析 parseInt(“10”,8); //以八进制解析Tidak membawa masuk pangkalan bermakna membiarkan parseInt memutuskan cara menghuraikan rentetan, yang akan menyebabkan ralat pada satu ketika
parseFloat() pada asasnya sama dengan parseInt(), menghuraikan rentetan menjadi nombor titik terapung, sentiasa mengabaikan sifar pendahuluan, hanya menghuraikan nilai perpuluhan, perenambelasan akan dihuraikan kepada 0, jadi
Ia tidak mempunyai parameter kedua
Pembolehubah jenis rentetan tidak boleh diubah, iaitu pembolehubah rentetan ialah pemalar Anda boleh menggunakan petikan tunggal (') atau petikan berganda (") untuk mentakrifkan pembolehubah rentetan, tetapi ia mesti sepadan. Jika anda perlu mencampurkannya, Adalah disyorkan untuk menambah aksara melarikan diri ()
Gunakan fungsi toString() untuk menukar nilai kepada rentetan Nilai angka boleh ditukar menggunakan nilai asas
Contoh:
也可以使用String()进行强制转换
Object类型
constructor:构造函数
hasOwnProperty(propertyName):检查给定的属性在当前对象中是否存在
isPrototypeOf(object):检查传入的对象是否是传入对象的原型
propertyIsEnumerable(propertyName):检查给定的属性是否能够使用for-in语句来枚举,与hasOwnProperty一样,给定的属性名必须以字符串的形式指定
toLocalString():返回对象的字符串表示,与执行环境的地区对应
toString():返回对象的字符串表示
valueOf():返回对象的字符串、数值或布尔值表示。通常与toString返回相同
操作符
按位非:~,按位与:&,按位或:|,按位异或:^,左移:868d74464fbfc82f1286fcaa1c775123>(以符号位填充),无符号右移:>>>(以零填充),逻辑非:!,逻辑与:&&,逻辑或:||
关系操作符:bff82425ba327b991a066901888e460e,496e850c10959de588f4dd05d6fbb478=
相等和不相等:==,!=,先转换再比较
全等和不全等:===,!==,只比较,不转换,类型不同则不同
条件操作符:? :,三目运算符
逗号操作符:(,),返回最后一个表达式的值:var num = (3,5,6,2),num = 2
语句
if{},do{}while();,while(){},for(;;){}
for-in语句:
精准的迭代语句,可以用来枚举对象的属性
for(property in expression) statement
例:
for(var propName in window){ document.write(propName); }
注:当对象的变量值为null或者为undefined时,for-in会发生错误,虽然ECMAScript5更改了这一错误,不过,为了最大限度的保证兼容性,在使用for-in循环之前,先检测该对象的值不是null或者undefined
label语句:标签语句
start:for(var I = 0;i<count;i++){ statement }
这个start标签可以在之后的break和continue语句中使用,标签语句一般与循环语句一起使用
with语句:
将代码的作用域设置到一个特定的对象中
with(expression) statement;
严格模式下不允许使用with语句,否则将被视为语法错误
大量使用with语句会导致性能下降以及代码调试困难,建议大型应用程序的开发不使用with语句
switch语句
switch(expression){ case selection:statement; break; …… default:statement; break; }
函数
严格模式对函数限制:
函数不能命名为eval和arguments
参数不能命名为eval和arguments
不能出现两个命名参数同名的情况
理解函数参数
js中的函数并不介意传进来多少个函数参数,即使与定义的情况不同,因为在函数接收到的永远都是一个类似数组形式的参数,函数并不关心数组包含的参数。可以在函数体内通过arguments对象来访问这个参数数组。
arguments只是与数组类似,因为可以使用方括号来访问它的元素,使用length来确定传进来的参数个数。arguments中的参数顺序与传进来的参数顺序一致,并且是同步改变的。
注:没有传递值的命名参数,将会被赋值为undefined值。
严格模式对arguments对象作出了一些限制:在函数中对arguments进行赋值将会变得无效,重写arguments值将会导致语法错误
使用arguments对参数的类型和数量进行判断,可以模仿重载
第4章,变量、作用域和内存问题
注:js中所有函数的参数都是按值传递的
检测类型:instanceof
instanceof操作符,只能操作引用类型,即对象,对基本数据类型的测试始终返回true,因为基本数据类型不是对象
result = variable instanceof constructor
若变量是给定的引用类型,则返回true
例:
person instanceof Object; //person是Object类型吗?
color instanceof Array; //color是Array类型吗?
没有块级作用域
if(true){ var j = “blue”; } alert(j); //将会得到输出blue
如果在C/C++中将会出现错误,而js并不会出现错误,在块里面定义的变量将会添加到当前的花括号之外的作用域中。
垃圾收集
标记清除
引用计数
第5章,引用类型
Object类型
两种创建实例方式:
一、使用new操作符后跟Object构造函数
var obj = new Object(); obj.name = “name”; obj.age = 23;
二、使用对象字面量(通过对象字面量定义对象时,实际上并不会调用Object构造函数)
var obj = { name : “name”; age : 23 }
可以使用点表示法和方括号表示法访问对象的属性
点表示法: 方括号表示法:(必须以字符串的形式表示要访问的属性名)
obj.name obj[“name”]
注:当属性名包含会导致语法错误的字符,或属性名使用的是关键字或保留字时,可以使用方括号表示法,还可以通过变量访问属性
建议:除非必须使用变量访问属性,否则最好使用点表示法
Array类型
创建方式:
一、使用Array构造函数
var arr = new Array(); //创建一个空数组 var arr = new Array(20); //创建一个包含20个项的数组 var arr = new Array(“one”,”two”,”three”); //创建包含one,two,three三项的数组 还可以将new操作符省略
二、使用数组字面量表示法
var color = [“red”,”blue”]; //创建包含两个项的数组 var color = [“yellow”,”green”,]; //不要这样创建数组,浏览器的解析不同,结果会不同
注:使用数组字面量创建数组时,也不会调用Array构造函数
arr.length,将会返回数组的项数,即将返回数组的大小
对arr.length进行赋值,将会动态改表数组大小,赋值大于原数组大小将扩大数组,新增项获得undefined的值,小于原数组大小,将保留前面的数值,多的数值将被移除
数组检测:
对于只有一个全局作用域而言,instanceof可以很方便的检测某个变量是否是数组,但对于多个框架的网页而言,则存在多个不同的版本的Array构造函数,instanceof将不能够满足要求,为此引入Array.isArray(value)方法,这个方法可以最终确定某个值是否是数组,而不管是哪个框架构造的。支持的浏览器为:IE9+,Firefox4+,Safari5+,Opera10.5+,chrome。
转换方法:
调用数组的toString()方法,将会返回由数组中每个值的字符串形式拼接而成的以逗号分隔的字符串,valueOf()方法返回的还是数组,与toString()是一样的结果
toLocaleString()返回的通常与toString()和valueOf()返回结果是一样的,但并不总是如此,使用toLocaleString()方法,则会去调用数组中每一项的toLocaleString()方法,而不是toString()方法。
join方法
join方法接受一个参数,即作为分隔符的字符串
例:
var arr = [“one”,”two”]; arr.join(“|”); //one|two
如果不给join传递参数,则返回以逗号作为分隔的字符串
注:如果数组中某一项的值为null或者undefined,则调用join,toLocaleString(),toString(),valueOf()返回的结果则使用空字符串表示
数组的栈方法
var arr = new Array();
arr.push(),在数组末尾添加数据,可以传入多个参数,并返回修改后的数组长度
arr.pop(),从数组末尾移除最后一个数据,减少数组的length值,并返回该项的值
数组的队列方法
var arr = new array();
arr.shift(),移除数组的第一项,减少数组的length值,并返回该项的值
arr.unshift(),在数组的前端添加任意个项,并返回修改后的数组长度
使用shift和push结合,可以模拟队列操作
使用unshift和pop结合,可以从相反方向模拟队列
重排序方法:
var arr = new Array();
arr.reverse(),翻转数组的项,即首尾顺序调转
arr.sort(),默认情况下升序排列,注:排列顺序是数组值转换成字符串之后的升序排列,通常不是所需要的排序
sort方法可以接受一个比较函数作为参数,实现所需的排序方法,方法返回负数则按升序排列,返回整数则按降序排列,注:可以适应大多数排序情况
操作方法:
var arr = new Array();
arr.concat(),进行数组连接,并返回连接后的数组,可传入多个参数
arr.slice(),可以基于当前数组中的一个或多个值创建一个新数组返回,接受一个或两个参数,即返回原数组的起始位置和结束位置之间的所有项,不包含结束位置的项,只有一个参数则返回从该参数指定位置到末尾的所有项。
注:如果参数是负数,则会将数组的长度加上这个负数得到的结果来确定位置。结束位置小于起始位置则返回空
splice()方法:
删除:指定两个参数,要删除的起始位置和要删除的项数,例:splice(0,2);
插入:指定三个参数,起始位置,要删除的项数(0),要插入的项,插入的项可以是多个项
例:splice(2,0,”red”,”green”); //从位置2插入red,green
替换:与插入相同,第二个参数有变化,起始位置,要删除的项数,要插入的项,插入的项数可以是多个项
位置方法:
indexOf(),lastIndexOf(),都接收两个参数,要查找的项和查找起点位置索引indexOf从数组头开始查找,lastIndexOf从数组末尾开始查找。若没有找到则返回-1.
注:查找时进行的比较使用的是全等操作符,就像使用“===”一样
迭代方法:
ECMAScript5定义了5个迭代方法,全部接收两个参数:每一项上运行的函数,运行该函数的作用域对象—影响this的值。函数则接收三个参数:数组项的值,该项在数组中的位置,和数组对象本身
var arr = new Array();
every(),对数组中每一项运行给定函数,每一项都返回true,则返回true
filter(),对数组每一项运行给定函数,返回该执行函数返回true的项组成的数组
例:
var num = [1,2,3,4,5,4,3,2,1]; var filter = num.filter(function(item,index,array){ return item > 2; }); //[3,4,5,4,3]
forEach(),对数组中每一项运行给定函数,没有返回值,本质上与for循环迭代数组一致
map(),对数组中每一项运行给定函数,返回每次函数调用的结果组成的结果
some(),对数组中每一项运行给定函数,只要任一项的函数结果是true,则返回true
注:以上所有函数并不会对数组进行修改
例:
var num = [1,2,3,4,5,4,3,2,1]; var mapResult = num.map(function(item,index,array(){ return item * 2; }); //以上代码返回数组每一项都乘2以后的数组
归并方法:
reduce()和reduceRight()
两个函数都会迭代数组的所有项,然后构建一个最终返回的值,其中reduce从数组第一项开始,reduceRight从数组最后一项开始
这两个方法都接收2个参数:一个在每一项上都调用的函数和(可选的)作为归并基础的初始值。传递的函数需要接收4个参数:前一个值,当前值,项的索引和数组对象。这个函数的返回值会作为第一个参数传递给下一项,第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。
例:
var value = [1,2,3,4,5]; var sum = value.reduce(function(prev,cur,index,array){ return prev + cur; }); //sum = 15
//第一次执行回调函数,prev = 1,cur = 2,第二次,prev = 3(第一次函数返回结果1+2),cur = 3(当前数组项)。这个过程会把数组每一项都访问一遍。
reduceRight除了方向不一样,其他都一样。
Date类型
Date类型使用自UTC1970.1.1午夜零时开始经过的毫秒数来保存日期,可以将日期精确到1970.1.1之前或之后100 000 000(一亿)年。
使用Date构造函数而不传参数,新对象会获得当前日期和时间,要创建特定日期时间,必须传入表示该日期的毫秒数,ECMAScript提供了两个方法Date.parse和Date.UTC方法来简化操作。
Date.parse方法接收一个表示日期的字符串参数。这个方法因实现而异,而且通常因地区而异。美国地区的浏览器支持以下格式:
月/日/年,如6/13/2004
英文月名 日,年,如January 12,2004
英文名星期几 英文月名 日 年 时:分:秒 时区,如Tue May 25 2004 00:00:00 GMT-0700
ISO 8601扩展格式YYYY-MM-DDTHH:mm:ss.sssZ,如2004-05-25T00:00:00,只有支持js5的实现支持这种格式
Date.UTC也同样返回表示日期毫秒数,参数分别为:年份、基于0的月份(一月份是0)、月中哪一天(1-31)、小时数(0-23)、分钟、秒及毫秒数,其中只有前两个参数是必须的。
例:
var someDate = new Date(Date.UTC(2000,0)); //2000年1月1日0时0分0秒 var someDate = new Date(Date.UTC (2000,0,1,15,23,23)); //2000年1月1日15时23分23秒
Date构造函数会模仿Date.parse和Date.UTC函数。
Date.now方法返回调用这个函数时的日期和时间毫秒数。在不支持的浏览器上面,可以使用+操作符获取Date对象时间戳
var start = +new Date(); var stop = +new Date();
日格式化方法
toDateString—以特定于实现的格式显示星期几、月、日、年
toTimeString—以特定于实现的格式显示时、分、秒和时区
toLocaleDateString—以特定于地区的格式显示星期几、月、日、年
toLocaleTimeString—以特定于实现的格式显示时、分、秒
toUTCString—以特定于实现的格式完整的UTC时间
与toLocaleString和toString一样,以上方法没有一个能够用来在用户界面中显示一致的日期信息。
RegExp类型,正则
语法:类似于Perl语法
var expression = / pattern /flags;
模式(pattern)部分可以是简单或复杂的正则表达式,每个表达式可以使用一个或多个标识符,支持以下3个标识符
g:全局模式,将被应用于所有字符串,而不是在匹配到第一个字符串后就停止,
i:表示不区分大小写,
m:表示多行模式,即达到一行文本末尾时,会继续查找下一行
注:模式中所有元字符都需要转义
元字符:( [ { \ ^ $ | } ? * + . ] )
以上方法是以字面量模式创建正则表达式
使用RegExp构造正则表达式
var partten = new RegExp(“bat”,”I”);
注:使用RegExp构造函数,所有元字符必须双重转义
例:/\[bc\]at/ ===> “\[bc\\]at”
RegExp实例属性
global:布尔值,表示是否设置了g标志
ignoreCase:布尔值,表示是否设置了i标志
lastIndex:整数,表示开始搜索的下一个匹配项的字符位置,从0算起
multiline:布尔值,表示是否设置了m标志
source:正则表达式的字符串表示,按照字面量形式,而非传入构造函数中的字符串模式返回
RegExp对象的主要方法是exec(),exec()接收一个参数,即要应用模式的字符串,返回一个匹配项(即使设置了g标志),有没有设置g标志的差别在于,没有设置则总是返回同一个结果,设置了则返回下一个匹配
test方法,接收一个字符串,只返回是否匹配,不返回结果
Function类型
函数是对象,函数名是指针
定义方法:
//函数声明的形式 function sum(num1,num2){ return num1 + num2; } //函数表达式的形式 var sum = function(num1,num2){ return num2 + num2; } var sum = new Function(“num2”,”num2”,”return num1 + num2”); //不建议,性能渣,但能更好的理解函数是对象的思想。 function add(num){ return num + 100; } function add(num1,num2){ return num + 200; } //实际如同下面的代码 function add(num){ return num + 100; } add = function(num){ return num + 200; }
所以函数没有重载。
函数内部属性
函数内部有两个特殊对象,arguments和this
arguments有一个属性callee,指向拥有这个arguments的函数
定义递归函数时,最好使用arguments.callee()来代替函数名,降低耦合,减少问题的出现
例:
function factorial(num){ if(num<1) return 1; else return num * factorial(num – 1); } function factorial(num){ if(num<1) return 1; else return num * arguments.callee(num – 1); }
this对象
函数的this对象引用的是函数据以执行的环境对象
ECMAScript5规范定义了另一个函数对象的属性:caller,保存着调用当前函数的函数的引用
函数包含了两个属性:length(希望接收的函数个数)和prototype,prototype不可枚举,所以for-in无法发现他。prototype是所有引用类型保存其所有实例方法的真正所在
包含两个非继承而来的方法:apply和call
apply方法接收两个参数:一个是在其中运行函数的作用域,也就是this对象,一个是参数数组,可以是Array实例,也可以是arguments对象
call与apply基本相同,区别在于,使用call函数,参数必须逐个列举出来
传递参数并非apply和call真正用武之地,真正强大的地方在于能够扩充函数的作用域
例:
window.color = “red”; var o = {color:”blue”}; function sayColor(){ alert(this.color); } sayColor(); //red sayColor.call(this); //red sayColor.call(window); //red sayColor.call(o); //blue
不需要再将sayColor函数放到o对象中,就可以使o对象能够使用sayColor函数
ECMAScript5还定义了另一个方法:bind,这个方法会创建一个函数实例,其this值会被绑定到传给bind函数的值
window.color = “red”; var o = {color:”blue”}; function sayColor(){ alert(this.color); } var objSayColor = sayColor.bind(o); objSayColor(); //blue
toLocaleString和toString始终返回函数代码,但由于浏览器差异,并没有办法根据返回结果实现任何重要功能,valueOf也只返回函数代码
基本包装类型
Boolean、Number、String
对基本包装类型的实例调用typeof会返回object,而且所有的基本包装类型的实例都会返回true,
Object构造函数也会像工厂方法一样,根据传入的值的类型返回响应的基本包装类型的实例
例:
var obj = new Object(“some text”); alert(obj instanceof String); //true
使用new调用基本包装类型和直接使用同名的转型函数是不一样的。例:
var value = “25”; var num = Number(value); //转型函数 alert(typeof num); //”number” var obj = new Number(value); //构造函数 alert(typeof obj); //”object”
Number类型
另外提供的方法
toFixed();接收一个参数,表示要以几位小数表示当前值,当前小数位过长则四舍五入,此方法可以表示带有0到20个小数位的数值,这只是标准实现范围
toExponential();接收一个参数,返回指数形式表示,参数指定返回的结果中的小数位数
toPrecision();接收一个参数,表示所有数字的位数,不包括指数部分
string类型
var str = “hello world”; str.charAt(1); //”e”,返回字符 str.charCodeAt(1); //”101”,返回字符编码 str.concat();//连接字符串,可以接收任意个字符串 slice(),substring(),substr(),都接收一或两个参数,接收的第一个参数均代表起始位置,slice(),substring()接收的第二个参数表示终止位置,substr()的第二个参数表示返回的字符个数,若不给第二个参数,则返回从起始位置到字符串结束位置的字符
Membawa masuk nombor negatif berkelakuan berbeza: slice akan menambah semua nombor negatif yang dibawa masuk ke panjang rentetan, substr akan menambah panjang rentetan pada parameter pertama dan menukar parameter kedua kepada 0 dan substring() akan menambah semua nombor negatif kepada panjang rentetan Nilai ditukar kepada 0
Kaedah indexOf dan lastIndexOf kedua-duanya mengembalikan kedudukan carian indexOf dari awal dan carian terakhirIndexOf dari penghujung, ia mengembalikan -1, yang menunjukkan tempat untuk bermula mencari watak
trim(), mengembalikan hasil rentetan sumber yang mengalih keluar semua ruang sebelum dan selepas awalan
toLowerCase, toLocaleLowerCase, toUpperCase, toLocaleUpperCase, kaedah dengan Locale ialah pelaksanaan untuk wilayah tertentu. Secara umumnya tiada perbezaan, tetapi beberapa bahasa menggunakan peraturan khas untuk penukaran huruf Unicode, yang memerlukan penggunaan pelaksanaan khusus setempat
Kedua-dua kaedah sepadan() dan carian() menerima parameter, rentetan atau ungkapan biasa yang ditentukan oleh objek RegExp
kaedah replace() menerima dua parameter Parameter pertama boleh menjadi objek RegExp atau rentetan (tidak akan ditukar kepada ungkapan biasa Parameter kedua boleh menjadi rentetan atau fungsi , anda mesti menggunakan ungkapan biasa dan menambah bendera global (g)
split(), menerima parameter sebagai pemisah rentetan, mengembalikan tatasusunan yang dipisahkan oleh pemisah dan boleh menerima parameter pilihan kedua sebagai saiz tatasusunan hasil yang dikembalikan
localeCompare(), membandingkan dua rentetan, sama ada sensitif huruf besar atau tidak bergantung pada rantau
1. Rentetan sumber hendaklah ditarafkan sebelum rentetan parameter, dan nombor negatif akan dikembalikan (bergantung pada situasi, biasanya -1)
2. Rentetan sumber adalah sama dengan rentetan parameter, dan 0 dikembalikan
3 Rentetan sumber disenaraikan selepas rentetan parameter, dan integer dikembalikan (bergantung pada situasi, biasanya 1)
dariCharCode(), menerima satu atau lebih kod aksara dan menukarnya kepada rentetan Ia melakukan operasi yang bertentangan dengan charCodeAt()
URI (Pengecam Sumber Sejagat)
Kaedah: encodeURI, encodeURIComponent, decodeURI, decodeURIComponent, pengekodan dan penyahkodan, kaedah penyahkodan hanya boleh mengenal pasti kaedah pengekodan yang sepadan
eval(), menukar parameter rentetan yang dibawa masuk ke dalam pernyataan boleh laku dan memasukkannya ke dalam kedudukan semasa
Sebarang pembolehubah dan fungsi yang dicipta oleh eval tidak akan dipromosikan dalam mod ketat, pembolehubah dan fungsi yang dicipta oleh eval tidak boleh diakses dari luar
Nota: Cuba jangan gunakan kaedah eval, ini hanyalah pendapat peribadi
Objek matematik
min(), max(), ceil() round up, floor() round down, round() standard rounding, iaitu, rounding, random() mengembalikan nombor rawak lebih besar daripada atau sama dengan 0 dan kurang daripada 1
Di atas adalah bab 1~5 nota kajian Pengaturcaraan Lanjutan JavaScript (Edisi Ketiga) yang diperkenalkan oleh editor saya harap ia akan membantu anda!