ES6、Ajax | 前端面试题总结篇

111 阅读3分钟

ES6、Ajax | 前端面试题总结篇

“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情

Part1、ES6

一、mouseover和mouseenter

  • 不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件,对应mouseout

  • 只有在鼠标指针穿过被选元素时,才会触发mouseenter事件,对应mouseleave

二、call和apply的区别

call,apply 都属于 Function.prototype 的一个方法,它是 JavaScript 引擎内在实现的,因为属于 Function.prototype,所以每个 Function 对象实例(就是每个方法)都有 call,apply 属性

通过 call 和 apply 可以重新定义函数的执行环境,即 this 的指向

foo.call(this, arg1, arg2, arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);

三、session和cooike区别

  • session 保存在服务器,客户端不知道其中的信息;

  • cookie 保存在客户端,服务器能够知道其中的信息。

  • session 中保存的是对象,cookie 中保存的是字符串。

  • session 不能区分路径,同一个用户在访问一个网站期间,所有的 session 在任何一个地方都可以访问到。

  • 而 cookie 中如果设置了路径参数,那么同一个网站中不同路径下的 cookie 互相是访问不到的。

四、截取字符串

例子: 截取 abcdefg 的 efg

alert('abcdefg'.slice(4));

五、将列表结点转化成数组

var elements = document.querySelectorAll("p"); // NodeList 

var arrayElements = [].slice.call(elements); // 现在 NodeList 是一个数组  

var arrayElements = Array.from(elements); // 这是另一种转换 NodeList 到 Array  的方法

Part2、Ajax

一、什么是Ajax

快速创建动态网页的技术。可以实现动态不刷新(局部刷新),就是在不更新页面的前提下维护数据。

二、跨域解决方法

1. 动态创建一个script标签

利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。

步骤:

  1. 去创建一个script标签
  2. script的src属性设置接口地址
  3. 接口参数,必须要带一个自定义函数名,要不然后台无法返回数据
  4. 通过定义函数名去接收后台返回数据
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据function jsonpCallback(data)f
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。

2. CORS:跨域资源共享

服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求

限制:浏览器需要支持HTML5,可以支持POST, PUT等方法兼容ie9以上

需要后台设置
Access-Control-Allow-Origin:
//允许所有域名访问,或者
Access-Control-Allow-Origin: http://a.com
//只允许所有域名访问