|
参加了一个笔试，明明我投的是前端岗，为什么要C语言JAVA二选一？我想不明白T_T，虽然以前学了但是很多知识都没有印象了，mysql 好歹还能select一下，害。然后室友面试，面技术，在之前的刷面试题里也有，浅拷贝和深拷贝、盒子模型、CSS3 新特性、原型链、闭包、JS数据类型、双向绑定、防抖节流…然后我就忘记了。晚上，我又陪我室友线上面试去了哈哈哈，她面了快一个小时，那么今天明天的刷题内容就是对今天面试的一个题目回顾啦！
v-for与v-if优先级
v-for 比 v-if 具有更高的优先级
正常使用来说
v-if
v-for
computed和methods的区别
computed是基于缓存的(如果计算的属性没有变化是不会重新计算的，则执行缓存数据)
methods是没有缓存的(也就是template只要render了[或者重复render]就会执行methods内所有的方法)
JAVA和JS的区别
（为什么会问这个问题？因为我室友说她java学的还可以，嗯）
1.用处不一样：
Java目前被广泛应用于PC端、手机端、互联网、数据中心等等；
JavaScript则被主要用于嵌入文本到HTML页面，读写HTML元素，控制cookies等。
2.出身不同：
Javascript与Java是由不同的公司开发的不同产品。
Javascript是Netscape公司的脚本语言；
而Java是SUN Microsystems 公司推出的新一代面向对象的程序设计语言。
3.嵌入方式不同：
在HTML文档中，两种编程语言的标识不同
Javascript 使用<script><script> 来标识；
Java 使用 Applet 来标识。
4.语言类型不同：
JavaScript 是动态类型语言；是脚本语言，是基于对象和事件驱动的语言。
Java 是静态类型语言，面向对象的语言。
5.所采取的变量不同：
JavaScript 中的变量声明采用弱类型，即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。
Java 采用强类型变量检查，即所有变量在编译之前必须作声明。
6.代码格式不同：
Javascript 的代码是一种动态的，可以直接嵌入 HTML 文档，并且可动态装载，编写 HTML 文档就像编辑文本文件一样方便，其独立文件的格式为*.js。
Java 是一种与 HTML 无关的格式，必须通过像 HTML 中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中，其独立文件的格式为 *.class。
Javascript 采用动态联编，即 Javascript 的对象引用在运行时进行检查。
Java 采用静态联编，即 Java 的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。
Javascript 不直接对文本和图形进行操作，它在 Web 页面中与 HTML 元素组合一起发挥作用，但它可以控制浏览器，让浏览器直接对文本和图形进行处理。
Java 则可以直接对文本和图形进行操作。
Java 和 JavaScript 相同之处：
它们的语法和 C 语言都很相似；它们都是面向对象的（虽然实现的方式略有不同）；JavaScript 在设计时参照了 Java 的命名规则；
总而言之，JavaScript 除了长得和 Java 比较像之外，语言风格相去甚远。JavaScript 在设计时所参考的对象不包括 Java，而包括了像 Self 和 Scheme 这样的语言。
Java和JavaScript各有所长各有专精，Java的舞台在编程领域，而JavaScript的得心之处是在Web页面中。
JS基本数据类型
Number、String、Boolean、Undefined、Null、Symbol（ES6新增）
JS判断数据类型的几种方法
- typeof
- 缺点：typeof null值为Object，无法分辨是null还是Object
- instanceof
- Object.prototype.toString.call()
- 可以区分null，string，boolean，number，undefined，array，function，object，date。math数据类型
- constructor
JS判断变量是不是数组的方法
- instanceof
var arr=[]; arr instanceof Array
- 原型prototype+toString+call()
var arr=[]; Object.prototype.toString.call(arr)
- 原型prototype+isPrototypeOf()
var arr=[]; Array.prototypr.isPrototypeOf(arr)
- constructor
var arr=[]; console.log(arr.constructor.toString())
- 数组方法isArray()
var arr=[]; Array.isArray(arr)
JS去重
1、indexOf
新建一个数组，遍历要去重的数据，当值不在新数组的时候（indexOf为-1）就加入这个新数组中。
function unique(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i])
}
}
return newArr;
}
var arr = [1,2,2,3,4,4,5,1,3];
var newArr = unique(arr);console.log(newArr);
2、for循环双层优化遍历
双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length，将没有重复的右边值放入新数组。（检测到有重复值的时候终止当前的循环，同时进入外循环的下一轮判断）
function unique(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i])
}
}
return newArr;
}
var arr = [1,2,2,3,4,4,5,1,3];
var newArr = unique(arr);console.log(newArr);
3、ES6数组去重（Set）
利用ES6的set方法
function unique(arr){
return Array.from(new Set(arr));
}
var arr = [1,2,2,3,5,3,6,5];
var res = unique(arr)
console.log(res );
4、利用对象的属性不能相同的特点进行去重
（1）创建一个新的数组存放结果
（2）创建一个空对象
（3）for循环的时候每次取一个元素与对象进行对比，如果这个元素不重复，就把他存放到结果数组中，同时把这个元素内容作为对象的一个属性，并赋值1，存入到（2）建立的对象中。
说明：如何对比？就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果可以访问到值，则说明重复。
function unique(arr){
var res = [];
var obj = {};
for(var i=0; i<arr.length; i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
return res;
}
var arr = [1,2,2,3,5,3,6,5];
var res = unique(arr)
console.log(res );
CSS盒模型
盒模型：内存content、填充padding、边界margin、边框borer
标准盒模型的宽高是：内容宽高content
IE盒模型的宽高是：content、padding、border
设置盒模型的方式：
box-sizing：content-box 标准盒子
box-sizing：border-box IE盒子
给盒子垂直居中
1、定位
position : absolute;
top : 50%;
left: 50%;
transform : translate(-50%,-50%)
2、flex布局 给父盒子添加属性
display : flex;
justify-content:center;
align-items:center;
3、为父盒子设置属性
display : table-cell;
text-align : center;
vertical-align :middle;
rem布局原理
rem指的是参照根节点的文字大小，根节点值的是HTML标签，设置HTML标签的文字大小，其他元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变HTML文字的大小，就会改变所有元素用rem设置的尺寸大小。
rem的本质是等比缩放，一般是基于宽度
假设将屏幕宽度平均分为100份，每份宽度用x表示，x=屏幕宽度/100
如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。
vw vh
vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN
这不就是单位x吗，没错根据定义可以发现1vw=1x，有了vw我们完全可以绕过rem这个中介了，下面两种方案是等价的，可以看到vw比rem更简单，毕竟rem是为了实现vw么
rem方案
html {fons-size: width / 100}
p {width: 15.625rem}
vw方案
p {width: 15.625vw}
vw还可以和rem方案结合，这样计算html字体大小就不需要用js了
html {fons-size: 1vw}
p {width: 15.625rem}
虽然vw各种优点，但是vw也有缺点，首先vw的兼容性不如rem好
另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题
CSS3新特性
边框：
border-radius：添加圆角边框
border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr[内/外部阴影]）
border-image：设置边框图像
bode-image-source：边框图片的路径
boder-image-repeat：图像边框是否平铺（repeat平铺 round铺满 stretch拉伸）
背景：
background-size：背景图片尺寸
background-origin：规定background-position属性相对于什么位置定位。
background-clip：规定背景的绘制区域（padding-box，border-box，content-box）
渐变：
linear-break：定义如何换行
word-wrap：允许长的内容可以自动换行
text-overflow：当文本溢出包含他的元素时应该干啥
text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
transform应用于2D3D转换，可以将元素旋转、移动
缩放、倾斜
transform-origin：可以更改元素转换的位置（xyz轴）
transform-style：指定嵌套元素怎么样在三位空间中呈现
2D转换方法：
rotate旋转translate（x，y）指定元素在二维空间的位移scale(n)定义缩放转换
3D转换方法：
perspective(n)为3D转换translate rotate scale
过渡：
transition-property过去属性名
transition-duration：完成过渡效果需要花费的时间
transition-timing-function：指定切换效果的速度
transition-delay：指定什么时候开始切换效果
动画：
animation-name 为@keyframes动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
浅拷贝和深拷贝
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。
浅拷贝只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。
深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。（一般用hash递归）
浅拷贝的方法：
（深拷贝我理解但是我真的写不出来要命）
Array.prototype.slice
let array = [{a:1},{b:2}]
let array1 = array.slice(0);
console.log(array1)
ES6扩展运算符
let a = {
name: "hls",
other: {
hobby: "learning",
time: "2020-09-23"
}
}
let b = {...a};
let obj = {a:1,b:{c:1}}
let obj2 = {...obj}
console.log(obj2)
Array.from()
var array1 = ['a', ['b', 'c'], 'd'];
var array2 = Array.from(array1);
array1[1][0] = 'e';
console.log(array2[1][0]);
Array.concat()
JS中的JSON.stringify()
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify(value[, replacer[, space]])
value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
返回包含 JSON 文本的字符串。
那么今天就先到这里啦！明天继续！冲冲冲！
|