跳至主要內容
什么是Symbol

定义——一个不会重复的原始数据类型

Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值。它是JavaScript语言的第七种数据类型。

相关信息

前六种是：undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

基本数据类型不适用以new关键字新增, 因此它的创建方式如下：

Jeacson She...大约 2 分钟JavaScriptWebJavaScriptadvanced
函数柯里化

什么是柯里化

一句话概括：将传入多个参数的函数改造为传入单个函数，并返回可接受其他参数的函数的过程，就称为函数的柯里化。 一般常用于：JS脚本打包时用于降低代码量，减小打包后文件大小；以及面试题。

柯里化的示例——经典add

假设这里有一个函数：

function add(a, b) {
    return a + b
}
Jeacson She...大约 2 分钟JavaScriptWebJavaScriptadvanced
简单记忆

简述

这里是一些有关JS的简单记忆点，记住就行。

简记

var 与 let 区别

  1. 作用域不同。var 是函数作用域，let 是块作用域。例如，在for循环中定义 var 变量，则只要与该 for 循环存在于同一个函数下，就可以在 for 外访问到 var 定义的变量；而在 for 循环内定义 let 变量，在其外面是不可被访问的。
  2. let 必须先声明，再使用；而 var 可以先使用后声明，但在还没声明时，其值是 undefined。
  3. let 不能被重新定义，即无法使用该关键字进行同一变量名的定义； var 可以被重新定义。
Jeacson She...大约 2 分钟JavaScriptWebJavaScriptremember
VUE3的数据响应式是如何实现的？（四）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是下篇的下篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上一篇中，我们修复了代码遗留的两个BUG，分别是：

Jeacson She...大约 7 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（一）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是上篇。

参考: Vue Mastery-Vue3 Recativity

从简单的模板开始讲起

让我们首先创建一个简单的 Vue App 以及一个html模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<body>
    <div id = "app">
        <div>Price: ${{ price }}</div>
        <div>Total: ${{ price * quantity}}</div>
        <div>Taxes: ${{ totalPriceWithTax }}</div>
    </div>
    
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            price: 5.00,
            quantity: 2
        },
        computed: {
            totalPriceWithTax() {
                return this.price * this.quantity * 1.03
            }
        },

    })
</script>

</html>
Jeacson She...大约 11 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（三）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是下篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上一篇中，为了实现数据响应式，我们使用了Reflect 与 Proxy 两个 ES6 的新语法，让它看起来越来越像我们希望了解的Vue3语法：

Jeacson She...大约 15 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（二）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是中篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上篇中，为了实现数据响应式我们对自己的代码进行了三次改装，让它看起来越来越像常见的响应式引擎：

Jeacson She...大约 11 分钟VUEWebVUE3advanced
Reduce 方法

简述

reduce() 方法是 Javascript 中内置的数组方法。它一般用于数组的压缩。

定义

1.reduce() 方法可以接收两个参数，一个为回调函数，另一个为 InitialValue, 即传给函数的初始值;

这里的 InitialValue 的值可以是包括但不限于数字，数组或者对象等的值，例如 0 / [] / {} 等。当然也可以不传，非必需值。

2.reduce() 方法接收的函数会作为该数组的累加器，使数组中的每个值以既定的顺序（从左到右，即升序）开始缩减，并最终计算为一个值。

Jeacson She...大约 4 分钟JavaScriptWebJavaScriptadvanced
Object.defineproperty 方法

简述

Object.defineProperty 是 JavaScript 中 Object 类下的一个高级函数, 它可以用其内置的 getter 与 setter 对传入的数据进行修改操作。一般用于旧时各种JS框架作响应式数据用。由于该方法本质较为臃肿且已经有相应方法做替代，现在大部分框架已经采用 ES6 中的 Proxy/Reflect 新方法作为优先选择。

简单样例

        let number = 18;
        let person = {
            name: 'Jeasfds',
            sex: ' male'
        }

        Object.defineProperty(person, 'ages', {
            // value: 18,
            enumerable: true,//控制属性是否可以枚举（默认为false）
            writable:true,//控制属性是否可以被修改（默认为false）
            configurable:true,//控制属性是否可以被删除（默认为false）


            //当有人读取 'person' 的 'age' 属性值时，get 函数（getter）会被调用， 且返回值为age值
            get() {
                return number;
            },
            //当有人修改 'person' 的 'age' 属性值时，set 函数（setter）会被调用， 且会收到修改的具体值
            set(value) {
                number = value;
            }
        })
Jeacson She...小于 1 分钟JavaScriptWebJavaScriptadvanced
TypeScript

简述

这里是学习TypeScript相关的笔记。原本是两个大章节，我按照当时的学习时段将其分成了五个章节，分别放在以下几篇文章中，以天数作为章节命名。

Jeacson She...小于 1 分钟TypeScriptWeb