JavaScript & TypeScript总结【作业】

于 2022-07-10 11:39:29 发布
阅读量153 收藏
点赞数
文章标签： javascript typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53090745/article/details/125702614
版权

JavaScript

JavaScript简介

JavaScript 是 Web 的编程语言，所有现代的 HTML 页面都可以使用 JavaScript，JavaScript 简单易学,且应用很广。

用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head>
<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

函数和事件

JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

基本语法

  • 大小写敏感
  • 标识符
  • 所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符: 第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一； 其他字符可以是字母、下划线、美元符号或数字。 按照惯例，ECMAScript（European Computer Manufacturers Association） 标识符采用 驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById
    语句后的分号建议添加，但不必须。
  • ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。 定义变量时要使用 var 操作符，后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。

操作符

  • 一元操作符( ++、 --）
  • 布尔操作符(&&、||、!)
  • 除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN
  • 算术操作符(+ - * / %)
  • 关系操作符(<> 、<=、>= 、、= != 、!==)
  • 注意: ===称为全等（值和类型）。
  • 条件操作符
 var num1 = 11;
    var num2 = 22;
    var max = (num1 > num2) ? num1 : num2;
    console.log(max);
  • 语句
    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);
  • 函数
    函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。以下是一个函数示例：
function sayHi(name, message) {
    console.log('Hello ' + name + ',' + message);
}
sayHi('YHD', '你好。');
  • 对象
    对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
//方式一new
    var person1 = new Object();//生成空对象
    person1.name = 'Elon Musk';//设置对象的属性
    person1.age = 46;
    person1.job = 'SpaceX Rocket';
    person1.sayName = function () {    //设置对象的方法/函数，注意此处
        console.log(this.name);
    };
    //方式二字面量
    var person2 = {
        name: 'Lary Page',
        age: 47,
        job: 'Software Engineer',
        sayName: function () {        //注意此处
            console.log(this.name);
        }
    };
    console.log(person1.job);
    person1.sayName();
    console.log(person2.job);
    person2.sayName();
  • 数组
    数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。
    创建方法：
//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);
  • 闭包
    可以理解成一个函数内的内部函数，它被创建在一个函数内部，引用这其外部函数的变量值。
var a = function(){
 varx = 1;
 return function(y){
​     console.log(x+=y);//外部函数的x值就被包裹在引用对象中
 }
}
var b = a();//实际上是返回function(y){...}的引用

b();//执行上面的引用，此时的x值变成了private的属性
  • 数组方法
    join()：用指定的分隔符将数组每一项拼接为字符串
    push()：向数组的末尾添加新元素
    pop()：删除数组的最后一项
    unshift()：向数组首位添加新元素
    shift()：删除数组的第一项
    slice()：按照条件查找出其中的部分元素
    splice()：对数组进行增删改
    filter()：过滤功能
    concat()：用于连接两个或多个数组
    indexOf()：检测当前值在数组中第一次出现的位置索引
    lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
    every()：判断数组中每一项都是否满足条件
    some()：判断数组中是否存在满足条件的项
    includes()：判断一个数组是否包含一个指定的值
    sort()：对数组的元素进行排序
    reverse()：对数组进行倒序
    forEach()：es5及以下循环遍历数组每一项
    map()：es6循环遍历数组每一项
    find()：返回匹配的项
    findIndex()：返回匹配位置的索引
    reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
    reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
    toLocaleString()、toString()：将数组转换为字符串
    entries()、keys()、values()：遍历数组

TypeScript

简介

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

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

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

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

数据类型

布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null 和 undefined（是never 数据类型的子类型）
void 类型
never 类型：
a. 表示的是那些永不存在的值的类型，never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never 类型（除了never本身之外）。 即使 any也不可以赋值给never。
b. 是其他类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
c. 返回never的函数必须存在无法达到的终点

函数

函数声明：

function run():string{
  return 'run'
}

匿名函数法：

let fun2=function():number{
  return 2;
}
alert(fun2());

let getInfo1=function (name:string,age:number):string {
    return `${name}--${age}`
}
alert(getInfo1('zhangdan',3434))

没有返回值

function getInfo3(name:string,age:number):void {
    console.log(`${name}--${age}`) 
}
getInfo3('lixiaolong',3434)

函数重载：

function getInfo6(names:string):string;
function getInfo6(age:number):string;
function getInfo6(str:any):any{
    if (typeof str==='string') {
        return names
    }else{
        return str
    }
};
alert(getInfo6(20))

箭头函数：

setTimeout(() => {
    alert(3333)
}, 1000);

类

// 通过class创建类
class Animal {
    // 类的属性
    name: string;
    // 类的构造器
    constructor(name: string) {
        this.name = name;
    }
    // 类的方法
    sayHello():void{
        alert("hello animal:"+this.name);
    }
}
// 实例化类
var tom = new Animal("tom");
tom.sayHello();

类的继承

// 通过class创建类
class Animal {
    // 类的属性
    name: string;

    // 类的构造器
    constructor(name: string) {
        this.name = name;
    }

    // 类的方法
    sayHello(): void {
        alert("hello animal:" + this.name);
    }
}

// 继承Animal
class Cat extends Animal {
    // 重写方法
    sayHello(): void {
        alert("hello cat:" + this.name);
    }
}

class Dog extends Animal {
    sayHello(): void {
        alert("hello dog:" + this.name);
    }
}

修饰符

class Animal {
   private name: string; // 这里把name修饰符改为private

   constructor(name: string) {
       this.name = name;
   }

   sayHello(): void {
       alert("hello animal:" + this.name);
   }
}

class Cat extends Animal {
   sayHello(): void {
       alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
   }
}

class Dog extends Animal {
   sayHello(): void {
       alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
   }
}

Get/Set访问器

class Animal {
    private name: string;

    get name(): string { //通过get和set解决子类不能引用父类private修饰的属性的问题
        return this.name;
    }

    set name(name: string) {
        this.name = name;
    }

    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    sayHello(): void {
        alert("hello cat:" + this.name); 
    }
}

class Dog extends Animal {
    sayHello(): void {
        alert("hello dog:" + this.name); 
    }
}

静态属性

class Table {
    static width: Number = 100;
    static height: Number = 50
}
var width: Number = Table.width;

继承

可以通过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();

模块Module

对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。
在项目文件夹下新建目录modules和文件main.ts，并在modules下新建name.ts和weather.ts文件，如下：
modules/name.ts

export class Name { //用export对外部暴露该类
  constructor(private first: string, private second: string) {}
  get nameMessage() {
    return `Hello ${this.first} ${this.second}`;
  }
}

modules/weather.ts

export class WeatherLocation { //用export对外部暴露该类
  constructor(private weather: string, private city:string) {}
  get weatherMessage() {
    return `It is ${this.weather} in ${this.city}`;
  }
}

main.ts

//用import从外部模块文件导入，默认后缀.ts去掉
import { Name } from "./modules/name";
import { WeatherLocation } from "./modules/weather";

let name = new Name('Wang', 'Yong');
let loc = new WeatherLocation('raining', 'ChongQing');

console.log(name.nameMessage);
console.log(loc.weatherMessage);

在这里插入图片描述

曦曦ya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react+typescript课后作业
qq_40289624的博客
04-20 125
通过该项目，请简要说明 typescript 比 javascript 的优势在哪？ 静态输入 静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。 大型的开发项目 有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。 更好的协作 当发
JavaScript & TypeScript总结
SS_SS_SSS_SSS的博客
06-25 851
JavaScript初学总结
TypeScript作业
weixin_34296641的博客
04-03 141
题目： 了解神话故事盘古开天辟地或者女娲开世造物，通过typescript程序模拟出天地的变化过程或者万物的衍生过程 参考博客园大神： https://www.cnblogs.com/tansm/p/TypeScript_Handbook.html https://www.runoob.com/w3cnote/getting-started-with-typescript.h...
TypeScript中的继承经典作业
可小辉的博客
02-07 332
要求： 定义 抽象类图形 Shape 抽象方法： 边长 面积 子类 Circle 圆 继承图形 ...
javascript基本语法
Primary_Insist的博客
11-12 1400
一、变量 是程序在内存中申请的一块用来存放数据的空间 变量的连续声明 var a=b=c=9; 实际是：var a=b; b=c; c=9; 也可以写成var a=9;b=9;c=9; 使用var之后，计算机会自动为变量分配内存空间 1.声明变量 2.赋值 变量的初始化： 声明的同时赋值 var age; //声明一个名称是age的变量 //age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间 age = 18; //...
Swipe轮播插件的使用
aurora
10-08 972
Swiper轮播插件的使用一、入门Swiper插件1.1 swiper插件的下载1.2 swiper插件的具体应用使用步骤：二、快速学习Swiper API2.1 Swiper初始化三、常用Swiper API（可以说就是配置选项）3.1 Basic一般选项3.2 Free Mode（抵抗反弹）3.3 Effect切换效果3.4 Click点击3.5 pagination 分页器3.6 Loop 环路四、特别提醒以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。 一、入门Swiper插件 1
平衡：RPG，使用Phaser在Typescript中制作的类似Rogue的游戏
02-04
3. **Typescript**：TypeScript是JavaScript的一个超集，它引入了静态类型和强类型系统，为大型复杂项目提供了更好的可维护性和开发效率。在Phaser中使用TypeScript，可以提高代码质量和可读性，减少错误，并提供更...
TypeScript 入门看这一篇就够了！
张旭乾 - 全栈工程师/海归
06-09 1680
目录这里写目录标题简介什么是 TypeScript为什么用 TypeScript编写和运行 TS 代码Node TSCDenotsconfig.json基本语法基本类型隐式显式组合类型类型别名对象类型(interface)接口作为函数参数类型数组类型泛型tuple（元组）总结 简介 我第一次使用 TypeScript 是16年在读研的时候，学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言，没想到还能这么通用。后来在写作业的时候，发现 Ty
NQueens:该项目旨在将Prolog主题作为课程作业
03-27
在NQueens项目中，使用TypeScript作为实现语言，TypeScript是JavaScript的一个超集，提供了静态类型、类和接口等特性，增强了代码的可维护性和可读性。在处理复杂的算法如NQueens时，TypeScript的强类型系统可以帮助...
第四天作业视频讲解.7z
07-05
4. 可能还包括相关的源代码文件：学员可以参考和学习的示例代码，可能是用JavaScript、TypeScript、Python或其他编程语言编写。 5. 文档或笔记：可能包含PPT、PDF或Markdown格式的讲义，总结关键知识点，提供额外的...
JavaScript基础学习——HTML5 API
qq_41890177的博客
03-15 310
一、媒体操作 1、audio（音频） 支持的音频格式：.mp3/.ogg/.webm 标签常用属性： autoplay autoplay 自动播放（IE9以下不支持，IE可以支持自动播放，谷歌有些版本不支持自动播放） controls controls 控制条 loop loop 循环 preload preload 预加载（设置autoplay时，preload失效） src url ...
Javascript的基本语法
weixin_30730151的博客
01-07 117
Javascript的基本语法 　　Javascript的基本语法要求有哪些呢？下面我为大家一一进行介绍： 1.javascript的执行顺序 　　按照在HTML文件中的顺序来依次执行。 2.区分大小写 　　javascript区分字符大小写，两个字符串相同大小写不同，会被认为不同的字符串。另外javascript的关键字也区分大小写，要严格按照语法要求来写。 3.书写格式 　　ja...
JavaScript详细知识点总结1
wangkingpeng的博客
10-15 455
js基础 Javascript是一门面向对象的，跨平台的脚本语言 变量 声明 变量命名见名知义，驼峰命名，不要跟关键字冲突 var str = 'hello' var userName = 'zhangsan' 类型 js本身是弱类型，但是计算机内部还是会区分每一种数据类型 五（六）种基本数据类型：number、string、boolean、undefined、null、（symbol） 两种引用类型：object、function 一个关键字 typeof typeof返回有六种
js-5秒之后跳转页面
qq_41670147的博客
12-03 1719
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
来做做这 48 道 TypeScript 练习题
CSDN for recording problems
03-27 6531
下面所有题目来源于阿宝哥的 awesome-typescript 开源项目，可以点个star😁。 🍔前言 根据以下题目解题中你可以学习了解到并应用的知识点有： 泛型应用 联合类型、交叉类型使用 函数重载 元组 extends分布式条件类型、约束 in关键字 as断言 keyof关键字 infer关键字 -?操作符 -readonly 删除只读符号 循环遍历中属性值类型为never会被省略 [number]获取所有数组类型索引值 与any交叉类型时的情况
JavaScript框架篇——SWIPER
weixin_45273807的博客
08-26 578
什么是swiper? Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 如何使用swiper 引入swiper对应的css和js文件 按照框架的需求搭建三层结构 创建一个Swiper对象, 将容器元素传递给它 <div ...
<javascript>简介和基本语法
SoarFly0807的博客
08-13 1114
一、js简介 1、js是什么 2、js作用 3、组成 4、引入方式 二、基本语法 1、变量 2、原始数据类型 3、引入数据类型 4、运算符 5、逻辑语句
JavaScript 网页编程（一）——JavaScript 基础语法
Lyrelion的博客
03-22 2121
一.计算机编程基础 1.计算机语言分类 机器语言，汇编语言，高级语言。 ①机器语言：计算机最终所执行的都是 01机器语言。 ②汇编语言：和机器语言实质相同，直接对硬件操作，但更好记。 2.翻译器 高级语言程序不能直接被计算机识别，必须经过转换，需要翻译器：将源代码转换为机器语言，也称二进制化。 3.编程语言和标记语言的区别 编程语言是主动的，有很强的逻辑性。 标记语言不向计算机...
Bootstrap响应式Web开发（二）
小王的博客
07-27 1348
HTML5 常用API、移动端常用事件与常用插件
JavaScript与TypeScript中class的深度解析
总结，`class`语法在JavaScript和TypeScript中提供了更接近传统面向对象编程的体验，帮助开发者更好地组织代码，实现继承、封装和多态。在TypeScript中，还可以利用静态类型系统来定义抽象类和抽象方法，增强代码的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值