Javascript&TypeScript 学习总结

qwert_qqq

已于 2023-06-29 17:20:50 修改

阅读量79

点赞数

文章标签： javascript typescript 学习

于 2023-06-29 17:16:21 首次发布

本文链接：https://blog.csdn.net/qwert_qqq/article/details/131460507

版权

Javascript&TypeScript 学习总结

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript。

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的和部分中。

您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件，例如：<script src=“myScript.js”></script>

2.基本语法

输出：
window.alert():弹出窗口显示内容
document.getElementById(id):通过HTML元素的ID来操作某一元素，例如下面这段代码用innerHTML来插入或修改段落中的内容

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

写到 HTML 文档: 使用 document.write() 可以向文档写入内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
console.log() :会将需要输出的值打印到控制台

字面量：
数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量可以使用单引号或双引号:“John Doe” ‘John Doe’
表达式字面量用于计算：5+8
数组（Array）字面量定义一个数组：
[40, 100, 1, 5, 25, 10]
对象（Object）字面量定义一个对象：
{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量定义一个函数：
function myFunction(a, b) { return a * b;}
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
var x, length
x = 5
length = 6
JavaScript使用算术运算符来计算值:
(5 + 6) * 10
JavaScript使用赋值运算符给变量赋值：
x = 5
y = 6
z = (x + y) * 10
语句用分号分隔 ;
JavaScript 对大小写是敏感的。当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符，包含标点等字符。

条件语句:
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

循环：
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）
continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代。

typeof 可用于检测变量的数据类型。

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

在 JavaScript 中 null 表示 “什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
Note 用 typeof 检测 null 返回是object。
你可以设置为 null 来清空对象:

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

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

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

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

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

JavaScript 正则表达式:

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

var patt = /runoob/i

/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

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

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

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

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 “e”：

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 “e”，所以该实例输出为：
true
可以不用设置正则表达式的变量，以上两行代码可以合并为一行：

/e/.test("The best things in life are free!")

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

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 “e”:

/e/.exec("The best things in life are free!");

字符串中含有 “e”，所以该实例输出为:e

JavaScript 错误 - throw、try 和 catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

3.JavaScript 调试

console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值

设置断点
在调试窗口中，你可以设置 JavaScript 代码的断点。
在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。
在检查完毕后，可以重新执行代码（如播放按钮）。

debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。

开启 debugger ，代码在第三行前停止执行。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

主要浏览器的调试工具
通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

4.其他用法和代码规范

JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

以上 JavaScript 代码可以通过 HTML 代码来调用：

HTML 表单实例

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

HTML 表单自动验证 HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
必需字段是否有输入? 用户是否输入了合法的数据? 在数字字段是否输入了文本? 大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：HTML 输入属性 CSS 伪类选择器 DOM 属性和方法

JavaScript JSON

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

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

什么是 JSON?
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
Note * JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 格式化后为 JavaScript 对象
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则
数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为键/值对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个键/值对：

{"name":"Runoob", "url":"www.runoob.com"}

JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

每个对象为站点的信息（网站名和网站地址）。
JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

JavaScript 代码规范

代码规范通常包括以下几个方面: 变量和函数的命名规则 / 空格，缩进，注释的使用规则。/ 其他常用规范……

变量名推荐使用驼峰法来命名(camelCase)
通常运算符 ( = + - * / ) 前后需要添加空格
通常使用 4 个空格符号来缩进代码块
一条语句通常以分号作为结束符。
为了便于阅读每行字符建议小于数 80 个。
如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
要保持统一的风格建议统一使用小写的文件名。

5.函数

JavaScript 函数定义

JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式。
Function() 构造函数
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

实际上，你不必使用构造函数。上面实例可以写成：

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);

在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

JavaScript 函数参数

JavaScript 函数定义显式参数时没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。
ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为：undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值

6.类

类是用于创建对象的模板。

我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。
每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。创建对象时会自动调用构造函数方法 constructor()。

class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
let site = new Runoob("棋歌教学网",  "https://qige.io");

JavaScript 类继承使用 extends 关键字。
继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。
super() 方法用于调用父类的构造函数。
当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。
继承代表了 is a 关系。例如，哺乳动物是动物，狗是哺乳动物，因此，狗是动物，等等。