JavaScript高级程序设计--读书笔记

最新推荐文章于 2023-06-02 09:52:29 发布

卑微不讨喜

最新推荐文章于 2023-06-02 09:52:29 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/BIGBIGBIGCAT/article/details/104694979

版权

在文档<head></head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body></body>标签时才开始呈现内容）。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在<body></body>元素中页面内容的后面。
HTML 4.01 为<script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此defer 属性，相当于告诉浏览器立即下载，但延迟执行。只适用于外部脚本文件。
async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer 不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。
文档模式

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE html> 

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<noscript>元素用以在不支持 JavaScript 的浏览器中，或者在支持JavaScript的浏览器中但脚本被禁用的时候，显示替代的内容，可以包含能够出现在文档中的任何 HTML 元素。
null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null 而不是其他值。undefined 值是派生自 null 值的，因此 ECMA-262 规定对它们的相等性测试要返回 true。
空字符串、0、NaN、null、undefined转换成Boolean类型为false。Boolean([])、Boolean({})为true。
0.1+0.2=0.30000000000000004出现的精度问题，解决办法(0.1*10+0.2*10)/10 【p45】
ECMAScript 能够表示的最小数值保存在 Number.MIN_VALUE 中——在大多数浏览器中，这个值是 5e-324；能够表示的最大数值保存在 Number.MAX_VALUE 中——在大多数浏览器中，这个值是 1.7976931348623157e+308。
ECMAScript 定义了 isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN()在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串"10"或 Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回 true。isNaN("10")==false，isNaN("blue")==true，isNaN(true)==true
有 3 个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。Number(null)==0，Number(undefined)==NaN，Number("")==0，Number(true)==1，parseInt()函数在转换字符串时，更多的是看其是否符合数值模式。它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt() 就会返回 NaN，parseInt("")==NaN，parseInt("123blue")==123
with 语句的作用是将代码的作用域设置到一个特定的对象中。由于大量使用 with 语句会导致性能下降，同时也会给调试代码造成困难，因此在开发大型应用程序时，不建议使用 with 语句。

//定义 with 语句的目的主要是为了简化多次编写同一个对象的工作，如下面的例子所示：
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
//上面几行代码都包含 location 对象。如果使用 with 语句，可以把上面的代码改写成如下所示：
with(location){
 var qs = search.substring(1);
 var hostName = hostname;
 var url = href;
}

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

使用 var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境。
JavaScript 变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下 5 种基本数据类型：Undefined、Null、Boolean、Number 和 String。引用类型有：Object、Array。
数组的 length 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。数组 colors 一开始有 3 个值。将其 length 属性设置为 2 会移除最后一项（位置为 2 的那一项），结果再访问 colors[2]就会显示 undefined 了。如果将其 length 属性设置为大于数组项数的值，则新增的每一项都会取得 undefined 值。

var colors = ["red", "blue", "green"]; 
colors.length = 2;
alert(colors[2]); //undefined

var colors = ["red", "blue", "green"]; 
colors.length = 4;
alert(colors[3]); //undefined

调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。使用 join()方法，则可以使用不同的分隔符来构建这个字符串。
push()在数组末尾添加多个元素，pop()在数组末尾移除一个元素，shift()在数组前端移除一个元素，unshift()在数组前端添加多个元素。
reserse()翻转数组，sort()按字符串升序排序。sort()方法也会根据测试字符串的结果改变原来的顺序。因为数值 5 虽然小于 10，但在进行字符串比较时，"10"则位于"5"的前面，于是数组的顺序就被修改了。不用说，这种排序方式在很多情况下都不是最佳方案。因此 sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。

function compare(value1, value2) {
 if (value1 < value2) {
     return -1;
 } else if (value1 > value2) {
     return 1;
 } else {
     return 0;
 }
}
//等同于
function compare(value1, value2) {
 return value1-value2
}
var values = [0, 5, 4, 9];
values.sort(compare);
console.log(values); //[0,4,5,9]

不给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本（深度拷贝）。如果传递给 concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。slice()截取数组。同样的字符串也能调用这两个方法。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors2); //['red','green','blue','yellow','black','brown']
var colors3 = colors.slice(1);
alert(colors3); //["green", "blue"]

splice()，删除、插入、替换数组元素。删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，返回的数组中只包含一项

数组的迭代方法。 every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。  filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。 forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。 map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。 some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。
数组的归并方法。reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
 return prev + cur;
}); 
alert(sum);  //15

Date.now()获取执行时的时间毫秒数，Date.parse('2020/03/20')转换成毫秒数
字符串的正则方法及正则的方法

let reg=/[0-9]/g;
let str='abc234';
reg.exec(str);  //["2",index:3,input:"abc234"]
reg.exec(str);  //["3",index:4,input:"abc234"]
reg.exec(str);  //["4",index:5,input:"abc234"]
reg.test(str);  //true
str.match(reg)  //[2,3,4]
str.replace(reg,9) //"abc999"
str.search(reg)  //3  (第一个匹配项的索引位置，若无匹配返回-1)
str.split(reg)  //["abc", "", "", ""]

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的指向

window.color = "red";
var o = { color: "blue" };
function sayColor(){
 alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"

使用 call()（或 apply()）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。ECMAScript 5 还定义了一个方法：bind()。这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值。

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 

var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue