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

JavaScript & TypeScript 学习总结

时间:2023-06-16 22:56:38浏览次数:59  
标签:总结 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声明的变量可......