JavaScript & TypeScript 学习总结

最新推荐文章于 2024-08-18 10:54:05 发布

m0_73895349

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量46

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/m0_73895349/article/details/131452617

版权

本文介绍了JavaScript和TypeScript的基本概念，包括它们的配置方式、语法特点，如变量声明、函数使用、对象和数组的创建，以及操作符和闭包的解释。JavaScript作为浏览器执行的语言，允许直接在HTML中插入，而TypeScript作为其超集，增加了类型系统，提高了代码的可维护性和调试效率。

摘要由CSDN通过智能技术生成

一、JavaScript

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

1.配置

运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。

2.JavaScript基本语法

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> 
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

（1）标识符—要注意大小写
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
其他字符可以是字母、下划线、美元符号或数字。

（2）注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：
多行注释以 /* 开始，以 */ 结尾。

//这里的内容将被忽略

（3）语句
语句后的分号建议添加，但不必须。
if do-while while for for-in for-of break continue switch
（4）关键字/保留字
JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量：

var x = 5 + 6;
var y = x * 10;

以下是 JavaScript 中最重要的保留关键字
在这里插入图片描述
（5）变量
变量是用于存储信息的"容器"。
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）。
如需向变量赋值，请使用等号：

carname="Volvo";

不过，也可以在声明变量时对其赋值：

var carname="Volvo";

样例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<script>
var x=7;
var y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

</body>
</html>

（6）操作符
一元操作符：++ –
布尔操作符：&& || ！
算术运算符：+ - * / %
关系操作符：< > <= >= == != === !==
注意：===称为全等（值和类型）
条件（问号）操作符：? :
赋值操作符：= += -= /= %=

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p id="demo"></p>
<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

（7）函数
函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

function functionname()
{
    // 执行代码
}

带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法

function myFunction()
{
    var x=5;
    return x;
}

调用带参数的函数

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

（8）对象Object
JavaScript 对象是拥有属性和方法的数据。


//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

（9）数组Array
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

（11）链式语法
基本上，你只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。
样例


//链式语法
var bird = {//定义对象字面量
  catapult: function() {
    console.log( 'Yippeeeeee!' );
    return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
  }
};
bird.catapult().destroy();//destroy()后还可以再链接吗？

（12）闭包
闭包是Closure，这是静态语言所不具有的一个新特性。
闭包就是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。
闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。
当在一个函数内定义另外一个函数就会产生闭包。
样例：


function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

二、TypeScript

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

1.配置

TS配置
安装好NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装
如在VS Code中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件
新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功。

2.TypeScript 基本语法

（1）TypeScript 保留关键字
如下所示：
在这里插入图片描述
（2）注释
TypeScript 支持两种类型的注释：
单行注释 ( // ) − 在 // 后面的文字都是注释内容。
多行注释 (/* */) − 这种注释可以跨越多行。

（3）变量
变量使用前必须先声明，我们可以使用 var 来声明变量。
我们可以使用以下四种方式来声明变量：
①声明变量的类型及初始值：

var [变量名] : [类型] = 值;

②声明变量的类型，但没有初始值，变量值会设置为 undefined：

var [变量名] : [类型];

③声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值;

④声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

样例：

var uname:string = "Runoob";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("名字: "+uname)
console.log("第一个科目成绩: "+score1)
console.log("第二个科目成绩: "+score2)
console.log("总成绩: "+sum)

运行结果
在这里插入图片描述
（4）运算符同上

var num1:number = 10
var num2:number = 2
var res:number = 0
   
res = num1 + num2
console.log("加:        "+res);

res = num1 - num2;
console.log("减: "+res)

res = num1*num2
console.log("乘:    "+res)

res = num1/num2
console.log("除:   "+res)
   
res = num1%num2
console.log("余数:   "+res)

num1++
console.log("num1 自增运算: "+num1)

num2--
console.log("num2 自减运算: "+num2)

运行结果
在这里插入图片描述
（5）函数
ts 函数和 Js函数的区别：

1，ts有类型，Js无类型
2，ts有函数类型，Js无函数类型
3，ts含箭头函数，Js也有箭头函数(ES2015)
4，ts必填和可选参数，Js所有参数都是可选的
5，都有默认参数和剩余参数
6，ts函数重载，Js无函数重载

①参数类型和返回类型

function func(name: string, id: number): string {
  return name + id
}
// 函数名后的: string 是返回值的类型的定义

②箭头函数

// 普通函数
function func() {
  let _t = this;
  _t.name = 'xiaowang';
  setInterval(function () {
    console.log(_t.name)
  }, 1000)
}

// 箭头函数
function func() {
  this.name = 'xiaowang';
  setInterval(() => {
    console.log(this.name)
  }, 1000)
}

③函数重载
函数重载或者方法重载是使用相同的名称和不同的参数数量或者类型创建多个方法的一种能力

function attr(name: string): string
function attr(age: number): number
function attr(nameorage: any): any {
  if (nameorage && typeof nameorage === 'string') {
    console.log('name')
  } else {
    console.log('age')
  }
}
attr('xiaowang')  // name
attr(10) // 10

(6）数组
数组对象是使用单独的变量名来存储一系列的值。
①数组解构

var x;
var y;
var z;
var arr = [1, 2, 3, 4, 5, 6];
[x, y, z] = arr;
console.log(x, y, z); // 1 2 3

② 数组展开运算符

let arr = [1,2,3]
let five_arr = [...arr, 3,4,5,6]
console.log(five_arr)  // [1, 2, 3, 3, 4, 5, 6]

③ 数组遍历

let arr: string[] = ["xiaowang", "Jerry", "Lisa"];
for (let i of arr) {
  console.log(i);  // xiaowang Jerry Lisa
}

（7）对象
对象是包含一组键值对的实例。值可以是标量、函数、数组、对象等
①对象解构

let person = {
  name: 'xiaowang',
  age: 18
}
let {userName: name, userAge: age} = person;
console.log(userName, userAge)  // xiaowang 18

②对象展开运算符

let person = {
  name: 'xiaowang',
  age: 18
}
// 组装对象
let personWithAddress = {...person, address: '北京'}
// 获取除了某些项外的其他项
let {name, ...reset} = personWithAddress
console.log(name)  // xiaowang
console.log(reset)  // {age: 18, address: '北京'}

（8）类
TypeScript 支持面向对象的所有特性，比如类、接口等。

类可以包含以下几个模块（类的数据成员）：
字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
构造函数 − 类实例化时调用，可以为类的对象分配内存。
方法 − 方法为对象要执行的操作。

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

样例

var Person = /** @class */ (function () {
  // 构造函数 - 执行初始化操作
  function Person(message) {
      this.greeting = message
  }
  // 静态方法
  Person.getClassName = function () {
      return "my name is xiaowang"
  }
  // 成员方法
  Person.prototype.greet = function () {
      return "Hello, " + this.greeting
  };
  // 静态属性
  Person.name = "xiaowang"
  return Person
}())
var p1 = new Person("world")

三、参考网址

https://qige.io/web/web.html#ts
https://www.runoob.com/js/js-tutorial.html
https://www.runoob.com/typescript/ts-object.html

m0_73895349

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript & TypeScript 学习总结

JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
复制链接

扫一扫