前端面试笔试题目-JS专项练习（基础）-牛客网
前端面试笔试题目-JS专项练习（基础）
1、JS数据类型
| 6种值类型(基本类型) | 符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的值） |
|---|---|
| 3种引用数据类型（对象类型） | 对象(Object)、数组(Array)、函数(Function) |
| 2种特殊的对象 | 正则（RegExp）和日期（Date） |
<script>
console.log(typeof "John") // string
console.log(typeof 3.14) // number
console.log(typeof NaN) // number
console.log(typeof false) // boolean
console.log(typeof [1, 2, 3, 4]) // object
console.log(typeof { name: 'John', age: 34 }) // object
console.log(typeof new Date()) // object
console.log(typeof function () { }) // function
console.log(typeof myCar) // undefined
console.log(typeof null) // object
console.log(typeof undefined) // undefined
</script>
2、检测数据类型（四种方法）
- 1、请补全JavaScript函数，要求以字符串的形式返回参数的类型
function _typeof(value) {
// 补全代码
return typeof(value);
}
- 2、请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。
function _instanceof(left,right) {
// 补全代码
return (left instanceof right);
}
1、js检测数据类型四种办法
| 方法 | 使用 |
|---|---|
| typeof | 1、typeof null 返回类型错误，返回object 。2、引用类型，除了function返回function类型外，其他均返回object。3、 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型 |
| instanceof | instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型 |
| constructor | constructor是原型prototype的一个属性，当函数被定义时候，js引擎会为函数添加原型prototype，并且这个prototype中constructor属性指向函数引用， 因此重写prototype会丢失原来的constructor |
| Object.prototype.toString.call() | 对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息 |
2、Object.prototype.toString.call() 的使用（推荐）
<script>
/* Object.prototype.toString.call */
console.log(Object.prototype.toString.call('')) // [object String]
console.log(Object.prototype.toString.call(1)) // [object Number]
console.log(Object.prototype.toString.call(true)) // [object Boolean]
console.log(Object.prototype.toString.call(Symbol)) // [object Function]
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]
console.log(Object.prototype.toString.call(new Function())) // [object Function]
console.log(Object.prototype.toString.call(new Date())) // [object Date]
console.log(Object.prototype.toString.call([])) // [object Array]
console.log(Object.prototype.toString.call(new RegExp())) // [object RegExp]
console.log(Object.prototype.toString.call(new Error())) // [object Error]
console.log(Object.prototype.toString.call(document)) // [object HTMLDocument]
console.log(Object.prototype.toString.call(window)) // [object global] window 是全局对象 global 的引用
</script>
3、数据类型转换（toString）
- 请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
function _splice(left,right) {
// 补全代码
return left.toString()+right.toString();
}
4、阶乘（递归）
- 请补全JavaScript函数，要求返回数字参数的阶乘。注意：参数为大于等于0的整数
function _factorial(number) {
// 补全代码
if(number==1){
return number;
}else{
return number * _factorial(number - 1)
}
}
5、绝对值
- 请补全JavaScript函数，要求返回数字参数的绝对值
function _abs(number) {
// 补全代码
return number>=0?number:-number;
}
6、幂（有点像阶乘）
- 请补全JavaScript函数，要求返回底数为第一个参数，幂为第二个参数的数值
function _pow(number,power) {
// 补全代码
if(power==1){
return number;
}else{
return number*_pow(number,power-1)
}
}
7、平方根（Math.sqrt）
- 请补全JavaScript函数，要求返回数字参数的平方根
function _sqrt(number) {
// 补全代码
return Math.sqrt(number)
}
8、余数（%）
- 请补全JavaScript函数，要求返回数字参数除以2的余数
function _remainder(value) {
// 补全代码
return value%2;
}
9、数组求和（for、eval、forEach）
- 计算并返回给定数组 arr 中所有元素的总和
//for循环
function sum(arr) {
var sum=0;
for(let i=0;i<arr.length;i++){
sum+=arr[i]
}
return sum;
}
//eval
function sum(arr) {
return eval(arr.join('+'));
}
//forEach
function sum(arr) {
var sum=0;
arr.forEach(function(value,index,arr){
sum+=value;
},0)
return sum
}
10、移除数组中的元素（for in、while、for）
- 移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组
//while循环
function removeWithoutCopy(arr, item) {
for(var i in arr){
while(arr[i]==item){
arr.splice(i,1)
}
}
return arr;
}
//for循环
function removeWithoutCopy(arr, item) {
for(let i =0;i<arr.length;i++){
if(arr[i]==item){
arr.splice(i,1);
i--;
}
}
return arr;
}
11、向数组添加元素（slice、concat）
- 在数组 arr 末尾添加元素 item。结果返回新的数组
//普通
function append(arr, item) {
var arr1=[];
for(value of arr){
arr1.push(value)
}
arr1.push(item)
return arr1;
}
//slice提取
function append(arr, item) {
var arr1=arr.slice(0);
arr1.push(item);
return arr1;
}
//concat
function append(arr, item) {
return arr.concat([item]);
}
12、删除数组最后一个元素（slice、pop）
- 删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组
//slice
function truncate(arr) {
return arr.slice(0, arr.length-1);
}
//pop
function truncate(arr) {
var a = arr.slice(0);
a.pop();
return a;
}
13、向数组添加元素（concat、unshift）
- 在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组
//concat
function prepend(arr, item) {
return [item].concat(arr);
}
//unshift
function prepend(arr, item) {
var arr1 = arr.slice(0);
arr1.unshift(item);
return arr1;
}
14、删除数组第一个元素（slice、shift）
- 删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组
//slice提取
function curtail(arr) {
return arr.slice(1);
}
//shift移除
function curtail(arr) {
var arr1= arr.slice(0);
//var arr1= arr.concat();
arr1.shift();
return arr1;
}
15、数组合并（concat）
合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
function concat(arr1, arr2) {
return arr1.concat(arr2);
}
16、数组添加元素
- 在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组
jsfunction insert(arr, item, index) {
var arr1=arr.slice(0);
arr1.splice(index,0,item);
return arr1;
}
17、求二次方（push、map）
- 为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组
//for of
function square(arr) {
var arr1=[];
for(value of arr){
arr1.push(value*value);
}
return arr1;
}
//map
function square(arr) {
return arr.map(function(item,index,array){
return item*item;
})
}
18、查找元素位置（forEach）
- 在数组 arr 中，查找值与 item 相等的元素出现的所有位置
function findAllOccurrences(arr, target) {
var arr1=[];
arr.forEach(function(value,index,arr){
if(value==target){
arr1.push(index);
}
})
return arr1;
}
19、正确的使用 parseInt
修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例
function parse2Int(num) {
return parseInt(num,10);
}
20、返回星期数（switch）
- 请补全JavaScript函数，要求以字符串的形式返回数字参数所对应的星期。
function _getday(value) {
// 补全代码
switch(value){
case 1:
return '星期一'
case 2:
return '星期二'
case 3:
return '星期三'
case 4:
return '星期四'
case 5:
return '星期五'
case 6:
return '星期六'
case 7:
return '星期天'
}
}
21、从大到小排序（冒泡排序法）
- 请补全JavaScript函数，要求将数组参数中的数字从大到小进行排序并返回
function _sort(array) {
// 补全代码
var temp;
for(let i=0;i<array.length;i++){
for(let j=i+1;j<array.length;j++){
if(array[i]<array[j]){
temp=array[i];
array[i]=array[j];
array[j]=temp;
}
}
}
return array;
}
22、大写字符串（toUpperCase）
- 请补全JavaScript函数，要求将字符串参数转换为大写字符串并返回
function _touppercase(string) {
// 补全代码
return string.toUpperCase();
}
23、获取对象属性键名（Object.keys）
- 请补全JavaScript函数，要求以数组的形式输出对象各个属性的键名。
示例： _keys({name:‘nowcoder’,age:7}) -> [‘name’,‘age’]
function _keys(object) {
// 补全代码
return Object.keys(object)
}
24、数据类型转为对象（new Number()）
- 请补全JavaScript函数，要求将数字参数转换为对象的形式返回
function _numbertoobject(number) {
// 补全代码
return new Number(number)
}
25、和=的区别
- 当进行比较时候： 先检查两个操作数数据类型，如果相同， 则进行=比较， 如果不同， 则愿意为你进行一次类型转换，转换成相同类型后再进行比较
而===比较时， 如果类型不同，直接就是false.
<script>
console.log(1 == [1]) // true
console.log(1 === [1]) // false
console.log(1 == true) // true
console.log(1 === true) // false
console.log(1 == '1') // true
console.log(1 === '1') // false
</script>
26、或运算（||）
返回参数 a 和 b 的逻辑或运算结果
function or(a, b) {
return a||b;
}
27、且运算（&&）
返回参数 a 和 b 的逻辑且运算结果
function and(a, b) {
return a&&b;
}
28、字符串字符统计
统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率
不限制 key 的顺序
输入的字符串参数不会为空
忽略空白字符
//for循环
function count(str) {
var obj={};
for(let i=0;i<str.length;i++){
if(str[i]!=''){
obj[str[i]]=obj[str[i]]?++obj[str[i]]:1;
}
}
return obj;
}
/*
'hello world'
{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}
*/
29、去除字符串两端空格
- 请补全JavaScript函数，要求去除参数字符串两端的空格并返回
//trim
function _trim(string) {
// 补全代码
return string.trim();
}
//split
function _trim(string) {
// 补全代码
var arr=string.split('');
arr.pop();
arr.shift();
return arr.join('')
}
| 方法 | 作用 |
|---|---|
| trim() | 去除字符串的头尾空格 |
| split() | 把一个字符串分割成字符串数组 |
| join() | 把字符串数组变成字符串 |
| shift() | 去掉数组第一个元素 |
| pop() | 去掉数组最后一个元素 |
30、输出日期（Date）
请补全JavaScript函数，要求以字符串的形式输出时间戳参数所对应的"年-月-日"。 示例： _date(1631159776311) -> ‘2021-9-9’
function _date(number) {
// 补全代码
let date=new Date(number);
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
//return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
}
31、数字取整（parseInt）
- 请补全JavaScript函数，要求返回数字参数的整数部分
function _int(value) {
// 补全代码
return parseInt(value);
//return Math.floor(value)
}
31、数组反转（reverse）
- 请补全JavaScript函数，要求将参数数组反转之后返回
//for循环
function _reverse(array) {
// 补全代码
var arr1=[];
for(let i=array.length-1;i>=0;i--){
arr1.push(array[i]);
}
return arr1;
}
//reverse数组反转
function _reverse(array) {
// 补全代码
return array.reverse();
}
32、数组转字符串（join）
- 请补全JavaScript函数，要求将参数数组转换为字符串输出。
示例：_join([1,‘2’,3]) -> “123” 注意：只需考虑一维数组且数据类型为原始数据类型。
function _join(array) {
// 补全代码
return array.join('');
}
33、数组最大值
- 请补全JavaScript函数，要求找到数组参数中的最大值并返回。
//Math.max()
function _max(array) {
// 补全代码
return Math.max(...array);
}
function _max(array) {
// 补全代码
var max=array[0];
for(let i=0;i<array.length;i++){
max=max<array[i]?array[i]:max;
}
return max;
}
//for
function _max(array) {
// 补全代码
let max = 1;
for(let i = 0;i < array.length;i++){
if(max < array[i]){
max = array[i];
}
}
return max;
}
34、搜索数字
请补全JavaScript函数，要求以boolean的形式返回字符串参数中是否包含数字
function _search(string) {
// 补全代码
var arr=string.split('');
for(value of arr){
if (typeof(value === 'number')){
return true;
}else{
return false;
}
}
}
35、头部插入元素（unshifit）
请补全JavaScript函数，要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回。
function _unshift(array,value) {
// 补全代码
return array.unshift(value);
}
36、尾部插入元素（push）
请补全JavaScript函数，要求将第二个参数插入第一个参数数组的尾部，并且以数组的形式返回
function _push(array,value) {
// 补全代码
return array.push(value);
}
37、js-位置查找（indexof）
- 请补全JavaScript函数，要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。注意：如果数组中不存在目标值，则返回-1。
//indexof
function _indexof(array,value) {
// 补全代码
return array.indexof(value);
}
//for
function _indexof(array,value) {
// 补全代码
var index=-1;
for(let i=0;i<array.length;i++){
if(array[i]===value){
index=i;
break;
}
}
return index;
}
38、向下取整（Math.floor）
- 请补全JavaScript函数，要求以数字的形式返回数字参数向下取整的结果
function _floor(number) {
// 补全代码
return Math.floor(number);
}
39、整数反转（parseInt）
- 请补全JavaScript函数，要求将整数参数反转之后输出
function _reverse(number) {
// 补全代码
var arr=number.toString().split('');//字符串变数组
arr.reverse();//数组反转
number=arr.join('');//数组变字符串
return parseInt(number);//字符串变数字
}
40、字符串搜索（search）
- 请补全JavaScript函数，要求以boolean的形式返回字符串首参中是否包含第二个参数
function _search(string,value) {
// 补全代码
return Boolean(string.search(value));
//return string.indexOf(value)==-1?false:true;
}
41、函数——参数对象
- 请补全JavaScript函数，要求返回它的参数伪数组对象
function getArguments (a,b,c) {
// 补充代码
return arguments;
}
42、this指向
- 请补全JavaScript函数，使obj对象中fn函数返回该对象中a属性和b属性的和
var obj = {
a: 1,
b: 2,
fn: function(){
// 补全代码
return this.a+this.b;
//return obj.a+obj.b;
}
}
43、JS修改元素内容（innerHTML）
- 请补全JavaScript函数，将类为"box"的div元素内容修改为"欢迎来到牛客网"
getElementsByClassName()
querySelector()
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
function modifyText(){
// getElementsByClassName()
var box=document.getElementsByClassName('box')[0];
box.innerHTML='欢迎来到牛客网';
}
// querySelector()
var box=document.querySelector('.box');
box.innerHTML='欢迎来到牛客网';
}
</script>
</html>
44、防止冒泡事件（stopPropagation）
- 请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul>
<li>nowcoder</li>
</ul>
</body>
<script type="text/javascript">
// 补全代码
var li=document.querySelector('li');
li.addEventListener('click',function(e){
e.stopPropagation();
})
</script>
</html>
阻止默认事件
请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
注意：需要自行获取input元素。
<html>
<head>
<meta charset=utf-8>
head>
<body>
<form>
<label>牛客会陪伴大家label>
<input id="checkbox" type="checkbox" checked />
form>
body>
<script type="text/javascript">
// 补全代码
let input=document.getElementsByTagName('input')[0];
input.onclick=function(){
input.checked=true;
}
// 补全代码
let input=document.getElementsByTagName('input')[0];
input.onclick=function(e){
e.preventDefault();
}
script>
html>