JS，TS学习总结

学习JS，TS的总结

一.概述

        黑马讲过前端三剑客html，css，js在网页对一只鸟的作用,其中js就赋予这只鸟动作，可以让它活。在学习完js后，我们就构建自己的动态网页。比如对一个表格的数据增删改查等。而作为原生js的超集，提供给我们更多的功能，让我们构建网站时，更加便捷。

 

二.JS的相关说明

       js是一门完全为浏览器而生的高级语言，也是脚本语言，可由所有的现代浏览器执行。我们主要用它来实现前后端数据交互，页面的改变等等。

三.js语法

1.变量取值

1.1数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

3.14

1001

123e5
1.2字符串（String）字面量 可以使用单引号或双引号:

"John Doe"

'John Doe'
1.3数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

1.4对象（Object）字面量 定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
1.5函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

2.变量

我们用 var 来定义变量，值就为上面几种。值得一提的是，在js中函数可以作为变量赋值。

还有，js的变量，类型不固定，可以前一秒是数组，下一秒赋值为字符串。但我们不建议这么做。

3.操作符

一元操作符++ --，布尔操作符&& || !

算术操作符+ - * / %

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

条件操作符? :

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

用法和c++,java等高级语言一样

4.函数

与c++,java等不同，js函数不需要确定参数类型

 function addStru(Tem) {
      console.log("Tem.num是"+Tem.num);
      if (Tem.num == undefined) {
        Tem["num"]=this.num;
        console.log(Tem);
      } else {
        Tem.num = this.num;
      }
    }

         js函数传进来的形参，是一个对象，但是我们需要知道传进来的对象是什么,再进行相关操作，如果操作的元素不存在，就会出bug。

还有一点就是， js函数传参方式是传地址（参数为引用数据类型），传值（参数为基本数据类型）

5.对象

创建方法：

直接new

var obj = new Object();

用花括号包键值对

var retData = {
        name: "",
        // bridgeType: {},
        typeId: "",
        upStructures: [],
        downStructures: [],
        deckStructures: [],
        province: "",
        city: "",
        region: "",
      }

 访问对象属性方法：

console.log(retData.city);

  添加对象属性方法：

 function addStru(Tem) {
      console.log("Tem.num是"+Tem.num);
      if (Tem.num == undefined) {
        Tem["num"]=this.num;//如果Tem没有 num属性，就添加
        console.log(Tem);
      } else {
        Tem.num = this.num;
      }
    }

6.数组

创建方法:

var shuzu1 = [];
var shuzu2 = ['1','1','1'];

元素的添加与弹出

shuzu1.push('2');//从后面压入元素
shuzu1.pop();//从后面弹出元素
shuzu1.shift();//从前面弹出元素

中间元素的删除

var tableData= [
        { id: 0, name: "漩涡鸣人(幼年)", fight: 20, level: "C", skill: [] },
        { id: 1, name: "宇智波佐助(幼年)", fight: 20, level: "C", skill: [] },
        { id: 2, name: "小樱(幼年)", fight: 20, level: "C", skill: [] },
        {
          id: 3,
          name: "卡卡西(青年)",
          fight: 100,
          level: "A",
          skill: [
            { name: "雷切", level: "S" },
            { name: "螺旋丸", level: "S" },
          ],
        },
        { id: 4, name: "宇智波佐助(博人传)", fight: 20, level: "D", skill: [] },
      ];
function deleteRenZhe(id) {
      var that = tableData;
      for (var i = 0; i < that.length; i++) {
        if (that[i].id == id) {//根据数组元素tableData[i]的id,找到元素在数组的下标
          that.splice(i, 1);//spice方法，从i开始，剪掉1个元素
        }
      }
      alert("成功删除");
    };

7.结构 

if…else语句

与c,java差不多。

for()循环

与c,java差不多。

while,do while

与c,java差不多。

break，continue

与c,java差不多

8.类

class ClassName{//RenZhe为类名
  constructor(){
      
  }//构造函数
    //属性
    .
    .
    .
    //函数
    .
    .
    .
}

四.TS的相关说明

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

五.TS的部分功能

由于ts是js的超集，所以这里不再写ts的基本语法，它与js的一样。

1.联合类型

//Type1|Type2|Type3 
var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)



//输出结果
数字为 12
字符串为 Runoob

 这里虽然和js差不多，有无联合类型都一样。但是

var val:string|number 
val = [{name:'1'}]//出错,val只接受string,number数据 

2.Map

初始化

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 
//以数组的形式来初始化

Map 相关的函数与属性：

• map.clear() – 移除 Map 对象的所有键/值对 。
• map.set() – 设置键值对，返回该 Map 对象。
• map.get() – 返回键对应的值，如果不存在，则返回 undefined。
• map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
• map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
• map.size – 返回 Map 对象键/值对的数量。
• map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
• map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

实例:

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

3.模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

此外还有有 SystemJs 和 Webpack。

实例

//IShape.ts代码文件
///  
export interface IShape { 
   draw(); 
}

//Triangle.ts 文件代码：
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}

这里其实和vue的import,export很像，我要用别人的，我就import，别人要用我，我就export

4.解构

将数组，对象里的元素，属性拆分出来，方便使用。

let tableData = [
        { id: 0, name: "漩涡鸣人(幼年)", fight: 20, level: "C", skill: [] },
        { id: 1, name: "宇智波佐助(幼年)", fight: 20, level: "C", skill: [] },
        { id: 2, name: "小樱(幼年)", fight: 20, level: "C", skill: [] },
        {
          id: 3,
          name: "卡卡西(青年)",
          fight: 100,
          level: "A",
          skill: [
            { name: "雷切", level: "S" },
            { name: "螺旋丸", level: "S" },
          ],
        },
        { id: 4, name: "宇智波佐助(博人传)", fight: 20, level: "D", skill: [] },
      ];

//解构数组
let [first, second] = tableData;//注意使用[]
console.log(first); // 一个对象  旋涡名人那个
console.log(second); // 又一个对象 佐助那个

          

以上就是我对JS,TS的一点总结,更多JS，TS信息请看菜鸟编程