前端面试题目——JS

最新推荐文章于 2024-06-15 03:51:35 发布
最新推荐文章于 2024-06-15 03:51:35 发布
阅读量282 收藏 1
点赞数
分类专栏： 面试 文章标签： 面试 前端面试 JS javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36131788/article/details/114393720
版权

系列文章目录

  1. HTML篇
  2. CSS篇
  3. JS篇
  4. VUE篇
  5. webpack篇

文章目录

前言

汇总常见面试题

一、基础知识

（一）数据处理

  1. 判断数组（类型判定）
    Object.prototype.tostring.call()【最佳】 | instanceOf | Array.isArray() 分析优劣
  2. 数组有哪些方法，哪些能改变原值
    改变(7个)：push pop shift unshift sort reverse splice
    不改变：concat reduce join slice filter forEach…
  3. 多维数组扁平化处理（flat）
    将二维甚至多维数组转化为一维数组，例如 var arrList = [[1,2,3],4,5,[6,7,[8,9]]] 转化为[1,2,3,4,5,6,7,8,9]
  • 第一种：遍历 + 递归
let arrList = [[1, 2, 3], 4, 5, [6, 7, [8, 9]]];
function flat(arr) {
    let result = []
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (Array.isArray(item)) {
            result = result.concat(flat(item))
        } else {
            result.push(item)
        }
    }
    return result
}
console.log(flat(arrList))
  • 第二种：reduce + 递归
function flat2(arr) {
    return arr.reduce((res, item) => {
        return res.concat(Array.isArray(item) ? flat2(item) : item)
    }, [])
}
console.log(flat2(arrList))
  1. 数组去重
  • 第一种：ES6 Set
function unique(arr){
	return Array.from(new Set(arr))     // 或者 return [...new Set(arr)]
}
  • 第二种：利用includes 或者 indexOf方法
function unique2(arr) {
    let list = [];
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (!list.includes(item)) {  // 或者 list.indexOf(item)===-1
           list.push(item)
        }
    }
    return list
}
  • 第三种：sort 排序 + 相邻元素对比
function unique3(arr) {
    arr = arr.sort();
    let list = [arr[0]];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            list.push(arr[i])
        }
    }
    return list
}
  • 第四种： filter 只保留数据在数组中第一次出现的位置
function unique4(arr) {
    return arr.filter((item, index) => {
        return arr.indexOf(item, 0) === index     // 只要item第一次出现的位置值
    })
}
  • 第五种：利用对象的key，还可统计出现次数
function unique5(arr) {
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (!obj[item]) {
            obj[item] = 1;
        } else {
            obj[item]++
        }
    };
    return Object.keys(obj);
}
  1. 伪数组转化为数组

伪数组：不能调用数组的方法

Array.prototype.slice.call(arguments)  // 利用数组的slice
Array.from(arguments)   // ES6方法
  1. 实现对象深拷贝
  • JSON.parse(JSON.stringify(obj)) 耗时较长，函数、正则、时间对象等无法拷贝。
  • Object.assign({}, obj) 适用于一层深拷贝
  • lodash cloneDeep(obj)方法
  • 遍历+递归拷贝 相对完美
  1. 取得URL后面query的参数值
  • window.location.search + split("&")分割
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1); // 获取？号后面的str
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
  • 正则匹配
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

（二）原理

  1. 手写call apply bind实现??
Function.prototype.myBind = function () {
    const args = Array.prototype.slice.call(arguments);
    const ctx = args.shift();  // 把数组的第一个元素从其中删除，并返回第一个元素的值
    const self = this;
    return function () {
        self.apply(ctx, args)   // apply第二个参数是个数组形式
    }
}
  1. new 的实现原理，若构造函数中有返回值怎么办

构造函数正常返回一个实例对象

// 构造函数 Person
function Person() {
	this.name = 'haha';
	this.age = 12;
}
let xiaoming = new Person();
console.log(xiaoming);   // {name: "haha", age: 12}

当构造函数中有返回值时：（返回基本类型时，不影响结果；返回引用类型时，覆盖了原来的实例对象。）

function Person() {
	this.name = 'haha';
	this.age = 12;
	let a =1;
	let b = {id: 89};
	let c = true;
	let d = [4,5,6]
	// return a   ⇒ 不变，{name: "haha", age: 12}
	// return b   ⇒ 返回了b: {id: 89}
	// return c   ⇒ 不变，{name: "haha", age: 12}
	// return d   ⇒ 返回了d，[4,5,6]
}
let xiaoming = new Person();
console.log(xiaoming);

new 实现原理
根据MDN描述：new关键字会做如下操作：

1、创建一个空的简单JavaScript对象（即{}）；
2、链接该对象（设置该对象的constructor）到另一个对象 ；
3、将步骤1新创建的对象作为this的上下文 ；
4、如果该函数没有返回对象，则返回this。

function myNew(F) {
	let obj = {};  // 第一步：创建空对象实例
    obj.__proto__ = F.prototype;  // 第二步：保证obj能访问到构造函数F的属性
    F.apply(obj, Array.prototype.slice(arguments, 1));  // 第三步：绑定this
    return obj instanceof Object ? obj : {};   // 第四步：返回实例对象
}
// 验证
console.log(myNew(Person))  // {name: "haha", age: 12}
  1. this指向方面，demo题 。this指向的几种情况，立即执行函数的this
    函数直接调用（指向window） 对象方法（对象） 构造函数（实例化出来的对象） 计时器调用（全局） 匿名函数（window） 立即执行函数（window）
var fullname = 'John Doe'; 
var obj = { 
	fullname: 'Colin Ihrig', 
	prop: { 
		fullname: 'Aurelio De Rosa', 
		getFullname: function() { return this.fullname; }
	}
}; 		
console.log(obj.prop.getFullname());  // Aurelio De Rosa
var test = obj.prop.getFullname;
console.log(test());  // John Doe

var myobject={
	foo:"bar",
	func:function(){
		var self=this;
		console.log(this.foo); // bar
		console.log(self.foo); // bar 
		(function(){
			console.log(this.foo);// undefined
			console.log(self.foo);// bar
		})();
	}
};
myobject.func();
  1. object.defineProperty可以同时定义get和value 吗?

不可以同时定义get 和value .使用Object.defineProperty() 定义对象属性时，如已设置 set 或 get, 就不能设置 writable 和 value 中的任何一个了，不然会报如下TypeError错误：

var i =0;
Object.defineProperty(user, 'age',{
    // value: 13,
    writable: true,
    get: function() {
        return i++
    }
})

Object.defineProperty(user, 'age',{
       ^
TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符（value writable）是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

  1. Object.defineProperty对数组哪里支持不好？

对象数组监听：

function observe(obj) {
    Object.keys(obj).forEach((key) => {
        defineReactive(obj, key, obj[key])
    })
}
function defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: false,
        get: () => {
            console.log('get');
            return value;
        },
        set: (newValue) => {
            console.log('set')
            return newValue;
        }
    })
}
var arr = [1, 2, 3];
observe(arr);
arr.push(4)     // push方法无法通过set监听
arr.length = 8;   // 更改length无法触发set监听
console.log(arr[0], arr)
// 输出结果：
get
1 [
  [Getter/Setter],
  [Getter/Setter],
  [Getter/Setter],
  4,
  <4 empty items>
]
  1. eventloop、宏任务、微任务执行顺序。demo例题

知识点：JS事件循环

题目一：setTimeout + Promise

console.log('start')
setTimeout(function () {
    console.log('setTimeout')
}, 0);

new Promise(function (resolve) {
    resolve();
}).then(function () {
    console.log('promise1')
}).then(function () {
    console.log('promise2')
})
console.log('end')
// 结果：start end promise1 promise2 setTimeout

题目二：setTimeout + Promise

setTimeout(function () {
  console.log(2)
}, 0)
new Promise(function (resolve) {
    console.log('3')
    resolve()
    console.log(4)
}).then(function () {
    console.log('5')
});
console.log(8)
// 结果：3,4,8,5,2

题目三：setTimeout + Promise + process.nextTick

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
// 第一轮（script宏任务）： 1 7 6 8
// 第二轮（第一个setTimeout宏任务）：2 4 3 5
// 第三轮（第二个setTimeout宏任务）：9 11 10 12

题目四：setTimeout + Promise + async

console.log('script start')
async function async1() {
  //async 语法糖 async2()执行完毕 才执行下面 会加入在微观任务里面
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()

setTimeout(function () {
  console.log('setTimeout')
}, 0)

new Promise((resolve) => {
  console.log('promise')
  resolve()
})
  .then(function () {
    console.log('promise1')
  })
  .then(function () {
    console.log('promise2')
  })

console.log('script end')
// 第一轮：'script start' 'async2 end' 'promise' 'script end' 'async1 end' 'promise1' 'promise2' 
// 第二轮：'setTimeout'

题目五：setTimeout + Promise + async

	async function async1() {
        console.log(1);
        const result = await async2();
        console.log(3);
    }

    async function async2() {
        console.log(2);
    }

    Promise.resolve().then(() => {
        console.log(4);
    });

    setTimeout(() => {
        console.log(5);
    });

    async1();
    console.log(6);
  // 结果： 1 2 6 4 3 5 ？

二、ES6+

  1. es6中的箭头函数用ES5的方式实现

例1

// ES6
const func = (a, b) => a+b;

// ES5
var func = function func(a, b) {
  return a + b;
};

例2

// ES6 f1定义时所处函数this是指的obj2, setTimeout中的箭头函数this继承自f1, 所以不管有多层嵌套,this都是obj2
var obj2 = {
	say: function () {
  		var f1 = () => {
    		console.log(this); // obj2
    		setTimeout(() => {
      			console.log(this); // obj2
    		})
  		}
  		f1();
  	}
}
obj2.say()

// ES5
var obj2 = {
  say: function say() {
    var _this = this;   // 关键步骤

    var f1 = function f1() {
      console.log(_this); // obj2

      setTimeout(function () {
        console.log(_this); // obj2
      });
    };
    f1();
  }
};
  1. promise()原理，手写实现。链式调用时返回的对象是一个对象吗？
const PENDING = 'pending', FULFILLED = 'fulfilled', REJECTED = 'rejected';
class myPromise {
    constructor(executor) {   // 传入的executor
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;

        this.onFulfilledCallbacks = [];  // 存储所有的成功回调
        this.onRejectedCallbacks = [];  // 存储所有的失败回调

        // 应该在 构造函数中添加resolve reject ，写在外面的方法会挂在prototype上
        const resolve = (value) => {
            if (this.status === PENDING) {   // 只有pending状态下才能更改为fulfilled状态
                this.status = FULFILLED; 
                this.value = value;
                // 发布：通知所有的成功回调函数执行
                this.onFulfilledCallbacks.forEach(fn => fn());
            }
        }
        const reject = (reason) => {
            if (this.status === PENDING) {
                this.status = REJECTED;
                this.reason = reason;
                // 发布：通知所有的失败回调函数执行
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }
        // 捕捉执行器抛出的异常
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
        
    }

    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
        onRejected = typeof onRejected === 'function' ? onRejected : ()=>{throw this.reason}
        let promise2 = new myPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {  // 将onFulfilled变成异步，resolvePromise能拿到promise2
                    try {
                        let x = onFulfilled(this.value);  // 这里有可能是一个普通值也可能是一个promise
                        resolvePromise(promise2, x, resolve, reject);  // 外界拿不到promise2 resolve reject
                    } catch (e) {
                        reject(e);
                    }
                },0)
            }
            if (this.status === REJECTED) {
                setTimeout(() => {  // 将onFulfilled变成异步，resolvePromise能拿到promise2
                    try {
                        let x = onRejected(this.reason);;  // 这里有可能是一个普通值也可能是一个promise
                        resolvePromise(promise2, x, resolve, reject);  // 外界拿不到promise2 resolve reject
                    } catch (e) {
                        reject(e);
                    }
                },0)
            }
            if (this.status === PENDING) {  // pending还没有结果的状态，主要考虑的是executor为异步情况。要使用发布订阅模式，收集回调
                // 订阅的过程， 使用了发布订阅的开发模式
                this.onFulfilledCallbacks.push(() => {   // 等发布的时候，就遍历这个数组执行即可。
                    try {
                        let x = onFulfilled(this.value);  // 这里有可能是一个普通值也可能是一个promise
                        resolvePromise(promise2, x, resolve, reject);  // 外界拿不到promise2 resolve reject
                    } catch (e) {
                        reject(e);
                    }
                })
                this.onRejectedCallbacks.push(() => {   // 等发布的时候，就遍历这个数组执行即可。
                    try {
                        let x = onRejected(this.reason);  // 这里有可能是一个普通值也可能是一个promise
                        resolvePromise(promise2, x, resolve, reject);  // 外界拿不到promise2 resolve reject
                    } catch (e) {
                        reject(e);
                    }
                })
                
            }
        });
        
        return promise2;
    }

    catch(errCallback) {
        return this.then(null, errCallback);
    }
}
// 2.3 promise resolution procedure 
function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {  // 防止循环引用
        return reject(new TypeError('chaning cycle detected for promise #<myPromise>'));
    }
    let isCalled = false;
    if ((typeof x === 'object' && x !== null) || typeof x === 'function') { 
        try { // x.then可能会抛出一个异常，为了捕获异常并reject
            // x 为一个object or function
            let then = x.then;
            if (typeof then === 'function') {   // 认为x是promise对象
                then.call(x, (y) => {
                    if (isCalled) return;  // 避免重复调用成功or失败的回调
                    isCalled = true;
                    resolvePromise(promise2, y, resolve, reject);  // 递归，promise多层嵌套问题
                }, (r) => {
                    if (isCalled) return;  // 避免重复调用成功or失败的回调
                    isCalled = true;
                    reject(r);
                })
            } else {
                resolve(x)
            }
        } catch (e) {
            if (isCalled) return;  // 避免重复调用成功or失败的回调
            isCalled = true;
            reject(e)
        }
        
    } else {    // 普通值
        resolve(x);
    }
}
module.exports = myPromise
  1. 实现一个普通对象能用for…of遍历

实现效果：

let obj = { name: 'wahaha', age: 12 };
for(let i of obj) {
      console.log('i:', i)
}
// wahaha
// 12

给普通对象定义Symbol.iterator属性，即可用for…of遍历

// 实现某个对象：
obj[Symbol.iterator] = function () {
      const _this = this;
      const keys = Object.keys(obj);
      let index = 0;
      return {      // 返回迭代器对象
        next() {        
          return {
            value: _this[keys[index++]],
            done: index>keys.length
          }
        }
      }
}
// 实现全部对象：
Object.prototype[Symbol.iterator] = function () {
      const _this = this;
      const keys = Object.keys(this);
      let index = 0;
      return {
        next() {
          return {
            value: _this[keys[index++]],
            done: index > keys.length
          }
        }
      }
}

三、其他

  1. commonjs和es6 import的区别，哪种可以条件引入if
  • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
    CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块 。
  • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。 ES6 模块在引入时并不会立即执行，内核只是对其进行了引用，只有在真正用到时才会被执行，这就是“编译时”加载。
    所以CommonJS可以和If 配合引入。
娃哈哈_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常见的前端面试题【90道】
qq_50294652的博客
06-08 2万+
1、vue的基本原理2、说说你对盒子模型的理解？3、说说javascript都有哪些数据类型，如何存储的？4、如何理解响应式，实现响应式的方法有哪些？有什么区别？5、Css性能优化有哪些常见的方法？具体如何实现？6、判断数据类型的方法有哪些？有什么区别？7、说说你对事件循环的理解？8、说说你对BOM的理解，BOM的核心都有哪些？作用是什么9、Bind,call,apply有什么区别？如何实现一个bind方法？10、如何理解闭包？闭包的应用场景是？11、说说你对同步和异步的区别的理解？
前端面试题汇总大全（含答案）-- 持续更新
张兴华的博客
08-07 17万+
汇总了一些前端常见的面试题。 一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 用正确的标签做正确的事情。 html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 使阅读源代码的人对网站更容易将网站...
2024最新前端面试真题-超详细答题思路解析（持续更新ing）
最新发布
HELLO_E_SIR的博客
06-15 819
CSS 盒模型是用来描述每个 HTML 元素在页面布局中所占空间的模型。它包括了元素的内容区域、内边距、边框和外边距四个部分。
2024前端面试题！（附答案及解析）（2024.7月最新版）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 11万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.7月最新版）感谢支持，你们的鼓励是我的动力！
前端经典面试题 30道
任磊
05-13 1万+
题 1 ：什么是防抖和节流？有什么区别？如何实现？ 防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路：每次触发事件时都取消之前的延时调用方法 节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率 思路：每次触发事件时都判断当前是否有等待执行的延时函数 题 2 ：get请求传参长度的误区、get和post请求在缓存方面的区别 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际.
前端300道常见面试题，前端找工作必备
weixin_43474701的博客
12-15 1万+
前端面试题汇总 一、HTML 和 CSS 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核Firefox：gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发) 2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 声明位
前端全模块常见面试题与答案详解
weixin_55181759的博客
10-29 1万+
???? 作者主页：????仙女不下凡???? ???? 前言介绍：以下???? 内容都是我个人对于前端面试题的一些总结，一部分是我自己自学时整理的资料，但是也不乏参考其他博主的博文连接，如有侵权请联系我，另外该文章也会定期更新欢迎持续关注！ ???? 欢迎点赞???? 收藏⭐ 留言???? 如有不足与错误敬请指正！ ????一、HTML与CSS部分 1.HTML盒模型 2.行元素与块元素区别 3.flex弹性布局 4.h5新特征 5.css3新特征 6.px、em与rem区别 7.清除浮动 8.垂直居中
常见前端面试题整理（带答案）
qq_54054566的博客
06-15 7105
（1）根据内容的语义化，选择合适的标签。便于开发人员阅读和写出更优雅的代码，也便于团队后期的开发和维护；（2）在没有CSS，或者CSS尚未加载的时候，页面也能够呈现出很好的内容结构、代码结构（如标题和正文分开）；（3）有利于搜索引擎优化。搜索引擎依赖于标签来确定上下文和各个关键字的权重，语义化标签，有助于爬虫获取到更多有效的信息（1）canvas 标签，可以实现使用 javascript 在网页上绘制图像，如坐标轴、折线图；（2）支持 svg（可伸缩矢量图形），svg 图像在放大的时候图像质量不会降低；（3
2023最全最新前端面试题（附加解答）
My dream
06-23 11万+
这是我整理所有看过的文章的面试题+各种百度每一道题的答案，希望可以有效的帮助别人 本章博客，梳理所有基础的js，jquery，vue，css, html等题，包含面试题，可供参考学习，也督促自我学习
分享63个最常见的前端面试题及其答案
前端达人
07-26 1万+
在前端面试中，各种面试题都会遇到，因此，今天我们整理了60+比较常见繁杂的面试题，希望这些面试题能够对你有所帮助。当然，这些面试题的答案都不是标准答案，只是对答案做了一个简介明了的说明，希望可以快速帮助你梳理重点核心内容。这些答案可以作为参考，但是不能作为唯一标准答案，你也可以在面试时，自行补充。如果有不对的地方，欢迎指出，我们一起交流学习进步。现在，让我们以简洁明了的方式探讨这些问题的解决方案：...
前端200道面试题及答案（更新中）
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
前端面试题目大全（附答案）
LQL1990188的博客
08-28 1375
一.html & js & css 1.AMD和CMD是什么？它们的区别有哪些？ AMD和CMD是二种模块定义规范。现在都使用模块化编程，AMD，异步模块定义；CMD，通用模块定义。AMD依赖前置，CMD依赖就近。CMD的API职责单一，没有全局require，AMD的一个API可以多用。 2.web开发常见的漏洞。 XSS（跨站脚本攻击）：...
全网最全前端必问面试题（持续更新中）
m0_63760882的博客
07-23 968
在这种模式下，路由的改变会修改浏览器的历史记录，并触发浏览器的页面刷新。总之，vue-loader是一个用于将Vue单文件组件转换为JavaScript模块的Webpack加载器，提供了许多功能和扩展，使得开发Vue应用程序更加方便和高效。5. 页面性能：每个 iframe 都需要加载独立的 HTML、CSS 和 JavaScript，这会增加页面的请求和加载时间，降低页面的性能。6. 交互限制：由于浏览器的安全策略，跨域的 iframe 之间的通信受到限制，无法直接访问和操作对方的内容。
前端开发面试题及答案整理（合集）
2301_78256053的博客
07-16 3964
答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便，不需要变动页面内容、提供打印版本而水需要复制内容、提高网站易用性。2、深入研究过Jquery、AngularJS、VUE、bootstrap、YUI等框架中的一种或以上，有互联网产品的前端开发和优化经验;2. 有大型网站前端架构、前端性能、可访问性、可维护性等方面的实践经验;
this的理解，在javascript中，this是如何工作的
weixin_40918145的博客
02-10 500
以下代码的结果是什么？请解释你的答案。 var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname());
js面试题之判断是否为质数
qq_40567849的博客
09-12 376
写一个isPrime函数，当其为质数时返回true，否则返回false。 有点学习到了，我原来的实现方法就是循环2到num，判断能不能整除，都不能整除则为素数（质数）。 原博主的算法思路： 我认为这是面试中最常见的问题之一。然而，尽管这个问题经常出现并且也很简单，但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。 首先，因为JavaScript不同于C或者Java，因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你，你应该询问他是否需要做输入检查，还是不进行检查直接写函数。严格上
js学习之面向对象
agzs70106的博客
08-13 82
一、创建对象的方法 1、 {} 字面量创建 var person ={ name: "lisi", age: 21, say: function(){ alert(this.name); } }; ...
2024高频前端面试题（含答案）
热门推荐
weixin_44672169的博客
04-22 21万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)
qianduan686的博客
06-05 3209
作者:静观流叶 原文地址：https://mp.weixin.qq.com/s/PTSaytcf3xgOp6C9l3Pvjw 简答题 1、什么是防抖和节流？有什么区别？如何实现？ 参考答案 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路： 每次触发事件时都取消之前的延时调用方法 functiondebounce(fn){ lettimeout=null;//创建一个标记用来存放定时器的返回值 ...
Web前端面试必备：JavaScript数组方法与迭代技巧
"计算机Web前端学习及面试资料，包括JavaScript基础与高级特性，以及与前端开发相关的技术如CSS，HTML，计算机网络，跨域，Ajax，Vue框架和VueCLI工具，还有排序算法等内容。这份资料适合正在学习或准备面试的前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值