2024年最新web开发教学，JavaScript的常见用途和书写规范，2024年最新阿里前端研发岗二面

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

return Math.max(DEFAULT_CAPACITY, minCapacity);

}

return minCapacity;

}

(1) 这里的任务主要是计算容量的大小，先判断elementData数组对象是否有初始化大小，若没有就取DEFAULT_CAPACITY或 minCapacit中的较大者为容量的大小，若已经初始化了就minCapacity为容量大小。

接着来看看ensureExplicitCapacity的源码：

private void ensureExplicitCapacity(int minCapacity) {

modCount++;

if (minCapacity - elementData.length > 0)

grow(minCapacity);

}

(1) 执行modCount自增，modCount为当前列表结构被修改次数。

(2) 判断minCapacity要是大于elementData.length就执行扩容，否则，直接退出此方法，进行添加元素的操作。

接着我们来看看grow方法的源码：

private void grow(int minCapacity) {

int oldCapacity = elementData.length;

int newCapacity = oldCapacity + (oldCapacity >> 1);

if (newCapacity - minCapacity < 0)

newCapacity = minCapacity;

if (newCapacity - MAX_ARRAY_SIZE > 0)

newCapacity = hugeCapacity(minCapacity);

elementData = Arrays.copyOf(elementData, newCapacity);

}

(1) 这里先拿到原来数据elementData的长度赋给一个变量oldCapacity，然后将原来的长度扩大1.5倍并付给oldCapacity。

(2) 判断minCapacity 是否大于newCapacity，成立则将minCapacity赋给newCapacity，为什么要这么做呢？因为从前的一层层的方法进行解析之后来看，minCapacity是允许扩容后的最小长度，也就是实际存有数据的最小长度，要是你扩容后的长度还比minCapacity要小，那么只能将minCapacity作为容器的长度。

(3) 然后判断容器新长度newCapacity是否大于容器所允许的最大长度MAX_ARRAY_SIZE，成立则将扩容长度设置为最大可用长度。

(4) 拷贝，扩容，构建一个新的数组。

接着我们来看看grow方法调用的hugeCapacity的源码：

private static int hugeCapacity(int minCapacity) {

if (minCapacity < 0) // overflow

throw new OutOfMemoryError();

return (minCapacity > MAX_ARRAY_SIZE) ?

Integer.MAX_VALUE :

MAX_ARRAY_SIZE;

}

(1) 直接判断minCapacity是否小于零，成立抛出异常，然后比较容器所允许的最小长度值是否大于MAX_ARRAY_SIZE，成立则将Integer的最大值赋值给minCapacity作为容器的最大长度。

add(int index, E element)方法

public void add(int index, E element) {

rangeCheckForAdd(index);

ensureCapacityInternal(size + 1); // Increments modCount!!

System.arraycopy(elementData, index, elementData, index + 1,size - index);

elementData[index] = element;

size++;

}

(1)  这里主要做三件事，第一件就是判断下标是否越界，如果是则抛出IndexOutOfBoundsException异常。

(2) 然后就是判断是否需要扩容，这个方法和上面的一样，已经说过了，就不再赘述了。

(3) 最后就是执行数组对象index后的对象后移一位，将元素添加到指定位置。

接下来我们来看看rangeCheckForAdd的源码

private void rangeCheckForAdd(int index) {

if (index > size || index < 0)

throw new IndexOutOfBoundsException(outOfBoundsMsg(index));

}

(1) 直接就是判断index > size或者index < 0条件，成立就直接抛出数组下标越界异常。

addAll(Collection c)方法

public boolean addAll(Collection<? extends E> c) {

return addAll(this.size, c);

}

public boolean addAll(int index, Collection<? extends E> c) {

rangeCheckForAdd(index);

int cSize = c.size();

if (cSize==0)

return false;

checkForComodification();

parent.addAll(parentOffset + index, c);

this.modCount = parent.modCount;

this.size += cSize;

return true;

}

private void checkForComodification() {

if (ArrayList.this.modCount != this.modCount)

throw new ConcurrentModificationException();

}

(1) addAll(Collection c)方法里面直接调用addAll(this.size, c)，在addAll(this.size, c)里面第一件事就是判断是否下标越界。

(2) 然后判断c的大小是否大于0，如果等于0 返回 false。

(3) 检查修改的次数是否相等，若不相等直接则抛出ConcurrentModificationException（并发修改）异常，这个也就是当我们用迭代器循环list的时候，在其中用list的方法新增/删除元素，就会出现这个错误。

(4) 将元素插入到数组中，将修改次数赋值给 modCount，最后size大小加一

(5) 在进行 add 操作时先判断下标是否越界，是否需要扩容，如果需要扩容，就复制数组，默认扩容一半，如果扩容一半不够的话，就用目标的size作为扩容后的容量，然后设置对应的下标元素值。

get()方法

public E get(int index) {

rangeCheck(index);

return elementData(index);

}

private void rangeCheck(int index) {

if (index >= size)

throw new IndexOutOfBoundsException(outOfBoundsMsg(index));

}

E elementData(int index) {

return (E) elementData[index];

}

(1) 这个就很简单了直接就是先判断是否下标越界，越界就抛出异常，最后返回指定index位置的元素值。

set()方法

public E set(int index, E element) {

rangeCheck(index);

E oldValue = elementData(index);

elementData[index] = element;

return oldValue;

}

(1) 先判断是否越界，然后取出原来index位置的值为oldValue，将新的值element设置到index位置，最后将旧的值oldValue返回。

remove()方法

public E remove(int index) {

rangeCheck(index);

modCount++;

E oldValue = elementData(index);

int numMoved = size - index - 1;

if (numMoved > 0)

System.arraycopy(elementData, index+1, elementData, index,

numMoved);

elementData[–size] = null; // clear to let GC do its work

return oldValue;

}

(1) 判断是否越界，然后将修改次数modCount值加1，然后就是获得原来index位置的旧值。

(2) 然后是计算index位置后面有多少个元素，接着将index位置后的元素向前移动一位，最后将旧值返回。

remove(Object o)方法

public boolean remove(Object o) {

if (o == null) {

for (int index = 0; index < size; index++)

if (elementData[index] == null) {

fastRemove(index);

return true;

}

} else {

for (int index = 0; index < size; index++)

if (o.equals(elementData[index])) {

fastRemove(index);

return true;

}

}

return false;

}

private void fastRemove(int index) {

modCount++;

int numMoved = size - index - 1;

if (numMoved > 0)

System.arraycopy(elementData, index+1, elementData, index,

numMoved);

elementData[–size] = null; // clear to let GC do its work

}

(1) 这个根据对象删除的方法比较简单，首先判断o对象是否为null对象，为null就遍历集合中的元素，是否存在null值，存在执行删除，删除指定对象的方法是fastRemove，原理就是计算index位置后的元素个数，然后将index后的元素都往前移动一位，最后将最后的一位赋值为null值。

(2) 若o对象是不为null对象的时候，执行的逻辑是一样的，那么为什么要分开写呢？很简单，因为它后面要调用o.equals(elementData[index]方法进行判断，要是为null，不就报空指针异常了。

Iterator迭代器

public Iterator iterator() {

return new Itr();

}

private class Itr implements Iterator {

int cursor;

int lastRet = -1;

int expectedModCount = modCount;

Itr() {}

public boolean hasNext() {

return cursor != size;

}

@SuppressWarnings(“unchecked”)

public E next() {

checkForComodification();

int i = cursor;

if (i >= size)

throw new NoSuchElementException();

Object[] elementData = ArrayList.this.elementData;

if (i >= elementData.length)

throw new ConcurrentModificationException();

cursor = i + 1;

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）