前端面试题,自敲

2023-10-20 05:18

本文主要是介绍前端面试题,自敲,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.将字符串‘get-element-by-id’,转换成驼峰表示法‘getElementById’

var str = "get-element-by-id"
str = str. split( "-"). map(( item, index) => {
return index !== 0 ? item = item . charAt ( 0 ). toLocaleUpperCase () + item . substr ( 1 , item . length - 1 ) : item
}). join( '')
console. log( str)


2.数组去重

//方法一:
var arr = [ 5, 8, 6, 78, 8, 6, 9]
function unique ( arr) {
var newArr = []
arr. map( item => {
newArr. indexOf( item) < 0 ? newArr. push( item) : ''
})
return newArr
}

//方法二:
function unique ( arr) {
var newArr = []
var obj = {}
arr. map( key => {
if (! obj[ key]) {
obj[ key] = 1
newArr. push( key)
}
})
return newArr
}

       //方法三: set

       [...new Set(arr)]


3.快速排序

function quickSort(a) {return a.length <= 1 ? a : quickSort(a.slice(1).filter(item => item <= a[0])).concat(a[0], quickSort(a.slice(1).filter(item => item > a[0])));
}
console.log(quickSort([12,3,54,43,23,1,5,23,9]))
function quickSort(array){function sort(prev, numsize){var nonius = prev;
        var j = numsize -1;
        var flag = array[prev];
        if ((numsize - prev) > 1) {while(nonius < j){for(; nonius < j; j--){if (array[j] < flag) {array[nonius++] = array[j];
                        break;
                    };
                }for( ; nonius < j; nonius++){if (array[nonius] > flag){array[j--] = array[nonius];
                        break;
                    }}}array[nonius] = flag;
            sort(0, nonius);
            sort(nonius + 1, numsize);
        }}sort(0, array.length);
    return array;
}
quickSort(arr)

4.将类数组转化为真数组

//方法一
var obj = {0: 'a', 1: 'b', length: 2}
var arr = Array.prototype.slice.call(obj)
//实现原理
Array.prototype.slice = function(start,end){var result = new Array();
    start = start || 0;
    end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象
    for(var i = start; i < end; i++){result.push(this[i]);
    }return result;
}
//方法二:
Array.from()

5. 输出的结果

            var a = [1, 2, 3, 4]

                   i = 0

            a[i++] = a[i++] * 2

            console.log(a) //[4, 2, 3, 4]

6. b();  a() //bbb, a is not a function

        var a = function() {

            console.log('aaa')

        }

        function b() {

            console.log('bbb')

        }

7. var name = 'global'

    var obj = {

        name:  'obj',

        dose : function(){

            this.name = 'dose'

            return function(){

                return this.name

            }

        }

    }

    var result = obj.dose().call(this) //global


这篇关于前端面试题,自敲的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/244917

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行