留言板

2021-05-09

字数统计: 7字 | 阅读时长: 1分

登录可进行留言……

关于函数式编程的理解

2022-10-30

字数统计: 462字 | 阅读时长: 1分

现在的很多语言都慢慢的脱离或者说在抵制面向对象编程的这种形式，比如React的类组件到后来hooks的出现，慢慢的转向函数时编程，Vue也是如此，最开始optionsAPI的时候是export default()默认导出一个对象，在对象中编写methods、computed等等，到后面compositionAPI的出现，虽然也是导出一个对象，但是对象里面是一个setup() {}的函数，在这个函数中编写对应的逻辑代码。然后是在Vue3.2版本更新后的setup语法糖，直接<srcipt setup></script>，甚至都不需要写setup() {}就可以直接在script中编写对一个的代码，慢慢的，逐渐从面向对象转变成函数式编程的。

引用：

Williams表示：“在真正了解函数式编程后，我就不打算再使用其他范式了。”实际上，他在大学期间使用LISP的衍生编程语言Scheme和Racket 时就爱上了函数式编程。“面向对象编程很不错，至今仍有很多人使用。但很多开发人员在接触函数式编程后，就会成为忠实的粉丝。”

当然，面向对象编程和命令式编程仍然是现代软件开发的主要范式，而Haskell和Elm之类的“纯”函数式编程语言在生产代码库中相对较少。但随着编程语言扩展对函数式编程方法的支持，以及软件开发新框架的迭代，函数式编程正迅速通过各种不同的途径进入越来越多的代码库。

《Elm in Action》一书的作者Richard Feldman表示：“所有这些语言都开始支持方便实现函数式风格的功能，几乎每一种语言支持的范式都在增加。”

展开全文 >>

14.throw-Storage-正则

2022-10-30

字数统计: 854字 | 阅读时长: 3分

throw

抛出异常，但是不会中断全局代码的执行，当前函数的代码还是会被中断。

抛出的类型可以是String/Number/Boolean/Object

系统默认的Error类

throw new Error("错误信息！")

try{
	// 不报错执行    
}catch (err) {
	// 报错会执行
} finally {
	// 无论是否报错，都会执行
}

Storage

WebSotrage：localStorage、sessionStorage

localStorage：本地存储，提供一种永久性的存储方法，在关闭网页重新打开的时候，存储的内容依然保留

sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除

Storage常见方法和属性：

length
getItem
setItem
clear
key（根据索引获取key）
removeItem（删除某个键值对，参数为key）

一般我们在用到localStorage的时候会将封装一个工具函数，因为我们在存储对象的时候，setItem方法是会给我们转成字符串存取到Storage中，不便于我们观看，也不便于去获取，所以在封装函数的时候，判断是否是一个对象，然后转成字符串存取到Storage中，在通过getItem获取的时候在转成对象。

// 转成字符串
JSON.stringify(object)

// 转回对象
JSON.parse(Sting)

more >>

展开全文 >>

13.防抖-节流

2022-10-30

字数统计: 714字 | 阅读时长: 2分

防抖

防抖的了解和基本使用

当我们在输入框中输入内容的时候，例如百度搜索和淘宝搜索的时候，下面会出现很多联想的内容，比如我们输入一个书，下面会出现如下图所示内容。

当我们频繁的去输入内容的时候，甚至是我在输入书的拼音s -> sh -> she的时候，他都会产生对应的联想内容，但是那些并不是我们想要去搜索的内容，这也就产生了很多不必要的网络请求。

假设我们可以在输入我们想要的内容之前不去发送网络请求，或者是说尽量少发送几次网络请求。

防抖就是让我们在输入 s和h之间的间隔事件比较短，就不去发送s所对应联想的内容，当我们输入框在一定时间内有内容改变的时候不去发送网络请求，在一定的的时间内内容没有改变，然后在去发送网络请求。

我的理解就是，在输入内容之后等待一定时间去发送网络请求，如果在此期间内输入框中的内容有改变，则重置时间，重新计算需要去发送发网络请求的时间。直到达到设定的等待时间，则去执行我们对应的操作或是发送网络请求。

<body>
    <input type="text" class="input">

    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
    <script>

        const input = document.querySelector('.input')

        let i = 1
        input.oninput = _.debounce(() => {
            console.log(`发送第${i++}次网络请求`)
        }, 500)
    </script>
</body>

coderwhy的ppt中的解释：

当事件触发的时候，响应的函数不会立即执行，而是会等待一定的时间
当时间密集触发的时候，函数的触发会被频繁的推迟
只有等待了一段时间也没有时间触发，才会真正的执行响应函数。

more >>

展开全文 >>

12.进程-线程

2022-10-30

字数统计: 404字 | 阅读时长: 1分

进程和线程

进程：是计算机已经运行的程序，是操作系统管理程序的一种方式

线程：操作系统能运行运算调度的最小单位，通常情况下是被包含在进程中·

每一个进程中至少有一个线程。

当我们启动一个应用程序的时候，默认就会启动一个进程(也可以是多进程的)

每一个进程中都会启动至少一个线程用来执行程序中的代码，这个线程被称为主线程。

所以我们也说进程是线程的容器。

宏任务和微任务

事件循环包含执行上下文，浏览器，同时也维护着队列。

但是不止维护着一个队列，有宏任务队列和微任务队列。

宏任务队列：AJAX、setTimeout、setInterval、DOM监听、UI Rendering等

微任务队列：Promise的then回调、Mutation Observer API、queueMicrotask()等

在执行上下文栈中为空时，会去队列中寻找任务进行执行，在HTML浏览器和NODE中都会按照这样一个方式执行。先执行微任务队列，然后在执行宏任务队列，在微任务还没有的时候，先去执行宏任务队列，如果在执行宏任务之前发现微任务队列中有任务，那么会优先去执行微任务队列。在每次执行宏任务之前都会去看一下微任务队列中有没有执行完，如果没有则会先清空微任务队列，然后在执行宏任务队列。

展开全文 >>

11.iterator-generator

2022-10-30

字数统计: 1.3k字 | 阅读时长: 6分

iterator(迭代器)

含义：使用户在容器对象上遍访的对象，使用该接口无需关心对象的内部细节。

迭代器在JavaScript中的标准：

包含一个next方法
- next方法的可以有0个或1个参数
- 返回的对象应当包含done，value
- done(boolean)为false的时候表示这个对象还没有迭代完，为true表示该对象已经迭代完了
- value表示当前需要迭代的对象，迭代结束之后返回默认值undefined。

数组迭代器：

const names = ['abc', 'cba', 'nba']
// 封装一个函数为数组创建迭代器。
function createArrayIterator(arr) {
    let index = 0
    return {
        next() {
            if (index < arr.length) {
                return {
                    done: false, value: arr[index++]
                }
            } else {
                return {
                    done: true
                }
            }
        }
    }
}
// namesIterator就是迭代器。
const namesIterator = createArrayIterator(names)
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())

more >>

展开全文 >>

10.Promise的基本使用和理解

2022-10-30

字数统计: 2.3k字 | 阅读时长: 10分

Promise

1.异步处理代码的困境

不用Promise处理异步代码，在ES6之前处理异步代码的一般方式。

function execCode(count, successCallback, failureCallback) {
    setTimeout(() => {
        console.log(count)
        if (count > 0) {
            let totalCount = 0
            for (let i = 0; i < count; i++) {
                totalCount += i
            }
            successCallback(totalCount)
        } else {
            failureCallback(`${count}出错`)
        }
    }, 3000)
}
execCode(100, value => {
    console.log('执行成功，结果为:', value)
}, err => {
    console.log('执行失败，原因为:', err)
})

设计处理异步代码函数的人，设计的方案可能有多种方法，比如函数名的不同、传递参数的顺序等

当使用这个函数的人去使用这个处理异步代码函数的时候，不知道函数名的命名规范，不知道传递参数的顺序，很容易出现问题，就像“一千个人有一千个哈姆雷特”，很难统一规范，虽然随着时间的推移，在社区中也会慢慢的去统一这种规范，但是需要花费很长的时间的演变。

在ES6之后推出了Promise，为了解决这种困境。

more >>

展开全文 >>

9.Proxy-Reflect

2022-10-30

字数统计: 1k字 | 阅读时长: 4分

Proxy

监听对象的操作

vue2中响应式原理的核心代码(ES5之前)

const obj = {
    name: "beichen",
    age: 22,
    height: 1.75
}
for (const key in obj) {
    let value = obj[key]
    // 存取属性描述符
    Object.defineProperty(obj, key, {
        set(newValue) {
            console.log(`监听: ${key}属性的改变: ${newValue}`)
            value = newValue
        },
        get() {
            console.log(`监听: 获取${key}属性的值`)
            return value
        }
    })
}
console.log(obj.name)
obj.name = "haixia"

缺点：

Object.defineProperty设计初衷不是为了监听对象中的某个属性。
我们在定义某些属性的时候，初衷是定义一个普通的属性，但是后面我们强行把它变成了数据属性描述符。
如果我们想要监听更加更富的操作，比如，添加/删除属性，那么Object.defineProperty是做不到的。

more >>

展开全文 >>

8.ES7-ES13新特性

2022-10-30

字数统计: 609字 | 阅读时长: 2分

ES7新特性

includes：查询是否包含某一个值
******：类似Math.pow,做平方，比如num ** 2 == Math.pow(num, 2)

ES8新特性

对象相关属性
- Object.keys：获取常见对象的key
- Object.values：获取常见对象的value
- Object.entries：获取常见对象的[key，value]，也可以对数组/字符串进行操作。

字符串填充方法

padStart/padEnd

// 场景一: 对事件处理
const minute = '5'
console.log(minute.padStart(2, '0')) // 05
// 如果大于两位则不会变
console.log(minute.padEnd(2, '0')) // 50
// 场景二：对身份证/银行卡等进行隐藏数据
const cardNumber = '123456789123456789'
const lastNumber = cardNumber.slice(-4) // 截取最后四位
const finalCardNumber = lastNumber.padStart(cardNumber.length, '*')
console.log(finalCardNumber) // **************6789

Object.getOwnPropertyDescriptors
async/await(后续补充)

ES9新特性

iterators
Promise finally （后续补充）

more >>

展开全文 >>

7.ECMA-262中的var-let-const

2022-10-30

字数统计: 1.2k字 | 阅读时长: 4分

ECMA-262中的var/let/const

在ECMA-262中，ES6之后对代码的执行流程描述改成了另外的一些词汇

基本的执行思路是不变的

比如：ECS(执行上下文栈)和EC(执行上下文)

在代码被解析之前，执行上下文栈中会创建一个全局的执行上下文，但是其中包含的是词法环境(lexicalEnviroment)和变量环境(variableEnviroment)，同时会在堆内存中生成全局的词法环境，而词法环境又包含环境记录(Enviroment Record)和外部词法环境(outer)，全局的词法环境的outer为null，环境记录会指向对应的环境记录的对象，会有自己的属性和方法。

全局的环境记录!=window，全局的环境记录是由两个环境记录合成的

环境记录主要包含声明式环境记录和对象环境记录。

声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。(全局的环境记录中-let/const)
对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来。（全局的环境记录中-window）

var和let/const的区别

var是被存放在变量环境(variableEnvironment)中，当代码被解析的时候就创建出来了，可以在赋值执行前被访问到，值为undefined。

function foo() {
	console.log(message) // undefined
    
    let message = "beichen"
}

let/const是被存放在词法环境中(lexicalEnviroment)中，当代码被解析的时候也被创建出来了，但是在被赋值之前是不能被访问的，如果访问会报错。

function foo() {// 从这个大括号开始
    console.log(message) // 会报错
    //  暂时性死区(非官方，社区中讨论出的结果)
    //
    // 直到下一行，执行结束前(message被赋值之前)会形成暂时性死区
    let message = "beichen"
}

more >>

展开全文 >>