149. 面试官：[] == ![] 的结果是什么？为什么？

149期

1. [] == ![] 的结果是什么？为什么？

2. base64编码为什么会让图片变大？

3. JS中的变量提升是什么意思？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

148期问题及答案

1. 说说你对flutter的了解？

Flutter是由Google开发并于2017年推出的开源UI软件开发工具包（SDK）。它的主要目的是使开发者能够通过一套代码库快速构建在iOS、Android、网页和桌面端上都表现良好的高性能、高保真的应用。

以下是我对Flutter的一些了解：

1. 跨平台：Flutter支持跨平台开发，它的最大卖点之一是“一次编写，到处运行（Write Once, Run Anywhere）”，允许开发者使用相同的代码库就能构建多个平台的应用。

2. Dart语言：Flutter使用Dart语言，这是一种由Google开发的面向对象的编程语言。Dart语言旨在易于学习和使用，它支持JIT（Just-In-Time）编译，让开发过程中的热重载变得可能，同时也支持AOT（Ahead-Of-Time）编译，以确保应用的最终发布版本有最佳性能。

3. 热重载：Flutter提供了热重载功能，开发者可以在不重新启动应用的情况下，实时看到对代码的更改效果，这显著提高了开发效率。

4. 组件丰富：Flutter拥有大量可定制的Widget（组件），这些组件可以帮助开发者构建复杂的UI，而且风格与原生组件非常接近，包括Material Design（Android）和Cupertino（iOS）。

5. 性能接近原生：由于Flutter的渲染引擎（Skia）可以直接打包到应用内，并使用Dart编写所有代码，这使Flutter应用在运行时不依赖于任何中间层，因此其性能非常接近原生应用。

6. 开源社区：Flutter有一个快速增长的开源社区，提供了大量的插件和开发工具，辅助开发者更高效地构建应用。

7. 适用场景广泛：Flutter既可以用来开发移动端应用，也逐步扩展到了网页和桌面应用的开发，甚至可以用来创建嵌入式项目。

8. 自定义绘制：Flutter提供了强大的绘制引擎，可以让你自定义非常复杂的UI效果和动画。

虽然Flutter在跨平台UI框架中具有众多优势，但是它也有一些局限性，例如对某些平台特有功能的访问可能不如使用原生SDK来得直接，以及大型项目中Dart语言的生态系统不如JavaScript等其他语言丰富。不过，随着Flutter不断更新和社区贡献的增长，这些局限性正在逐步被克服。

2. vuex有哪些属性，它们的意义分别是什么？

Vuex是专为Vue.js应用程序开发的状态管理模式及库。在复杂的Vue应用中，组件之间共享状态时使用Vuex可以更加方便和高效。Vuex具有以下几个核心概念：

1. State（状态）:

• 意义：State是Vuex的核心，是存储的基本数据。在Vuex中，state是一个单一的对象，包含了所有的应用层级状态（也就是数据）。所有由同一个state衍生的状态和UI都应当是同步的。

Getters（获取器）:

• 意义：Getters可以理解为Vuex中的计算属性，它可以用来派生出一些状态，以便于多个组件之间复用。如果有多个组件需要用到某种由state派生出来的状态，可以使用getter来实现。

Mutations（变更）:

• 意义：Mutations是唯一可以直接变更state的东西。这是一个同步事务，任何时候进行state的变更，都应该通过mutation来做，这样才能精确地追踪到状态的变化。

Actions（动作）:

• 意义：Actions与mutations功能类似，但是不同之处在于它可以包含任意异步操作。Action提交的是mutation而不是直接变更状态，可以包含任意异步操作，这允许我们先进行数据的获取，然后再调用mutation去改变state。

Modules（模块）:

• 意义：当应用非常复杂时，状态对象会非常臃肿，Modules允许我们将store分割成模块（module），每个模块拥有自己的state、mutation、action、getter，甚至是嵌套模块。

下面是一个具体例子，以展示Vuex中不同属性的使用：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment: (state, payload) => {
      state.count += payload.amount;
    }
  },
  actions: {
    incrementAsync: ({ commit }, payload) => {
      setTimeout(() => {
        commit('increment', payload);
      }, 1000);
    }
  },
  modules: {
    // 定义子模块
    myModule: {
      // 模块内容...
    }
  }
});

在这个示例中：

• state提供了一个初始化的count状态。

• getters提供了一个名为doubleCount的计算属性，它会返回count的两倍。

• mutations定义了一个名为increment的函数，用于增加count的值。

• actions定义了一个名为incrementAsync的函数，作异步操作后通过commit调用increment变更状态。

• modules允许你将store分割成子模块，每个模块维护自己的状态、变更等。

通过上述的属性，Vuex提供了一种集中管理Vue应用所有组件的状态的机制，并遵循严格的规则以保证状态变更是可追踪和维护的。

3. JS中addEventLister方法的第三个参数有什么作用？

在JavaScript中，addEventListener方法用来为元素添加事件处理器。这个方法可以接受三个参数：

1. type - 字符串参数，表示监听事件类型的名称，例如 'click'、'mouseover'等。

2. listener - 事件触发时，会调用的函数或者实现了Event接口的对象。

3. options 或者 useCapture （第三个参数）- 这个参数可以是一个布尔值或一个对象，它用于指定监听器的行为。

useCapture（布尔值的用法）

当第三个参数是布尔值的时候，它被称为useCapture。如果为true，事件监听器会在捕获阶段触发；如果为false（或省略），事件监听器会在冒泡阶段触发。

• 捕获阶段（Capture Phase）：事件从文档的根节点（例如window）向下，通过DOM树传播到目标元素的过程。

• 冒泡阶段（Bubbling Phase）：事件从目标元素开始，向上通过DOM树传播回文档的根节点的过程。

大部分事件的默认行为是在目标元素同一层级监听捕获或冒泡，但是使用useCapture设置为true可以让你在捕获阶段而不是冒泡阶段处理事件。

options对象的用法

为了提供更为详尽的配置选项，addEventListener的第三个参数也可以是一个具有多个属性的对象，常用的几个属性包括：

• capture - 布尔值，和使用useCapture作为布尔值时的功能相同，设置为true表示在捕获阶段监听事件，设置为false表示在冒泡阶段监听事件。

• once - 布尔值，若设置为true，监听器会在触发一次事件之后自动移除。

• passive - 布尔值，当设置为true时，表示监听器永远不会调用preventDefault方法。如果监听器不会调用preventDefault，那么浏览器可以在监听器运行之前执行事件的默认动作，从而提高滚动等事件的性能。

• signal - 一个AbortSignal对象，允许你随时移除事件监听器。

示例代码：

// 使用布尔值作为第三个参数
element.addEventListener('click', handler, false);

// 使用options对象作为第三个参数
element.addEventListener('click', handler, {
  capture: false, // 相当于之前的useCapture
  once: true,     // 事件处理函数触发一次后自动移除
  passive: true   // 表明不会调用`preventDefault`函数
});

在旧版浏览器中可能不支持使用对象作为第三个参数，因此在跨浏览器编码时应当考虑兼容性问题。但现代浏览器通常都支持这些选项。

我要提问

如果你遇到有趣的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。

我要出题

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。