【前端面试手撕题】事件委托、数组去重、合法URL、快速排序、全排列-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端面试手撕题】事件委托、数组去重、合法URL、快速排序、全排列。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

FED1 事件委托

描述
请补全JavaScript代码，要求如下：

给"ul"标签添加点击事件
当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"
注意：
必须使用DOM0级标准事件（onclick）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
    </ul>
    <!-- 填写标签 -->
    <script type="text/javascript">
        // 填写JavaScript
        document.querySelector('ul').onclick=function(e){
            e.target.innerText+='.'
        }
    </script>
</body>

</html>

FED2 数组去重

描述
请补全JavaScript代码，要求去除数组参数中的重复数字项并返回该数组。
注意：

数组元素仅包含数字
示例1
输入：
_deleteRepeat([-1,1,2,2])
复制
输出：
[-1,1,2]

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _deleteRepeat = array => {
                // 补全代码
                return [...new Set(array)] //使用set去重 用...
            }
        </script>
    </body>
</html>

FED3 合法的URL

描述
请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。
注意：

协议仅为HTTP(S)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _isUrl = url => {
                // 补全代码
                return url.startsWith('https')
            }
        </script>
    </body>
</html>

FED4 快速排序

描述
请补全JavaScript代码，要求将数组参数中的数字从小到大进行排序并返回该数组。
注意：

数组元素仅包含数字
请优先使用快速排序方法
示例1
输入：
_quickSort([0,-1,1,-2,2])
复制
输出：
[-2,-1,0,1,2]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <script type="text/javascript">
        // 填写JavaScript
        const _quickSort = array => {
            if(array.length<=1) return array
            var mid=Math.floor(array.length/2)
            var midx=array.splice(mid,1)[0]
            var left=[]
            var right=[]
            for(let i=0;i<array.length;i++){
                if(array[i]<midx){
                    left.push(array[i])
                }else{
                    right.push(array[i])
                }
            }
            return _quickSort(left).concat([midx],_quickSort(right))
        }
    </script>
</body>

</html>

FED5 全排列

描述
请补全JavaScript代码，要求以数组的形式返回字符串参数的所有排列组合。
注意：

字符串参数中的字符无重复且仅包含小写字母
返回的排列组合数组不区分顺序
示例1
输入：
_permute(‘abc’)
复制
输出：
[‘abc’,‘acb’,‘bac’,‘bca’,‘cab’,‘cba’]

‘abc’的全排列等于 ('a’拼接上’bc’的全排列数组中的每一项) + ('b’拼接上’ac’的全排列数组的每一项) +
('c’拼接上’ab’的全排列数组的每一项)文章来源地址https://www.toymoban.com/news/detail-622469.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <script type="text/javascript">
        // 填写JavaScript
        const _permute = string => {
            if(string.length===1){
                return [string]
            }
            const results=[]
            for(let s of string){
                const arr=string.split('').filter(str=>str!==s)
                _permute(arr.join('')).forEach(item=>{
                    results.push(s+item)
                })
            }
            return results
        }
    </script>
</body>

</html>