ホームページ > 記事 > ウェブフロントエンド > JavaScript 上級プログラミング (第 3 版) 学習ノート 第 1 章~5_JavaScript スキル
JavaScript 上級プログラミング (第 3 版) 学習ノート 第 1 章~5_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:11:081049ブラウズ
第 2 章、HTML での JavaScript の使用
HTML では外部 JS スクリプトが導入されています
<script type="text/javascript" src="test.js">两个</script>之间不应放脚本，因为并不会被执行</script>
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグにはスクリプトの実行を遅らせる defer 属性がありますが、スクリプトが配置された順序で実行されることは保証されません
提案: ページの応答を高速化するには、93f0f5c25f18dab9d176bd4f6de5d30e タグ内ではなく、6c04bd5ca3fcae76e30b72ad730ca86d タグのすべてのコンテンツの後に配置します
2b0b25ff593c5b6c03403dd6234ffb2cf920f363442462683100636cb2662870 タグ内のコンテンツは、ブラウザがスクリプトをサポートしていない場合、またはスクリプトが無効になっている場合に出力されます。スクリプトが有効になっているブラウザでは、タグ内の
が表示されません。コンテンツ
第 3 章、基本概念
識別子
最初の文字は文字、アンダースコア (_) またはドル記号 ($) である必要があります。有効な名前は、文字、数字、アンダースコア、ドル記号で構成されます。
単一行コメント:
複数行のコメント:
です
複数行
コメント
*/
演算子の種類
数値変換
例:
parseInt(“10”,2); //以二进制解析 parseInt(“10”,8); //以八进制解析ベースを取り込まないということは、parseInt に文字列の解析方法を決定させることを意味し、ある時点でエラーが発生します
parseFloat() は基本的に parseInt() と同じで、文字列を浮動小数点数に解析し、先頭のゼロを常に無視し、10 進数値のみを解析します。16 進数は 0 に解析されます。そのため、
2 番目のパラメータはありません
文字列型変数は不変です。つまり、文字列変数は定数です。文字列変数の定義には一重引用符 (') または二重引用符 (") を使用できますが、これらは一致する必要があります。これらを混在させる必要がある場合は、エスケープ文字 ()
toString() 関数を使用して値を文字列に変換します。数値は基本値を使用して変換できます。
例:
也可以使用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()的第二个参数表示返回的字符个数，若不给第二个参数，则返回从起始位置到字符串结束位置的字符
負の数値を取り込むと、動作が異なります。slice は取り込んだすべての負の数値を文字列の長さに加算し、substr は文字列の長さを最初のパラメータに加算し、2 番目のパラメータを 0 に変換します。また、substring() はすべての値を加算します。負の数値を文字列長に変換すると、値は 0
に変換されます。
indexOf メソッドと lastIndexOf メソッドはどちらも部分文字列の位置を返します。indexOf は先頭から検索し、lastIndexOf は最後から検索します。見つからない場合は、どちらのメソッドも開始位置を示す 2 番目のオプションのパラメーターを受け取ることができます。文字を検索
trim()、接頭辞
の前後のスペースをすべて削除したソース文字列の結果を返します。
toLowerCase、toLocaleLowerCase、toUpperCase、toLocaleUpperCase、Locale を使用したメソッドは、特定の地域用の実装です。一般に違いはありませんが、いくつかの言語では Unicode の大文字と小文字の変換に特別なルールが適用されるため、ロケール固有の実装を使用する必要があります
match() と search() の両方のメソッドは、RegExp オブジェクトで指定されたパラメータ、文字列、または正規表現を受け取ります
replace() メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターは RegExp オブジェクトまたは文字列にすることができます (正規表現には変換されません)。すべての文字列を置換する場合は、2 番目のパラメーターを文字列または関数にすることができます。 、正規表現を使用し、グローバル (g) フラグ
を追加する必要があります。
split() は、文字列の区切り文字としてパラメータを受け取り、区切り文字で区切られた配列を返します。返された結果の配列サイズとして 2 番目のオプションのパラメータを受け取ることができます
localeCompare()、2 つの文字列を比較します。大文字と小文字を区別するかどうかは地域によって異なります
1. ソース文字列はパラメータ文字列よりも前にランク付けされる必要があり、負の数値が返されます (状況に応じて、通常は -1)
2. ソース文字列はパラメータ文字列と同じであり、0 が返されます
3. ソース文字列はパラメータ文字列の後に配置され、整数が返されます (状況に応じて、通常は 1)
fromCharCode() は、1 つ以上の文字コードを受け取り、それらを文字列に変換します。charCodeAt()
と逆の操作を実行します。
URI (ユニバーサルリソース識別子)
メソッド: encodeURI、encodeURIComponent、decodeURI、decodeURIComponent、エンコードとデコード、デコード メソッドは対応するエンコード メソッドのみを識別できます
eval()、取り込まれた文字列パラメータを実行可能ステートメントに変換し、現在の位置に挿入します
eval で作成した変数や関数は昇格されません。strict モードでは、eval で作成した変数や関数に外部からアクセスできません。
注: eval メソッドは使用しないようにしてください。これは単なる個人的な意見です
数学オブジェクト
min()、max()、ceil() 切り上げ、floor() 切り捨て、round() 標準の丸め、つまり丸め、random() は 0 以上で以下の乱数を返します。 1
以上は編集者が紹介したJavaScript上級プログラミング(第3版)の学習ノートの第1章から第5章までです。ご参考になれば幸いです。