前端面试题及答案 - JS篇

Shimmer 发布于2019-08-26 18:27 / 384人阅读

摘要：中使用操作符具体做了哪些事情创建了一个空对象空对象的属性指向构造函数的属性执行构造函数，将的指向前端面试题及答案浏览器篇前端面试题及答案篇前端面试题及答案篇前端面试题及答案性能优化篇

这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。

1、JS延迟加载的方式有哪些？

defer和async

动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

按需异步载入js

2、前端跨域解决方案详情

3、如何实现浅拷贝和深拷贝

浅拷贝：

直接通过=赋值

let data = {n: 1};
let cloneData = data;
cloneData.n = 2;
console.log(data.n) // 2

如果obj对象有多个层级，可以通过Object.assign()

let data = {name: {firstName: "lsh"}};
let cloneData = Object.assign({}, data);
cloneData.name.firstName = "lx";
console.log(data.name.firstName) // lx

深拷贝

简单的通过JSON.parse(JSON.stringify(data))

通过lodash.js

let cloneData = lodash.cloneDeep(data);

如果obj对象只有一级，可以用Object.assign();

let data = {name: "lsh"};
let cloneData = Object.assign({}, data);
cloneData.name = "lx";
console.log(data.name); // lsh

递归

function cloneDeep(data) {
    if (!data || typeof data != "object") {
        return data;
    }
    let obj = data.constructor === Array ? [] : {};
    for (let i in data) {
        obj[i] = typeof data[i] === "object" ? cloneDeep(data[i]) : data[i]
    }
    return obj;
}

通过Object.create()方法

let data = {n: 1};
let cloneData = Object.create(data);
console.log(cloneData); // {}
console.log(cloneData.n); // 1
console.log(cloneData.__proto__); // {n: 1}

通过$.extend()方法

let data = {t: 1};
let cloneData = $.extend(true, {}, data, {t: 2});
cloneData.t = 3;
console.log(data.t) // 1

4、AMD、CMD、CommonJS之间区别
CommonJS：同步加载。必须等clock.js加载完成后才能调用start();

const clock = reqiure("clock");
clock.start();

AMD（require.js）：异步加载模块 => 依赖前置，提前执行。先定义依赖，加载完成后在回调函数中执行。

require(["clock", "lodash"], function(clock, lodash)) {
    clock.start();
    lodash.uniq();
}

CMD（sea.js）：异步加载模块 => 依赖就近，延迟执行。

define(function(reqiure, exports, module) {
    var clock = require("clock");
    clock.start();
    
    var lodash = require("lodash");
    lodash.uniq([]);
})

5、js中使用new操作符具体做了哪些事情？

let obj = new Base();

创建了一个空对象obj;

let obj = {};

空对象obj的__proto__属性指向构造函数Base的prototype属性；

obj.__proto__ = Base.prototype;

执行构造函数，将Base的this指向obj;

Base.call(obj);

前端面试题及答案 - 浏览器篇

前端面试题及答案 - HTML篇

前端面试题及答案 - CSS篇

前端面试题及答案 - 性能优化篇

idc机房托管云服务器大数据面试题及答案 java面试题及答案大数据开发面试题及答案运维工程师面试题及答案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110239.html

前端面试题及答案 - JS篇

摘要：中使用操作符具体做了哪些事情创建了一个空对象空对象的属性指向构造函数的属性执行构造函数，将的指向前端面试题及答案浏览器篇前端面试题及答案篇前端面试题及答案篇前端面试题及答案性能优化篇这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出...

wwolf 2019-08-05 16:57 评论0 收藏0
前端面试题及答案 - HTML篇

摘要：有什么区别超文本标记语言用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。可扩展超文本标记语言就是以的语法形式来写。这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。 1、Doctype作用? 严格模式与混杂模式如何区分...

cyqian 2019-08-05 16:57 评论0 收藏0
前端开发面试题链接

摘要：手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入手册网：http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集：http://www.codec...

h9911 2019-08-02 16:11 评论0 收藏0
前端开发面试题链接

摘要：手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入手册网：http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集：http://www.codec...

snifes 2019-08-23 16:48 评论0 收藏0
前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解

摘要：前端面试题及答案总结掘金技术征文金三银四，金九银十，用来形容求职最好的几个月。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文金三银四，金九银十，用来形容求职最好的几个月...

ermaoL 2019-08-21 16:46 评论0 收藏0