2021年这些js相关的前端面试题真的值得收藏(二)

简介: 2021年这些js相关的前端面试题真的值得收藏

8.Promise的理解,和promise都有哪些方法


Promise,就是一个对象,用来传递异步操作的消息,避免了层层嵌套的回调函数。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的API,可供进一步处理。 
(1)对象的状态不受外界影响。有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。 
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果


9.原型和原型链的理解


我们创造的每一个函数都有一个prototype(原型)属性。这个属性是一个指针,指向原型对 象。在默认情况下,所有的原型对象都会有一个constructor(构造函数)属性,这个属性包含一个指向prototype属相所在的指针。当调用构造函数创建一个新实例之后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。
<u>https://juejin.im/post/5ae95290518825672c00c0a4</u>

10:异步方式

1. Promise
2. Generator 
3. Async-await
4. Node.js 中的nextTick()和setimmediate()
5. async库

11:修复bug或添加新功能的常见工作流(git命令)是什么?空和未定义的javascript有什么区别?

git flow feature start f1 添加新特性,这个操作创建了一个基于develop的特性分支,并切换到这个分支之下。
git flow feature finish f1 完成新特性,这个操作会合并f1分支到develop分支,并删除特性分支,切换回develop分支。
git flow feature publish f1 发布新分支,发布新特性分支到远程服务器,其它用户也可以使用这分支。
修复bug:
git flow hotfix start VERSION [BASENAME] 创建hotfix分支,VERSION 参数标记着修正版本,[BASENAME]为finish release时填写的版本号。

12:您使用什么框架来编写单元测试,写下一个案例来验证调用的函数

一、问题描述: 
在一个升序数组中,使用折半查找得到要查询的值的索引位置。如:

var a=[1,2,3,4,5,6,7,8,9];
search(a,3);//返回2
search(a,1);//左边界,返回0
search(a,9);//右边界,返回8
search(a,0);//比最小的值还小,返回"您查找的数值不存在"
search(a,10);//比最大的值还大,返回"您查找的数值不存在"

注:折半查找必须在有序数组中才有效,无序的数组不能实现查找功能。比如:在[10,5,6,7,8,9,20]中查找10,中间索引位置的值为7,比较得出7比10小,因而应该在右子数组中查找,实际上不可能找到10;

二、我的实现

  function search(arr,num) {
            var l=arr.length;
            var left=0;
            var right=l-1;
            var center=Math.floor((left+right)/2);
            while(left<=l-1&&right>=0){
                if (arr[center]==num) return center;
                if (left==right) return "您查找的数不存在";
                if (arr[center]>num) {
                    right=center-1;
                    center=Math.floor((left+right)/2);
                }else if (arr[center]<num) {
                    left=center+1;
                    center=Math.floor((left+right)/2);
                }
            }
        }
        var a=[1,2,3,4,5,6,7,8,9];
        console.log(search(a,-2));
说明: 
1、基本思路: 
每次比较,如果数组中间索引位置的值比要查找的值大,就转而在数组中间位置之前的子数组中查找;相反,如果数组中间索引位置的值比要查找的值大,就转而在数组中间位置之后的子数组中查找;如果数组中间索引位置的值恰好等于要查找的值,就返回该索引位置。
2、left定义查找范围的起始位置,right定义查找范围的结束位置,center定义查找范围的中间位置。
3、while中的逻辑说明: 
(1)由于不知道具体查找查找多少次,while是比较好的选择; 
(2)循环结束条件: 
a、一旦当right小于0时,就不再查找,再纠缠也不会有结果。例如:在a=[1,2,3,4,5,6,7,8,9]中查找0,当查找范围变为left=0,right=0,center=0时,进入while语句,由于arr[center]>0,故执行 
right=center-1;center=Math.floor((left+right)/2); 
得到right=-1此时应不再进入循环; 
b、一旦当left>l-1时,就不再查找,同样再纠缠也不会有结果。例如:在a=[1,2,3,4,5,6,7,8,9]中查找10,当查找范围变为left=8,right=8,center=8时,进入while语句,由于arr[center]<10,故执行 
left=center;center=Math.floor((left+right)/2); 
得到left=9,此时应不再进入循环;
4、始终是通过center匹配到要查找的值;
5、Math.floor处理了查找范围长度为偶数的情况;
6、当left==right了,而arr[center]==num却没执行,可以得出结论查找不到的;
7、当arr[center]==num时,整个函数都结束了,后面语句是不会执行的。

13.编写一个regex表达式以查找内容,内容以2个数字开头,以结尾

var reg = /1[0-9]$/

14.push 添加数组后, 是怎么响应的

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度


注释:该方法会改变数组的长度。


语法:


arrayObject.push(newelement1,newelement2,…,newelementX)


参数描述


newelement1 必需。要添加到数组的第一个元素。


newelement2 可选。要添加到数组的第二个元素。


newelementX 可选。可添加多个元素。


push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

15.js基本数据类型

Undefined、Null、Bollean、Number、String

16.js中=的区别是什么

前者会自动转换类型

后者不会

17.for和for in 区别

语法结构上不同,

for 一般用来遍历数组的,是比较简单的操作


for in 一般用来遍历对象,虽然for in 也能遍历数组,但是会存在


以下几个问题:


1、index索引为字符串型数字,不能直接进行几何运算


2、遍历顺序有可能不是按照实际数组的内部顺序


3、使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗


的原型方法method和name属性


这也是为什么用for不用for in的区别,如果是遍历普通数组的话,

用for是最好的选择,但是如果是对象,用for in就好了。

18.js中=的区别是什么

操作数1 == 操作数2,  操作数1 === 操作数2
双等号==:   
(1)如果两个值类型相同,再进行三个等号(===)的比较  
(2)如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较:   
1)如果一个是null,一个是undefined,那么相等    
2)如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较
三等号===:  
(1)如果类型不同,就一定不相等  
(2)如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相      等。(判断一个值是否是NaN,只能使用isNaN( ) 来判断)  
(3)如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。  
(4)如果两个值都是true,或是false,那么相等  
(5)如果两个值都引用同一个对象或是函数,那么相等,否则不相等  
(6)如果两个值都是null,或是undefined,那么相等

19:for和for in 区别

for in:
1.for...in 语句用于对数组或者对象的属性进行循环操作。
2.for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
3.for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。
for :
1.for循环是对数组的元素进行循环,而不能引用于非数组对象。

20:数组去重的方法

第一种:
function uniq(array){
   var temp = []; //一个新的临时数组
   for(var i = 0; i < array.length; i++){
       if(temp.indexOf(array[i]) == -1){
           temp.push(array[i]);
       }
   }
   return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
第二种:对象键值法去重
function uniq(array){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    return r;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
第三种:排序后相邻去除法
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
第四种:数组下标法
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
第五种:优化遍历数组法
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}
var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));

21:排序的方法

第一种:冒泡排序:
var arr = [1,4,-8,-3,6,12,9,8];
function bubbleSort(arr){
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length-i-1; j++) {
                if(arr[j] > arr[j+1]){
                    var c = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = c;
                }
            }
        }
        return arr;
    }    
    console.log(bubbleSort(arr));
快速排序:
var arr = [1,4,-8,-3,6,12,9,8];
function quicksort(arr){
   if(arr.length <= 1){       
       return arr;       
       }       
       var middleIndex = Math.floor(arr.length/2);       
       var middleNum = arr.splice(middleIndex,1);       
       var left = [], right = [];       
       for (var i = 0; i < arr.length; i++) {           
               if(arr[i] < middleNum){               
                  left.push(arr[i]);           
                  } else {               
                    right.push(arr[i]);           
                     }       
               }        
               return quicksort(left).concat(middleNum, quicksort(right));   
  }   
    console.log(quicksort(arr));
选择排序:
var arr = [1,4,-8,-3,6,12,9,8];
function selectSort(arr){       
    for(var i=0;i<arr.length;i++){           
    //设置当前范围最小值和索引           
    var min = arr[i];           
    var minIndex = i;          
    //在该范围选出最小值          
    for(var j=i+1;j<arr.length;j++){             
         if(min>arr[j]){                   
               min = arr[j];                   
               minIndex = j;               
         }           
    }           
    //将最小值插入,并将原来位置的最小值删除            
    arr.splice(i,0,min);           
    arr.splice(minIndex+1,1);       
    }       
    return arr;   
    }        
    console.log(selectSort(arr));
插入排序:
var array = [1,4,-8,-3,6,12,9,8]; 
function selectSort(arr){
    for(var i=0;i<arr.length;i++){
    //设置当前范围最小值和索引 
            var min = arr[i];
            var minIndex = i; 
            //在该范围选出最小值 
            for(var j=i+1;j<arr.length;j++){
                if(min>arr[j]){
                     min = arr[j];
                     minIndex = j; 
                }
            }
            //将最小值插入,并将原来位置的最小值删除 
            arr.splice(i,0,min); 
            arr.splice(minIndex+1,1);
       }
  }
            selectSort(array);
            document.write(array);
相关文章
|
9天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
7天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
7天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
9天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
22天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
30 0
|
4月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
75 2
|
4月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
4月前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
下一篇
无影云桌面