7.27面试题

最新推荐文章于 2022-09-08 14:28:08 发布

qq_46615920

最新推荐文章于 2022-09-08 14:28:08 发布

阅读量1.4k

点赞数 1

文章标签： javascript css vue.js es6 css3

本文链接：https://blog.csdn.net/qq_46615920/article/details/107822629

版权

一. 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 则会一直保存。

四十二.网站优化性能？

四十三.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

qq_46615920

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
7.27面试题

一. position属性值有哪些？分别有什么区别？Static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。Relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
复制链接

扫一扫