高级前端面试题目大全(代码片段)

关键词：

    /* 防抖 */
    function dou(fn, wait) 
        var time = null;
        return function () 
            clearTimeout(time)
            // time = setTimeout(function () 
            //  console.log(this)//window 
            //  fn.apply(this, arguments)//这样的话 this为window和直接 fn()调用是一样的效果，因为他们的this都是window
            // , wait);
            time = setTimeout(() => 
                // console.log(this)//div
                fn.apply(this, arguments)//确保dou函数的this（上下文还是div）
            , wait);
        
    
    function demo() 
        console.log(‘防抖啦‘)
    
    // 用句柄事件绑定调用dou事件，所以this为div节点对象
    document.querySelector(‘div‘).addEventListener(‘scroll‘, dou(demo, 1000))

    /* 节流 */
    function throttle(func, wait) 
        var previous = 0;
        return function () 
            var now = +new Date();
            if (now - previous > wait) 
                func.apply(this, arguments);
                previous = now;
            
        
    
    function getUserAction() 
        console.log(`每秒1秒内打印一次`)
    
    document.querySelector(‘div‘).addEventListener(‘click‘, throttle(getUserAction, 1000))

function a() 
  this.name = ‘a‘;

a.prototype.getName = function getName() 
  return this.name

function b() 
b.prototype = new a();
console.log(b.prototype.__proto__ === a.prototype); // true
console.log(b.__proto__ === a); // false
console.log(b.__proto__); // [Function]

class A 
  constructor(a) 
    this.name = a;
  
  getName() 
    return this.name;
  


class B extends A
  constructor() 
    super();
  


console.log(B.prototype.__proto__ === A.prototype); // true
console.log(B.__proto__ === A); // true
console.log(B.__proto__); // [Function: A]

(async () => 
    var a = await A();
    var b = await B(a);
    var c = await C(b);
    var d = await D(c);
)();

async function async1() 
    console.log(‘async1 start‘);
    await async2();
    console.log(‘async1 end‘);

async function async2() 
    console.log(‘async2‘);

console.log(‘script start‘);
setTimeout(function() 
    console.log(‘setTimeout‘);
, 0)
async1();
new Promise(function(resolve) 
    console.log(‘promise1‘);
    resolve();
).then(function() 
    console.log(‘promise2‘);
);
console.log(‘script end‘);
复制代码

    var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
    // 方法一
    console.log(Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b))
    // 方法二
    console.log(Array.from(new Set(arr.toString().split(‘,‘))).map(Number).sort((a, b) => a - b))

    // 方法三
    // 第一步：扁平化
    let newArr = [];
    function flat(originArr) 
        if (.toString.call(originArr) === ‘[object Array]‘) 
            for (let i of originArr) 
                if (.toString.call(i) === ‘[object Array]‘) 
                    arguments.callee(i)
                 else 
                    newArr.push(i)
                
            
        
        return newArr;
    
    console.log(flat(arr))
    // 第二步：去重
    var newArr1 = [];
    for (let i of newArr) 
        if (!newArr1.includes(i)) newArr1.push(i);
    
    // 第三步：排序 可以采用相关算法处理
    console.log(newArr1.sort((a, b) => a - b))

    setTimeout(() => 
        // callback 函数体
    , 1000)

    ajax(‘XXX1‘, () => 
        // callback 函数体
        ajax(‘XXX2‘, () => 
            // callback 函数体
            ajax(‘XXX3‘, () => 
                // callback 函数体
            )
        )
    )

    ajax(‘XXX1‘)
        .then(res => 
            // 操作逻辑
            return ajax(‘XXX2‘)
        ).then(res => 
            // 操作逻辑
            return ajax(‘XXX3‘)
        ).then(res => 
            // 操作逻辑
        )

    function* fetch() 
        yield ajax(‘XXX1‘, () =>  )
        yield ajax(‘XXX2‘, () =>  )
        yield ajax(‘XXX3‘, () =>  )
    
    let it = fetch()
    let result1 = it.next()
    let result2 = it.next()
    let result3 = it.next()

async function test() 
        // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
        // 如果有依赖性的话，其实就是解决回调地狱的例子了
        await fetch(‘XXX1‘)
        await fetch(‘XXX2‘)
        await fetch(‘XXX3‘)
    

    const promise = new Promise((resolve, reject) => 
        console.log(1)
        resolve()
        console.log(2)
    )

    promise.then(() => 
        console.log(3)
    )

    console.log(4)

function _new(fn, ...arg) 
    var obj = Object.create(fn.prototype);
    const result = fn.apply(obj, ...arg);
    return Object.prototype.toString.call(result) == ‘[object Object]‘ ? result : obj;

class Example extends React.Component 
  constructor() 
    super();
    this.state = 
      val: 0
    ;
  

  componentDidMount() 
    this.setState(val: this.state.val + 1);
    console.log(this.state.val);    // 第 1 次 log

    this.setState(val: this.state.val + 1);
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => 
      this.setState(val: this.state.val + 1);
      console.log(this.state.val);  // 第 3 次 log

      this.setState(val: this.state.val + 1);
      console.log(this.state.val);  // 第 4 次 log
    , 0);
  

  render() 
    return null;
  
;
复制代码

java高级部分面试大全(代码片段)

1.IO外存 内存  缓存打开txt文件的步骤：启动一个应用程序[记事本，word，excel],系统会给这个程序分配内存空间在外存和内存之间建立一个管道   3.将外存中的数据通过管道输送到内存中   4.输送数据的管道叫做... 查看详情

前端面试指南|230页前端初级工程师面试题精编解析大全(代码片段)

目录前言前端初级工程师面试题HTML篇CSS篇JavaScript篇浏览器篇服务端与网络Vue框架算法篇前言初级前端工程师如何有计划的学习前端？前端基础是第一步也是非常重要的一步，从初学前端到成长为一名架构师，会经历... 查看详情

前端面试初中高级前端面试指南-css篇(代码片段)

写在前面专栏描述：欢迎各位加入该专栏得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框... 查看详情

整理的前端面试题目(代码片段)

实现vara=add(2)(3)(4);//9第一种方式：functionadd(a)vartemp=function(b)returnadd(a+b);temp.valueOf=function()returna;returntemp;varresult=add(2)(3)(4);console.log(result);第二种方式：functionadd()varargs=Arra 查看详情

前端面试初中高级前端面试指南-html篇(代码片段)

写在前面CSDN话题挑战赛第1期活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f参赛话题：前端面试宝典话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一... 查看详情

面试题打卡第九天（前端webpack基础及高级配置）(代码片段)

Webpack基本配置下面例子涉及的内容：拆分配置及merge启动本地服务处理ES6处理样式处理图片例子：webpack.common.js公共配置module.exports=entry:`./src/index.js`//入口文件module: 查看详情

前端中高级基础知识面试汇总(代码片段)

持续更新ing～前端基础github地址。README.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。... 查看详情

前端面试题目汇总摘录（不持续更新）(代码片段)

温故而知新，保持空杯心态HTML和CSS你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么浏览器名称内核IEtridentFirefox（火狐）geckoSafariwebkitOpera以前是presto，现在已改用GoogleChrome的Blink内核Chrome（谷歌）Blink（基于webkit... 查看详情

九月前端面试笔试总结记录(代码片段)

本文记录并总结了一些九月本人参加面试当中遇到的题目，由于本人水平也有限，这些题目对应的解答一些是我自己的思路或者回来之后进行查阅总结得到的，可能并非最佳答案。分享出来给大家参考，如果出现错误，请大佬们... 查看详情

mybatis面试大全(代码片段)

...一款优秀的持久层框架它支持定制化 SQL、存储过程以及高级映射与传统的jdbc相比， MyBatis避免了几乎所有的 JDBC代码和手动设置参数以及获取结果集2.ORM是什么？ORM（ObjectRelationalMapping），对象关系映射，... 查看详情

mybatis面试大全(代码片段)

...一款优秀的持久层框架它支持定制化 SQL、存储过程以及高级映射与传统的jdbc相比， MyBatis避免了几乎所有的 JDBC代码和手动设置参数以及获取结果集2.ORM是什么？ORM（ObjectRelationalMapping），对象关系映射，... 查看详情

阿里巴巴web前端面试的一道js题目，求解答！！！(代码片段)

题目大概是这种：functionouter()returninner;varinner="a";functioninner();inner=9;alert(typeofouter());当时的回答是结果是——function（回来測试结果也是一样）本来的想法是，inner在outer运行的过程中，以下有一个函数声明，而函... 查看详情

面试题面试官：判断图是否有环？(代码片段)

...，分为有向图和无向图。图是由边和节点组成的。在前端开发中，接触到图的场景不算多。常见的有流程、图形可视化等场景。我们在配置题目流程时遇到了需要判断图是否有环的需求。大厂面试题分享面试题库前后端... 查看详情

2020北京-腾讯视频-高级前端开发面试题目汇总

一面实现一个array多维数组，把他拍平。遍历以及reduce的实现方法。Angular预编译是怎么做的？@Component中的元数据是如何被使用的？Object.defineproperty和Object.freeze，哪个是深层的冻结？Http拦截器的原理是什么&... 查看详情

2020北京-滴滴-高级前端开发面试题目汇总

说一下js的数据类型，如何判断数据类型如何判断一个对象是否属于某个类说一下防抖函数的应用场景，并简单说下实现方式newPromise构造函数的入参是什么？你在什么场景下会使用promisevue的设计核心思想是什么说下vu... 查看详情

整理的前端面试题目(代码片段)

实现vara=add(2)(3)(4);//9第一种方式：functionadd(a)vartemp=function(b)returnadd(a+b);temp.valueOf=function()returna;returntemp;varresult=add(2)(3)(4);console.log(result);第二种方式：functionadd()varargs=Array.prototype.slice.call(arguments);varfn=function()varfnArgs=Array.prototype.sli... 查看详情

一道前端的面试题js(代码片段)

前端同学经常忽视的一个JavaScript面试题作者：Wscats链接：https://github.com/Wscats/articles/issues/85题目function Foo()     getName = function ()  alert (1);&nbs 查看详情

2021前端面试js题目总结，不妨看看有没有属于你的那道题(代码片段)

1.实用js写红绿灯的效果？<ulid="traffic"class=""><liid="green"></li><liid="yellow"></li><liid="red"></li& 查看详情