js高级程序设计第一部分

最新推荐文章于 2024-05-12 23:38:18 发布

FGstudy

最新推荐文章于 2024-05-12 23:38:18 发布

阅读量239

点赞数

分类专栏：读书笔记文章标签： js 读书笔记

本文链接：https://blog.csdn.net/FGstudy/article/details/101853305

版权

读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js高级程序设计:基本概念

在HTML里使用js

script元素

标签的位置

把script元素放在head元素中，必须等到全部js代码被下载，解析，执行完成之后才能开始呈现页面的内容，这样可能会导致浏览器在呈现页面时出现延迟，所有现在一般把script元素放在body里面，这样在解析js代码前页面的内容就可以呈现。
script元素的defer属性，只适用于外部脚本，作用是让浏览器立即下载但延迟执行，即使将script元素放在head里面，脚本也会延迟到浏览器
后面的内容在首页不显示，请点击下方的展开全文或者
遇到html标签再执行，但最佳选择还是将脚本放在页面底部
script元素的async属性，只适用于外部脚本，作用是不让页面等待脚本下载和执行，从而异步加载页面其他内容，异步脚本一定会在页面的load事件前执行，建议异步脚本不要在加载期间修改DOM，
后面的内容在首页不显示，请点击下方的展开全文或者

嵌入代码和外部文件

使用外部文件的优点：

可维护性
可缓存，浏览器能够根据具体的设置缓存链接的所有外部js文件
适应未来

文档模式

混杂模式和标准模式，如果文档开始处没有声明文档类型则默认开启混杂模式

noscript元素

noscript早期浏览器为了让页面能够平稳退化创造出的元素，用以在不支持js的浏览器中显示替代内容，元素内的内容只有在浏览器不支持脚本或者脚本被禁用时显示

基本概念

语法

区分大小写

标识符，指变量、函数、属性的名字或者函数的参数

命名规则：

第一个字符必须是一个字母、下划线_、或者美元符号，其他字符可以是字母、下划线、美元符号、数字
采用驼峰式命名
不能使用关键字、保留字、true、false、null

注释

单行注释//
多行注释/**/

严格模式

在严格模式下，es3的一些不确定行为将得到处理，对某些不安全的操作也会抛出错误
使用严格模式，需要在顶部或者函数内部的上方增加一条编译指示"use strict"

语句，以分号为结尾

关键字与保留字，查表吧

变量

js的变量可以用来保存任何类型的数据，变量可以说是一个用于保存值的占位符。
用var定义的变量是定义该变量的作用域中的局部变量，例如在函数内用var声明一个变量，在函数外部不能使用该变量，如果不用var声明则可以使用，虽然省略var操作符可以定义全局变量，但是不推荐使用
用一条语句定义多个变量时，用逗号分割开即可

数据类型

es5中有5种基本数据类型：undefined,null,number,string,boolean,和1种复杂数据类型object

typeof操作符

typeof可以操作变量或者数值字面量，
typeof(null)，返回object，因为null被认为是一个空的对象引用

undefined

使用var声明变量但是未对其加以初始化时，该变量的值为undefined
对未初始化或未声明的变量执行typeof都会返回undefined

null

从逻辑角度，null值表示一个空对象指针
如果定义的变量将来要用于保存对象，那么最好将该变量初始化为null而不是其他值
null == undefined 返回true

boolean

字面值：true false
调用Boolean()函数，其他类型数据转换成Boolean的值

string，任何非空的字符串转为true，空字符串转为false
number，任何非零数字值转为true，0或NaN转为false
object，任何对象都会转为true，null转为false
undefined转为false

number

除了十进制表示外，整数还可以用八进制或十六进制来表示，其中八进制字面值的第一位必须是0，然后是0_{7，十六进制字面值的前两位必须是0x，后跟0}9或A_F或af，但在进行算数计算时，所以进制表示的数最后都会转换成十进制数值
浮点数，即数值中包含一个小数点，而且小数点后必须有一个数字

浮点数需要的内存空间是整数的两倍，es会将适当的浮点数转换成整数
对于极大或极小的数字可以用科学记数法，用e表示的数值等于e前面的数值乘以10的指数次幂，例如3.15e7=3.15*10的七次方=3150000
默认情况下es会将小数点后面带有6个0以上的浮点数转换成科学记数法表示
浮点数的最高精度是17位小数，但在进行算数计算时，其精确度不如整数，例如0.1+0.2结果不是0.3，而是0.30000000000000004

数值范围

es能表示的最小数值保存在Number.MIN_VALUE中，最大数值保存在Number.MAX_VALUE中
如果超出数值范围，这个数值将被自动转换成特殊的infinity值，该值将不能参与下一次计算
isinfinite()函数可以判断一个数值是不是有穷的

NaN， not a number

表示一个本来要返回数值的操作数没有返回数值的情况，
任何涉及NaN的操作都会返回NaN，例如NaN / 10
NaN和任何值都不相等，包括NaN本身
isNaN()可以传入一个参数，该函数可以判断参数是否不是数值，并会对传入的参数进行转换，如果不能转换的返回true，能转换成数值返回false
isNaN()也适用于对象，它会先调用对象的valueOf方法，然后再确认该方法返回的值是否可以转为数值，如果不能再基于这个返回值再调用toString()方法在测试返回值

数值转换
能将非数值转换成数值有三个函数：Number(),parseInt(),parseFloat()

Number(),可以用于任何数据类型
- 转换规则
  - 如果是 Boolean 值，true 和 false 将分别被转换为 1 和 0。
  - 如果是数字值，只是简单的传入和返回。
  - 如果是 null 值，返回 0。
  - 如果是 undefined，返回 NaN
  - 如果是字符串，遵循下列规则：
    - 如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即"1"会变成 1，"123"会变成 123，而"011"会变成 11（注意：前导的零被忽略了）
    - 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
    - 如果字符串中包含有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值；
    - 如果字符串是空的（不包含任何字符），则将其转换为 0；
    - 如果字符串中包含除上述格式之外的字符，则将其转换为 NaN。
  - 如果是对象，则调用对象的 valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是 NaN，则调用对象的 toString()方法，然后再次依照前面的规则转换返回的字符串值。
parseInt()
- 解析过程，它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt()就会返回 NaN；也就是说，用 parseInt()转换空字符串会返回 NaN（Number()对空字符返回 0）。如果第一个字符是数字字符，parseInt()会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。也就是返回字符串以整数开头的部分
- 它可以识别十六进制和八进制，如果字符串以"0x"开头且后跟数字字符，就会将其当作一个十六进制整数；如果字符串以"0"开头且后跟数字字符，则会将其当作一个八进制数来解析。注意在es5,不能直接解析八进制数值
- 可以将使用什么进制传入该函数的第二个参数内，以消除八进制与十进制可能会造成的矛盾
parseFloat()与parseInt()类似，不过返回的是浮点数，不过要注意如果如果字符串包含的是一个可解析为整数的数（没有小数点，或者小数点后都是零），parseFloat()会返回整数

string

字符字面量

一些转义字符
- \n，换行
- \t，制表符
- \b，空格
- \r，回车
- \，斜杠
- '，单引号
- "，双引号

字符串的特点

字符串一旦创建，他们的值就不能改变，如果要改变要先销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，例如

var lang = "java";
lang = lang + "s"；

转换成字符串的方式

toString()方法，注意null和undefined没有这个方法，一般就用点调用，需要指定进制时，将进制作为参数传入小括号
转型函数String()，函数能够将任何类型的值转换为字符串，规则
- 如果值有 toString()方法，则调用该方法（没有参数）并返回相应的结果；
- 如果值是 null，则返回"null"
- 如果值是 undefined，则返回"undefined"。
使用连接符

object

对象是一组数据和功能的集合
对象的创建：通过new后跟要创建的对象类型的名称，例如 ,如果不给构造函数传参，可以省略小括号，但是不推荐省略

var obj = new object();
var obj = new object;//有效，但不推荐省略小括号

类似Java，object类是所有对象的基类，它的所有属性和方法都适用于所有对象，所以object的每个实例都具有以下属性和方法

constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是 Object()。
hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty(“name”)）。
isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型
propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in 语句来枚举。，与 hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
toString()：返回对象的字符串表示。
valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

注意浏览器对象即BOM,DOM对象属于宿主对象，在ECMA-262中不负责定义宿主对象，因此宿主对象可能会也可能不会继承object

操作符

一元操作符

递增和递减，++和–，

符号++如果单独使用，放前放后是一样的
符号++如果在表达式中使用，放前放后不是一样的
- 符号++，如果放前先+1，在用新值参与表达式，
- 如果放后面，先用旧值参与表达式，表达式结束后再+1
该操作符对任何值都适用，规则：
- 在应用于一个包含有效数字字符的字符串时，先将其转换为数字值，再执行加减 1 的操作。字符串变量变成数值变量。
- 在应用于一个不包含有效数字字符的字符串时，将变量的值设置为 NaN，字符串变量变成数值变量。
- 在应用于布尔值 false 时，先将其转换为 0 再执行加减 1 的操作。布尔值变量变成数值变量。
- 在应用于布尔值 true 时，先将其转换为 1 再执行加减 1 的操作。布尔值变量变成数值变量。
- 在应用于浮点数值时，执行加减 1 的操作。
- 在应用于对象时，先调用对象的 valueOf()方法以取得一个可供操作的值。然后对该值应用前述规则。如果结果是 NaN，则在调用 toString()方法后再应用前述规则。对象变量变成数值变量。

一元+或-

一元加操作符以一个加号（+）表示，放在数值前面，对数值不会产生任何影响
对非数值应用一元加操作符时，该操作符会像 Number()转型函数一样对这个值执行转换。例如

var s1 = "01"; 
var s2 = "1.1"; 
var s3 = "z"; 
var b = false;

s1 = +s1; // 值变成数值 1 
s2 = +s2; // 值变成数值 1.1 
s3 = +s3; // 值变成 NaN 
b = +b; // 值变成数值 0

一元减操作符主要用于表示负数，当应用于非数值时，一元减操作符遵循与一元加操作符相同的规则，最后再将得到的数值转换为负数

位操作符，先简单了解

布尔Boolean

逻辑非! ，无论这个值是什么数据类型，这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反。
- 规则
  - 如果操作数是一个对象，返回 false；
  - 如果操作数是一个空字符串，返回 true；
  - 如果操作数是一个非空字符串，返回 false；
  - 如果操作数是数值 0，返回 true；
  - 如果操作数是任意非 0 数值（包括 Infinity），返回 false；
  - 如果操作数是 null，返回 true；
  - 如果操作数是 NaN，返回 true；
  - 如果操作数是 undefined，返回 true。
- 使用两次逻辑非运算符相当于Boolean()转型函数
逻辑与&&，两者都为真时则为真
- && 可以应用于任何类型的操作数，。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值，规则如下
  - 如果第一个操作数是对象，则返回第二个操作数；
  - 如果第二个操作数是对象，则只有在第一个操作数的求值结果为 true 的情况下才会返回该对象；
  - 如果两个操作数都是对象，则返回第二个操作数；
  - 如果有一个操作数是 null，则返回 null；
  - 如果有一个操作数是 NaN，则返回 NaN
  - 如果有一个操作数是 undefined，则返回 undefined。
- 逻辑与操作属于短路操作，即如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值
- 不能在逻辑与操作中使用未定义的值。如果第一个值为false，那第二个值才可以使用未定义的值
逻辑或||，一个为真则为真
- 与逻辑与操作相似，如果有一个操作数不是布尔值，逻辑或也不一定返回布尔值，规则
  - 如果第一个操作数是对象，则返回第一个操作数；
  - 如果第一个操作数的求值结果为 false，则返回第二个操作数
  - 如果两个操作数都是对象，则返回第一个操作数
  - 如果两个操作数都是 null，则返回 null
  - 如果两个操作数都是 NaN，则返回 NaN
  - 如果两个操作数都是 undefined，则返回 undefined。
- 逻辑或操作符也是短路操作符。也就是说，如果第一个操作数的求值结果为true，就不会对第二个操作数求值了
- 不能在逻辑或操作中使用未定义的值。如果第一个值为true，那第二个值才可以使用未定义的值
- 利用逻辑或，可以避免为变量赋 null 或 undefined 值，例如

var myObject = preferredObject || backupObject;
//如果 preferredObject 的值不是 null，那么它的值将被赋给 myObject；如果是 null，则将 backupObject 的值赋给 myObject

* / %

乘法*，处理特殊值时规则如下
- 如果操作数都是数值，执行常规的乘法计算，即两个正数或两个负数相乘的结果还是正数，而如果只有一个操作数有符号，那么结果就是负数。如果乘积超过了 ECMAScript 数值的表示范围，则返回 Infinity 或-Infinity；
- 如果有一个操作数是 NaN，则结果是 NaN；
- 如果是 Infinity 与 0 相乘，则结果是 NaN；
- 如果是 Infinity 与非 0 数值相乘，则结果是 Infinity 或-Infinity，取决于有符号操作数的符号；
- 如果是 Infinity 与 Infinity 相乘，则结果是 Infinity；
- 如果有一个操作数不是数值，则在后台调用 Number()将其转换为数值，然后再应用上面的规则。
除法/，处理特殊值时规则如下
- 如果操作数都是数值，执行常规的除法计算，即两个正数或两个负数相除的结果还是正数，而如果只有一个操作数有符号，那么结果就是负数。如果商超过了 ECMAScript 数值的表示范围，则返回Infinity 或-Infinity；
- 如果有一个操作数是 NaN，则结果是 NaN；
- 如果是 Infinity 被 Infinity 除，则结果是 NaN；
- 如果是零被零除，则结果是 NaN；
- 如果是非零的有限数被零除，则结果是 Infinity 或-Infinity，取决于有符号操作数的符号；
- 如果是 Infinity 被任何非零数值除，则结果是 Infinity 或-Infinity，取决于有符号操作数的符号
- 如果有一个操作数不是数值，则在后台调用 Number()将其转换为数值，然后再应用上面的规则
取模%，处理特殊值时规则如下
- 如果操作数都是数值，执行常规的除法计算，返回除得的余数；
- 如果被除数是无穷大值而除数是有限大的数值，则结果是 NaN；
- 如果被除数是有限大的数值而除数是零，则结果是 NaN；
- 如果是 Infinity 被 Infinity 除，则结果是 NaN
- 如果被除数是有限大的数值而除数是无穷大的数值，则结果是被除数
- 如果被除数是零，则结果是零；
- 如果有一个操作数不是数值，则在后台调用 Number()将其转换为数值，然后再应用上面的规则。

+ -

加法+：如果两个操作符都是数值，执行常规的加法计算，如果有一个操作数是字符串，则执行拼接操作，如果有一个操作数是对象、数值或布尔值，则调用它们的 toString()方法取得相应的字符串值，然后再应用前面关于字符串的规则。
减法-：规则如下
- 如果两个操作符都是数值，则执行常规的算术减法操作并返回结果，
- 如果有一个操作数是字符串、布尔值、null 或 undefined，则先在后台调用 Number()函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是 NaN，则减法的结果就是 NaN；
- 如果有一个操作数是对象，则调用对象的 valueOf()方法以取得表示该对象的数值。如果得到的值是 NaN，则减法的结果就是 NaN。如果对象没有 valueOf()方法，则调用其 toString()方法并将得到的字符串转换为数值。

关系操作符< > <= >=

规则：
- 如果两个操作数都是数值，则执行数值比较。
- 如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。
- 如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。
- 如果一个操作数是对象，则调用这个对象的 valueOf()方法，用得到的结果按照前面的规则执行比较。如果对象没有 valueOf()方法，则调用 toString()方法，并用得到的结果根据前面的规则执行比较。
- 如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。
- 何何操作数与 NaN 进行关系比较，结果都是 false
特殊情况，比较两个字符串时，比较的是两个字符串中对应位置的每个字符的字符编码值，例如当比较字符串"23"是否小于"3"时，结果是 true。。

相等操作符

相等与不相等（==与!=），这两个操作符都会先转换操作数（通常称为强制转型），然后再比较它们的相等性。
- 基本规则：
  - 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false 转换为 0，而true 转换为 1；
  - 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
  - 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf()方法，用得到的基本类型值按照前面的规则进行比较；
  - 这两个操作符在进行比较时则要遵循下列规则。
    - null 和 undefined 是相等的。要比较相等性之前，不能将 null 和 undefined 转换成其他任何值。
    - 如果有一个操作数是 NaN，则相等操作符返回 false，而不相等操作符返回 true，即使两个操作数都是 NaN，相等操作符也返回 false；因为按照规则，NaN 不等于 NaN。
    - 如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true；否则，返回 false。
全等与不全等（=== 与 !==），不执行类型转换，直接比较，===类型不一致返回false，!==类型不一致返回true，类型一致再比较值。

条件操作符（三元运算符）

variable = boolean_expression ? true_value : false_value;

赋值操作符=，把右侧的值赋给左侧的变量

逗号操作符

在一条语句中执行多个操作，例如声明多个变量。除此之外，逗号操作符还可以用于赋值此时逗号操作符总会返回表达式中的最后一项

var num = (5, 1, 4, 8, 0); // num 的值为 0

语句

if语句

语法

if (condition){ statement1} else {statement2}

do-while语句

语法

do { 
 statement 
} while (expression);

常用于循环体中的代码至少要被执行一次的情形。

while语句

while(expression) statement

for语句

语法

for (initialization; expression; post-loop-expression) {statement}

for 语句中的初始化表达式、控制表达式和循环后表达式都是可选的。将这三个表达式全部省略，就会创建一个无限循环

for-in语句

它是一种精准的迭代语句，可以用来枚举对象的属性，无序输出

for (property in expression) {statement}

//举例，显示了 BOM 中 window 对象的所有属性
for (var propName in window) { 
 document.write(propName); 
}

要迭代的对象的变量值为 null 或 undefined，es会不执行循环体

label语句（？）

语法

label: statement
//举例
start: for (var i=0; i < count; i++) { 
 alert(i); 
}

作用，在代码中添加标签，以便将来使用
加标签的语句一般都要与 for 语句等循环语句配合使用。

break和continue语句

break 和 continue 语句用于在循环中精确地控制代码的执行
区别：
- break 语句会立即退出循环，强制继续执行循环后面的语句
- 而 continue 语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行
break 和 continue 语句都可以与 label 语句联合使用，从而返回代码中特定的位置。这种联合使用的情况多发生在循环嵌套的情况下

with语句

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

with (expression) statement;

/*举例，上面的代码可以改写成下面的，在 with 语句的代码块
内部，每个变量首先被认为是一个局部变量，而如果在局部环境中找不到该变量的定义，就会查询
location 对象中是否有同名的属性。如果发现了同名属性，则以 location 对象属性的值作为变量的值。*/
var qs = location.search.substring(1); 
var hostName = location.hostname; 
var url = location.href;

with(location){ 
 var qs = search.substring(1); 
 var hostName = hostname; 
 var url = href; 
}

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

switch语句

语法

switch (expression) { 
case value: 
    statement 
    break; 
case value: 
    statement 
    break; 


case value:
    statement 
    break; 
case value: 
    statement 
    break; 
default: 
   statement 
}

可以在switch 语句中使用任何数据类型
每个 case 的值不一定是常量，可以是变量，甚至是表达式
switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换

FGstudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级程序设计第一部分

js高级程序设计:基本概念在HTML里使用jsscript元素标签的位置把script元素放在head元素中，必须等到全部js代码被下载，解析，执行完成之后才能开始呈现页面的内容，这样可能会导致浏览器在呈现页面时出现延迟，所有现在一般把script元素放在body里面，这样在解析js代码前页面的内容就可以呈现。script元素的defer属性，只适用于外部脚本，作用是让浏览器立即下载但...
复制链接

扫一扫