web前端面试题

1、如何使元素垂直水平居中？

答：

a、知道具体宽高：

父级定位，子级定位，宽高300px

.container {

    position: absolute;

    left: calc(50% - 150px);

    top: calc(50% - 150px);

    width: 300px;

    height: 300px;

    border: 1px solid red;

}

或者

.container {

    position: absolute;

    left: calc(50% - 150px);

    top: calc(50% - 150px);

    width: 300px;

    height: 300px;

    border: 1px solid red;

}

 

 

b、不知道具体宽高：

.container {

    position: absolute;

    top: 50%;

    left: 50%;

transform: translate(-50%, -50%); // 自身宽度和高度的一半    

border: 1px solid red;

}

或者单位vh

.container {

    width: 300px;

    margin: 50vh auto 0;

    transform: translateY(-50%);

    border: 1px solid red;

}

C、Flex

.container {

    display: flex;

    height: 100px;

}

.inner {

    margin: auto;

}

或者

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

D、Table

.container {

    display: table;         /* 让div以表格的形式渲染 */

    width: 100%;

    border: 1px solid red;

}

.inner {

    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */

    text-align: center;

    vertical-align: middle;

}

 

2、如何实现布局左边固定宽度右边自适应？答：

a

.left{
width:200px;
float:left;

background:red;

}
.right{
overflow:hidden;

background:blue;
}

B、

.container{

display:flex;/*设为伸缩容器*/ 

}

.left{
width:200px;

border: 2px solid blue;

background:red;

}
.right{

border: 2px solid yellow;

flex:1;/*这里设置为占比1，填充满剩余空间*/ 

background:blue;
}

 

3、用到了关于h5的哪些新特性？

答：

· 新增选择器 document.querySelector、document.querySelectorAll

· 拖拽释放(Drag and drop) API

· 媒体播放的 video 和 audio

· 本地存储 localStorage 和 sessionStorage

· 离线应用 manifest

· 桌面通知 Notifications

· 语意化标签 article、footer、header、nav、section

· 增强表单控件 calendar、date、time、email、url、search

· 地理位置 Geolocation

· 多任务 webworker

· 全双工通信协议 websocket

· 历史管理 history

· 跨域资源共享(CORS) Access-Control-Allow-Origin

· 页面可见性改变事件 visibilitychange

· 跨窗口通信 PostMessage

· Form Data 对象

· 绘画 canvas

 

4、有哪些常用的浏览器对象方法？

答：window对象

History 对象

Location 

Navigator

5、用什么方法区分移动端还是pc端或者是微信app还是自己的官方app？

答：window.navigator.userAgent来匹配对应字段；

 

6、文本超出部分省略号怎么写？

答：width:固定；height:100px;overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;

 

 

7、怎么样从web前端方面优化性能？至少列举5点？

答：https://blog.csdn.net/weixin_39141802/article/details/81015569

    减少http请求，合理设置 HTTP缓存、使用浏览器缓存、启用压缩、CSS Sprites、LazyLoad Images、CSS放在页面最上部，javascript放在页面最下面、减少cookie传输、Javascript代码优化、CSS选择符优化、CDN加速

 

 

8、常用的数据类型有哪些？哪些是值类型哪些是引用类型？

答：

a、基本数据类型和引用数据类型

ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。

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

　　当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值。

b、常见的基本数据类型：

Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。示例：

var a = 10;

var b = a;

b = 20;

console.log(a); // 10值

　　上面，b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值。

b只是保存了a复制的一个副本。所以，b的改变，对a没有影响。

　　下图演示了这种基本数据类型赋值的过程：

     

c、引用类型数据：

　　也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。

javascript的引用数据类型是保存在堆内存中的对象。

　　与其他语言的不同是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。

　　所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。

var obj1 = new Object();

var obj2 = obj1;

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

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

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

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

　　下面我们来演示这个引用数据类型赋值过程：

    

d、总结区别

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

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

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

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

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

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

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

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

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

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

c 复制变量时的不同

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

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

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

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

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

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

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

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

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

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

 

 

9、常用的数组操作的方法有哪些？

答：forEach()、sort()、reverse()、push（）、unshift（）、splice（）、pop()、shift()、concat()、indexOf（）；join（）

 

10、写一个数组去重的方法？

答：a、利用对象属性

Array.prototype.distinct = function (){

 var arr = this,

  i,

  obj = {},

  result = [],

  len = arr.length;

 for(i = 0; i< arr.length; i++){

  if(!obj[arr[i]]){ //如果能查找到，证明数组元素重复了

   obj[arr[i]] = 1;

   result.push(arr[i]);

  }

 }

 return result;

};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];

var b = a.distinct();

console.log(b.toString());

b、indexof

Array.prototype.distinct = function (){

 var arr = this,

  result = [],

  len = arr.length;

 arr.forEach(function(v, i ,arr){  //这里利用map，filter方法也可以实现

  var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复

  if(bool === -1){

   result.push(v);

  }

 })

 return result;

};

var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];

var b = a.distinct();

console.log(b.toString());

C、es6:let resultarr = [...new Set(arr)];

 

 

 

11、写一个面向对象的例子

答：　　function Cat(name,color){

this.name = name;

this.color = color;

}

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")};

var cat1 = new Cat("大毛","黄色");

var cat2 = new Cat("二毛","黑色");

 

12、es6中常用到的方法和特性

答：

A、定义函数

es6写法：

var human = {

    breathe(name) {   //不需要function也能定义breathe函数。

        console.log(name + ' is breathing...');

    }};human.breathe('jarson');   //输出 ‘jarson is breathing...’

转成js代码：

var human = {

    breathe: function(name) {

        console.log(name + 'is breathing...');

    }};human.breathe('jarson');

B、创建类

我们知道，javascript不像java是面向对象编程的语言，而只可以说是基于对象编程的语言。所以在js中，我们通常都是用function和prototype来模拟类这个概念。

但是现在有了es6，我们可以像java那样‘明目张胆’的创建一个类了：

class Human {

    constructor(name) {

        this.name = name;

    }

    breathe() {

        console.log(this.name + " is breathing");

    }} var man = new Human("jarson");man.breathe();    //jarson is breathing

上面代码转为js格式：

function Human(name) {

    this.name = name;

    this.breathe = function() {

        console.log(this.name + ' is breathing');

    }}var man = new Human('jarson');man.breathe();    //jarson is breathing

所以我们看到，我们可以像java那样语义化的去创建一个类。另外，js中的继承父类，需要用prototype来实现。那么在es6中，又有什么新的方法来实现类的继承呢？继续看：

假如我们要创建一个Man类继承上面的Human类，es6代码：

class Man extends Human {

    constructor(name, sex) {

        super(name);

        this.sex = sex;

    }

    info(){

        console.log(this.name + 'is ' + this.sex);

    }}var xx = new Man('jarson', 'boy');xx.breathe();   //jarson is breathingxx.info();   //arsonis boy

代码很简单，不作赘述，可以使用文章里提到的在线工具去试试效果就能明白了。需要注意的是：super()是父类的构造函数。

模块

在ES6标准中，javascript原生支持module了。将不同功能的代码分别写在不同文件中，各模块只需导出(export)公共接口部分，然后在需要使用的地方通过模块的导入(import)就可以了。下面继续看例子：

内联导出

ES6模块里的对象可在创建它们的声明中直接导出，一个模块中可无数次使用export。

先看模块文件app.js：

export class Human{

    constructor(name) {

        this.name = name;

    }

    breathe() {

        console.log(this.name + " is breathing");

    } }  export function run(){  

    console.log('i am runing'); }function eat() {

    console.log('i am eating');}

例子中的模块导出了两个对象：Human类和run函数， eat函数没有导出，则仍为此模块私有，不能被其他文件使用。

导出一组对象

另外，其实如果需要导出的对象很多的时候，我们可以在最后统一导出一组对象。

更改app.js文件：

class Human{

    constructor(name) {

        this.name = name;

    }

    breathe() {

        console.log(this.name + " is breathing");

    } }  function run(){  

    console.log('i am runing'); }function eat() {

    console.log('i am eating');}export {Human, run};

这样的写法功能和上面一样，而且也很明显，在最后可以清晰的看到导出了哪些对象。

C、Default导出

导出时使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。

查看导出default对象的语法：

...   //创建类、函数等等export default {  //把Human类和run函数标注为default对象导出。

    Human,  

    run  };

无对象导入

如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中，导入之后只执行逻辑。如：

import './module1.js';

导入默认对象

使用Default导出方式导出对象，该对象在import声明中将直接被分配给某个引用，如下例中的“app”。

import app from './module1.js';

上面例子中，默认./module1.js文件只导出了一个对象；若导出了一组对象，则应该在导入声明中一一列出这些对象，如：

import {Human, run} from './app.js'

D、let与const

在我看来，在es6新特性中，在定义变量的时候统统使用let来代替var就好了，const则很直观，用来定义常量，即无法被更改值的变量。

for (let i=0;i<2;i++) {

    console.log(i);  //输出: 0,1}

E、箭头函数

ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：

let arr = [6, 8, 10, 20, 15, 9];arr.forEach((item, i) => console.log(item, i));let newArr = arr.filter((item) => (item<10));console.log(newArr); //[6, 8, 9];

上面的(item, i)就是参数，后面的console.log(item, i)就是回到函数要执行的操作逻辑。

上面代码转为js格式：

var arr = [6, 8, 10, 20, 15, 9];arr.forEach(function(item, i) {

    return console.log(item, i);});var newArr = arr.filter(function(item) {

    return (item < 10);});console.log(newArr);

F、字符串模版

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：

//产生一个随机数let num = Math.random();//将这个数字输出到consoleconsole.log(`your num is ${num}`);

H、解构

若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子：

function getVal() {

    return [1, 2];}var [x,y] = getVal(); //函数返回值的解构console.log('x:'+x+', y:'+y);   //输出：x:1, y:2

I、默认参数

现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name){

    var name=name||'tom';   //传统的指定默认参数的方式

    console.log('Hello '+name);}//运用ES6的默认参数function sayHello2(name='tom'){  //如果没有传这个参数，才会有默认值，

    console.log(`Hello ${name}`);}sayHello();//输出：Hello tomsayHello('jarson');//输出：Hello jarsonsayHello2();//输出：Hello tomsayHello2('jarson');//输出：Hello jarson

注意： sayHello2(name='tom')这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。

 

13、几种常用的数据存储的方式，优缺点

答：

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。

一、cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

     Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

　　　　　　原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

　　　　（2）保存上次登录的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

　　（1）网上商城中的购物车

　　（2）保存用户登录信息

　　（3）将某些数据放入session中，供同一用户的不同页面使用

　　（4）防止用户非法登录

 7、缺点：cookie：（1）大小受限

　　　　　　　　（2）用户可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性较低

　　　　　　　　（4）有些状态不可能保存在客户端。

　　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。

　　　　　　　　（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

 session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

　　　　　　　　（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

　　　　　　　　（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

二、WebStorage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

  sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

       getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        clear () ——  删除所有的数据

        key (index) —— 获取某个索引的key

 

14、localstorage设置过期时间？

答：

function set(key,value){

var curTime = new Date().getTime();

localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));

}

 

function get(key,exp){

var data = localStorage.getItem(key);

var dataObj = JSON.parse(data);

if (new Date().getTime() - dataObj.time>exp) {

 localStorage.removeItem(key);

}else{

var dataObjDatatoJson = JSON.parse(dataObj.data)

return dataObjDatatoJson;

}

}