js复习笔记

js复习笔记

• html定义了网页的内容

• css描述了网页的布局

• js控制了网页的行为

js'输出显示笔记

• 使用 window.alert() 弹出警告框。

• 使用 document.write() 方法将内容写到 HTML 文档中。

• 使用 innerHTML 写入到 HTML 元素。

• 使用 console.log() 写入到浏览器的控制台。

数据类型

• 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

• 引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

  typeof "John"                // 返回 string
  typeof 3.14                  // 返回 number
  typeof false                 // 返回 boolean
  typeof [1,2,3,4]             // 返回 object
  typeof {name:'John', age:34} // 返回 object字符串

字符串

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var answer2="He is called \"Johnny\"";
var answer3='He is called "Johnny"';
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
​
>>He is called "Johnny"
>>He is called "Johnny"

数字

只有一种数字类型。数字可以带小数点，也可以不带：

数组

var cars = new Array();
cars[0] = 'Mike';
cars[1] = 'Sab';
cars[2] = 'John';
​
或者
​
var cars=new Array("Saab","Volvo","BMW");

对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var preson = {Firstname :  "John" ,  id : 555 , lasename : 'Doe'}

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

对象

• js中的对象是变量的容器

• 对象是一个变量，同时对象可以包含多个值（多个变量）

• 通常以键值对的形式出现 name：value

• 键值对在js对象中通常成为对象属性

访问对象属性

可以通过以下两种方式访问对象属性

• person.lastname;

• person["lastname"]

对象方法

对象的方法定义了一个函数，并作为对象的属性存储

对象方法通过添加（）调用

实例访问了 person 对象的 fullName() 方法:
name = person.fullNam;

向未生明的JS变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内对局部变量。

字符串

JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

===为绝对相等，即数据类型与值都必须相等

运算符

运算符	描述
/	除法
%	取模（余数）
+	可以把文本值或者字符串，连接起来两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
===	绝对等于（值和类型均相等）
！==	不绝对等于（值和类型有一个不相等，或两个都不相等）

条件运算符

variablename=(condition)?value1:value2 

for循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

do...while

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环

do
{
    需要执行的代码
}
while (条件);

break/continue

• continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代

• break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

typeof

null

在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。

• typeof 检测 null 返回是object。

• 设置为 null 来清空对象:

var person = null;    // 值为 null(空), 但类型为对象

• 你可以设置为 undefined 来清空对象:

var person = undefined;     // 值为 undefined, 类型为 undefined 

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined。

是所有没有赋值变量的默认值，自动赋值

二者区别

null 和 undefined 的值相等，但类型不等：

类型转换

• 在js中有6钟不同的数据类型

  • string

  • number

  • boolean

  • object

  • function

  • symbol

• 3钟对象类型

  • Object

  • Date

  • Array

• 2个不包含任何值的数据类型

  • null

  • undefined

constructor属性

• constructor 属性返回所有 JavaScript 变量的构造函数。

• 你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

• 你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

数字转换成字符串、将布尔值转换为字符串、将日期转换为字符串、

全局方法 String() 可以将数字转换为字符串。

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回

Number/Boolean/Date()方法中的 tostring 也是有同样的效果

x.toString()
(123).toString()

将字符串转换为数字、将布尔值转换为数字、将日期转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

自动转换类型

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

语法：

/正则表达式主体/修饰符(可选)

其中修饰符是可以选的

实例如下
var pattt = /runoob/i
//runoob是一个正则表达式主体（用于检索）
// i 是一个修饰符（不区分大小写）

使用字符串的方法

正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

search（）方法使用正则表达式

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
​
》》输出结果为6

search （）方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

检索字符串中 "Runoob" 的子串：
​
var str = "Visit Runoob!"; 
var n = str.search("Runoob");
​
》》输出结果为6

replace() 方法使用正则表达式

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
​
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");
​
》》Visit Runoob!

replace（）方法使用字符串

replace() 方法将接收字符串作为参数：
​
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");
​
》》Visit Runoob!

正则表达式修饰符

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配
m	执行多行匹配

RegExp对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

以下方法均为RegExp对象的方法

如果要用以下的方法，得先创建RegExp这个对象

//如果要用以下的方法，得先创建RegExp这个对象
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

使用test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

var patt = /e/;
patt.test("The best things in life are free!");
​
>>字符串中含有 "e"，所以该实例输出为：
true

使用exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

/e/.exec("The best things in life are free!");
​
》》字符串中含有 "e"，所以该实例输出为:
e

错误-throw、try、catch

• try 语句测试代码块的错误。

• catch 语句处理错误。

• throw 语句创建自定义错误。

• finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

try和catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。
​
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
​
实例
var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

finally语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

Throw语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。（throw exception）

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

变量提升（尽量不用，以下会开启严格模式）

• 函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

• JavaScript 只有声明的变量会提升，初始化的不会。

• var y = 7; // 初始化 y

y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

• y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

• 字符串断行需要使用反斜杠()

  var x = "Hello \
  World!";

undefined&&Null

null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined。

如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
​
错误的使用方式：
​
if (myObj !== null && typeof myObj !== "undefined") 
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
​
if (typeof myObj !== "undefined" && myObj !== null) 

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。

以下代码的的变量 i 返回 10，而不是 undefined：

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

循环里的变量事全局变量，函数里的变量事局部变量

表单

表单验证

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
​
<form name="myForm" action="demo_form.php"
οnsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
​
//假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

• 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：（required=“required”）

e-mail验证

function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
    }
​

验证KPI

以下实例如果输入信息不合法，则返回错误信息：
​
checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button οnclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    //返回的是input这个html字段，所以下面用validationMessage去返回这个字段的有效值
    
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

约束验证DOM属性

属性	描述
validity	布尔属性值，返回input输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

![image-20221029201105598](Js.assets/ima

this关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。

• 如果单独使用，this 表示全局对象。

• 在函数中，this 表示全局对象。

• 在函数中，在严格模式下，this 是未定义的(undefined)。

• 在事件中，this 表示接收事件的元素。

• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

let和const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

• 在函数内声明的变量作用域是局部的（函数内）：

• ES6 可以使用 let 关键字来实现块级作用域。

  let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

//方式一
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2
​
//方式二
var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

• 使用 var 关键字声明的全局作用域变量属于 window 对象:

  var carName = "Volvo";
  // 可以使用 window.carName 访问变量

• 使用 let 关键字声明的全局作用域变量不属于 window 对象:

  let carName = "Volvo";
  // 不能使用 window.carName 访问变量

• 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var / let 关键字声明的变量:

  let x = 2;       // 合法
  let x = 3;       // 不合法
  ​
  {
      let x = 4;   // 合法
      let x = 5;   // 不合法
  }

• 在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:

• let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

  let x = 2;       // 合法
  ​
  {
      let x = 3;   // 合法
  }
  ​
  {
      let x = 4;   // 合法
  }总结let和var

总结let和var

• 在同一作用域下，let不能重置var/let关键字声明的变量

• 在不同作用域下，let可以重新声明变量赋值的

• let在在for循环里就是变成局部变量，而var只有在函数里才会变成局部变量

const关键字

• const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

• const本质是定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的

• 意思就是说可以修改，减少，增加其中的某个key的值，但是不能重新整体赋值

const和let异同

const定义常量与使用let 定义的变量相似：

• 二者都是块级作用域

• 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

• const声明的常量必须初始化，而let声明的变量不用

• const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

什么是JSON

• JSON 英文全称 JavaScript Object Notation

• JSON 是一种轻量级的数据交换格式。

• JSON是独立的语言 *

• JSON 易于理解。

JSON数据格式--键值对

"name":"Runoob"

JSON和JS之间的转换

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

说句不严谨的话：JSON.parse() 就是字符串转 js 对象， JSON.stringify()就是 js 对象转字符串，它们前提是要 json 格式才有意义。

void

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

如：

void(alert("Warnning!"))

// 阻止链接跳转，URL不会有任何变化
<a href="javascript:void(0)" rel="nofollow ugc">点击此处</a>
​
// 虽然阻止了链接跳转，但URL尾部会多个#，改变了当前URL。（# 主要用于配合 location.hash）
<a href="#" rel="nofollow ugc">点击此处</a>
​
// 同理，# 可以的话，? 也能达到阻止页面跳转的效果，但也相同的改变了URL。（? 主要用于配合 location.search）
<a href="?" rel="nofollow ugc">点击此处</a>
​
// Chrome 中即使 javascript:0; 也没变化，firefox中会变成一个字符串0
<a href="javascript:0" rel="nofollow ugc">点击此处</a>

Promise

• Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）

• Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject

• 一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。

• then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。

• catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止陨星，而是进入catch 方法中。

var promise =new Promise(function(resolve,reject){
    //To Do 要异步执行的事情，这个异步执行的事情有可能成功执行完毕，那么Promise将是fulfilled状态，如果执行失败则是rejected;
    //下面测试代码，人为设置为rejected状态;
    reject("将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）"); //当然此处也可以设置为fulfilled(已完成)状态
})
​
promise.then(//调用第一个then()
    success=>{
        console.log("异步执行成功，状态为：fulfilled，成功后返回的结果是："+success);
        return(" 当前 success ");
    },
    error=>{
        console.log("异步执行失败，状态为rejected，失败后返回的结果是："+error);
        return(" 当前 error ");
    }
).then(
    //调用第二个then() 因为调用第一个then()方法返回的是一个新的promise对象，此对象的状态由上面的success或者error两个回调函数的执行情况决定的：
    //如果回调函数能正常执行完毕，则新的promise对象的状态为fulfilled，下面执行success2,如果回调函数无法正常执行，则promise状态为rejected;下面执行error2
    success2=>{
        console.log("第一个then的回调函数执行成功 成功返回结果："+success2);
        throw(" 当前 success2 ");//自定义异常抛出
    },
    error2=>{
        console.log("第一个then的回调函数执行失败 失败返回结果："+error2);
        return(" 当前 error2 ");
    }
).catch(err=>{
    //当success2或者error2执行报错时，catch会捕获异常;
    console.log("捕获异常："+err);
});
​
//上述代码,打印如下:
//异步执行失败，状态为rejected，失败后返回的结果是：将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）
//第一个then的回调函数执行成功 成功返回结果： 当前 error
//捕获异常： 当前 success2

Q: 什么时候适合用 Promise 而不是传统回调函数？

A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

个人对于promise的理解还不够深刻，得多学习文档才可以

文档链接：JavaScript Promise | 菜鸟教程 (runoob.com)