| JavaScript & TypeScript 学习总结 | 您所在的位置：网站首页 › divide用法总结 › JavaScript & TypeScript 学习总结 |
|
JavaScript & TypeScript 学习总结 一、基本语法JavaScript（简称JS）和TypeScript（简称TS）都是基于ECMAScript标准的编程语言。它们共享许多相似的基本语法，包括变量声明、条件语句、循环语句等。以下是一些基本语法示例： 1.变量声明在JavaScript中，可以使用var、let或const关键字声明变量： var：使用var关键字声明的变量是函数作用域的，在声明的函数内部可见。如果在函数内部没有使用var关键字声明变量，则该变量会成为全局变量，可被函数内外访问。 let：使用let关键字声明的变量是块级作用域的，在声明的代码块内可见。不同于var，在相同的作用域内，let不允许重复声明同一个变量，而是会报错。 const：使用const关键字声明的变量也是块级作用域的，与let类似，不同的是const声明的变量是常量，一旦被赋值之后就不能再修改其值。 var text= '你好'; let count = 5; const PI = 10; var text= '你好'; let count = 5; const PI = 10;TypeScript引入了类型注解，可以使用特定类型来声明变量： let text: string = '你好'; let count: number = 5; const PI: number = 10; 2.操作符JavaScript和TypeScript支持各种操作符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符（三元运算符）。 let sum = 10 + 5;//算数运算符 //赋值运算符 let num = 10; num += 5; //比较运算符 let age = 20; console.log(age > 18); // true //逻辑运算符 let isTrue = true && false; // false，逻辑与运算符需要所有的操作数都为true才返回true let isFalse = true || false; // true，逻辑或运算符只需要一个操作数为true就返回true 条件运算符（三元运算符） let num = 10; let result = num > 5 ? '大于5' : '小于或等于5'; console.log(result); // '大于5' 3.各种语句JavaScript和TypeScript中常见的语句包括条件语句（if语句）、循环语句（for循环、while循环）、switch语句和跳转语句（break语句、continue语句和return语句）等。 条件语句（if语句）：用于根据条件执行不同的代码块。 let num = 10; if (num > 0) { console.log('大于0'); } else if (num console.log('0'); }循环语句（for循环、while循环）：用于重复执行一段代码块。 // for循环 for (let i = 0; i console.log(num); num++; }switch语句：用于根据表达式的值选择要执行的代码块。 let num = 2; switch (num) { case 1: console.log('数字是1'); break; case 2: console.log('数字是2'); break; default: console.log('其他数字'); }跳转语句：用于改变程序执行的流程。 break语句：用于跳出循环或switch语句。 continue语句：用于跳过当前循环中的剩余代码，继续执行下一次循环。 return语句：用于结束函数的执行，并返回一个值。 4.函数在JavaScript中，可以使用function关键字定义函数，函数内部使用return语句返回值。函数可以接受参数，并在函数体内进行逻辑处理。 function hello(name) { return 'Hello, ' + name + '!'; }let message = hello(‘KANGKANG’); console.log(message); // 输出：Hello, KANGKANG! 在TypeScript中，可以使用类型注解来指定函数的参数类型和返回类型。类型注解可以提供类型检查和代码提示。函数的参数和返回值可以显式指定类型。 function hello(name: string): string { return 'Hello, ' + name + '!'; }let message: string = hello(‘KANGKANG’); console.log(message); // 输出：Hello, KANGKANG! 除了常规函数定义之外，JavaScript和TypeScript还支持箭头函数和匿名函数。箭头函数是一种更简洁的函数写法，并且自动绑定了this关键字。匿名函数是指没有名字的函数，可以赋值给变量或作为参数传递给其他函数。 // 箭头函数 const add = (a, b) => { return a + b; }; // 匿名函数 const greet = function(name) { return 'Hello, ' + name + '!'; };函数是一种重要的代码组织和复用工具，可以将一段代码封装成一个独立的功能单元，并在需要的地方进行调用。函数可以提高代码的可读性、可维护性和复用性，是编程中常用的技术手段之一。 5.对象JavaScript和TypeScript都支持对象的创建和访问。 在JavaScript中，可以使用字面量语法（{}）创建对象，并使用.或[]操作符访问对象的属性。 使用.操作符可以直接访问对象的属性，属性名必须是一个合法的标识符。 使用[]操作符可以通过属性名的字符串形式访问对象的属性，属性名可以是任意字符串。 let person = { name: 'KANGKANG', age: 18, address: { city: 'Chongqing', country: 'China' } }; console.log(person.name); // 输出：KANGKANG console.log(person['age']); // 输出：18 console.log(person.address.city); // 输出：Chongqing在TypeScript中，可以使用接口（Interface）来定义对象的类型和属性。 接口定义了对象应具有的属性名称和类型。 创建的对象必须符合接口所定义的类型要求。 interface Person { name: string; age: number; address: { city: string; country: string; }; } let person: Person = { name: 'KANGKANG', age: 18, address: { city: 'Chongqing', country: 'China' } };对象是一种复合数据类型，用于存储和组织相关的数据。对象的属性可以是基本类型、对象类型或函数类型，可以通过点运算符或方括号来访问和修改对象的属性。对象在JavaScript和TypeScript中都是重要的概念，常用于表示现实世界中的实体和进行数据的管理与操作。 5.数组JavaScript和TypeScript都支持数组的创建和操作。 在JavaScript中，可以使用字面量语法（[]）创建数组，并使用索引（从0开始）访问数组元素。 数组中的每个元素可以是任意类型，包括基本类型和对象类型。 let numbers = [1, 2, 3, 4, 5]; console.log(numbers[0]); // 输出：1在TypeScript中，可以使用类型注解number[]来指定数组中元素的类型是数字。 类型注解提供了类型检查和代码提示的功能。 let numbers: number[] = [1, 2, 3, 4, 5]; console.log(numbers[0]); // 输出：1数组是一种有序的数据集合，使用数组可以便捷地存储和访问多个数据。数组提供了各种方法来操作和处理数据，如添加、删除、修改和遍历等操作。通过索引可以直接访问数组中的元素，索引从0开始，表示第一个元素。 值得注意的是，JavaScript和TypeScript中的数组可以自由地存储不同类型的元素。为了保持类型一致性，推荐在TypeScript中使用泛型数组类型或接口来定义数组的类型。 7.链式语法JavaScript和TypeScript都支持链式语法，通过连续调用对象或函数的方法来实现方法链。 class Calculator { constructor(value) { this.value = value; } add(num) { this.value += num; return this; } subtract(num) { this.value -= num; return this; } multiply(num) { this.value *= num; return this; } divide(num) { this.value /= num; return this; } } let result = new Calculator(10) .add(5) .multiply(2) .divide(3) .subtract(1) .value; console.log(result); // 输出：10在上述示例中，我们定义了一个Calculator类，它具有add、subtract、multiply和divide等方法。每个方法都会对存储在value属性中的数字执行相应的操作，并返回更新后的对象。 通过连续调用这些方法，我们可以像链条一样依次调用它们，每次操作都会返回更新后的Calculator对象。最后，我们可以通过访问value属性来获取结果。 链式语法的优点是可以简化代码并提高可读性。每个方法的返回值都是原对象或函数的引用，这样就可以继续进行下一个方法的调用。通过链式语法，我们可以在一行代码中完成多个操作，减少了临时变量的使用，并且代码更加清晰。 需要注意的是，链式语法的可用性取决于对象或函数是否返回适合链式调用的类型。一些内置的方法和库会返回支持链式调用的对象，但并不是所有函数都适用于链式语法。 8.闭包闭包允许函数访问其词法作用域外部的变量。通过创建闭包，函数可以保留对它们被创建时所在作用域的引用，即使在函数被调用后，这些变量也能够被访问和修改。 工作原理：当一个函数返回另一个函数时，内部函数会创建一个闭包，并持有其外部函数的作用域。这意味着内部函数可以访问和操作外部函数中的变量，即使外部函数已经执行完毕或退出了作用域。 function createCounter() { let count = 0; return function() { count++; console.log(count); }; } let counter = createCounter(); counter(); // 输出：1 counter(); // 输出：2函数 createCounter 返回一个内部函数，该内部函数可以访问并修改外部函数 createCounter 中的变量 count。 接着，我们将 createCounter 的返回值（即内部函数）赋值给变量 counter。 最后，我们调用 counter 函数两次，并通过 console.log 输出变量 count 的值。注意，由于 counter 是一个闭包，内部函数保留了对 count 的引用，每次调用 counter 都会对 count 进行自增操作，并将最新的值进行输出。 二、JavaScript和TypeScript的区别JavaScript是一种解释型的动态类型语言，而TypeScript是JavaScript的超集，添加了静态类型和更强大的类型系统。 具体的区别和过渡包括： 变量定义：JavaScript使用var、let、const来定义变量，而TypeScript引入了类型注解，使用特定类型来定义变量。 类型注解：TypeScript支持类型注解，可以在变量、函数、对象等声明中明确指定类型，以提供更严格的类型检查。 类和模块：TypeScript支持类和模块的概念，并提供了更强大的面向对象编程能力和模块化开发。 编译：JavaScript是一种解释型语言，代码可以直接在浏览器或Node.js环境中运行。而TypeScript需要先经过编译，将TypeScript代码转换为JavaScript代码，然后再运行。 对于从JavaScript过渡到TypeScript的开发者来说，需要逐步添加类型注解、定义接口和类型，并利用TypeScript的工具和类型检查来提高代码的可靠性和可维护性。可以使用TypeScript的编译器和编辑器插件来辅助开发，并逐步将JavaScript代码转换为TypeScript代码。 总结而言，学习JavaScript和TypeScript可以使我们在前端开发中拥有更强大的工具和语言特性。JavaScript是一种灵活的动态类型语言，而TypeScript在此基础上提供了静态类型和更丰富的功能，可以提高代码质量和开发效率。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |