某小公司面试记录

记录一次面试过程，还有一些笔试题，挺简单的，排序，去重，this指向，深浅拷贝，微任务的执行顺序，变量提升等。

ES6数组新增的方法

`Array.from`：将两类对象转为真正的数组：

类似数组的对象
可遍历的对象
包括es6新增的数据结构 Set 和Map

let arrayLike = {
    "0":"a",
    "1":"b",
    "2":"c",
    length:3
}
let arr2 = Array.form(arrayLike); //["a","b","c"]

//还可以将arguments的对象转化成数组
function foo (){
	let args = Array.from(arguments)
}
// 只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组，字符串和 Set 结构都具有 Iterator 接口
Array.from("hello");
//["h","e","l","l","o"]

let namesSet = new Set(["a","b"]);
Array.from(namesSet) //["a","b"]

扩展运算符：(…) 将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3])
// 123

`Array.of`:将一组值来转化成数组。

Array.of(3,11,8)//[3,11,8]

`copyWithin()`：将指定位置的元素复制到目标位置(会覆盖掉原有的值)。

Array.prototype.copyWithin(target,start = 0,end = this.length);
//它接受三个参数
1.target (必需要)：从该位置开始替换数据，如果为负值，表示倒数。
2.start(可选)： 从该位置开始读取数据，默认为0。如果表示负值，则表示从末尾开始计算。
3.end(可选): 到该位置前停止读取数据，默认等于等于数组的长度，如果为负值，表示从末尾开始计算。

`find()`：用来找出第一个符合条件的数组元素，它的参数是一个回调函数，所有的数组元素依次执行该回调函数，直到找到符合要求的元素

[1, 4, -5, 10].find((n) => n < 0) // -5

`findIndex()`：用来寻找符合条件的元素的下标

[1,2,5,10,11].findIndex(function(value,index,arr){
    return value > 9;
}) //2

fill 方法使用给定值，填充一个数组

["a","b","c"].fill(7);
//[7,7,7]

//方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a","b","c"].fill(7);
//['a', 7, 'c']

`entries()``
``keys()`

values()：这三个数组用来遍历数组，它们都返回一个遍历器对象，可以用for … of 循环进行遍历。

for (let index of ["a","b"].keys()){
    console.log(index)
}
//0
//1

for(let elem of ["a","b"].values()){
	console.log(elem)
}
// "a"
// "b"

for(let [index,elem] of ["a","b"].entries()){
	console.log(index,elem)
}
//0 "a"
// 1 "b"   
// for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

includes()：返回一个布尔值，表示某个数组是否包含给定的值，与字符串includes

[1,2,3].includes(2) // true
[1,2,3].includes(4) //false

flat( ) 用于将嵌套的数组，打平，变成一维的数组，该方法返回一个数组，对原数据没有影响。

// [1, [2, [3]]].flat(Infinity) // 参数代表要嵌套的次数。 
// [1, 2, 3]

`flatMap()` 方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行`flat()`方法。该方法返回一个新数组，不改变原数组。

[2,3,4].flatMap((x)=>[x,x*2])
// 2,3,4, 6,4,8

//然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

sort 利用原地算法对数组顺序进行排序

默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

const array1 = [1, 30, 4, 21, 100000];
array1.sort();  //1, 100000, 21, 30, 4

reduce 如何使用？

reduce如何使用

遍历对象的方法！

for … in 循环：

for … in 循环可以遍历一个对象的所有可以枚举的属性，包括自身属性，和原型链上的属性。

语法：

let obj = {name:"Li",age:18}
for (let key in obj){
    if(obj.hasOwnProperty(key)){
		console.log(obj[key])
    }
}

其中，obj为要遍历的对象，key为当前属性的名称。

注意事项：在使用for… in 遍历对象的时候，应该使用hasOwnProperty 方法来判断属性是否为对象本身的属性，而非原型链上的属性。

Object.keys方法()

Object.keys()方法：可以返回一个对象所有自身的可枚举属性的名称组成的数组。

代码：

let obj = {name:"Li",age:18}
let keys = Object.keys(obj);
console.log(keys) //[name, age]

obj为要遍历的对象，keys 为返回的属性名称数组。

Object.values()方法

Object.values()方法可以返回一个对象所有自身的可枚举属性的值组成的数组。

代码：

let obj = {name:"Li",age:18};
let values = Object.values(obj);
console.log(values)  //['Li', 18]

Object.entries()方法可以返回一个对象所有自身的可枚举的属性的名称和值组成的数组。

代码：

let obj = {name:"Li",age:18};
let values = Object.values(obj);
console.log(values)  // ['Li', 18]

for of 可以遍历数组么？

for...of循环可以用于遍历数组。在for...of循环中，每次迭代会返回数组的一个元素值，循环将继续直到所有的元素都被迭代。

const arr = [1, 2, 3];

for (const item of arr) {
  console.log(item); // 1 2 3
}

for...of循环只能遍历可迭代对象，而数组是一种可迭代对象，有迭代器的属性。

for of 如何遍历一个对象?

答： for … of本身不可以遍历对象只可以遍历可迭代对象，如果非要迭代可以这样来模拟。

const obj = {a: 1, b: 2, c: 3};

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`); //a:1，b:2,c:3
}

对象转换成类数组的方法有哪些？

object.values

object.keys

object.entirys

2x undefined = NAN;

宏任务，微任务，主线程

主线程是：js从上向下执行的顺序叫做主线程。

宏任务：异步任务如，定时器是宏任务。

微任务：promise，async，await，nexttick 这些都是微任务

vue2的生命周期。

vue2的生命周期分为8个阶段，按顺序依次是：

beforeCreate :实例被创建之前调用，此时数据和初始化都没有开始。
created:实例已经完成数据加载，属性和方法的运算也已经结束，这个阶段可以对数据进行预处理操作。
beforeMount：在挂载之前被调用，相关render函数首次被调用。
mounted：实例被挂在到DOM上后调用，可以在这里访问到DOM节点。
beforeUpdate：数据更新时调用，但是此时虚拟DOM还没有重新渲染，所以这里不能操作DOM。
updated：虚拟DOM重新渲染和打补丁之后调用，所以这里可以进行DOM操作。
beforeDestory：实例销毁之前调用，在这里可以进行一些清理工作，比如取消定时器、解绑时间等。
destroyed：实例销毁之后调用，这个时候实例上的所有绑定和事件监听已经被解除，子实例也被销毁。

有一个父组件一个子组件，他们两个的加载顺序是什么样子的？

在vue2中，父组件和子组件的加载顺序是先父后子，就是父组件会在子组件之前被创建和加载，因为vue 会先解析父组件的模板，因此父组件的生命周期钩子函数会在子组件之前被调用。

具体的加载顺序如下

Vue首先创建父组件实例，并执行父组件的生命周期钩子函数，beforeCreate和created。
接着Vue解析父组件模板，包括解析子组件标签，并创建子组件实例。
Vue会递归执行子组件的生命周期钩子函数包括beforeCreate，和created
父组件和子组件的数据响应式绑定完成以后，vue会执行父组件的mounted钩子函数
最后，vue会递归的执行子组件的mounted钩子函数。

销毁的话呢？

在vue中，当父组件销毁时，子组件也会随之销毁。销毁的执行顺序是先子组件再父组件。

具体来说，vue会在销毁父组件之前，先递归销毁其所有子组件，这个过程Vue会按照有深入浅的顺序进行销毁，

也就是先销毁最深层级的子组件，然后逐步向上层级进行销毁，最后才会销毁父组件。

`vue-router` ，跳转方法区别，路由首位等。

编程式导航
1. this.$router.push("/path") ：会在浏览器留下历史记录，浏览器的后退按钮会返回到上一个页面。可以触发路由守卫。
2. this.$router.replace("/path")：不会在浏览器留下历史记录，点击后退按钮不会返回到上个页面
this.$router.push两种传参方式
1. params对象传参：仅仅可以传基本类型数据，不能传对象，必须要用name来引入路由。
```
this.$router.push({
        name:'Detail',
        params:{
          id:id
        }
      })
```
  1. query传参：使用query传参的时候，参数会被编码成url的查询字符串，参数表现在地址栏上，query可以传递对象等复杂的数据类型，刷新页面不会丢失数据。
```
this.$router.push({
        path:'/detail/:id',
        query:{
          id:id
        }
      })
```

vuex ？命名空间

在 Vuex 中，命名空间可以将 store 模块化，避免命名冲突和对全局状态的过度依赖。在命名空间下，可以使用相对命名访问模块的 action、mutation 和 getter。

const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true, // 开启命名空间
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
  }
})

//在开启命名空间之后，就可以使用 namespaced 属性值作为前缀访问模块的 action、mutation 和 getter。例如：
 // 访问模块的 state
store.state.user.xxx

// 访问模块的 getter
store.getters['user/xxx']

// 调用模块的 action
store.dispatch('user/xxx', payload)

// 调用模块的 mutation
store.commit('user/xxx', payload)

对`mixin` 的理解

mixin可以将组件相同的属性和方法抽离出来形成一个单独的mixin对象，混入到需要用的组件中去，减少代码的重复操作。
mixin会将mixin的属性和方法与组建的属性方法合并，mixin的优先级更高。

export const myMixin = {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}
//组件中引入
import { myMixin } from './myMixin.js'

export default {
  mixins: [myMixin],
  mounted() {
    this.greet(); // 输出：Hello, World!
  }
}

为什么data是一个函数，

如果data的选项是一个对象，不同的组件实例共享同一个对象就会造成交叉感染。

而使用函数就可以保证每个组件实例都有自己独立的数据对象。

为什么自定义表单校验可以写在data函数里面呢。

data是一个函数，用来动态生成组件实例中的初始数据，当组件实例化时，vuejs会调用data函数，将返回的对象作为组件的初始数据，全部可以return 出去，renturn 出去的数据才是一个响应式的数据。

`echarts` 中`vue`那个生命周期初始化。

通常在mounted生命周期中初始化Echarts实例，因为在mounted生命周期中，Vue已经成功地将组件挂载到DOM上，这时我们可以获取到组件对应的DOM元素。

`keep-alive 里面如何用的`

权限如何做的，菜单栏如何配置的。

在路由配置文件中定义每个菜单的路由信息，并且为每个路由信息添加一个meta属性用来标记路由的权限。
然后用路由的生命周期判读特定的角色才可以访问。

如何动态路由 `addRouters`

在实现动态路由之前，首先需要在路由中定义一个占位符，用于动态路由的替换。
然后可以在代码中根据条件生成路由。

柱状图如何调整样式。

`Echarts`大屏如何适配呢。

宽高比例适配：在echarts的容器元素中设置宽高比例，让他与设计稿相同。
图表样式适配，在echarts中的options中设置图表样式。适应不同的分辨率。
响应式布局

自定义指令。

Vue.js 中的自定义指令（Custom Directive）是一种扩展 HTML 标签的能力，它可以在标签渲染时通过指令来操作 DOM 元素.

使用场景

实现拖拽功能
绑定一些复杂的事件监听器
实现自定义表单验证规则
等等

<template>
  <div v-my-directive></div>
</template>

<script>
export default {
  directives: {
    'my-directive': {
      // 指令选项
      bind: function (el, binding) {
        // 绑定时的处理逻辑
      },
      inserted: function (el, binding) {
        // 插入到 DOM 中时的处理逻辑
      },
      update: function (el, binding) {
        // 更新 DOM 中的节点时的处理逻辑
      },
      componentUpdated: function (el, binding) {
        // 更新组件 VNode 时的处理逻辑
      },
      unbind: function (el, binding) {
        // 解绑时的处理逻辑
      }
    }
  }
}
</script>