文章目录

一、JavaScript 是什么？
- 1.1 使用环境
- 1.2 基本语法
- 1.3 语句
- 1.4 创建对象
- 1.5 数组
- 1.6 链式语法
- 1.7 闭包
二、TypeScript 是什么？
- 2.1 基本语法
- 2.2 let 和 const
- 2.3 解构
- 2.4 函数
总结

一、JavaScript 是什么？

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

1.1 使用环境

对于JavaScript语言，可以在浏览器中运行，也可以脱离浏览器运行(需要下载Node.js。
下载链接：Node.js

1.2 基本语法

这里其他网址上有很多教程，写的比作者本人好，我这里就不再赘述了。本人这次主要想分享的就是一些我认为有意思的点。
链接：
棋哥教学网
菜鸟教程

1.3 语句

与C语言不同的是多了for-in for-of
举个例子

//for-in，专注下标
for(var c in colors){console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){console.log(c);
}

这是C语言所没有的，for in和for of 明显降低了代码量。在其他语言也有同样的遍历方式比如：C#。
另外还有一种高级遍历

//高级遍历
colors.forEach(c => console.log(c));//foreach直接可以取出里面的元素并且赋值给c,并输出
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);

显然这种高级遍历更加便捷。

1.4 创建对象

这里有三种方法：

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

这里明显感觉js的代码很奇怪，明明person里面没有那些属性，怎么还可以直接.出来呢？这就是JS的一个特点：随意。只有运行的时候才会报错。

//方式二字面量
var person = {name: 'Lary Page',age: 47,job: 'Software Engineer',sayName: function(){        //注意此处，直接将匿名函数复制过去。console.log(this.name);}
};
console.log(person.job);
person.sayName();

这里注意是，复制不是用的=，而是：

function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){console.log(this.name);};return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

注意：前面的几种方式仅仅只能定义一个对象，要是要创建多个对象就显得十分的鸡肋。这里我们采用工厂模式，通过函数的形式来定义对象。

1.5 数组

这里需要注意的就是有两对很重要的函数push(队尾插入)和unshift（队首插入），pop(队尾弹出)和shift(队首弹出)

var count = colors.unshift('red', 'green'); // 推入两项
var item = colors.shift(); // 前端弹出第一项
colors.push('black'); //推入另一项
colors.push('red', 'green'); //推入两项

1.6 链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 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();//先执行第一个函数再执行第二个函数

这种链式语法，要注意的是函数的返回值一定得是this,这样才能返回后继续调用其它函数。

1.7 闭包

闭包就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配，也就说在函数返回后仍然可以使用里面的局部变量。
直接上代码：


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

var scope = 'global scope';   //全局变量
function checkScope(){var scope = 'local scope'; //局部变量function f(){console.log('hello');return scope;       }return f;
}
var hehe=checkScope()();
console.log(hehe);//返回值为local scope而非global scope

通过这两个例子，我个人的感觉是闭包就是在函数调用的过程中，把整个函数当作一个对象，然后里面的局部变量成为了其属性，这样，再次调用函数时，之前的数据就不会丢失。

二、TypeScript 是什么？

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。我的理解是TypeScript 就是在JavaScript之上的一个装饰器，让它变得没有那么没有规则，最终，代码会转化成JS。

2.1 基本语法

同样的由于作者水平有限，双手奉上链接。
棋哥教学网
菜鸟教学
作者这里也只是针对某些点，表达自己的观点。

2.2 let 和 const

使用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!

明显可以感觉到这才是应该正确的代码，不像JS那么没有规则。

2.3 解构

解构数组
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);//这里的others成为了一个数组
console.log(...input);//...是把数组的元素提取出来
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {a: "foo",b: 12,c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

注意的就是…others是将数组的元素提取出来，而others却是一个数组。

2.4 函数

可选参数


//可选参数，必须放在必要参数后
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!

这里注意的是``中，无论你写的什么，都会原样输出，当遇到$的时候得到变量里的值。

总结

由于时间的关系，对于JS和TS并没有经历太多深入地学习，不过我认为，编程这种技术就得从实战中学，在写代码的时候有需求，才会去进一步地了解，去深入。下一步，准备继续学习angular。

JavaScript TypeScript相关推荐

教你用Vue渐进式搭建聊天室，从JavaScript=TypeScript
前言 Vue+Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看): 纯前端(Vuex) 后端+前端(JavaScr ...
JavaScript = TypeScript 类入门
尝试重写在此之前,通过<JavaScript => TypeScript 入门>已经掌握了类型声明的写法.原以为凭着那一条无往不利的规则,就可以开开心心的重写 JS 项目了.当我跃 ...
GitHub免费提供机器学习扫描代码漏洞，现已支持JavaScript/TypeScript
晓查发自凹非寺量子位 | 公众号 QbitAI 今天,GitHub更新一项实验版新功能. 用上机器学习后,新版CodeQL代码扫描服务可以帮开发者发现更多安全漏洞. 目前在JavaScript和 ...
JavaScript TypeScript学习总结
本文章为web课学习JavaScript & TypeScript的学习总结 JavaScript & TypeScript学习总结 JavaScript JS介绍 JS基础标识符 ...
JavaScript/TypeScript/NodeJS实用编程工具集 - @jcstdio/jc-utils模块
JavaScript/TypeScript编程工具集 JavaScript/TypeScript/NodeJS实用工具模块作者:李俊才 (jcLee95):https://blog.csdn.net ...
JavaScript TypeScript学习总结
目录一. JavaScript 1.JavaScript简介 2.基本语法 2.1 大小写敏感 2.2 标识符 2.3 注释 2.4 语句 2.4 关键字.保留字 2.5 变量 2.6. 操作符 2 ...
Xlsx转Json(JS Object/Array) Javascript/Typescript版本
源起由于游戏策划异常偏爱用excel编写数据.很多数据可以用二维表的形式处理.但是还有一些数据更方便用树形结构存储.如果同时能也写在excel中,就可以方便双方的协作. 之前在网络上找到过一些xls ...
SPC Control Chart Tools for JavaScript/TypeScript
JS实现俄罗斯方块有声游戏Tetris Game JavaScript/TypeScript AudioContext
Tetris Game / 俄罗斯方块扫码体验 https://capricorncd.github.io/tetris/dist 游戏截图键盘操作 Left: ←, Right: →, Rota ...
什么是TypeScript？为什么我要用它代替JavaScript？ [关闭]
本文翻译自:What is TypeScript and why would I use it in place of JavaScript? [closed] Closed . 已关闭 . This ...

JavaScript TypeScript