郑州前端面试总结

时间：2021.9.14

面试公司：郑州众惠通信技术有限公司（小外包）

简介：到面试公司后，一个小姐姐面试没有自我介绍直接问问题。

---

css

给一个图片和一些文字，怎样实现两栏

考察：两栏自适应

• 简单粗暴float来实现

• absolute"离家出走"定位过去

• 圣杯布局 - margin负边距

• 高贵优雅flex轻松搞定

• table表示不服气，凭什么我要被抛弃

• 衍生 - display:table-cell;

• 别人总结的比较全面的借鉴一下

 css布局 - 两栏自适应布局的几种实现方法汇总 - xing.org1^ - 博客园

Js

js的数据类型以及区别

1.基本数据类型：number string null  undefined Boolean

2.引用数据类型：数组 对象 构造函数

基本数据类型是简单的数据段；引用数据类型是多个值构成的对象

总结区别

a 声明变量时不同的内存分配：　

　　1）原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

　　　　这是因为这些原始类型占据的空间是固定的，所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。

　　2）引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存地址。

　　　  这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。

　　　  地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。

b 不同的内存分配机制也带来了不同的访问机制

　　1）在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，

　　　　首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问。

　　2）而原始类型的值则是可以直接访问到的。

c 复制变量时的不同

　　1）原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。

　　2）引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，

　　　　也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。

　　　　（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。多了一个指针

　d 参数传递的不同（把实参复制给形参的过程）

　　首先我们应该明确一点：ECMAScript中所有函数的参数都是按值来传递的。

　　但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别。 　

　　1）原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响。

　　2）引用值：对象变量它里面的值是这个对象在堆内存中的内存地址，这一点你要时刻铭记在心！

因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象。

根据数据类型出的题

var a = 1;

var b = a;

b = 2;

console.log(a); // 1值

b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值。b只是保存了a复制的一个副本。所以，b的改变，对a没有影响。

var obj1 = new Object();

var obj2 = obj1;

obj2.name = "我有名字了";

console.log(obj1.name); // 我有名字了

说明这两个引用数据类型指向了同一个堆内存对象。obj1赋值给onj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2，

但是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。

对数组处理的方法

1. concat()   ：数组拼接

concat()方法可以基于当前数组中的所有项创建一个新数组

　　1) 当参数是数组：将参数数组拼接在原始数组后面；

　　2）当参数非数组：将参数每一项一次拼接在原始数组后面

2.slice() ：数组截取，接受1个或2个参数（返回项的起始和结束位置）

　基于当前数组中的一或多个项创建一个新数组

　　1）当只有一个参数：参数为截取的起始位置下标（包含此项），一直截取到原始数据最后

　　2）当有两个参数：第一个参数代表起始位置下标（包含此项），第二个参数代表结束位置下标（不包含此项）（下标含前不含后）

3.splice() ：号称最强大的数组方法
　三种使用方式
　　　　1）删除
　　　　　可以删除任意数量的项，只需指定 2 个参数:要删除的第一项的位置和要删除的项数。
　　　　　　 例如，splice(0,2)会删除数组中的前两项。
　　　　2）插入
　　　　　可以向指定位置插入任意数量的项，只需提供 3 个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。
　　　　　　例如， splice(2,0,"red","green")会从当前数组的位置 2 开始插入字符串"red"和"green"。
　　　　3）替换
　　　　　可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数:起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项(如果没有删除任何 项，则返回一个空数组)。

数组的增删改查

下面将数组的方法分为5类（官方文档中可查）

A – 给数组添加元素（增）：push(), unshift(),splice()

B – 从数组中删除元素（删）:pop(), shift(),splice()

C – 修改数组中的元素（改）:splice(),reverse(),sort()

D --从已有数组中返回选定的数组（查）：slice()

E – 不会改变元素数组的内容的函数：concat(),slice()

Vue

Vue路由传参的方式

1.router.js后跟：id配置参数；

2.query方法

3.name方法

4.Vue自带的标签标签传值

路由之间的跳转方式

一、<router-link to=' '></router-link>

二、<router-link :to=' '></router-link>,绑定数据的方式

三、路由中定义name的方法

vue组件父组件怎样接收子组件传过来的值

父组件向子组件传值用props 父组件接收子组件传过来的值{{}}

uniapp与小程序的区别

• 触摸事件名称：
  ①微信小程序：bindtap
  ②uni-app：@click

• 函数传参方式：
  ①微信小程序：<view bindtap="click" data-id="id"></view>
  ②uni-app：<view @click="click(id)"></view>

• 函数接收参数：
  ①微信小程序：function(e){this.setData(currentId:e.currentTarget.dataset.id)}
  ②uni-app：function(id){this.currentId = id}

• for循环：
  ①微信小程序：<view wx:for="{{currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view>
  ②uni-app：<view v-for="(s_item,s_index) in currentList"></view>

• if判断：
  ①微信小程序：<view wx:if="{{isShow}}"></view>
  ②uni-app：<view v-if="isShow"></view>

• src动态接收图片：
  ①微信小程序：<image src="{{item.img}}"></image>
  ②uni-app：<image :src="$util.img(item.img)"></image>

• 页面传参：
  ①微信小程序：<navigator url="/pages/live?id={{item.room_id}}"></navigator>
  ②uni-app：<navigator :url="'/pages/live?id=' + item.room_id"></navigator>

vue和angular区别 

Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

---