2021年秋招遇到的前端笔试/面试题-JieYingAI捷鹰AI

本文仅用于记录本人2021年秋招遇到的部分前端笔试/面试题，答案仅供参考

1、跳跃游戏

给定一个非负整数数组，你最初位于数组的第一个位置。

数组中的每个元素代表你在该位置可以跳跃的最大长度。

判断你是否能够到达最后一个位置。

示例 1:

输入: [2,3,1,1,4]

输出: true

解释: 我们可以先跳 1 步，从位置 0 到达位置 1, 然后再从位置 1 跳 3 步到达最后一个位置。

示例 2:

输入: [3,2,1,0,4]

输出: false

解释: 无论怎样，你总会到达索引为 3 的位置。但该位置的最大跳跃长度是 0 ，所以你永远不可能到达最后一个位置。

//贪心算法
function Jump(nums) {
	// 首位重合，必定能达到
    if (nums.length < 2) {
        return true
    }
    //pos记录每个位置（数组每个下标）所能达到的最大位置，即当前索引 + 当前值（此处省略了+0）
    let pos = nums[0]
    //遍历剩下的数组，当最大位置大于等于数组长度时，即可以到达最后，
    //反之若在遍历过程中，目前能到达的最大位置小于当前索引值，说明无法到达当前索引位置，故也不能到达数组尾
    for (let i = 1; i < nums.length; ++i) {
        if (pos >= i) {
            pos = Math.max(pos, i + nums[i])
        }
        if(pos < i) return false;
        if (pos >= nums.length - 1) {
            return true
        }
    }
    return false
};

2、岛屿数量

给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。

岛屿总是被水包围，并且每座岛屿只能由水平方向和或竖直方向上相邻的陆地连接形成。此外，你可以假设该网格的四条边均被水包围。（如果1 的上下左右都为0，则视为一个岛屿，写出一个函数，计算数组中岛屿的个数。）

示例 1:

输入:

[1,1,1,1,0],

[1,1,0,1,0],

[1,1,0,0,0],

[0,0,0,0,0]

输出: 1

示例 2:

输入:

[1,1,0,0,0],

[0,0,1,0,0],

[0,0,0,1,1]

输出: 3

// 时间复杂度：O(MN)，其中 M 和 N 分别为行数和列数。
// 空间复杂度：O(MN)，在最坏情况下，整个网格均为陆地，深度优先搜索的深度达到 MN。
var numIslands0_1 = function(grid) {
    let count = 0
    for(let i = 0; i < grid.length; i++){
        for(let j = 0; j < grid[0].length; j++){
            if(grid[i][j] === "1"){
                grid[i][j] = "0"
                dfsVisit(i, j)
                count++
            }
        }
    }
    function dfsVisit(r, c){
        let dir = [[0,-1], [0,1], [-1,0], [1,0]] // 上下左右
        for(let k = 0; k < 4; k++){
            let row = r + dir[k][0],
                col = c + dir[k][1];
            if(row < 0 || row >= grid.length || col < 0 || col >= grid[0].length) continue
            if(grid[row][col] === "1"){
                grid[row][col] = "0"
                dfsVisit(row, col)
            }else{
                continue
            }
        }
    }
    return count
};

3、主流浏览器引擎前缀:

-webkit- ：（谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）

-moz- ：（火狐浏览器）

-o- ：（旧版Opera浏览器）

-ms- ：（IE浏览器和 Edge浏览器）

示例:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

4、parseInt(“8X8”)+parseFloat(“8”)=16

5、Number(null)=0

6、不知为啥

obj={};
obj.log=console.log;
obj.log.call(console,this)//输出为window

7、对递归程序的优化的一般的手段为（A）

A 尾递归优化

B 循环优化

C 堆栈优化

D 停止值优化

8、在位运算中，操作数每右移一位，其结果相当于除以2 ，若左移1位，其结果相当于乘以2

9、找上中位数

给定两个有序数组arr1和arr2，已知两个数组的长度都为N，求两个数组中所有数的上中位数。上中位数：假设递增序列长度为n，若n为奇数，则上中位数为第n/2+1个数；否则为第n/2个数

输入为：arr1 = [1, 2, 3, 4], arr2 = [3, 4, 5, 6]，输出为3

输入为：arr1 = [0, 1, 2], arr2 = [3, 4, 5]，输出为2

function solve(arr1,arr2){
    var arr = arr1.concat(arr2)
    arr = arr.sort((a,b)=>{return a-b}) // 数组升序
    arr = dedupe(arr) // 数组去重
    var len = arr.length
    if(len==1) return arr[0] // 若长度只有一个则为本身
    else {
        var index = Math.ceil(len/2) // 无论奇数偶数个，向上取整
        return arr[index-1]
    }
}
// 数组去重函数
function dedupe(arr){
    return Array.from(new Set(arr))
}

10、给定一个数组由一些非负整数组成，现需要将他们进行排列并拼接，使得最后的结果最大，返回值需要是string类型，否则可能会溢出（每个数不可拆分）

var largestNum = function(nums) {
    return nums.sort((a,b) =>
        `${b}${a}` - `${a}${b}`
    ).join('').replace(/^0+/,'0')
};

或者：

var largestNumber = function(nums) {
    return nums
        .sort((a,b) => ''+b+a > ''+a+b ? 1 : -1)
        .join('')
        .replace(/^0+(?=.)/,'')
}

11、找出 10 22 -6 14的下一个数字（没错，你没看错，这是我面试前端遇到的笔试题，阿巴阿巴阿巴~~）

第一组：10 ， 22 ； 22-10=12 12 /（-2）=-6

第二组：22 ， -6 ； -6-22=-28 -28 /（-2）=14

第三组：-6 ， 14； 14-（-6）= 20 20 /（-2）= -10

所以下一个数为-10

12、写出括号内的数字：10，5，25，35，（），155 （继续阿巴阿巴阿巴~~）

10 X 2 + 5 = 25

5 X 2 + 25 = 35

故括号内的数字为：25 X 2 + 35 = 85

13、overflow 属性定义内容溢出元素框时会如何处理？

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制，即必会出现滚动条。

如果值为auto，子元素内容大于父元素时出现滚动条。

如果值为visible，溢出的内容出现在父元素之外。

如果值为hidden，溢出隐藏。

14、新窗口打开网页，用到以下哪个值（ _blank ）

_self

_blank

_top

_parent

15、flash和js通过什么类进行交互?

ExternalInterface，Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

ExternalInterface.addCallback(“在js里可调用的flash方法名”,flash内方法) ，在flash中通过这个方法公开在js中可调用的flash内的方法;

ExternalInterface.call(“js方法”,传给js的参数) ，在flash里调用js里的方法。

16、在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。

//inputElement是一个dom元素
inputElement.style.backgroundColor = 'red'; // 这是没问题的
inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
inputElement.style["background-color"] = 'red'; // 这也是可以的

17、HTML5标签的使用：

标签定义声音，比如音乐或其他音频流。

标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。标签定义命令的列表或菜单。标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 command 元素表示用户能够调用的命令。标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

18、通过修改document.domain来跨子域，还可以使用window.name来进行跨域。 19、以下程序的输出结果为什么？

function Foo() {

var i = 0;

return function() {

console.log(i++);

var f1 = Foo(),

f2 = Foo();

f1();

f2();

20、请给出下面这段代码的运行结果：

var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);

运行结果为 2 1，函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。所以，函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。

21、javascript变量定义规则：

变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号

变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型

尽量避免使用没有意义的命名

禁止使用JavaScript关键词、保留字全名。

22、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型、规范来解析这个文档。浏览器根据DOCTYPE是否存在以及使用的哪种DTD（文档类型定义）来选择要使用的呈现模式，浏览器有两种呈现模式：标准模式和混杂模式，在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

对于 HTML 4.01 文档，

包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。

包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。

但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。

DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

23、下述有关 border:none 以及 border:0 的区别，描述错误的是（C、D）

A、border:none 表示边框样式无

B、border:0 表示边框宽度为 0

C、当定义了 border:none，即隐藏了边框的显示，实际就是边框宽度为 0

D、当定义边框时，仅设置边框宽度也可以达到显示的效果

解析：C选项，当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；D选项，定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。

另外，W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

24、下面有关 CSS sprites 说法错误的是（C）

A、允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

B、利用 CSS 的 “background-image”，“background-repeat”，“background-position” 的、组合进行背景定位

C、CSS Sprites 虽然增加了总的图片的字节，但是很好地减少网页的 http 请求，从而大大的提高页面的性能

D、CSS Sprites 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

解析：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

25、浏览器的内核引擎

浏览器的内核引擎，基本上是四分天下：

1）Trident: IE 以Trident 作为内核引擎；

2)Gecko: Firefox 是基于 Gecko 开发；

3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；

4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

注：2013年2月Opera宣布转向WebKit引擎

注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

26、[]==[]结果为false

在==两边都是相同数据类型时，它是直接比较两边数据的。

每次使用 [] 都是新建一个数组对象，所以 [] == [] 这个语句里建了两个数据对象，它们是两个引用类型，在堆中是不同地址的，所以它们不等。与之类似的还有：

27、[]==![]结果为true

以上的结果主要是==的类型转换规则造成的：

（1）首先 ! 的优先级高于 ==号，![]和!{}的结果都为false；

（2）相等操作符会对操作值进行隐式转换后进行比较：

如果一个操作值为布尔值，则在比较之前先将其转换为数值；

如果一个操作值为字符串，另一个操作值为数值，则通过Number()函数将字符串转换为数值；

如果一个操作值是对象，另一个不是，则调用对象的valueOf()方法，得到的结果按照前面的规则进行比较，如果对象没有valueOf()方法，则调用 toString()；

null与undefined是相等的；

如果一个操作值为NaN，则相等比较返回false；

如果两个操作值都是对象，则比较它们是不是指向同一个对象。

根据以上规则就可得出对应的结果。

28、在以下选项中，关于JavaScript的Date对象描述正确的是（c）

A 、getMonth( )方法能返回Date对象的月份，其值为1~12

B、 getDay( )方法能返回Date对象的一个月中的每一天，其值为1~31

C 、getTime( )方法能返回某一时刻(1970年1月1日)依赖的毫秒数

D、 getYear( )方法只能返回4位年份，长用于获取Date对象的年份

解析：getMonth()：返回月份（从 0-11）。

getDay()：返回星期几（0-6）。

getTime() ：返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。

getYear() ：已弃用，请改用 getFullYear() 方法。getFullYear()：返回指定日期的年份（1000 年到 9999 年之间的日期的四位数字）。

getDate() ：返回月中的第几天（从 1 到 31）。

29、Ajax与json区别，以及各自的优缺点。

Ajax：ajax是一种发送http请求与后台进行异步通讯的技术，与后台通信，获取数据和信息，其原理是实例化XMLHttpRequest对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步，用于快速创建动态网页。

优点：1：页面无刷新,在页面内与服务器通信,用户体验非常好

2：基于标准化的并被广泛支持的技术

缺点：1：ajax干掉了back按钮

2: 安全问题

3: 破坏了程序的异常机制

4: 如果用户禁用了JS就找不到数据了

JSON: json的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式。简单来说，json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。

优点：(1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；

（2）易于解析，客户端JavaScript可以简单的通过eval_r ()进行JSON数据的读取；（3）支持多种语言，兼容性广泛

缺点：1：语法过于严谨

2：代码不容易读

3：eval函数存在风险

30、ES5与ES6的区别

1、新增声明命令 let 和 const

2、模板字符串

3、函数的扩展：3.1）函数的默认参数； 3.2）箭头函数

4、对象的扩展：4.1）属性的简写：var baz = {foo}; 等同于 var baz = {foo: foo};

4.2）Object.keys()方法：获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组 4.3）Object.assign ()：assign 方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象

5、for…of 循环

6、import 和 export

7、Promise 对象

8、数组、对象的解构赋值

9、Set 数据结构

10、class

31、画一条0.5px的线

不能直接设置0.5px，因为直接设置0.5px，在不同的浏览器会有差异

（1）使用scaleY

.half-px {
            width: 300px;
            background-color: #000;
            height: 1px;
            transform: scaleY(0.5);
            transform-origin: 50% 100%;//默认值为50% 50% 0
            //如果是Chrome/Safari浏览器，线条会变虚，将缩放的原点改为线的中下位置即可
        }

（2）线性渐变linear-gradient

.half-px {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
    //渐变的角度从下往上，从白色#fff渐变到黑色#000，而且是线性的
}

32、如何封装axios?

第一个参考链接：

自定义封装axios方法总结

第二个参考链接：

我是如何封装axios的

33、用es5实现jquery.fn.extend？

还是参考jQuery的源码吧：

jQuery.extend = jQuery.fn.extend = function () {
    var options, name, src, copy, copyIsArray, clone,
      target = arguments[0] || {},
      i = 1,
      length = arguments.length,
      deep = false;
    if (typeof target === "boolean") {
      deep = target; 
      target = arguments[1] || {};
      i = 2;
    }
    if (typeof target !== "object" && !jQuery.isFunction(target)) {
      target = {};
    }
    if (length === i) {
      target = this;
      --i;
    }
    for (; i < length; i++) {
      if ((options = arguments[i]) != null) {
        for (name in options) {
          src = target[name];
          copy = options[name];
          if (target === copy) {
            continue;
          }
          if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
            if (copyIsArray) {
              copyIsArray = false;
              clone = src && jQuery.isArray(src) ? src : [];
            } else {
              clone = src && jQuery.isPlainObject(src) ? src : {};
            }
            target[name] = jQuery.extend(deep, clone, copy);
          } else if (copy !== undefined) {
            target[name] = copy;
          }
        }
      }
    }
    return target;
  };

34、简述box-sizing属性：

box-sizing 属性用来设置盒子模型的边界，有三个值 content-box、border-box、inherit。 content-box 是默认值，盒子的宽度和高度为 widthheigth+padding+border+margin;

border-box是css3新增的属性值，盒子的宽度和高度为 widthheigth+margin，即使给盒子加上padding和border也不会撑大盒子的宽度和高度；inherit 规定应从父元素继承 box-sizing 属性的值。

35、常见的web性能优化方法：

版权声明 1 本网站名称：捷鹰AI导航
2 本站永久网址：www.jieyingai.com
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长QQ:1392478547进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END