JavaScript&TypeScript学习总结

最新推荐文章于 2024-04-09 12:28:14 发布

汐425

最新推荐文章于 2024-04-09 12:28:14 发布

阅读量94

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/qq_63214804/article/details/131412111

版权

JavaScript学习总结

什么是JavaScript？JavaScript是一门简单的脚本语言，如今在前端和后台都具有良好的表现，很有必要学习这门语言。那么如何运行JavaScript呢？运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入。以上两种方法由浏览器解释执行，是以前的方式。现在也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。

下面会说明一些JavaScript的基本语法、操作符、语句、函数、对象、数组、链式语法，闭包。

1.基本语法

JavaScript是一门大小写敏感的语言，它的标识符采用用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById。如果你不知道标识符，其定义如下：所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符具备下列规则： 1.第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
2.其他字符可以是字母、下划线、美元符号或数字。

JavaScript中语句后的分号建议添加，但不必须。

JavaScript中的变量是松散类型的，即能用var来保存任何数据类型的数据，例如String、Number、Boolean和Object等等。每个变量仅仅是一个用于保存值的占位符而已。定义变量时需要使用var操作符后跟变量名（即一个标识符），如以下代码合理但不推荐使用：

有一点必须注意，即用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁，例如：

要如何解决这个问题呢，只需要将其定义为全局变量就好了。以下有三个方法定义全局变量： 1.在js的function外定义一个变量； 2.不使用var，直接给定义变量，隐式的声明了全局变量 3.使用window.变量名定义为全局变量，但是注意：调用时候建议写上window.变量名，当然也可以不写；我们常用的document.getXXX的document对象就是window的

2.操作符

一元操作符有++、--

布尔操作符有 &&、||、！

算术操作符有 +、-、*、/、%

关系操作符有<>、<=>=、==、===、!=、!==

条件（问号）操作符有? :

赋值操作符有=、+=、-+、*=、/=、%=

3.语句

JavaScript中语句有if、do-while、while、for、for-in、for-of、break、continue、switch等语句，使用时需添加{}。

4.函数

JavaScript中的函数与其它语言中的函数并无太大区别，都是一门语言中的核心概念，并且可以通过函数封装任意多条语句，在任何地方、任何时候调用执行。JavaScript中函数特殊的地方在于在定义时不必指定是否返回值，所以这就决定了JavaScript中任何函数在任何时候都可以通过return语句后跟要返回的值来实现返回值。例如像下面这样：

另外还有几点注意事项：

1.函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。

2.如果你定义了两个名字相同的函数，则该名字只属于后定义的函数。

3.JavaScript函数可以自带参数

5.对象

什么是对象？对象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);

}

};

6.数组

什么是数组？数组是JavaScript中除了对象类型Object之外最常用的类型。JavaScript 中的数组与其他多数语言中的数组有着相当大的区别。虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，JavaScript 数组的每一项可以保存任何类型的数据，而其他语言的一般只能一种数据类型的数据。那么数组如何创建呢？方法如下：

//方式一new

var colors = new Array('red', 'blue', 'green');

//方式二字面量

var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组

console.log(colors[1]);

colors[3] = 'brown';

console.log(colors.length);

var names = []; // 创建一个空数组

var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！

console.log(hyBird[3].firstName);

7.链式语法
什么是链式语法？链式语法已变得非常流行，它实际上是一种非常容易实现的模式。基本上，你只需要让每个函数返回 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()后还可以再链接吗？

8.闭包

闭包是什么?闭包是Closure，是静态语言所不具有的一个新特性，是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。例如：

function greeting(name) {

var text = 'Hello ' + name; // local variable

// 每次调用时，产生闭包，并返回内部函数对象给调用者

return function() { console.log(text); }//注意该函数无名称，称为匿名函数

}

var sayHello = greeting('Closure');//调用greeting()返回了什么？

sayHello(); // 注意此处的使用方法。通过闭包访问到了局部变量text

TypeScript学习总结

什么是Typescript？TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。TypeScript的作用是什么？TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

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

下面简要介绍下本人所学习的TypeScript的一些知识点

1.let和const

与JavaScript不同的是，在TypeScript中不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界。如下所示：

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断

lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';

let age: number = 89;

let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量

pi = 3.14;//error!

2.解构

解构是什么？解构就是将对象、数组中的元素拆分到指定变量中，以方便使用。一般如下使用：

//解构数组

let input = [89, 64, 2018, 10];

let [first, second] = input;//注意使用[]

console.log(first); // 89

console.log(second); // 64

let [one, ...others] = input; //剩余变量

console.log(...others);

//展开

let newArr = [89, ...others, 18];

console.log(newArr);

//解构对象

let o = {

a: "foo",

b: 12,

c: "bar"

};

let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致

console.log(a, b);

3.函数

TypeScript中的函数要比JavaScript中的严格些。在函数的参数中有需要指定函数中输入参数的类型，也可以让参数可以选择，还可以添加默认参数，如果不知道需要多少个参数，还可以使用剩余参数。在TypeScript的函数箭头函数（类似于lambda表达式），可以简化函数定义、解决this问题。如下所示：

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！

function add(x: number, y: number): number {

return x + y;

}

//匿名函数

let myAdd = function(x: number, y: number): number { return x + y; };

//可选参数，必须放在必要参数后

function greeting(firstName: string, lastName?: string) {

if(lastName) {

return `Hello ${firstName} ${lastName}!`;

}

return `Hello ${firstName}!`;