前端面试题 + 持续更新中

Posted 鲸渔要加油

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题 + 持续更新中相关的知识,希望对你有一定的参考价值。

一、谈一谈双向数据绑定

就拿 input 输入框来举例子吧

  1. 先将创造一个原始数据 data ,将他渲染到输入框
  2. 再给输入框绑定 input 事件,如果输入框改变则改变 data 中的值
  3. 再将新的 data 的值渲染到输入框里面

vue 中可以用 v-model 相当于 vue 中的动态数据绑定 v-bind:valuev-on:input 事件绑定

js 中的底层原理我们用到了 Object 的方法 defineProperty(1.obj, 2.prop, 3.descriptor)

  1. 要定义的对象
  2. 要定义或修改的属性的名称或 Symblo
  3. 要定义或修改的属性描述(规则),此描述是一个对象,里面有两个函数,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 是定义 keySymbol 的属性的方法之一



二、什么是跨域?跨域解决方法

因为浏览器的同源策略的限制才会出现跨域,同源策略是浏览器最核心也最基本的安全功能,它会阻止一个域的 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的 sliceconcat 方法

深拷贝 会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象

JS中拷贝Array的 sliceconcat 方法

slice和contact对于第一层是 深拷贝,但对于多层的时候,是复制的引用,所以是 浅拷贝

浅拷贝

  1. 展开运算符
  2. Object.assign()
    如果对象的属性值为简单类型(如string, number),通过Object.assign(,srcObj);得到的新对象为深拷贝;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的
  3. for in 被循环的对象存在嵌套对象时为浅拷贝
    被循环的对象存在嵌套对象时为浅拷贝
    被循环的对象不存在嵌套对象时为深拷贝
  4. 等号赋值

深拷贝

  1. JSON.parse()JSON.stringify()
  2. 使用递归实现深拷贝
  3. jQuery$extend()

以上是关于前端面试题 + 持续更新中的主要内容,如果未能解决你的问题,请参考以下文章

2022年最新前端面试题,持续更新

前端面试题汇总(持续更新...)

前端经典react面试题(持续更新中)

前端经典react面试题(持续更新中)

前端经典react面试题(持续更新中)

前端经典react面试题(持续更新中)