前端面试题 + 持续更新中
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()
以上是关于前端面试题 + 持续更新中的主要内容，如果未能解决你的问题，请参考以下文章