JavaScript 고급 프로그래밍(3판) 학습 노트 1~5장_javascript 기술
- WBOY원래의
- 2016-05-16 15:11:081089검색
2장, HTML에서 JavaScript 사용하기
Html에 외부 js 스크립트 도입
<script type="text/javascript" src="test.js">两个</script>之间不应放脚本，因为并不会被执行</script>
3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에는 스크립트 실행을 지연시킬 수 있는 defer 속성이 있지만 스크립트가 정렬된 순서대로 실행된다는 보장은 없습니다.
제안: 페이지 응답 속도를 높이려면 93f0f5c25f18dab9d176bd4f6de5d30e 태그 대신 6c04bd5ca3fcae76e30b72ad730ca86d 태그의 모든 내용 뒤에 스크립트 소개를 배치하세요.
브라우저가 스크립트를 지원하지 않거나 스크립트가 비활성화되면
콘텐츠
3장 기본 개념
첫 번째 문자는 문자, 밑줄(_) 또는 달러 기호($)여야 합니다. 유효한 이름은
카멜 케이스 명명 방식을 채택합니다. 첫 글자는 소문자로, 이후 각 단어의 첫 글자는 대문자로 표시합니다
//한줄 코멘트입니다
/*이것은
댓글
*/
typeof – 주어진 변수의 데이터 유형을 결정합니다
반품:
“정의되지 않음” – 정의되지 않은 데이터 유형
“boolean” – 부울 값
"문자열" – 문자열
“숫자” – 숫자 값
“객체” – 객체 또는 NULL
“함수” – 함수
참고: js에서 함수는 데이터 유형이 아닌 객체이므로 함수와 객체를 구별하려면 typeof를 사용해야 합니다
Typeof는 때때로 혼란스럽기는 하지만 기술적으로는 올바른 값을 반환합니다. 예를 들어 null 및 object는 둘 다 "object"를 반환합니다.
Null과 정의되지 않음은 동일합니다. null == undefine은 true를 반환합니다
산술 계산을 수행할 때 모든 8진수와 16진수는 10진수로 변환됩니다.
무한대는 양의 무한대와 음의 무한대를 포함하여 무한대인지 여부를 확인하기 위해 isFinite()를 사용할 수 있습니다.
Number.MAX_VALUE와 Number.MIN_VALUE는 각각 숫자 유형의 최대값과 최소값을 저장합니다
Number.NEGATIVE_INFINITY 및 Number.POSITIVE_INFINITY는 각각 음수 무한대와 양수 무한대를 저장합니다
NaN은 숫자 값이 아닙니다. isNaN을 사용하여 변수가 숫자 값이 아닌지 확인할 수 있습니다.
Number()로 강제 변환했는데 결과가 무리합니다.parseInt() 함수를 사용하여 변환해야 하는 베이스를 가져오는 것이 좋습니다
예:
parseInt(“10”,2); //以二进制解析 parseInt(“10”,8); //以八进制解析베이스를 가져오지 않는다는 것은parseInt가 문자열을 구문 분석하는 방법을 결정하게 한다는 것을 의미하며, 이로 인해 어느 시점에서 오류가 발생하게 됩니다.
parseFloat()는 기본적으로 문자열을 부동 소수점 숫자로 구문 분석하고 앞에 오는 0을 무시하고 소수 값만 구문 분석하는 parInt()와 기본적으로 동일하며 16진수는 0으로 구문 분석되므로
두 번째 매개변수가 없습니다
문자열 유형 변수는 불변입니다. 즉, 문자열 변수는 상수입니다. 작은따옴표(')나 큰따옴표(")를 사용하여 문자열 변수를 정의할 수 있지만 반드시 일치해야 합니다. 이를 혼합해야 하는 경우 이스케이프 문자()를 추가하는 것이 좋습니다
값을 문자열로 변환하려면 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()的第二个参数表示返回的字符个数，若不给第二个参数，则返回从起始位置到字符串结束位置的字符
음수 가져오기는 다르게 동작합니다. 슬라이스는 가져온 모든 음수를 문자열 길이에 추가하고, substr은 문자열 길이를 첫 번째 매개변수에 추가하고, 두 번째 매개변수를 0으로 변환하며, substring()은 모든 음수를 추가합니다. 음수는 문자열 길이로 변환됩니다. 값은 0
으로 변환됩니다.
indexOf 및 lastIndexOf 메서드는 모두 하위 문자열의 위치를 반환합니다. indexOf는 처음부터 검색하고 lastIndexOf는 끝부터 검색합니다. 두 메서드 모두 시작할 위치를 나타내는 두 번째 선택적 매개변수를 받을 수 있습니다. 캐릭터 검색
trim()은 소스 문자열에서 접두사 앞뒤의 모든 공백을 제거한 결과를 반환합니다.
toLowerCase, toLocaleLowerCase, toUpperCase, toLocaleUpperCase, Locale이 포함된 메서드는 특정 지역에 대한 구현입니다. 일반적으로 차이는 없지만 일부 언어에서는 유니코드 대소문자 변환에 특별한 규칙을 적용하므로 로케일별 구현을 사용해야 합니다
match() 및 search() 메소드 모두 매개변수, 문자열 또는 RegExp 객체가 지정한 정규식을 받습니다
replace() 메소드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 RegExp 객체 또는 문자열일 수 있습니다(정규 표현식으로 변환되지 않음). 두 번째 매개변수는 문자열 또는 함수일 수 있습니다. , 정규식을 사용하고 전역(g) 플래그를 추가해야 합니다
split()은 문자열의 구분자로 매개변수를 받고, 구분자로 구분된 배열을 반환하며, 반환된 결과의 배열 크기로 두 번째 선택적 매개변수를 받을 수 있습니다.
localeCompare()는 지역에 따라 대소문자 구분 여부에 따라 두 문자열을 비교합니다
1. 소스 문자열은 매개변수 문자열보다 먼저 순위가 지정되어야 하며, 음수가 반환됩니다(상황에 따라 일반적으로 -1)
2. 소스 문자열이 매개변수 문자열과 동일하며 0이 반환됩니다
3. 소스 문자열은 매개변수 문자열 다음에 순위가 지정되고 정수가 반환됩니다(상황에 따라 일반적으로 1)
fromCharCode()는 하나 이상의 문자 코드를 받아 문자열로 변환합니다. charCodeAt()와 반대되는 작업을 수행합니다.
URI(범용 자원 식별자)
메서드: encodeURI, encodeURIComponent, decodeURI, decodeURIComponent, 인코딩 및 디코딩, 디코딩 방법은 해당 인코딩 방법만 식별할 수 있습니다.
eval()은 가져온 문자열 매개변수를 실행 가능한 명령문으로 변환하여 현재 위치에 삽입합니다.
eval로 생성된 변수와 함수는 승격되지 않습니다. 엄격 모드에서는 eval로 생성된 변수와 함수에 외부에서 접근할 수 없습니다.
참고: 평가 방법을 사용하지 마세요. 이는 개인적인 의견일 뿐입니다
수학 객체
min(), max(), ceil() 반올림, Floor() 반내림, round() 표준 반올림, 즉 반올림, random()은 0보다 크거나 같고 0보다 작은 난수를 반환합니다. 1
위 내용은 편집자가 소개한 JavaScript 고급 프로그래밍(3판) 학습 노트 중 1~5장입니다. 도움이 되셨으면 좋겠습니다!