【JavaScript &typescript学习报告】

JavaScript &typescript学习报告

一，JavaScript

1.JavaScript简介

• JavaScript也是对其样式的一些更深的理解，现在JavaScript再也不是简单的脚本语言了，无论前端还是后台，JavaScript都是很好的技术
  运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入.

2.基本操作语法

1.标识符

标识符与标签类似，但是有不同的地方。标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；其他字符可以是字母、下划线、美元符号或数字。按照惯例， 标识符采用 驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById。

• 代码实例：

var me = ‘你好’;
console.log(me);
me = 100;
console.log(me);

2.操作符

• 一元操作符 ++ --：就是自增++，减一 –

• 布尔操作符 && || ！
  除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN（无穷）
  &&和||都属于 短路操作！也就是逻辑逻辑操作算术操作符 + - * / %

• 代码实例：

• 关系操作符 <> <=>= == === != !==：就是比较的操作符，逻辑运算。
  

• 赋值操作符 = += -+ *= /= %=

  对其进行赋值。

3.语句

• if do-while while for for-in for-of break continue switch
  if 条件语句
  do-while while 则是循环语句
  for for-in for-of 这些都是遍历语句

• 代码部分实例：

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]);
}

4.函数

在编程语言里函数的定义都是差不多的，函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

• 代码实例：

function s(name, message) {
console.log('Hello ’ + name + ‘,’ + message);
}
s(‘乖乖’, ‘你好。’);//调用这个函数，写上实际参数

5.对象Object

对象 Object 是ECMAScript 中使用最多的一个类型。常将数据和方法封装在对象中。

• 代码实例（常用的代码实例）：

var person = {
name: ‘12345’,
age: 11,
job: ‘苦逼的敲键盘者’,
sayName: function(){ //这是函数
console.log(this.name);
}
};
console.log(person.job);
person.sayName();//跟函数类似，调用对象

6.数组Array

数组就是来保存数据的，可以是字符串，或者数字，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

• 代码实例:

var c = [‘x1’, ‘x2’, ‘x3’]; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = ‘x4’;
console.log(c.length);//字符长度
还有其他的数组方法，队列方法，反转数组项，链接方法，分片方法，splice方法等

7.链式语法

这是一种非常容易实现的模式。只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。this来指代函数对象。

• 代码实例：
  链式语法
  var niua = {//定义对象字面量

  catapult: function() {
  console.log( ‘放假吧’ );
  return this;//返回niua对象自身
  },
  destroy: function() {
  console.log( “*******” );
  return this;
  }
  };
  niua.catapult().destroy();

8.闭包

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

• 代码实例：

function hi(name) {
var text = 'Hello ’ + name; // local variable
return function() { console.log(text); }//匿名函数
}
var sayHello = hi(‘Closure’);
sayHello(); // 通过闭包访问到了局部变量text

二.TypeScript简介

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。

1.let 和 cons

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界

2.解构

将对象、数组中的元素拆分到指定变量中，以方便使用

3.函数

函数的类型可以有多种，比如使用完整函数类型定义，可选参数，默认参数，剩余参数，箭头函数。下面举例部分。

• 代码实例：

这是箭头函数，其特点是简化函数定义、解决this问题。

let g = () => TS;
console.log(g());
let g2 = (name: string) => Hello ${name};
console.log(g2(‘你好’));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
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;

}

console.log(add2(1, 2));

4.类class

类是属性和函数的集合，是生成对象（Object）或类实例的模板。
public即全局可访问，
protected即可在类的内部和其子类的内部可访问，
private，只能在该类内部可访问。

• 静态属性

类中的属性或函数有static修饰，则可直接使用而不需要实例化继承可以通过extends关键字继承其它类，从而成为其子类

5.模块Module

比如在写程序综合实践点的时候，桥梁管理，写的代码比较多，还有需要布置的东西较多，对稍微大型的程序，就可以使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。

三.总结

学习总结

学习了JavaScript还有typescript让我对前端有了一个更加深刻的认识，在学习的过程中比起前面的html,还有css稍微难度加大，但总体来说还是可以看懂的。这个应该是比较深的东西了，在实践的过程中感受到和前面的不一样，这个可以实现更多的样式，变化多样。这些都是基于前面的知识引申出来的，也是非常有用的东西。在今后的学习实践中应该是非常实用的东西。希望后续不断努力，不断地加深认识度。为今后的道路打好坚实的基础。