Notes d'étude sur la programmation avancée JavaScript (troisième édition) Chapitre 1 ~ 5_compétences javascript-js tutoriel-php.cn

Chapitre 2, Utilisation de JavaScript en HTML

Html introduit un script js externe

两个 之间不应放脚本，因为并不会被执行 Copier après la connexion

La balise a un attribut defer qui peut retarder l'exécution du script, mais elle ne garantit pas qu'il sera exécuté dans l'ordre dans lequel le script est organisé

Suggestion : Placez l'introduction du script après tout le contenu de la balise au lieu de la balise pour accélérer la réponse de la page

Le contenu de la balise sera affiché lorsque le navigateur ne prend pas en charge les scripts ou que les scripts sont désactivés. Les navigateurs qui activent les scripts ne verront pas le

dans la balise. Contenu

Chapitre 3, Concepts de base

Identifiant

Le premier caractère doit être une lettre, un trait de soulignement (_) ou un signe dollar ($). Les noms valides sont composés de lettres, de chiffres, de traits de soulignement et de signes dollar.

Adoptez la dénomination en casse chameau : la première lettre est en minuscule et la première lettre de chaque mot suivant est en majuscule

Commentaire sur une seule ligne :

//Ceci est un commentaire sur une seule ligne

Commentaires multilignes :

/*C'est Plusieurs lignes Commentez */

type d'opérateur

typeof – Déterminer le type de données d'une variable donnée

Retour :

« non défini » – type de données non défini

«booléen» – Valeur booléenne

"chaîne" – Chaîne

« nombre » – valeur numérique

« objet » – objet ou NULL

« fonction » – fonction

Remarque : les fonctions sont des objets en js, pas des types de données, il est donc nécessaire d'utiliser typeof pour distinguer les fonctions et les objets

Typeof renvoie parfois des valeurs déroutantes mais techniquement correctes, par exemple null et object, qui renvoient toutes deux "object"

Null et non défini sont égaux, null == undéfini renverra vrai

Lors de l'exécution de calculs arithmétiques, tous les nombres octaux et hexadécimaux seront convertis en nombres décimaux

L'infini est l'infini, y compris l'infini positif et négatif. Vous pouvez utiliser isFinite() pour déterminer s'il est infini .

Number.MAX_VALUE et Number.MIN_VALUE stockent respectivement les valeurs maximales et minimales des types numériques

Number.NEGATIVE_INFINITY et Number.POSITIVE_INFINITY stockent respectivement l'infini négatif et positif

NaN n'est pas une valeur numérique. Vous pouvez utiliser isNaN pour déterminer si une variable n'est pas une valeur numérique

Conversion numérique

Forcer la conversion en Number(), mais le résultat est déraisonnable. Il est recommandé d'utiliser la fonction parseInt() et d'introduire la base à convertir

Exemple :

parseInt(“10”,2); //以二进制解析 parseInt(“10”,8); //以八进制解析 Copier après la connexion Ne pas introduire la base signifie laisser parseInt décider comment analyser la chaîne, ce qui provoquera des erreurs à un moment donné

parseFloat() est fondamentalement identique à parseInt(), analysant la chaîne en un nombre à virgule flottante, ignorant toujours les zéros non significatifs, analysant uniquement les valeurs décimales, l'hexadécimal sera analysé à 0, donc

Il n'a pas de deuxième paramètre

Type de chaîne

Les variables de type chaîne sont immuables, c'est-à-dire qu'une variable chaîne est une constante. Vous pouvez utiliser des guillemets simples (') ou des guillemets doubles (") pour définir des variables de chaîne, mais elles doivent correspondre. Si vous devez les mélanger, Il est recommandé d'ajouter le caractère d'échappement ()

Utilisez la fonction toString() pour convertir une valeur en chaîne. Les valeurs numériques peuvent être converties à l'aide de valeurs de base

Exemple :

var num = 10; num.toString(“2”); //”1010” num.toString(“8”); //”12” Copier après la connexion 也可以使用String()进行强制转换

Object类型

constructor：构造函数

hasOwnProperty(propertyName)：检查给定的属性在当前对象中是否存在

isPrototypeOf(object)：检查传入的对象是否是传入对象的原型

propertyIsEnumerable(propertyName)：检查给定的属性是否能够使用for-in语句来枚举，与hasOwnProperty一样，给定的属性名必须以字符串的形式指定

toLocalString()：返回对象的字符串表示，与执行环境的地区对应

toString()：返回对象的字符串表示

valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString返回相同

操作符

按位非：~，按位与：&，按位或：|，按位异或：^，左移： >（以符号位填充），无符号右移：>>>（以零填充），逻辑非：!，逻辑与：&&，逻辑或：||

关系操作符： ， =

相等和不相等：==，!=，先转换再比较

全等和不全等：===，!==，只比较，不转换，类型不同则不同

条件操作符：? :，三目运算符

逗号操作符：（,），返回最后一个表达式的值：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); } Copier après la connexion 注：当对象的变量值为null或者为undefined时，for-in会发生错误，虽然ECMAScript5更改了这一错误，不过，为了最大限度的保证兼容性，在使用for-in循环之前，先检测该对象的值不是null或者undefined

label语句：标签语句

start:for(var I = 0;i Copier après la connexion 这个start标签可以在之后的break和continue语句中使用，标签语句一般与循环语句一起使用

with语句：

将代码的作用域设置到一个特定的对象中

with(expression) statement;

严格模式下不允许使用with语句，否则将被视为语法错误

大量使用with语句会导致性能下降以及代码调试困难，建议大型应用程序的开发不使用with语句

switch语句

switch(expression){ case selection:statement; break; …… default:statement; break; } Copier après la connexion 函数

严格模式对函数限制：

函数不能命名为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 Copier après la connexion 如果在C/C++中将会出现错误，而js并不会出现错误，在块里面定义的变量将会添加到当前的花括号之外的作用域中。

垃圾收集

标记清除

引用计数

第5章，引用类型

Object类型

两种创建实例方式：

一、使用new操作符后跟Object构造函数

var obj = new Object(); obj.name = “name”; obj.age = 23; Copier après la connexion 二、使用对象字面量（通过对象字面量定义对象时，实际上并不会调用Object构造函数）

var obj = { name : “name”; age : 23 } Copier après la connexion 可以使用点表示法和方括号表示法访问对象的属性

点表示法： 方括号表示法：（必须以字符串的形式表示要访问的属性名）

obj.name obj[“name”] Copier après la connexion 注： 当属性名包含会导致语法错误的字符，或属性名使用的是关键字或保留字时，可以使用方括号表示法，还可以通过变量访问属性

建议：除非必须使用变量访问属性，否则最好使用点表示法

Array类型

创建方式：

一、使用Array构造函数

var arr = new Array(); //创建一个空数组 var arr = new Array(20); //创建一个包含20个项的数组 var arr = new Array(“one”,”two”,”three”); //创建包含one，two，three三项的数组 还可以将new操作符省略 Copier après la connexion 二、使用数组字面量表示法

var color = [“red”,”blue”]; //创建包含两个项的数组 var color = [“yellow”,”green”,]; //不要这样创建数组，浏览器的解析不同，结果会不同 Copier après la connexion 注：使用数组字面量创建数组时，也不会调用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 Copier après la connexion 如果不给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] Copier après la connexion 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以后的数组 Copier après la connexion 归并方法：

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 Copier après la connexion //第一次执行回调函数，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秒 Copier après la connexion Date构造函数会模仿Date.parse和Date.UTC函数。

Date.now方法返回调用这个函数时的日期和时间毫秒数。在不支持的浏览器上面，可以使用+操作符获取Date对象时间戳

var start = +new Date(); var stop = +new Date(); Copier après la connexion 日格式化方法

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; } Copier après la connexion 所以函数没有重载。

函数内部属性

函数内部有两个特殊对象，arguments和this

arguments有一个属性callee，指向拥有这个arguments的函数

定义递归函数时，最好使用arguments.callee()来代替函数名，降低耦合，减少问题的出现

例：

function factorial(num){ if(num Copier après la connexion 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 Copier après la connexion 不需要再将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 Copier après la connexion toLocaleString和toString始终返回函数代码，但由于浏览器差异，并没有办法根据返回结果实现任何重要功能，valueOf也只返回函数代码

基本包装类型

Boolean、Number、String

对基本包装类型的实例调用typeof会返回object，而且所有的基本包装类型的实例都会返回true，

Object构造函数也会像工厂方法一样，根据传入的值的类型返回响应的基本包装类型的实例

例：

var obj = new Object(“some text”); alert(obj instanceof String); //true Copier après la connexion 使用new调用基本包装类型和直接使用同名的转型函数是不一样的。例：

var value = “25”; var num = Number(value); //转型函数 alert(typeof num); //”number” var obj = new Number(value); //构造函数 alert(typeof obj); //”object” Copier après la connexion 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()的第二个参数表示返回的字符个数，若不给第二个参数，则返回从起始位置到字符串结束位置的字符 Copier après la connexion L'introduction de nombres négatifs se comporte différemment : slice ajoutera tous les nombres négatifs introduits à la longueur de la chaîne, substr ajoutera la longueur de la chaîne au premier paramètre et convertira le deuxième paramètre en 0, et substring() ajoutera tout nombres négatifs en longueur de chaîne. La valeur est convertie en 0 .

Les méthodes indexOf et lastIndexOf renvoient toutes deux la position de la sous-chaîne. indexOf recherche depuis le début et lastIndexOf recherche depuis la fin, si elle n'est pas trouvée, elle renvoie -1. Les deux méthodes peuvent recevoir un deuxième paramètre facultatif, indiquant par où commencer. recherche de personnages

trim(), renvoie le résultat de la chaîne source en supprimant tous les espaces avant et après le préfixe

toLowerCase, toLocaleLowerCase, toUpperCase, toLocaleUpperCase, les méthodes avec Locale sont des implémentations pour des régions spécifiques. Généralement, il n'y a pas de différence, mais quelques langages appliquent des règles spéciales pour la conversion de la casse Unicode, ce qui nécessite l'utilisation d'implémentations spécifiques aux paramètres régionaux

Les deux méthodes match() et search() reçoivent un paramètre, une chaîne ou une expression régulière spécifié par l'objet RegExp

La méthode replace() reçoit deux paramètres. Le premier paramètre peut être un objet RegExp ou une chaîne (ne sera pas converti en une expression régulière). Le deuxième paramètre peut être une chaîne ou une fonction si vous souhaitez remplacer toutes les chaînes. , vous devez utiliser des expressions régulières et ajouter le drapeau global (g)

split(), reçoit un paramètre comme séparateur de la chaîne, renvoie un tableau séparé par le séparateur et peut recevoir un deuxième paramètre facultatif comme taille du tableau du résultat renvoyé

localeCompare(), compare deux chaînes, qu'elle soit sensible à la casse ou non dépend de la région

1. La chaîne source doit être classée avant la chaîne paramètre, et un nombre négatif sera renvoyé (selon la situation, généralement -1)

2. La chaîne source est la même que la chaîne paramètre, et 0 est renvoyé

3. La chaîne source est classée après la chaîne paramètre et un entier est renvoyé (selon la situation, généralement 1)

fromCharCode(), reçoit un ou plusieurs codes de caractères et les convertit en chaînes. Il effectue l'opération inverse de charCodeAt() .

URI (Universal Resource Identifier)

Méthodes : encodeURI, encodeURIComponent, decodeURI, decodeURIComponent, encodage et décodage, la méthode de décodage ne peut identifier que la méthode d'encodage correspondante

eval(), convertit les paramètres de chaîne introduits en instructions exécutables et les insère dans la position actuelle

Toutes les variables et fonctions créées par eval ne seront pas promues. En mode strict, les variables et fonctions créées par eval ne sont pas accessibles de l'extérieur

Remarque : essayez de ne pas utiliser la méthode eval, ceci est juste une opinion personnelle

Objet mathématique

min(), max(), ceil() arrondi vers le haut, floor() arrondi vers le bas, round() arrondi standard, c'est-à-dire arrondi, random() renvoie un nombre aléatoire supérieur ou égal à 0 et inférieur à 1

Les chapitres ci-dessus sont les chapitres 1 à 5 des notes d'étude sur la programmation avancée JavaScript (troisième édition) présentées par l'éditeur. J'espère que cela vous sera utile !