#目录1.作用域2.函数封装(例子:字符串拼接)3.冒泡排序4.数组反转5.语义化标签6.h5新特性(标签)7.闭包8.去重9.flex10.rem布局11.this指向12.清除浮动13.VUE生命周期以及特点14.Promise15.块元素有哪些16.vue-router17.浏览器储存方式19.性能优化20.css哪些属性可以继承21.VUEX24.v-show v-if区别27.深度拷贝 浅度拷贝29.http状态码30.link标签和import区别31.跨域解决方案32.webpack33.transform34.盒模型35.label36.js 递归用js递归的方式写1到100求和?37.target、currentTarget的区别?39.说一下自己常用的es6的功能40.get post put delete41.js基本类型和引用类型43.require import区别区别1:模块加载的时间区别2:模块的本质44.img中的alt title区别45.BFC规范理解46.null underfined区别47.vue组件之间的传递48.apply call作用 :区别 :49.css 选择符50.vue通信
1.作用域
var num1=50;
var num2=66;
function f1(num,num1){
num=100;
num1=200;
num2=200;
console.log(num);
console.log(num1);
console.log(num2);
}
f1(num1,num2);
//f1(50,66)
//50
console.log(num1);
//200
console.log(num2);
注意:let var const区别
let 只作用域块元素当中 定义的是变量
var 作用与全局当中 定义的变量
const 定义的常量
2.函数封装(例子:字符串拼接)
题目:将foo='get-element-by-id' 拼接成getElementById
function toString(foo){
let arr=foo.split('-')
for (let index = 1; index < arr.length; index++) {
arr[index]=arr[index].charAt(0).toUpperCase()+ arr[index].substr(1,arr[index].length-1)
}
let arr1=arr.join("");
console.log(arr1);
return arr1
}
toString('get-element-by-id')
注意:
split('')通过什么符号字母进行截取 且返回的结果是数组
charAt('拿那一位')
toUpperCase()大写
substr(start,length)字符串中抽取从 start 下标开始的指定数目的字符
join('')通过字母或者符号进行数组的拼接 返回的是一串字符串
3.冒泡排序
let arr=[5,4,3,2,1]
// 轮数
for (let i = 0; i < arr.length-1; i++) {
// 次数
for (let j =0; j < arr.length-1-i; j++) {
if (arr[j]<arr[j+1]) {
let temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp
}
}
}
console.log(arr);
4.数组反转
5.语义化标签
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark
6.h5新特性(标签)
header标签包含引导和导航等,通常包含h1~h6、搜索框、logo等。 footer标签一般配合address标签(显示地址),包含作者信息、相关链接等。 nav标签一般包含多个a标签,构建导航组件。 aside标签主要装载广告、侧边栏。 article标签包含文章,一般内嵌header、footer、h1、p标签。 section标签可以用在以上任一一个标签中划分组件。 hgroup顾名思义是h1~h6的集合
7.闭包
闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即:函数 A
内部有一个函数 B
,函数 B
可以访问到函数 A
中的变量,那么函数 B
就是闭包
8.去重
var arr=['12','32','89','12','12','78','12','32'];
// 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
for(var i = 0; i < array.length; i++){ //遍历当前数组
if (n.indexOf(array[i]) == -1)
n.push(array[i]);
}
return n;
}
arr=unique1(arr);
// 速度最快, 占空间最多(空间换时间)
function unique2(array){
var n = {}, r = [], type;
for (var i = 0; i < array.length; i++) {
type = typeof array[i];
if (!n[array[i]]) {
n[array[i]] = [type];
r.push(array[i]);
} else if (n[array[i]].indexOf(type) < 0) {
n[array[i]].push(type);
r.push(array[i]);
}
}
return r;
}
//数组下标判断法
function unique3(array){
var n = [array[0]]; //结果数组
for(var i = 1; i < array.length; i++) { //从第二项开始遍历
if (array.indexOf(array[i]) == i)
n.push(array[i]);
}
return n;
}
9.flex
属性
水平居中
-
行内元素:
text-align: center
-
块级元素:
margin: 0 auto
-
position:absolute +left:50%+ transform:translateX(-50%)
-
display:flex + justify-content: center
垂直居中
-
设置line-height 等于height
-
position:absolute +top:50%+ transform:translateY(-50%)
-
display:flex + align-items: center
-
display:table+display:table-cell + vertical-align: middle;
-
10.rem布局
rem px em区别
rem
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
em
-
子元素字体大小的em是相对于父元素字体大小
-
元素的width/height/padding/margin用em的话是相对于该元素的font-size
px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
11.this指向
a.如果是一般函数,this指向全局对象window;
b.在严格模式下"use strict",为undefined.
c.对象的方法里调用,this指向调用该方法的对象.
d.构造函数里的this,指向创建出来的实例.
12.清除浮动
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用after伪对象清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3.设置overflow为hidden或者auto
4.浮动外部元素
13.VUE生命周期以及特点
在beforeCreate和created这个生命周期,进行初始化事件,进行数据的观测,到了created的时候,放在data里面的数据已经完成了绑定
在created和beforeMount这个生命周期,它会判断vue实例对象有没有el这个属性,如果没有生命周期就结束了,如果有就判断有没有template这个属性,如果有就把他作为模板渲染,如果没有就把外部HTML作为模板
在beforeMount和mounted这个生命周期,会把vue实例对象的el替换成挂载的DOM元素,这时data里的数据还没被渲染
在mounted完成之后,挂载的DOM元素数据被渲染上去
14.Promise
怎么使用、解决了什么、怎么中断
15.块元素有哪些
行内元素:a, b, i, abbr, span, sub, sup, strike, strong
块级元素:div, p, h1-h6, ul, textarea, table, button
空元素:hr, input, br, img, link, meta
16.vue-router
两种模式、几种、区别
vue-router是vuex.js官方的路由管理器,它和vue.js的核心深度集成,让构建但页面应用变得易如反掌 <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址 <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。
17.浏览器储存方式
cookie: 一般由服务器生成,可设置失效时间.
localStorage:仅在客户端(即浏览器)中保存,除非被清除,否则永久保存
sessionStorage:仅在当前会话下有效,关闭页面或浏览器后被清除
19.性能优化
减少http请求
把js脚本置地加载
css放在head中
20.css哪些属性可以继承
可继承的样式: font-size font-family color, UL LI DL DD DT;
不可继承的样式:border padding margin width height ;
21.VUEX
优缺点、属性、action mutation区别、看过vuex源码
vuex是一个专为vue.js应用程序开发的状态管理器,它采用集中式存储管理应用的所有组件的状态,并且以相 应的规则保证状态以一种可以预测的方式发生变化。 state: vuex使用单一状态树,用一个对象就包含来全部的应用层级状态 mutation: 更改vuex中state的状态的唯一方法就是提交mutation action: action提交的是mutation,而不是直接变更状态,action可以包含任意异步操作 getter: 相当于vue中的computed计算属性
24.v-show v-if区别
前者为false的时候为 display:none,后者为false的时候,不生成节点 前者有更高的切换渲染消耗,频繁切换建议使用后者
27.深度拷贝 浅度拷贝
说法①
浅拷贝和深拷贝的区别:
对于浅拷贝来说,对于一个数组(数组是一个对象),只要我们修改了一个拷贝数组,原数组也会跟着改变。
他们引用的是同一个地址的数据,拷贝的时候并没有给b数组创造独立的内存,只是把a数组指向数据的指针拷贝给了b;
而深拷贝就与其相反,将会给b数组创造独立的内存,并且将a数组的内容一一拷贝进来,两者互不影响。
实现深拷贝:
一:层级拷贝,用递归实现;
二:JSON解析 var b = JSON.parse(JSON.stringify(a));
说法②
拷贝这种说法存在引用值(存指针地址) 浅拷贝是 第一层拷贝的时候对应建立数组或者对象 然后循环插入到这个对象或者数组中 然后导出,但是它没有解决 第二层是数组 或者第三层往下去的 是数组或者对象,所以你需要递归这个函数
,递归之后 这个对象或者数组就是深拷贝
var obj = { name:'abc', age:123, sex:'female', car:['visa','unionpay'] } var obj1 = {} function clone(origin,target){ var target = target || {}; for(var prop in orgin){ target[prop] = origin[prop]; } return target; } clone(obj,obj1) //这个时候去操作obj.car里面的值,那么obj1 也会相应的发生改变
function depClone(origin,target){ var target = target || {}, toStr = Object.prototype.toString, arrStr = "[object Array]"; for(var prop in origin){ if(origin.hasOwnProperty(prop)){ if(origin(prop) !==null&&typeof(origin[prop] == 'object')){ if(toStr.call(origin[prop]) == 'arrStr'){ target[prop] = []; } else{ target[prop] = {}; } deepClone(origin[prop],target[prop]) } else{ target[prop] = origin[prop]; } } } return target }
29.http状态码
1xx(临时响应)
100: 请求者应当继续提出请求。
101(切换协议) 请求者已要求服务器切换协议,服务器已确认并准备进行切换。
2xx(成功)
200:正确的请求返回正确的结果
201:表示资源被正确的创建。比如说,我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
202:请求是正确的,但是结果正在处理中,这时候客户端可以通过轮询等机制继续请求。
3xx(已重定向)
300:请求成功,但结果有多种选择。
301:请求成功,但是资源被永久转移。
303:使用 GET 来访问新的地址来获取资源。
304:请求的资源并没有被修改过
4xx(请求错误)
400:请求出现错误,比如请求头不对等。
401:没有提供认证信息。请求的时候没有带上 Token 等。
402:为以后需要所保留的状态码。
403:请求的资源不允许访问。就是说没有权限。
404:请求的内容不存在。
5xx(服务器错误)
500:服务器错误。
501:请求还没有被实现。
30.link标签和import区别
1 属性差别。link属于XHTML标签,而@import完全是CSS提供的语法规则。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 2 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显. 3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
31.跨域解决方案
(1)response 添加 header:resp.setHeader("Access-Control-Allow-Origin", "*");
(2)jsonp (原理即利用script标签可以跨域)
(3)代理
32.webpack
理解、常用打包插件、常见的loader
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样处理依赖关系,然后解析出模块之间的依赖,将代码打包。
css-loader: 将样式打包成字符串。 style-loader:将样式字符串添加到页面的style标签中
33.transform
画一条0.5px的直线?
考查的是css3的transform
height: 1px;
transform: scale(0.5);
34.盒模型
盒模型的组成,由里向外content,padding,border,margin.
在IE盒子模型中,width表示content+padding+border这三个部分的宽度
在标准的盒子模型中,width指content部分的宽度
35.label
label标签主要是方便鼠标点击使用,扩大可点击的范围,增强用户操作体验
36.js 递归
用js递归的方式写1到100求和?
递归我们经常用到,vue在实现双向绑定进行数据检验的时候用的也是递归,但要我们面试的时候手写一个递归,如果对递归的概念理解不透彻,可能还是会有一些问题。
function add(num1,num2){
var num = num1+num2;
if(num2+1>100){
return num;
}else{
return add(num,num2+1)
}
}
var sum =add(1,2);
37.target、currentTarget的区别?
currentTarget当前所绑定事件的元素
target当前被点击的元素
39.说一下自己常用的es6的功能
module、class、promise
-
const和let关键字
-
forEach
-
some
-
find
-
箭头函数
-
promise
40.get post put delete
1、POST /url 创建 2、DELETE /url/xxx 删除 3、PUT /url/xxx 更新 4、GET /url/xxx 查看
41.js基本类型和引用类型
基本数据类型:Undefined、Null、Boolean、String、Number、Symbol (es6)。引用类型:Object。Object可以细分为:Object 类型
、Array 类型
、Date 类型
、RegExp 类型
、Function 类型
43.require import区别
区别1:模块加载的时间
require:运行时加载 import:编译时加载(效率更高)【由于是编译时加载,所以import命令会提升到整个模块的头部】
区别2:模块的本质
require:模块就是对象,输入时必须查找对象属性 import:ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入(这也导致了没法引用 ES6 模块本身,因为它不是对象)。由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
44.img中的alt title区别
alt是图片加载失败时,显示在网页上的替代文字; title是鼠标放在图片上面时显示的文字,title是对图片的描述与进一步说明; alt是img必要的属性,而title不是; 对于网站seo优化来说,title与alt还有最重要的一点: 搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要的文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里进一步对图片说明。
45.BFC规范理解
一、什么是BFC? BFC全称:块级格式化上下文(block formatting context),简单来说它就是一种属性,这种属性会影响元素与元素之间的位置、间距 二、形成BFC的条件 1、float:给元素添加浮动(属性值为left、right,但none除外) 2、position:给元素添加定位(属性值为absolute或fixed) 3、display:给元素添加display属性(属性值为 inline-block、table-cell或table-caption) 4、overflow:给元素添加overflow 属性(属性值为hidden、auto或scroll,但visible除外) 三、BFC形成后出现的常见问题 1、margin重叠问题 2、浮动相关问题
46.null underfined区别
null表示"没有对象",即该处不应该有值
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
47.vue组件之间的传递
父子件向子组件传值
组件内部通过props接收传递过来的值
Vue.component('menu-item',{
data:
{
return:{
},
props:['title']
template:'<div>{{title}}</div>'
}
})
子组件向父组件传值
<div :style='{fontSize:fontSize + "px"}'> {{pstr}}</div>
<menu-item @enlarge-text="handle" :pstr="pstr"></menu-item>
<button @click="$emit('enlarge-text')">扩大字体大小</button>
handle:function () {
// console.log(this.fontSize)
this.fontSize+=5
}
兄弟组件传值
建立事件中心 建立全局组件 监听事件 点击触发兄弟组件事件
let hub=new Vue()
Vue.component('组件名称',{data:return:{},
template:`模板`,
mounted:function(){
当html运行完毕时运行 事件监听 监听本身
hub.$on('本身事件监听名',(val)=>{
})
},
methods:{
事件名:function(){
触发兄弟组件
hub.$emit('兄弟组件监听名',传的值)
}
}
})
48.apply call
function test(){
console.log(this) //this 指向window 对象
}
let hello = {
fun:test
}
hello.fun() //{fun:f} 此时this指向hello
//也可以这样操作
test.apply()
test.call()
//当传入参数
test.apply(hello ) //打印 hello对象
test.call(hello ) //打印 hello对象
作用 :
1️⃣他们可以通过传入其他对象来改变当前this的指向
区别 :
-
共同点:
-
都可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
-
另一种说法,都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行。
-
不同点:
-
apply();//最多只能有两个参数--新this对象和一个数组argArray,如果给该方法传递多个参数,则把参数都写进这个数组里边,当然,即使只有一个参数,也要写进数组里边。
-
call();//可以接收多个参数,第一个参数apply()一样,后面则是一串参数列表。
-
实际上,apply和call的功能是一样的,只是传入的参数列表的形式不同。
test.call(hello,1,2,3 ) //以此传入hello和1,2,3参数
test.apply(hello,[1,2,3] ) //打印 hello对象, 但后面的参数需要放在一个数组中
49.css 选择符
1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
50.vue通信
props和$emit 2.中央事件总线 EventBus(基本不用) 3.vuex(官方推荐状态管理器) 4.$parent和$children