前端外包笔试题——答案解析

古城微笑少年丶 2022-08-29 10:47 269阅读 0赞

今天看到技术交流群里，有人发了一套前端外包的笔试题。好久都没有做过面试题了。今天一看，果然一脸懵。

现在把题目和答案记录一下，多多记录，收货多多。

# 1.`js`判断变量是否为数组(至少2种方案) #

#### `instanceof`——检测对象的原型链是否指向构造函数的`prototype` ####

具体用法：

var arr = [1,2,3];
    console.log(arr instanceof Array);//结果是true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
`ES5`中有个对应的`Array.isArray()`的方法，原理类似。

#### `constructor`属性——判断对象的构造函数 ####

具体用法：

var arr = [1,2,3];
    console.log(arr.constructor === Array);//结果是true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

#### `Object.prototype.toString`——返回该对象原型上的字符串 ####

具体用法：

var arr = [1,2,3];
    console.log(Object.prototype.toString.call(arr));//结果是：'[object Array]'

对于 `Object.prototype.toString()` 方法，如果对象的 toString() 方法未被重写，会返回一个形如 `"[object XXX]"` 的字符串。  
但是，大多数对象，`toString()` 方法都是重写了的，这时，需要用 `call()` 或 `Reflect.apply()`等方法来调用。

#### `Array.isArray`——`ES5`中检测一个值是否为数组 ####

具体用法：

var arr = [1,2,3];
    console.log(Array.isArray(arr));

# 2.`css`实现左侧固定，右侧自适应布局 #

下面提供几种方法，用于实现`左侧固定，右侧自适应布局`

#### `float`\+`bfc`，父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示 ####

.container .left{ 
    	float:left;
    	width:100px;
    }
    .container .right{ 
    	overflow:hidden;
    }
    .container::after{ 
    	content:"";
    	height:0;
    	line-height:0;
    	display:block;
    	visibility:hidden;
    	clear:both;
    }

#### `float`\+`margin-left`，右侧距离左侧的距离正好是左侧的宽度 ####

.container .left{ 
    	float:left;
    	width:100px;
    }
    .container .right{ 
    	margin-left:100px;
    }
    .container::after{ 
    	content:"";
    	height:0;
    	line-height:0;
    	display:block;
    	visibility:block;
    	clear:both;
    }

#### `absolute`\+`margin-left`，左侧宽度需要固定并且绝对定位，缺点：当左侧高度右侧时，左侧会超出父元素，需要用`js`补救 ####

.container{ 
    	position:relative;
    }
    .container .left{ 
    	position:absolute;
    	left:10px;
    	top:10px;
    	width:100px;
    }
    .container .right{ 
    	margin-left:100px;
    }

#### 子元素`inline-block`\+`calc`，左侧宽度需要固定，父元素需要设置`font-size:0`，清除默认间距，子元素设置`vertical-align:top`使其顶部对齐，右侧设置`width:calc(100% - 140px)`，达到自适应 ####

.container{ 
    	font-size:0;
    }
    .container .left{ 
    	width:100px;
    }
    .container .left,.container .right{ 
    	display:inline-block;
    	font-size:16px;
    	vertical-align:top;
    }
    .container .right{ 
    	width:calc(100% - 100px);
    }

#### `table-cell`——表格布局 ####

.container{ 
    	display:table;
    }
    .container .left,.container .right{ 
    	display:table-cell;
    }

#### `flex`布局——最便捷的方法，`flex-grow`可自由伸张，缺点：低版本的`IE`不支持 ####

.container{ 
    	display:flex;
    }
    .container .right{ 
    	flex-grow:1;
    }

#### `grid`——网格布局 ####

.container{ 
    	display:grid;
    }
    .container .left{ 
    	grid-column:1;
    }
    .container .right{ 
    	grid-column:2;
    }

# 3.写出下面`linux`命令的含义 #

#### `ls`——查看文件与目录的命令 ####

`ls`命令是一个非常有用的查看文件与目录的命令，`list`之意，它的参数非常多，以下是比较常用的参数：

1.  `-l` :列出长数据串，包含文件的属性与权限数据等。
2.  `-a`:列出全部的文件，连同隐藏文件(开头为.的文件)一起列出来(常用)
3.  `-d`:仅列出目录本身，而不是列出目录的文件数据
4.  `-h`:将文件容量以较易读的方式列出来
5.  `-R`:连同子目录的内容一起列出(递归列出),等于该目录下的所有文件都会显示出来

注意：这些参数可以组合使用，比如`ls -l`:以长数据串的形式列出当前目录下的数据文件和目录,`ls -lR`:以长数据串的形式列出当前目录下的所有文件

#### `mv`——用于移动文件、目录或更名 ####

`mv`:用于移动文件、目录或者更改名称，以下是比较常用的参数：

1.  `-f`:`force`强制的意思，如果目标文件已经存在，不会询问而直接覆盖
2.  `-i`:若目标文件已经存在，就会询问是否覆盖
3.  `-u`:若目标文件已经存在，且比目标文件新，才会更新

注意：该命令可以把一个文件或多个文件一次移动到一个文件夹中，但是最后一个目标文件一定要是目录。  
例如：  
`mv file1 file2 file3 dir` :把文件`file1 file2 file3`移动到目录`dir`中。  
`mv file1 file2`:将文件`file1`重命名为`file2`

#### `cat`——查看文本文件的内容，后接要查看的文件名 ####

`cat`命令用于查看文本文件的内容，后接要查看的文件名，通常可用管道与`more`和`less`一起使用，从而可以一页页的查看数据  
例如：`cat text | less` :查看`text`文件中的内容，这条命令也可以使用`less text`来代替

#### `pwd`——打印工作目录，工作目录就是你当前所处于的目录 ####

`pwd`:始终以绝对路径的方式打印工作目录，即从根目录(/)开始到当前目录的完整路径。在实际工作中，我们常常记不住当前目录的完整路径，此时`pwd`命令就派上用场了。

#### `echo`——在显示器上显示一段文字，一般起到一个提示的作用 ####

`echo [-n] 字符串`:其中选项`n`表示输出文字后不换行，字符串能加引号，也能不加引号，用`echo`命令输出加引号的字符串时，将字符串原样输出，用`echo`命令输出不加引号的字符串时，将字符串中的各个单词作为字符串输出，各字符串之间用一个空格分割。

# 4.`vue`兄弟组件之间的通信(`bus.js`)方法 #

如题：有组件`A`和组件`B`,组件`A`用函数方法触发组件`B`中的函数方法。

#### 1.新建一个`js`文件：`bus.js` ####

#### 2.两个组件都需要引用这个`js`文件 ####

`import bus from '../assets/bus.js';//具体路径根据实际情况来处理`

#### 3.`bus.js`文件中的内容 ####

import Vue from 'vue';
    export default new Vue;

#### 4.`A`组件中新建一个方法： ####

busFunction(){ 
    	...
    	bus.$emit('busFn',xxxx);
    	...
    }

上面的关键代码：`bus.$emit('busFn',xxxx)`,其中的`xxxx`是`A`组件要传给`B`组件的值。

#### 5.`B`组件需要接收`A`组件传来的参数，然后进行处理，代码如下： ####

created(){ 
    	bus.$on('busFn',msg=>{ 
    		this.xxx = msg;
    	})
    }

上面的关键代码：`bus.$on('busFn,msg=>{}')`这个`busFn`就是组件`A`中传递过来的函数及参数。

当然也可以使用`vuex`状态管理来传递参数。

# 5.关于`git`的一道题目 #

`git实例 场景：你是第一天来公司上班的，项目代码托管在GitLab，项目地址：git@lab.com:org/project.git,现在有一处代码需要你修改。请写出完成此项任务中，与git/gitlab相关的操作步骤`

在确定有`github`账号和公钥的基础上，要进行的步骤就是：拉项目，切换到新分支，修改代码，提交代码

`git clone git@lab.com.org/project.git` 拉取代码  
`git checkout -b 分支名称` 新建一个分支并切换到新分支  
`git add .` 修改代码后，选取所有文件  
`git commit -m 'xxxx'` 提交代码到本地工作区  
`git push origin xxxxx` 提交工作区内容到远程仓库

# 6.读代码写执行结果 #

<body>
    	<div id="test" class="test">
    		test
    		<div style="display:none">
    			<span>test</span>
    		</div>
    		<style>h1</style>
    	</div>
    </body>
    <script>
    	var testDiv = document.getElementById('test');
    	console.log(testDiv.textContent);
    	console.log(testDiv.innerText);
    </script>

#### `textContent 属性设置或返回指定节点的文本内容，以及它的所有后代` ####

因此上面的结果是：  
`test text h1`

#### `innerText属性设置或返回指定节点的文本内容，不包含它的所有后代` ####

因此上面的结果是：  
`test`

# 7.读代码写执行结果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
打印结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
注意一点：函数和变量会提升。如果变量声明了，但是没有赋值，则打印出来是`undefined`

# 8.实现货币的格式化(三位加逗号) #

![在这里插入图片描述][07a0f72d465f46fcbb8eab96195baa37.png]  
正则实现：  
`return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');`

还有一个简单的办法，就是利用`toLocalString`方法

function setMoney(num){ //取整，三行逗号隔开
    	return parseFloat(num).toLocaleString();
    	
    }
    var m=setMoney(123456.7889);
    console.log(m);//输出123,456.789

说明：`toLocaleString`在将数字转换为字符串的同时，会使用三位分节法进行显示。如果是浮点数，只只保留了小数点后三位数，并进行了四舍五入。

注意：在`IE`下，浮动数会默认取消，输出结果为`123,456`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/6b1513d34b2e4f49b3fa599571e618e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/99477b1208684fafb7ea8311d2f9dc88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/3b5b60621bcb4549a10e51eb0e3f342f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/b4b2c75688604e7ba00748c9ab8a3568.png
[07a0f72d465f46fcbb8eab96195baa37.png]: /images/20220829/4ae6772a637e4a989fc7e9d8349f3f0c.png