JavaScript和TypeScript学习总结

目录

一、基本语法

二.变量 

三.操作符

四.语句

五.函数

六.object

七.类class

八.Typescript是什么

九.模块Module

---

一、基本语法

现在JavaScript再也不是简单的脚本语言了，无论前端还是后台，可以毫不夸张的说，JavaScript都有良好的表现！

运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入。

1.大小写

       js对于大小写是十分敏感的对不不同的大小写有着不同的涵义；

2.标识符

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

3.注释

  对于注释最好加在一些关键性的逻辑性比较强的语句后，以免后期出现自己的代码看不懂的情况。

4.语句

  语句后的分号可以添加，但不是必要的。 

二.变量 

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

代码如下（示例）：

<script>
  // x 符号代表了 5 这个数值
  let x = 1;
  // y 符号代表了 6 这个数值
  let y = 2;
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！

  // 将用户输入的内容保存在 num 这个变量（容器）中
  let num = prompt('请输入一数字!');

  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num);
  document.write(num);
</script>

 变量的本质就是,在内存中开辟了一个空间,用来储存数据,他本身不是数据,而是装载数据的一个容器.

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字,但是随着前端技术的不断更迭,let更加严格一些,所以我们这里推荐使用let关键字。

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age;
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18;
    // 这样 age 的值就成了 18
    document.write(age);
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!';
    alert(str);
  </script>

关键字补充：

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨。

三.操作符

除下列值为假外其余皆为真： false、null、undefined、''、0、NaN

&&和||都属于 短路操作！

• 一元操作符 ++ --

• 布尔操作符 && || ！

• 算术操作符 + - * / %

• 关系操作符 <> <=>= == === != !== （其中===为全等，类型与数值皆相同）

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

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

四.语句

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

五.函数

JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。

1.声明方式：严格意义上两种方式，但还有匿名函数

• 方式一：
  function 方法名()
• 方式二：ES6中声明方式箭头函数，()=>{} 
• 方式三：匿名函数，将函数存到变量里 var func = function(){};

2.函数调用：两种方式调用

• 调用方式一：名字(); 函数可以多次调用
  //函数声明
  function fn(){
      console.log(1);
  }
  //函数的调用
  fn();

• 调用方式二：在事件中调用，直接写函数名，不使用括号

  //函数声明
  function fn(){
      console.log(1);
  }
   
  //函数在事件中的调用
  document.onclick = fn    

3.函数传参获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱。

   形参：形式上的参数——给函数声明一个参数；

   实参：实际的参数——在函数调用时给形参赋的值

4.修改input的值
value和innerHTML都可以用来获取和修改元素的值（或内容）；value只能获取特定的textarea和input的值，但是innerHTML可以获取所有HMTL元素的值。

不同之处如下：
1）value可以用来修改（获取）textarea和input的value属性的值或元素的内容；
2）innerHTML用来修改（获取）HTML元素（如div）html格式的内容。
 

六.object

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

创建对象有如下两种方式，我们常用第二种。

//方式一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();

虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：

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');

七.类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，只能在该类内部可访问。

八.Typescript是什么

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

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

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

九.模块Module

对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。

在项目文件夹下新建目录modules和文件main.ts，并在modules下新建name.ts和weather.ts文件。