前端面试总结篇(初级)

栏目: 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

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


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

查看所有标签

猜你喜欢:

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

Hacking

Hacking

Jon Erickson / No Starch Press / 2008-2-4 / USD 49.95

While other books merely show how to run existing exploits, Hacking: The Art of Exploitation broke ground as the first book to explain how hacking and software exploits work and how readers could deve......一起来看看 《Hacking》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具