一. position属性值有哪些?分别有什么区别?
- Static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- Relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- absolute元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- Fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
二. Cookie、session、localstorage、sessionstorage有什么区别?
- cookie数据存放在客户的浏览器上,不是很安全,保存的是字符串
- session数据放在服务器上 ,会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,保存在服务器,保存的是对象
- sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
- localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
三. 在哪个钩子函数会挂载DOM节点?
mounted
四. v-if和v-show的区别?
- v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);
- v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;
- v-if 有更高的切换开销,v-show 切换开销小;
- v-if 有配套的 v-else-if 和 v-else,而 v-show 没有
- v-if 可以搭配 template 使用,而 v-show 不行
五. Vuex是什么?在什么情况下使用?
vuex是一个状态管理机制,采用集中式存储应用所有组件的状态
• state 存放状态
• mutations state成员操作
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理
六. keep-alive?
keep-alive 是 Vue 内置的一个组件
可以使被包含的组件保留状态,或避免重新渲染
七. nexttick?
nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
八. less和sass有什么作用?
- less、sass两者都是把功能模块化了,方便修改复用.
- less在客户端解析
- sass在服务器端解析
九. 移动端设备尺寸是320px,怎么实现1rem=16px?
<style>
@media (max-width: 320px) {
body,
html {
font-size: 16px;
}
}
</style>
十. 写一个$.ajax请求?
$.ajax({
url:'http://www.baidu.com',
type:'POST',
data:data,
cache:true,
headers:{},
beforeSend:function(){},
success:function(){},
error:function(){},
complete:function(){}
});
十一. 打印出1-10000的对称数?(如131 1221)
//方法一
2 function isSymmetryNum(start,end){
3 var flag;
4 for(var i=start;i<end+1;i++){
5 flag=true;
6 var iStr=i.toString();
7 for(var j=0,len=iStr.length;j<len/2;j++){
8 if(iStr.charAt(j)!==iStr.charAt(len-1-j)||i<10){
9 flag=false;
10 break;
11 }
12 }
13 if(flag==true){
14 console.log(i);
15 }
17 }
18 }
19 //方法二(更好)
20 function isSymmetryNum(start,end){
21 for(var i=start;i<end+1;i++){
22 var iInversionNumber=+(i.toString().split("").reverse().join(""));
23
24 if(iInversionNumber===i&&i>10){
25 console.log(i);
26 }
28 }
29 }
30 isSymmetryNum(1,10000);
十二. 用2种flex布局实现元素水平居中?
.box {
display: flex;
justify-content: center;//水平居中
align-items: center;//垂直居中
}
十三. 前端如何优化网站性能?
1. 减少 HTTP 请求数量
2. 控制资源文件加载优先级
3. 利用浏览器缓存
4. 减少重排(Reflow)
5. 减少 DOM 操作
6. 图标使用 IconFont 替换
7. 使用内容分发CDN加速
十四. Vue的生命周期?
- beforeCreate(创建前) 在数据观测和初始化事件还未开始
- created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
- beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
- mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
- beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
- updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
- beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
- destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
十五. 清除浮动有哪些方法?
- 为父元素添加overflow:hidden
<div style="overflow:hidden">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
</div>
img{width:50px;border:1px solid #8e8e8e;float:left;}
- 浮动父元素(不推荐)
<div style="float:left">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
</div>
img{width:50px;border:1px solid #8e8e8e;float:left;}
- 使用clear:both清除浮动,在所有浮动元素下方添加一个该属性,可以消除float的破坏性,但会增加不必要的标签
<div>
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
<div style="clear:both;"></div>
</div>
img{width:50px;border:1px solid #8e8e8e;float:left;}
- 使用伪元素清除浮动(推荐)
<div class="clearfix">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
<!-- <div style="clear:both;"></div> -->
</div>
.clearfix:after{content:'';display:block;clear:both;}.clearfix{//兼容低版本IEzoom:1;}
十六. vue中子组件调用父组件的方法?
方法一 :直接在子组件中通过this.$parent.event来调用父组件的方法
**//父组件**
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
**子组件**
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
方法二:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了
**父组件**
<template>
<div>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
**子组件**
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>
方法三:父组件把方法传入子组件中,在子组件里直接调用这个方法
**父组件**
<template>
<div>
<child :fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
**子组件**
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>
十七. 防抖、节流?
防抖(debounce):n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
节流 (throttle): 高频事件在规定时间内只会执行一次,执行一次后,只有大于设定的执行周期后才会执行第二次。
十八. 路由拦截?
1.data数据定义userInfo成一个对象,包含账号与密码两个属性
data() {
return {
userInfo: {
loginName: "",
password: ""
}
};
}
2.账号密码,采用对象里的属性绑定。此处我用的是element-ui,外层特定的标签名称不要纠结
其中点击登录的onSubmit的方法中,若成功登录,则在localStorage中存储
3.在路由跳转时,判断一下当前的localStorage中有没有存储信息
【路由按你需求写,这里我写了嵌套路由与普通路由的模板。路由定义时,须将其定义一下并export出去,才可用下面的路由判断拦截】
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
component: index => require(['@/view/system/index'], index),
meta: [{ parentName: '', name: '首页' }],
children: [{
path: '/edit_detail',
name: 'edit_detail',
component: edit_detail => require(['@/view/system/info/edit_detail'], edit_detail),
meta: [{ parentName: '', name: '移动端中草药详情' }]
}, {
path: '/edit_zcy',
name: 'edit_zcy',
component: edit_zcy => require(['@/view/system/info/edit_zcy'], edit_zcy),
meta: [{ parentName: '', name: '中草药示范园区简介' }]
}
]
},
{
path: "/login",
name: "login",
component: login => require(["@/view/system/login"], login),
meta: [{ parentName: '', name: '登录' }],
},
},
]
})
router.beforeEach(function(to, from, next) {
if (!localStorage.getItem("loginName")) {
if (to.path !== '/login') {
return next('/login')
}
}
next()
})
export default router
4.路由拦截详解:在每个路由跳转时对当前路由进行判断,如果当前页面中不存在“登录成功时存储的信息”的话,则将其拦截至登录页面。
【还记得吗,当初我们登录成功就存储的是一个loginName】
十九. session存储?
二十. Js基本数据类型?
- 常用的基本数据类型包括 undefined、null、number、boolean、string;
- 引用数据类型也就是对象类型,比如:Object、array、function、data等;
二十一. 全局变量和局部变量的区别?
- 简单来说在 函数里边定义的变量是局部变量,在函数外边访问不到; 全局变量是在函数外边的,在函数内外都可以被访问;
var a = 10;
function test() {
var b = 100;
console.log(a);//打印结果是10
a=100;
}
test();
console.log(a); //打印结果为100
console.log(b);//报错 b is not defind
说明:
因为a 是全局变量所以在函数内部可以被访问且被赋值;第一次打印结果为10;
执行函数后a的值变为100 ;
b是局部变量;在函数外部被打印,访问不到b的值 所以报错;
- 如果局部变量的变量名和全局变量名形同,在函数内部变量值全部指向局部变量;
var a = 10;
function test() {
console.log(a);//打印结果为undefind
var a = 100;
console.log(a);//打印结果为100
}
test();
console.log(a);//打印结果为10
说明:
1.如果局部变量的变量名和全局变量名形同,在函数内部变量值全部指向局部变量;
2.第5行结果为undefind;因为只要局部变量a被声明,a就指向局部变量,但是打印在赋值之前,结果为undefind;第二次打印结果在赋值之后 为100;要想改变全局变量a 的值,可以用window.a ;
3.第三次打印在函数外边,所以打印全局变量a,值为10;
- 关于参数问题;参数也是局部变量;
var a = 1;
function test(a) {
a=100;
console.log(a);//打印结果为100
return a;
}
test(a);
// a=test(a);
console.log(a);//打印结果为1
说明:
函数的形参和全局变量重名;既然参数也是局部变量,那函数内部对于a的操作都指向局部变量a影响不了全局变量a, 所以13行输出1;第5行输出100;
浅显的理解就是参数就是引用变量的值,在函数内部进行加工,其实不改变变量的值;(这里是值类型的参数传递情况可以这么理解);
如果是引用类型的参数传递;就会影响到全局变量的值了;(这个和数据存储有关);
二十二. Js跨域?
二十三. Json数据格式?
json是一种与语言无关的数据交换的格式,使用Json的格式与解析方便的可以表示一个对象信息,json有两种格式:
①对象格式:{“key1”:obj,“key2”:obj,“key3”:obj…}
②数组/集合格式:[obj,obj,obj…]。
json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。与json对象不同的是,json数据格式的属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。json的另外一个数据格式是数组,和javascript中的数组字面量相同。
二十四.使用过的js框架和库?
- Jquery
- bootstrap
- uikit
- vue&react
- angularjs
- chartjs&D3js
二十五.打印出字符串出现最多的字符次数?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS求字符串中出现最多次数的字符和次数</title>
</head>
<body>
<script>
var t = 'badfadfegaaaaadf';
var h = {};
for (var i=0; i<t.length; i++){
if( h.hasOwnProperty(t[i]) ){ //判断某个属性是否在对象内,方法一
h[t[i]]+=1;
}
else {
h[t[i]] = 1;
}
};
// for (var i=0; i<t.length; i++){
// if( h[t[i]] !== undefined ){ //判断某个属性是否在对象内,方法二
// h[t[i]]+=1;
// }
// else {
// h[t[i]] = 1;
// }
// };
console.log(t);
console.log(h);
// 求t字符串中出现最多次数的字符和次数
var char, times = 0;
for ( k in h ){
if ( h[k] > times ) {
times = h[k];
char = k;
}
}
console.log(char, times);
</script>
</body>
</html>
二十六.div在不同分辨率屏幕上下左右居中?
方法一:
#box{
width: 400px;
height: 300px;
background-color: pink;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法二:
#box{
width: 400px;
height: 300px;
background-color: pink;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法三:
body{
display: flex;
justify-content: center;
align-items: center;
}
二十七.ES5和ES6分别有几种方式变量声明?
ES5变量声明 var
ES6变量声明 const let
二十八.CSS3和H5有哪些新特性?
html5的新特性?(记住有九大模块内容)
- 添加了video,radio标签
- 添加了canvas画布和svg,渲染矢量图片
- 添加了一些列语义化标签header,footer,main,section,aside,nav等
- input的type值新添加了很多属性(email,url,number,range,Date pickers (date, month, week, time, datetime, datetime-local),search,color)
- 添加了地理位置定位功能 Geolocation API
- 添加了web存储功能,localStorage和sessionStorage
- 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
- web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
- 服务端事件推送(EventSource 对象用于接收服务器发送事件通知),所有主流浏览器均支持服务器发送事件,除了 Internet Explorer
CSS3中新添加的特性?(css3也有九大属性,要多去实践应用)
- 媒体查询(可以查询设备的物理像素然后进行自适应操作)
- transform,transition,translate,scale,skelw,rotate等相关动画效果
- box-shadow,text-shadow等特效
- CSS3 @font-face 规则,设计师可以引入任意的字体了
- CSS3 @keyframes 规则,可以自己创建一些动画等
- 2D、3D转换
- 添加了border-radius,border-image等属性
- CSS3 创建多列(column-count规定文本可以以几列的方式布局)
- CSS3 用户界面(resize,box-sizing,outline-offset)
二十九.创建函数的几种方式?
- 函数声明
function sum1(n1,n2){
return n1+n2;
};
- 函数表达式,又叫函数字面量
var sum2=function(n1,n2){
return n1+n2;
};
- 函数构造法,参数必须加引号
var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5
三十.display:none和visibility:hidden的区别?
-
作用不同
visibility: hidden----将元素隐藏,但是bai在网页中该占的位置还是占着du。
display: none----将元素的显示设为无,即在网页中不占任何的位置。 -
使用后HTML元素有所不同
visibility:hidden,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
display:none,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。 -
定义不同
visibility 属性指定一个元素是否是可见的。
display这个属性用于定义建立布局时元素生成的显示框类型。
三十一.null和undefined的区别?
null表示没有对象,即该处不应该有值
- 作为函数的参数,表示该函数的参数不是对象
- 作为对象原型链的终点
undefined表示缺少值,即此处应该有值,但没有定义
- 定义了形参,没有传实参,显示undefined
- 对象属性名不存在时,显示undefined
- 函数没有写返回值,即没有写return,拿到的是undefined
- 写了return,但没有赋值,拿到的是undefined
null和undefined转换成number数据类型
null 默认转成 0
undefined 默认转成 NaN
三十二.什么是事件委托?
事件委托,顾名思义,就是将本来需要 A 处理的事情,委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。当然,如果子元素阻止了事件冒泡,那么委托也就没法实现了。
三十三.浮动的工作原理?清除浮动的方法?
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动元素引起的问题和解决办法?
浮动元素引起的问题:
父元素的高度无法被撑开,影响与父元素同级的元素
与浮动元素同级的非浮动元素(内联元素)会跟随其后
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
方法见十五
三十四.简述Chome盒模型与IE盒模型的区别?
IE中的width是包括了padding的,而W3C也就是我们平常使用的盒模型不包括,不管padding加多少内容区域的宽度不会改变,这也十分合理。
避免触发IE盒模型的方法是使用声明,告诉IE采用W3C盒子模型即可。
三十五.盒子页面居中?
见二十六
三十六.v-if和v-for的优先级?
v-for优先级更高
三十七.http和https的区别?
http协议和https协议的区别:传输信息安全性不同、连接方式不同、端口zhi不同、证书申请方式不同
一、传输信息安全性不同
1、http协议:是超文本传输协议,信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息。
2、https协议:是具有安全性的ssl加密传输协议,为浏览器和服务器之间的通信加密,确保数据传输的安全。
二、连接方式不同
1、http协议:http的连接很简单,是无状态的。
2、https协议:是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
1、http协议:使用的端口是80。
2、https协议:使用的端口是443.
四、证书申请方式不同
1、http协议:免费申请。
2、https协议:需要到ca申请证书,一般免费证书很少,需要交费。
三十八.localstorage的存储方式?
setItem
三十九.谈谈BFC?
介绍
BFC:(Block Formatting Context):块级格式化上下文。它理解成一个独立的区域,此区域里面的子元素不会影响到外面的元素。反之也如此。
BFC布局规则:
1. 内部的Box会在垂直方向,一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生外边距外边距合并
3. 每个元素的margin box的左边, 与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时,浮动元素也参与计算
如何生成BFC:
1. body 根元素
2. 浮动元素:float 除 none 以外的值
3. 定位元素:position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
作用:
1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直方向margin合并
四十.正则表达式实现千位分隔符?
var num=1242343243;
console.log(num.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,'));
四十一.前端的存储方式有哪些?
1. 本地存储localstorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
大小:
每个域名5M
常用的API:
getItem //取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
2. 本地存储sessionstorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。
四十二.网站优化性能?
1. 减少 HTTP 请求数量
2. 控制资源文件加载优先级
3. 利用浏览器缓存
4. 减少重排(Reflow)
5. 减少 DOM 操作
6. 图标使用 IconFont 替换
7. 使用内容分发CDN加速
四十三.vue实现选项卡?
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
li{ list-style-type: none; display: inline-block; margin-right: 0.5rem; }
.normal{ color: green; }
.active{ color: red; }
.always{display: none;}
.change{display: block;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="myTab">
<ul >
<li class="normal" v-for="(item,index) in items" :key="item.id" :class="{'active':isActive==index}" @click="change(index)">
{{item}}
</li>
</ul>
<ol >
<li v-for="(item,index) in content" :key="item.id" class="always" :class="{'change':isActive==index}">{{item}}</li>
</ol>
</div>
</body>
<script>
new Vue({
el: ".myTab",
data: {
items: [
'选项卡一',
'选项卡二',
'选项卡三'
],
content:[
"内容一",
"内容二",
"内容三"
],
isActive: 0 //索引值默认为0,即item1为默认激活的选项卡
},
methods: {
change: function (index) {
this.isActive = index;
}
}
})
</script>
</html>
四十四.随机生成一个数组?
1、随机生成长度为n,且值在[min-max]范围内
function generateRandomArr(n, min, max) {
var arr = [];
for (var i = 0; i < n; i++) {
var random = Math.floor(Math.random() * (max - min + 1) + min);
arr.push(random);
}
return arr;
}
2、随机生成长度为n,且值在[0-(n-1)]范围内的无重复数据的有序数组
function generateOrderedNoRepeatArr(n) {
var arr = Array.from({length:n}, (v, k) => k);
return arr;
}
3、随机生成长度为n,且值在[min-max]范围内的随机不重复数组,前提是n<(max-min)
function generateNoRepeatdArr(n, min, max) {
var arr = [],res = [];
for(var i=min;i<max;i++){
arr.push(i);
}
for (i=0 ; i <n; i++) {
var index = parseInt(Math.random()*(arr.length));
res.push(arr[index]);
arr.splice(index,1) //已选用的数,从数组arr中移除, 实现去重复
}
return res;
}
4、随机生成长度为n,且值在[min-max]范围内的随机有序数组
/*首先生成一个无须且可能有重复数据的数组*/
function generateOrderedArr(n, min, max) {
var arr = [];
for (var i = 0; i < n; i++) {
var random = Math.floor(Math.random() * (max - min + 1) + min);
arr.push(random);
}
return arr;
}
/*以下为三路快排的方法,可对无序数组进行排序,达到良好的效果*/
function __quickSort3Ways(arr, l, r) {
if (l >= r) return;
/*partition*/
var random = Math.floor(Math.random() * (r - l + 1) + l);
[arr[l], arr[random]] = [arr[random], arr[l]];
var v = arr[l];
var lt = l; //arr[l+1...lt]<v
var gt = r + 1; //arr[gt...r]>v
var i = l + 1; //arr[lt+1...i]==v
while (i < gt) {
if (arr[i] < v) {
[arr[i], arr[lt + 1]] = [arr[lt + 1], arr[i]];
lt++;
i++;
} else if (arr[i] > v) {
[arr[i], arr[gt - 1]] = [arr[gt - 1], arr[i]];
gt--;
} else { //arr[i]==v
i++;
}
}
[arr[l], arr[lt]] = [arr[lt], arr[l]];
__quickSort3Ways(arr, l, lt - 1);
__quickSort3Ways(arr, gt, r);
}
function quickSort3Ways(arr, n) {
__quickSort3Ways(arr, 0, n - 1);
}
/*排好序的数组*/
quickSort3Ways(generateOrderedArr(100,1,10),100);
四十五.css选择器优先级?
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性
四十六.react中的setState是同步还是异步?
1、setState 只在合成事件和钩子函数中是“异步”的,在原生事件和setTimeout 中都是同步的。
2、setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形成了所谓的“异步”,当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
3、setState 的批量更新优化也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次setState,setState的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时setState多个不同的值,在更新时会对其进行合并批量更新。
四十七.react和vue中的keys的作用?
以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性
一句话概括就是key的作用主要是为了高效的更新虚拟DOM
四十八.ES6合并数组的方法
var a = [1,2,3];
var b = [4,5,6];
1、concat
js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。
var c = a.concat(b);//c=[1,2,3,4,5,6]
2、for循环
大概的思路是:遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中。
for(var i in b){
a.push(b[i]);
}
3、apply
函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。
a.push.apply(a,b);
console.log('a.push.apply(a,b)==', a.push.apply(a,b))// 这里返回的是一个boolean值 true or false
console.log('a==', a)
以下是ES6中合并数组的写法
formatEs6ConcatArr () {
let arr1 = ['a', 'b']
let arr2 = ['c', 'c']
let arr3 = ['d', 'e']
// ES5 的合并数组
// arr1.concat(arr2, arr3)
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
let arr4 = [...arr1, ...arr2, ...arr3]
console.log('arr4=', arr4)
// [ 'a', 'b', 'c', 'd', 'e' ]
// 不过,这两种方法都是浅拷贝,使用的时候需要注意。
const a1 = [{foo: 1}]
const a2 = [{bar: 2}]
const a3 = a1.concat(a2)
const a4 = [...a1, ...a2]
console.log(a3[0] === a1[0])// true
console.log(a4[0] === a1[0])// true
}
上面代码中,a3和a4是用两种不同方法合并而成的新数组,但是它们的成员都是对原数组成员的引用,这就是浅拷贝。如果修改了原数组的成员,会同步反映到新数组。
四十九.js的缓存?
缓存的原理
1、就是将常用的数据存储起来,提供便利,减少查询次数和所消耗的事件
2、利用作用的原理所产生的数据库:非关系型数据库(内存型数据库) MongoDB、Redis等
3、还有网站静态页面缓存机制,将网页静态化,存储在服务器端
五十.闭包
function foo(){
var a = 2;
function bar(){
console.log(a);
}
retutn bar;
}
var baz = foo();
baz();//2