前端面试题 + 持续更新中
Posted 鲸渔要加油
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题 + 持续更新中相关的知识,希望对你有一定的参考价值。
一、谈一谈双向数据绑定
就拿 input
输入框来举例子吧
- 先将创造一个原始数据
data
,将他渲染到输入框 - 再给输入框绑定
input
事件,如果输入框改变则改变data
中的值 - 再将新的
data
的值渲染到输入框里面
在 vue
中可以用 v-model
相当于 vue
中的动态数据绑定 v-bind:value
加 v-on:input
事件绑定
在 js
中的底层原理我们用到了 Object
的方法 defineProperty(1.obj, 2.prop, 3.descriptor)
- 要定义的对象
- 要定义或修改的属性的名称或
Symblo
- 要定义或修改的属性描述(规则),此描述是一个对象,里面有两个函数,
get()
在访问属性名时自动调用并return
出属性值,set(形参)
在改变属性值时自动调用,形参接受的就是改变的属性值
<body>
<div id="p"></div>
<input id="ipt" type="text">
<script>
const data = {
a: '123'
}
Object.defineProperty(data, 'b', {
get() {
return this.a
},
set(v) {
this.a = v
p.innerhtml = v
ipt.value = v
}
})
ipt.oninput = function (e) {
data.b = e.target.value
}
</script>
</body>
这里说一下在 ES6
中新增的原始数据类型,由于 Symbol
类型的特殊性,用 Symbol
类型的值来做对象的 key
与常规的定义或修改不同,而 Object.defineProperty
是定义 key
为Symbol
的属性的方法之一
二、什么是跨域?跨域解决方法
因为浏览器的同源策略的限制才会出现跨域,同源策略是浏览器最核心也最基本的安全功能,它会阻止一个域的 javascript
脚本和另外一个域的内容进行交互,所谓同源(即指在同一个域)就是两个页面具有相同的 协议,主机 和 端口号
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
具体查看网上 前端常见的跨域方案
三、深浅拷贝
一、数据类型
数据分为基本 数据类型 (String, Number, Boolean, Null, Undefined,Symbol) 和 引用数据类型(统称为 Object 类型,细分的话有:Object 、Array 、Date 、RegExp、Function… )
基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:数据存放在堆内存里,在栈中引用,因为引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址
二、深浅拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的
而 浅拷贝 就是拷贝这个地址指针的指向,新旧对象共享同一块内存,修改任意对象会影响其他的对象
JS中拷贝Array的 slice
和 concat
方法
而 深拷贝 会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象
JS中拷贝Array的 slice
和 concat
方法
slice和contact对于第一层是 深拷贝,但对于多层的时候,是复制的引用,所以是 浅拷贝
浅拷贝
- 展开运算符
Object.assign()
如果对象的属性值为简单类型(如string, number),通过Object.assign({},srcObj);得到的新对象为深拷贝;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的for in
被循环的对象存在嵌套对象时为浅拷贝
被循环的对象存在嵌套对象时为浅拷贝
被循环的对象不存在嵌套对象时为深拷贝- 等号赋值
深拷贝
JSON.parse()
和JSON.stringify()
- 使用递归实现深拷贝
jQuery
的$extend()
以上是关于前端面试题 + 持续更新中的主要内容,如果未能解决你的问题,请参考以下文章