首页 > 编程语言 >JavaScript & TypeScript 学习总结

JavaScript & TypeScript 学习总结

时间：2023-06-16 22:56:38浏览次数：60  
标签：总结 TypeScript console 函数 JavaScript let 变量 log

@

目录

JavaScript

JavaScript BOM对象

BOM（Browser Object Model）对象是指浏览器对象模型，它提供了与浏览器窗口进行交互的对象和方法。例如，window 对象就是 BOM 的一部分，它代表了浏览器窗口。

我们可以使用 window 对象来执行诸如打开新窗口、关闭当前窗口、调整窗口大小等简单操作。

// 打开一个新窗口
window.open('https://www.example.com');

// 关闭当前窗口
window.close();

// 调整窗口大小
window.resizeTo(800, 600);

复杂一点的如 onl oad ，window.onload 是一个事件处理程序属性，它用于指定当页面加载完成后要执行的函数。当浏览器加载完页面中的所有资源（包括图片、脚本文件和样式表等）后，就会触发 load 事件，此时 window.onload 指定的函数会被调用。

window.onload = function() {
    console.log('俺已加载成功！开始今天的js学习吧');
}

在上面的示例中，我们将一个匿名函数（下文会讲到匿名函数）赋值给 window.onload 属性。当页面加载完成后，该匿名函数会被调用。

  • 需要注意的是，由于 window.onload 只能指定一个函数，所以如果多次赋值，后面的赋值会覆盖前面的赋值。如果需要为 load 事件添加多个处理程序，可以使用 addEventListener() 方法。

除了window对象，BOM还包括其他一些对象，如screen、location、history和navigator等。这些对象提供了更多与浏览器窗口进行交互的方法。

JavaScript Document对象

Document 对象是指文档对象模型（DOM）中的一个对象，它代表了整个 HTML 文档。我们可以使用Document 对象来获取和操作页面中的元素。

例如，我们可以使用 getElementById 方法来获取页面中具有特定ID的元素。然后，我们可以使用该元素的属性和方法来改变它的内容、样式或行为。

// 获取页面中的元素
let element = document.getElementById('myElement');

// 改变元素的内容
element.innerHTML = 'New content';

// 改变元素的样式
element.style.color = 'red';

// 为元素添加事件监听器
element.addEventListener('click', function() {
    // 在这里添加点击元素时要执行的代码
});

除了 getElementById 方法，Document 对象还提供了其他一些方法，用于获取页面中的元素。例如，我们可以使用 getElementsByTagName 方法来获取页面中所有具有特定标签名的元素。

// 获取页面中所有的 select 元素
let selects = document.getElementsByTagName('select');

// 遍历所有的 select 元素
for (let i = 0; i < selects.length; i++) {
    let select = selects[i];
}

JavaScript 事件处理

JavaScript允许我们在页面中添加事件监听器，以便在特定事件发生时执行特定的代码。例如，我们可以在按钮上添加一个点击事件监听器，当用户点击按钮时执行某些操作。

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    // 在这里添加点击按钮时要执行的代码
});

除了点击事件之外，JavaScript还支持许多其他类型的事件，如鼠标移动、键盘按键、表单提交等。我们可以根据需要为页面中的元素添加不同类型的事件监听器。

JavaScript变量

在JavaScript中，我们使用变量来存储数据。变量可以存储不同类型的数据，如字符串、数字、布尔值等。

let myString = 'Hello, World!';
let myNumber = 3.14;
let myBoolean = true;

var String = 'Hello, World!';
var Number = 3.14;
var Boolean = true;

在定义变量时，我们需要使用关键字（如let或var）来声明变量，并为其分配一个初始值。此后，我们可以在代码中使用该变量，并根据需要更改其值。

  • 对于JavaScript，有且仅有两个关键字（let和var）来声明变量，下面介绍一下二者的区别。
    其实最主要的区别在于它们的作用域。var 声明的变量具有函数作用域，这意味着它们在整个函数内都是可见的，甚至在声明之前就可以访问它们。而 let 声明的变量具有块作用域，这意味着它们只在最近的一对花括号（即代码块）内可见。
  • 简单示例演示 let 和 var 的区别：
function example() {
    var x = 1;
    let y = 2;

    if (true) {
        var x = 3;
        let y = 4;

        console.log(x); // 输出3
        console.log(y); // 输出4
    }

    console.log(x); // 输出3
    console.log(y); // 输出2
}

example();

在上面的示例中，我们在函数内部使用 var 声明了一个名为 x 的变量，并使用 let 声明了一个名为 y 的变量。然后，在 if 语句的代码块内，我们再次声明了这两个变量。

由于 var 声明的变量具有函数作用域，所以在代码块内部声明的 x 变量会覆盖函数内部声明的 x 变量。而由于 let 声明的变量具有块作用域，所以在代码块内部声明的 y 变量不会影响函数内部声明的 y 变量。

因此，在代码块内部，x 的值为 3，而 y 的值为 4。而在代码块外部，x 的值仍然为 3（因为它被覆盖了），而 y 的值仍然为 2。

除了作用域之外，let 和 var 还有一些其他区别。例如，使用 let 声明的变量不能在声明之前访问（会抛出错误），而使用 var 声明的变量则可以（但值为 undefined）。此外，在同一作用域内，不能多次使用 let 声明同一个变量，而使用 var 则可以。

总之，由于 let 提供了更好的作用域控制和更严格的语法限制，所以建议尽可能使用 let 来声明变量。

JavaScript函数基础

函数是一段可以被重复调用的代码块。我们可以定义一个函数，并在需要时调用它。

function hello(name) {
    console.log('Hello, ' + name + '!');
}

sayHello('Alice');
sayHello('Bob');

在定义函数时，我们需要指定函数名称和参数列表。然后，在函数体内编写要执行的代码。当调用函数时，我们需要传递适当数量和类型的参数。

除了普通函数之外，JavaScript还支持匿名函数和箭头函数等其他类型的函数。

  • 匿名函数

匿名函数是一种没有名称的函数。它通常用作回调函数或立即执行函数。

下面是一个简单的匿名函数示例，演示如何使用匿名函数作为回调函数：

functionTest(function() {
    console.log('Hello, World!');
}, 1000);

在上面的示例中，我们将一个匿名函数作为第一个参数传递给 functionTest函数。该匿名函数在 1000 毫秒后被调用，并在控制台输出 Hello, World!。

同样，匿名函数还可以用作立即执行函数。下面是一个简单的立即执行函数示例：

(function() {
    console.log('Hello, World!');
})();

在上面的示例中，我们定义了一个匿名函数，并立即调用它。该匿名函数被调用后，会立即输出 Hello, World!。

  • 箭头函数
let btn = document.getElementById('myBtn');
    btn.addEventListener('click', () => {
        alert('连接成功！');
    })

在上面的示例中，我们演示了如何使用箭头函数来定义事件处理程序。首先，为 myBtn 按钮添加了一个点击事件，然后使用箭头函数语法为该事件定义了一个回调函数。当用户点击按钮时，该回调函数会被调用。

同时，箭头函数有几个特点，如：

  • 它不能绑定自己的 this 值，而是继承外部作用域的 this 值。
  • 它不能用作构造函数，也就是说不能使用 new 关键字来调用它。
  • 它没有自己的 arguments 对象，而是访问外部作用域的 arguments 对象。

JavaScript流程控制

流程控制语句允许我们根据特定条件执行特定的代码块。例如，我们可以使用if...else语句来根据条件执行不同的代码。

let number = 3;

if (number > 0) {
    console.log('正数');
} else {
    console.log('非正数');
}

除了if...else语句之外，JavaScript还提供了其他一些流程控制语句，如switch、for和while等。这些语句允许我们更灵活地控制代码的执行流程。

JavaScript数据类型

JavaScript有几种基本数据类型，包括字符串、数字、布尔值、null和undefined。此外，还有一些复合（引用）数据类型，如数组和对象。

let myString = 'Hello, World!';
let myNumber = 3.14;
let myBoolean = true;
let myNull = null;
let myUndefined = undefined;

let myArray = [1, 2, 3];
let myObject = {name: 'GG Bond', age: 19};

不同数据类型具有不同的特征和用途。例如，字符串用于存储文本数据，数字用于存储数值数据，布尔值用于存储真/假值等。

JavaScript数组

数组是一种用于存储多个值的数据结构。我们可以使用数组来存储一组相关的数据，并使用索引来访问其中的每个元素。

let myArray = [1, 2, 3];

console.log(myArray[0]); // 输出1
console.log(myArray[1]); // 输出2
console.log(myArray[2]); // 输出3

除了使用索引来访问数组元素之外，我们还可以使用数组的方法来操作数组。例如，我们可以使用push方法向数组末尾添加新元素，或使用splice方法从数组中删除元素等。

JavaScript运算符

JavaScript提供了许多运算符，用于执行各种计算。例如，我们可以使用算术运算符来执行基本的数学运算。

let x = 3;
let y = 4;

console.log(x + y); // 输出7
console.log(x - y); // 输出-1
console.log(x * y); // 输出12
console.log(x / y); // 输出0.75

当然，JavaScript还提供了其他一些运算符，如比较运算符、逻辑运算符和赋值运算符等。这些运算符允许我们执行更复杂的计算。

JavaScript正则表达式

正则表达式是一种用于匹配字符串模式的工具。我们可以使用正则表达式来验证输入、搜索和替换文本等。

let pattern = /hello/;
let text = 'Hello, World!';

console.log(pattern.test(text)); // 输出true

在定义正则表达式时，我们需要使用特殊的语法来描述要匹配的模式。然后，我们可以使用正则表达式对象的方法（如test和exec）来执行匹配操作。

let pattern = /hello/;
let text = 'Hello, World!';

// 使用 test 方法检查文本是否与模式匹配
let result = pattern.test(text);
console.log(result); // 输出 true

// 使用 exec 方法在文本中搜索模式
result = pattern.exec(text);
console.log(result); // 输出 ["hello", index: 0, input: "Hello, World!", groups: undefined]

JavaScript字符串函数

JavaScript提供了许多字符串函数，用于处理字符串。例如，我们可以使用 toUpperCase 函数将字符串转换为大写。

let text = 'Hello, World!';

console.log(text.toUpperCase()); // 输出HELLO, WORLD!

除此之外，JavaScript 还提供了其他一些字符串函数，如 toLowerCase 、charAt 和 substring 等。这些函数允许我们更灵活地处理字符串数据。

TypeScript简单示例

TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的超集。TypeScript 添加了类型系统和其他功能，使我们能够更好地组织和维护大型代码库。

与 JavaScript 类似，TypeScript 也包括变量、函数、流程控制、数据类型、数组、运算符、正则表达式和字符串函数等概念。此外，TypeScript 还提供了一些额外的功能，如接口、类和模块等。

下面是一个简单的 TypeScript 示例，演示了如何使用接口来定义类型：

interface Person {
    name: string;
    age: number;
}

function hello(person: Person) {
    console.log('Hello, ' + person.name + '!');
}

let lhf: Person = {name: 'lhf', age: 19};

hello(lhf);

在上面的示例中，我们定义了一个 Person 接口，用于描述人的类型。然后，我们定义了一个 hello 函数，它接受一个 Person 类型的参数。最后，我们创建了一个 Person 类型的变量，并调用了 hello 函数。

同时 TypeScript 还支持类和模块等其他高级功能，这些功能使我们能够更好地组织和维护大型代码库。因此 TypeScript 还是非常值得我们学习的。

标签：总结,TypeScript,console,函数,JavaScript,let,变量,log
From： https://www.cnblogs.com/idk-lhf28/p/17486647.html

相关文章

  • 网安--信息收集总结
    goby环境下载1、下载Npcap数据捕获包2、下载goby信息收集总结已有：资产范围如果只有名称，先找到官网的域名域名--子域名--ip针对子域名：进行目录、端口扫描重点：寻找到真实ip：进行目录、端口扫描、查找每个网站中可能存在的漏洞 ......
  • 简单总结最近力扣所刷的题
    下面的题目是最近我在力扣上面刷了每日一题之后所做的总结。题目一比较字符串最小字母出现频次定义一个函数 f(s)，统计 s  中（按字典序比较）最小字母的出现频次 ，其中 s 是一个非空字符串。例如，若 s="dcce"，那么 f(s)=2，因为字典序最小字母是 "c"，它出现了 2次。现在，给你......
  • javaScript核心知识点
      一、JavaScript简介       一、JavaScript语言的介绍：JavaScript是基于对象和原型的一种动态、弱类型的脚本语言       二、JavaScript语言的组成：JavaScript是由核心语法(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)组成的       三......
  • SSM三层架构流程总结
    1.搭环境webapp\WEB-INF\web.xmlpom里面激活webapp<packaging>war</packaging>将pom坐标复制web.xml复制进去配置文件resources目录引入applicationContext.xmljdbc.propertieslog4j.propertiesspring-mvc.xml2.创建实体类层com.msr.bean实体类.class命名规则......
  • Chrome 禁用 javascript
    步骤1.打开控制台：右键>检查2.在控制台页面快捷键ctrl+shift+p然后输入javascript找到disabledjavaScript.解除禁用： ctrl+shift+p然后输入enablejavaScript找到enablejavaScrip. ......
  • 迭代器与生成器总结
    参考《JavaScript高级程序设计》迭代是一种所有编程语言中都可以看到的模式。ECMAScript6正式支持迭代模式并引入了两个新的语言特性：迭代器和生成器。迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现Iterable接口的对象都有一个Symbol.iterato......
  • k8s 梳理及使用总结
    ---1.Kubernetes概述1.最初Google开发了1个叫Borg的系统（现在命名为Omega），来调度近20多亿个容器从2014年第1个版本发布以来，迅速得到了开源社区的追捧，?前，k8s已经成为了发展最快、市场占有率最高的容器编排引擎产品。---2.特点轻量级，资源消耗小开源弹性伸缩负载均衡IPVS---3......
  • 7个必备JavaScript优化技巧，CodeGeeX 5秒搞定了！
    JavaScript，目前成了使用最广泛的编程语言。这篇文章给出的是一些JavaScript的优化技巧，这些技巧帮助开发者编写出更好的代码。当写完这些代码段之后，我突然意识到，所有的这些代码段，由于它们的常用性，非常适合用AI辅助编程工具CodeGeeX来自动生成。下载使用——CodeGeeX插件，在VSCode......
  • JavaScript 数组展平方法： flat() 和 flatMap()
    JavaScript数组展平方法：flat()和flatMap()从ES2019中开始引入了一种扁平化数组的新方法，可以展平任何深度的数组。flatflat()方法创建一个新数组，其中所有子数组元素以递归方式连接到特定深度。语法：array.flat(depth)array：flat()方法将在给定的数组中使用。depth......
  • JavaScript 变量和数据类型
    JavaScript变量和数据类型变量在JavaScript中，变量用于存储和操作数据。声明一个变量需要使用关键字var、let或const。1.使用var声明变量varname='John';varage=28;var关键字可以被同一作用域内的其他代码访问到，而不受块级作用域的限制。var声明的变量可......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99