随笔分类 - JS / ES / TS
JavaScript / ECMAScript / TypeScript
摘要：可选链 可选链（Optional chaining） ?. 是一种以安全的方式去访问嵌套的对象属性，即使某个属性根本就不存在。 这是一项新的提案，老旧浏览器可能需要 polyfills。 一、解决的问题： 1、问题一 如果用户信息中，地址是非必填的，那我们就无法安全地访问地址的某一个属性： let
阅读全文
摘要：一、什么是柯里化 Currying ——只传递给函数一部分参数来进行调用，并让它返回一个函数去处理剩下的参数。 柯里化即 Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参
阅读全文
摘要：一、什么是纯函数 纯函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。 比如 slice 和 splice，这两个函数的作用并无二致——但它们各自的方式却大不同。 其中，slice 符合纯函数的定义，因为对相同的输入它保证能返回相同的输出： var xs = [1, 2, 3,
阅读全文
摘要：一、什么是函数式编程 函数式编程是一种编程范式，主要是利用函数把运算过程封装起来，通过组合各种函数来计算结果。 举个例子，要把字符串 functional programming is great 变成每个单词首字母大写，可以这样实现： var string = 'functional progra
阅读全文
摘要：一、什么是反射机制 反射机制是在编译阶段不知道是哪个类被加载，而是在运行的时候才加载、执行。 也就是说，反射机制指的是程序在运行时能够获取自身的信息。 js 中的 apply 就是反射机制。 二、Reflect 1、Reflect 定义 Reflect 是一个内建的对象，用来提供方法去拦截 Java
阅读全文
摘要：一般来说，项目的 TS 编译器配置全部存储在项目根目录下的 tsconfig.json 文件中 当编译器启动时，首先会读取 tsconfig.json，以获取有关如何编译项目的说明（例如，要编译哪些源文件，在哪里存储输出等） 下面介绍常见 tsconfig compilerOptions 的编译选项
阅读全文
摘要：使用 TypeScript 的 React 项目中，变量如果没有声明任何类型，会被识别为 any，此时编译器会报错，要求强制给变量声明类型 这里可以通过设置配置文件，使编译器在这种情况下不报错，从而实现 TS 和 JS 的混合编写↓↓ 在 React 项目中的 tsconfig.json 文件里，
阅读全文
摘要：一、什么是 Generator Generator 用来控制循环流程，主要解决异步编程嵌套层级较深的问题。 二、ES6 如何让遍历“停”下来 ES5 中循环一旦执行则无法停下 function loop() { for (let i = 0; i < 5; i++) { console.log(i)
阅读全文
摘要：Proxy ES6 标准中新增——Proxy（代理），只要有 “代理” 的诉求都可以考虑使用 Proxy 来实现，例如自定义一些常用行为如查找、赋值、枚举、函数调用等。 代理类似租房找中介，而中介可以屏蔽原始信息。 一、Basic Syntax —— 基本用法 let p = new Proxy(t
阅读全文
摘要：一、reduce 方法 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 也就是说，这个累加器会从第一个累加值开始，不断对累加值和数组中的后续元素调用该累加器，直到数组中的最后一个元素，最后返回得到的累加值。 1、语法 arr
阅读全文
摘要：一、ES 5 中函数默认值写法 function total(x, y, z) { if (y undefined) { y = 2 } if (z undefined) { z = 3 } return x + y + z } console.log(total()) // NaN console
阅读全文
摘要：这里直接上代码，根据结果来看比较直观 let arr = [ { name: 'Rick', age: 60 }, { name: 'Rick', age: 70 }, { name: 'Morty', age: 14 } ] let findResult = arr.find(i => i.nam
阅读全文
摘要：一、什么是 UML 类图 UML 类图即统一建模语言（Unified Modeling Language），可使用图形来表示程序，包括： 用例图 时序图 类图 活动图 部署图 组件图 ... UML 主要面对的多为强类型的面向对象语言，如 Java 而 JS 是一个弱类型的语言，且没有接口、泛型等，
阅读全文
摘要：find 返回符合条件的第一个元素 如果没有符合条件的元素则返回 undefined 注意： find 对空数组不执行 find 不改变原数组 let arr = [1, 2, 3, 4, 5] let find = arr.find((item) => { return item % 2 0 })
阅读全文
摘要：Array.of 创建新数组 let arr = Array.of(1, 2, 3, 4, 5) arr // [1, 2, 3, 4, 5] Array.fill 数组填充 Array.fill(value, start, end) let arr1 = Array(5) // 生成数组长度为 5
阅读全文
摘要：一、ES5 伪数组转数组 伪数组：arguments 转换方法： let args = [].slice.call(arguments); 举个例子: 将 NodeList 转数组 let items = [].slice.call(document.querySelectorAll('item')
阅读全文
摘要：一、Map 1、Map 的基本用法 JavaScript 的对象（Object），本质上是键值对的集合（Hash结构），但传统上只能用字符串当作键，这给它带来很大的使用限制 var data = {}; var element = document.getElementById('myDiv');
阅读全文
摘要：一、Set 1、Set 的基本用法 ES6 提供了新的数据结构 Set，它类似于数组，但是其成员的值都是唯一的，没有重复的值 Set 本身是一个构造函数，用来生成 Set 数据结构 var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x))
阅读全文
摘要：###原数组对象： ###修改数组对象的 key 值 let objArr = [ { name: "Rick", age: 14, }, { name: "Morty", age: 70, }, ]; // 旧 key 到新 key 的映射 const keyMap = { name: "labe
阅读全文
摘要：<input type="file" name="upload" @change="fileChange" > const picture = ref({} as unknown); const fileChange = (event: Event) => { const files = (even
阅读全文
浙公网安备 33010602011771号