这篇博客介绍了JavaScript的基本语法，包括变量、语句、函数、对象、数组和链式语法。此外，还深入探讨了TypeScript，包括它的简介、let和const、解构、函数、类、继承和模块。学习JavaScript和TypeScript能够增强前后端开发能力，提升代码的规范性和可维护性。
目录
概述：
现在JavaScript再也不是简单的脚本语言了，无论前端还是后台，可以毫不夸张的说，JavaScript都有良好的表现！
基础的JavaScript学习请参见 W3school-领先的Web技术教程或 W3C菜鸟教程（每个人都有菜的时候） ，或者直接下载其 chm格式学习文档，更进一步的学习请下载 JavaScript高级程序设计、 JavaScript权威指南(第6版)(中文版)以及 JavaScript语言精粹_修订版这3本书，网上其它的这方面书都有滥竽充数的嫌疑。
运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行（ node-v10.11.0-64位下载）。
因为JavaScript是我们前后端编程的基础，所以下面对JavaScript进行概要介绍
1.Java基本语法：
基本语法
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
其他字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript（European Computer Manufacturers Association） 标识符采用 驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById
语句后的分号建议添加，但不必须。
break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try
ECMAScript 的变量是松散类型的（），所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
定义变量时要使用 var 操作符（），后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。下示代码合法但不推荐：
-
大小写敏感
-
标识符
-
注释
-
语句
-
关键字/保留字
-
变量
var message = 'Hi, JavaScript';
console.log(message);
message = 100;
console.log(message);和C#语法类似， var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁。
虽然省略 var 操作符可以定义全局变量，但这也不是我们推荐的做法。因为在局部作用域中定义的全局变量很难维护。
设置全局变量有三种方法：
在js的function外定义一个变量；
不使用var，直接给定义变量，隐式的声明了全局变量
使用window.变量名定义为全局变量，但是注意：调用时候建议写上window.变量名，当然也可以不写；我们常用的document.getXXX的document对象就是window的
操作符
一元操作符 ++ –
布尔操作符 && || ！
算术操作符 + - * / %
关系操作符 <> <=>= == === != !==
条件（问号）操作符 ? :
赋值操作符 = += -+ *= /= %=
语句
和其他语言一样也有if do-while while for for-in for-of break continue switch等语句，用法也大致相同。
语句
-
if do-while while for for-in for-of break continue switch
var colors = ['red', 'green', 'blue', 'brown']; //colors是一个数组
//传统遍历（基本不用了）
for(var i=0;i<colors.length;i++){
console.log(colors[i]);
}
//for-in，专注下标
for(var c in colors){
console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
console.log(c);
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);for循环
这里重点介绍JavaScript中的for循环，JavaScript的for循环既有C++中的语法，也有python的for循环的身影，还有类似C#的高级遍历，可以阅读如下代码块进行学习：
var colors = ['red', 'green', 'blue', 'brown']; //colors是一个数组
//传统遍历（基本不用了）
for(var i=0;i<colors.length;i++){
console.log(colors[i]);
}
//for-in，专注下标
for(var c in colors){
console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
console.log(c);
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);
while循环
while循环同上条件语句和switch语句，参考C++语法即可。
1.5 函数
函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。
JavaScript的函数语句和C/C++的语法类似，需要注意的是函数的前面不用数据类型修饰函数返回参数，而是直接使用function作为前缀。对于需要返回参数的函数，可以直接在函数中添加return语句。还有一点不同的是，如果需要输入参数，函数名称后面的括号中不需要填写数据类型。
function sum(num1, num2) {
return num1 + num2;
}
1.6 对象
对象 Object 是JavaScript 中使用最多的一个类型。我们常将数据和方法封装在对象中，类似于C++的结构体。
创建对象有两种方式，如下：
//方法一
//方式一
var person = new Object();//生成空对象
person.name = Bob;
person.sayName = function(){
console.log(this.name);
};
//方式二
var person = {
name: 'Bob',
sayName: function(){
console.log(this.name);
}
};
//方法二
function createPerson(name){
var o = new Object();
o.name = name;
o.sayName = function(){
console.log(this.name);
};
return 0;
}
1.7 数组
JavaScript的数组可以参考C++中的容器（例如Vector容器），python中的数组或者是C#中的List，总体语法风格都比较相似。
学习连接：JavaScript 对象 | 菜鸟教程 (runoob.com)
1.8 链式语法
链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 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()后还可以再链接吗？
二、TypeScript学习总结
2.1 TypeScript简介
关于TypeScript，可以在官网上查到相关信息
TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)
TS配置
安装好NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装
如在VS Code中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件
新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功
let 和 const
不使用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!解构
将对象、数组中的元素拆分到指定变量中，以方便使用
//解构数组
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);
函数
使用完整函数类型定义
//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number
可选参数
//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
if(lastName) {
return `Hello ${firstName} ${lastName}!`;
}
return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error!
默认参数
//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!
剩余参数
必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来， 在TypeScript里，你可以把所有参数收集到一个变量里
//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
function greeting(firstName: string, ...restName: string[]) {
return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
console.log(greeting('Laden'));
箭头函数
特点：简化函数定义、解决this问题（如需进一步了解可查看文档）
//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
let sum = n1 + n2;
return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));
类class
类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。（请注意，我们要用的Angular框架大量使用类）
类的定义和使用
//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
name: string; //属性
weather: string; //属性
constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
this.name = name;
this.weather = weather;
}
printInfo(): void { //其它函数，无返回值
console.log(`Hello, ${this.name}.`);
console.log(`Today is ${this.weather}.`);
}
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();
类的属性和函数的访问权限
类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。
//访问权限
class MyInfo { //class是关键字，类名默认全部大写首字母
public name: string; //public属性，可省略
private _weather: string; //私有属性，习惯以_开头进行命名
constructor(name: string, weather: string){ //构造函数，一般用于初始化
this.name = name;
this._weather = weather;
}
printInfo(): void { //其它函数
this._test();
console.log(`Hello, ${this.name}.`);
console.log(`Today is ${this._weather}.`);
}
private _test(): void {
console.log('You can not call me outside!');
}
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();
存取器-getter、setter
当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。
//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。
private _weather: string; //私有属性，习惯以_开头进行命名
constructor(name: string, weather: string){ //构造函数，一般用于初始化
this._name = name;
this._weather = weather;
}
get name(): string {
return this._name;
}
set name(value: string) { //error！ _name有readonly属性
this._name = value;
}
get weather(): string {
return this._weather;
}
set weather(value: string) {
this._weather = value;
}
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);
静态属性
类中的属性或函数有static修饰，则可直接使用而不需要实例化
//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
static place = 'Earth';
static printInfo() {
console.log('We have only one Earth!');
}
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();
继承
可以通过extends关键字继承其它类，从而成为其子类
class Animal {
// 当构造函数传入的参数加上了“访问权限控制符”，则同时会声明同名类属性，并赋值
constructor(public name: string) { }
protected log(message: string) {
console.log(message);
}
move(distanceInMeters: number = 0) {
this.log(`${this.name} moved ${distanceInMeters}m.`);//请注意name来自何处
this.log('==============');
}
}
class Horse extends Animal {
constructor(name: string) {
super(name); // 通过super调用父类构造器
}
run(distanceInMeters = 50) { //自己独有的函数
this.log("Clop, clop...");
super.move(distanceInMeters); // 通过super调用父类方法
}
}
class Eagle extends Animal {
constructor(name: string) { super(name); }
reborn() { //自己独有的函数
console.log('Reborn？ It is a joke, hahaha!');
}
}
let tom: Horse = new Horse("Tommy the Palomino");
tom.run(8964);
let sam: Eagle = new Eagle("Sammy the Hawk");
sam.move(1024);//sam的move函数来自何处？
sam.reborn();
模块
export class Name { //用export对外部暴露该类
constructor(private first: string, private second: string) {}
get nameMessage() {
return `Hello ${this.first} ${this.second}`;
}
} 总结：
通过本次学习，让我对前端开发有极大的兴趣，这次学习JavaScript和TypeScript不仅仅让我的技术领域向更广的地方拓展，还让我对前端的认知更加准确了，而且知道了，JavaScript和typescript能对HTML生成的web页面加上互动功能，增加页面的互动性，使页面活动起来，能实现更多功能。typescript对比JavaScript有了更多的规范、更加简洁，且更适用于大型项目的开发。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
