前端面试总结篇(初级)

栏目: JavaScript · 发布时间: 5年前

内容简介:作为一个优秀的程序员,不仅仅可以解决工作的问题,还要不断的关注前端技术的发展,其中也包括了解最新的前端面试题,那么知识点来了,请接好除了这两个,关于es6的常用还有箭头函数、模板字符串、变量的解构赋值等所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。

作为一个优秀的程序员,不仅仅可以解决工作的问题,还要不断的关注前端技术的发展,其中也包括了解最新的前端面试题,那么知识点来了,请接好

1. 你熟悉的es6

  • let、const、var的使用区别
    let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理
    const: 用于定义一个常量,不能修改,其他特点等同于let,用于保存不用改变的数据
  • Map与普通对象的区别
    JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

除了这两个,关于es6的常用还有箭头函数、模板字符串、变量的解构赋值等

2. 你使用的跨域

所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。

解决跨域的几种方式:

  • JSONP 跨域 : 这种方式跨域是通过script标签引入js文件,这个js文件又会放回一个js函数调用,也就是请求后通过callback的方式回传结果
    优点:
    1.不受同源策略的限制
    2.兼容性更好
    3.支持老版本浏览器
    缺点:只支持get请求
  • CORS 跨域
    其原理是使用自定义的http头部请求,让浏览器与服务器之间进行沟通,从而决定请求或响应是否成功
    优点:
    1.支持所有类型的http请求
    2.比jsonp有更好的错误处理机制
    3.被大多数浏览器所支持
  • h5的postMessage方法
    window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据

3. 你了解的http状态码

 1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)

 2** 成功,操作被成功接收并处理(206,部分内容,分段传输)

 3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)

 4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)

 5** 服务器错误,服务器在处理请求的过程中发生了错误

4. 你来评价一下ajax

  • ajax的优势
    1.无刷新页面请求,使产品更快,更小更友好
    2.服务器端的任务转嫁到客户端处理
    3.减轻浏览器负担,节约带宽
    4.基于标准化对象,不需要安装特定的插件
    5.彻底将页面与数据分离
  • 缺点
    1.无法使用回退按钮
    2.不利于网页的SEO
    3.不能发送跨域请求
    -写一个简单的ajax请求
 getList: function () {
    var me = this;
    $.ajax({
    url: '/test',
    type: 'POST',
    data: {
      repaymentId: repaymentId
    },
    xhrFields: {
      withCredentials: true
    },
    success: function (result) {
       if (result.status == 0) {
           console.log('请求成功')
       } else {
            console.log('请求异常')         
       }
     },
    error: function (result) {
         $.toaster({ title: 'info', priority: 'danger', message: '服务器异常,请联系管理员!' });
      }
    })
   }
复制代码

5. 你知道的vue的生命周期

关于vue生命周期,可参考这篇文章链接

6. 你知道的react的生命周期

初始化

  • componentWillMount 初始化调用,只调用一次
    render 渲染页面
  • componentDidMount 第一次渲染后调用

更新

  • componentWillPeceireProps 接收新的props时调用
  • shouldComponentUpdate state或props改变时调用
  • componentWillUpdate 将要更新时调用,可改变state的值
    render
  • componentDidUpdate 更新后调用

卸载

  • componentWillUnMount

7. react声明默认props

设置默认props有两种方式

  • 指定 props 的默认值, 这个方法只有浏览器编译以后 才会生效
static defaultProps = { 
  age: 18
}
复制代码
  • 指定 props 的默认值,这个方法会一直生效
  Greeting.defaultProps = {    
    name: '我是props的默认值!'
  }
复制代码

8. react创建组件的三种方式

1.函数式定义的无状态组件,适用于纯展示组件,只负责根据传入的props展示,不涉及state状态的操作,特点如下

  • 组件不会被实例化,整体渲染性能得到提升。
  • 组件不能访问this对象
  • 组件无法访问生命周期的方法
  • 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用

2.es5原生方式React.createClass定义有状态的组件

  • 组件会被实例化
  • 可以访问生命周期
  • 会自绑定函数方法
    3.es6形式的extends React.Component定义的组件,是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式

React.createClass与React.Component区别

  • this绑定不同
    React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置。
    React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。
  • 组件属性类型propTypes及其默认props属性defaultProps配置不同
  • 组件初始状态state的配置不同
  • Mixins的支持不同

9. 你知道http与https的区别吗

1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全

10. get与post的区别

  • 表单的method属性设置post时发送的是post请求,其余都是get请求
  • get请求通过url地址发送请求参数,参数可以直接在地址栏中显示,安全性较差;post是通过请求体发送请求参数,参数不能直接显示,相对安全
  • get请求URL地址长度限制在255字节内,post请求没有长度限制

11. 你对闭包的了解

外部函数调用之后其变量对象本应该被销毁,但闭包的存在使我们仍然可以访问外部函数的变量对象

12. vue动态传参以及获取

// 传参
router: {
path: '/test/:id'
}
// 获取
this.$route.params.id
// 通过query
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳转</router-link>
复制代码

13. h5和css3新属性

1.H5

  • 语意化标签(nav、aside、dialog、header、footer等)
  • canvas
  • 拖放相关api
  • Audio、Video
  • 获取地理位置
  • 更好的input校验
  • web存储(localStorage、sessionStorage)
  • webWorkers(类似于多线程并发)
  • webSocket
    2.CSS3
  • 选择器
  • 边框(border-image、border-radius、box-shadow)
  • 背景(background-clip、background-origin、background-size)
  • 渐变(linear-gradients、radial-gradents)
  • 字体(@font-face)
  • 转换、形变(transform)
  • 过度(transition)
  • 动画(animation)
  • 弹性盒模型(flex-box)
  • 媒体查询(@media)

14. 实现左右固定宽,中间自适应

  • 左右浮动,中间加margin
<div style="width:100%; margin:0 auto;"> 

       <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>

       <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>

       <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容,自适应宽度</div>

</div>
复制代码
  • 左右加定位,中间加margin
  • 使用负margin

还在后续补充中,不足之处还请指教……


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创新公司

创新公司

[美]艾德·卡特姆、埃米·华莱士 / 靳婷婷 / 中信出版社 / 2015-2 / 49.00元

●《玩具总动员》《海底总动员》《机器人瓦力》《飞屋环游记》等14部脍炙人口的动画长片, 近30次奥斯卡奖, 7部奥斯卡最佳动画长片,7次金球奖; ●几乎每一部电影一上映都位居票房榜首,所有电影都曾进入影史票房总榜前50,每一部电影都是商业与艺术的双赢。 ●即便新兴动画公司不断涌现,皮克斯始终保持动画界的王者之位,这一切背后的秘密就在于:不断推动创新的创意管理方式。 你可以从本书......一起来看看 《创新公司》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具