# JavaScript 状态模式

在前端开发中，状态管理是一个非常重要的问题。

随着应用程序的复杂度不断增加，状态管理变得越来越困难。

JavaScript 状态模式是一种优雅的解决方案，可以帮助我们更好地管理状态。

本文将介绍 JavaScript 状态模式的基本概念和使用方法，并通过一个实际的例子来说明如何使用状态模式来管理状态。

# map()

map() 方法返回一个新数组，数组中的元素为原数组元素调用函数处理后的值。

接收参数：一个具有三个参数的回调函数。

• current value：数组当前元素
• index：数组当前元素的索引
• arr：原数组本身

返回值：返回一个新数组，数组元素由回调函数返回的结果组成。

let list = [1, 2, 3, 4]

let res = list.map(item => item * 2)

console.log(res) // [2, 4, 6, 8]

# 数组转对象

通用方法

const arr = [['name', 'Alice'], ['age', 30]]

const obj = Object.fromEntries(arr)

将数组转换为对象最快的方法

var person = ['arrary', 'number', 'string']

console.log({...person}) // {0: "arrary", 1: "number", 2: "string"}

# 使用对象代替条件 if 判断

在某些条件下，我们需要根据变量的值来调用不同的函数或者赋值。一般我们遇到这种情况可能会写大量的 if 条件判断块，但是大量的 if 代码不利于代码阅读和理解，有些时候我们可以使用对象来解决此问题。

# 前言

我们平时在开发代码时，很多构建工具在我们保存本地代码时都可以做到实时上传或者实时刷新页面，那么大家有没有想过构建工具是如何做到的？

想做到这一点，就需要实时监听本地文件的增删改，掌握这些时机就可以做到在文件改变时热更新或者实时上传。

下面我们就来聊一聊如何监听本地文件的变动！

# 点击 clearable 清除按钮输入建议失效

我们会发现，如果给 el-autocomplete 组件标签加上 clearable 属性以后，那么，当我们输入内容以后，再点击 clearable 清空按钮清空输入框中输入的数据以后，当我们再重新输入文字的时候，请求会触发，后端返给我们的数据也获取到了，但是后端返回给我们的数据却没有渲染到页面上。就仿佛输入没反应了。解决方案比较直接的就是，当用户点击了 clearable 清空按钮以后，就让当前获取焦点的输入框失去焦点，回到最初状态，一切重新开始
即为：主动触发失去焦点，解决‘fetch-suggestions’输入建议失效的 bug，也就是： @clear="blurForBug()"

<template>

    <div id="box">

        <el-autocomplete

            :fetch-suggestions="querySearch"

            v-model="inputValue"

            @select="handleSelect"

            :debounce="0"

            :trigger-on-focus="true"

            clearable

            @clear="blurForBug()"

        ></el-autocomplete>

    </div>

</template>

blurForBug(){

	document.activeElement.blur()

}