牛客前端面试手撕题笔记

最新推荐文章于 2023-05-08 17:15:45 发布

「已注销」

最新推荐文章于 2023-05-08 17:15:45 发布

阅读量263

点赞数

分类专栏：笔记文章标签： javascript html 前端

原文链接：https://www.nowcoder.com/practice/b3ac35e1569e4601b6d3957dd337e70b?tpId=274&rp=1&ru=%2Fexam%2Foj&qru=%2Fexam%2Foj&sourceUrl=%2Fexam%2Foj%3Fpage%3D1%26tab%3D%25E5%2589%258D%25E7%25AB%25AF%25E7%25AF%2587%26topicId%3D274&difficulty=&judgeStatus=&tags=&title=

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

FED1 事件委托

描述

请补全JavaScript代码，要求如下：
1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
注意：
1. 必须使用DOM0级标准事件（onclick）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>

        <script type="text/javascript">
            // 补全代码
            //获取事件的根节点 
            let ulTags = document.getElementsByTagName('ul')[0]
            //对根节点绑定事件  => 回调函数的参数为事件本身 因事件有taget 属性所以可以得知是那个子节点被点击
            ulTags.addEventListener('click',(event)=>{
                //  兼容性判断
                let ev = event || window.event;
                var target = ev.target || ev.srcElement;
                //对点击的子节点进行处理
                if(target.nodeName.toLowerCase() == 'li'){
                    target.innerHTML+='.';
                }
            })
        </script>
    </body>
</html>

FED2 数组去重

描述

请补全JavaScript代码，要求去除数组参数中的重复数字项并返回该数组。
注意：
1. 数组元素仅包含数字

示例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 => {
                
                // 补全代码
                // （1）使用ES6 中的set 方法进行去重
                //return Array.from(new Set(array))

                // （2）使用新数组对不重复的数组进行保存
                let newArr = []
                array.forEach(item => {
                    if(newArr.indexOf(item) === -1){
                        newArr.push(item)
                    }
                });
                return newArr
            } 
            console.log(_deleteRepeat([-1,1,2,2])); 
            
        </script>
    </body>
</html>

FED3 合法的URL

描述

请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。
注意：
1. 协议仅为HTTP(S)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _isUrl = url => {
                // 补全代码
                const reg = /^(http|https)?:\/\/[[\w.%+-]+[\w.-]+\.[a-zA-Z]{2,6}/g
                return reg.test(url)
            }
        </script>
    </body>
</html>

FED4 快速排序

描述

请补全JavaScript代码，要求将数组参数中的数字从小到大进行排序并返回该数组。
注意：
1. 数组元素仅包含数字
2. 请优先使用快速排序方法

示例1

输入：
_quickSort([0,-1,1,-2,2])
复制

输出：
[-2,-1,0,1,2]

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _quickSort = array => {
                // 补全代码
                 //第一要素  结束条件   定义返回条件 如果数组的长度小于1 那么就返回就行了
                 if(array.length<=1){
                     return array
                 }

                 //第二要素 函数目的 寻找比中间数小的放做数组 大的放右数组
                 //先将找到数组的中间位置的下标
                 let mid = Math.floor(array.length/2);

                 //在元素数组中删除这个元素。 并保存这个数
                 var midNumber = array.splice(mid,1)[0];

                 //定义比中间位置数值小的数组   （比数组中间位置元素小的放在leftArr）
                 let leftArr = []
                 //定义比中间位置数值小的数组   （数组中间位置元素大的放在rightArr）
                 let rightArr = []
                 for(let i = 0 ; i<array.length; i++){
                     if(midNumber>array[i]){
                         leftArr.push(array[i])
                     }else{
                         rightArr.push(array[i])
                     }
                 }

                 //第三要素  等价关系 
                 //左边leftArr midNumber rightArr 将这三个数组链接起来。midNumber是这一个数
                 let leftSort= _quickSort(leftArr)
                 let midSort = [midNumber]
                 let rightSort = _quickSort(rightArr)
                 return leftSort.concat(midSort,rightSort)
                 //return _quickSort(leftArr).concat([midNumber],_quickSort(rightArr))
             }
        </script>
    </body>
</html>

FED5 全排列

描述

请补全JavaScript代码，要求以数组的形式返回字符串参数的所有排列组合。
注意：
1. 字符串参数中的字符无重复且仅包含小写字母
2. 返回的排列组合数组不区分顺序

示例1

输入：

_permute('abc')

输出：

['abc','acb','bac','bca','cab','cba']

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/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>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
牛客前端面试手撕题笔记

FED1事件委托描述请补全JavaScript代码，要求如下：1. 给"ul"标签添加点击事件2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."注意：1. 必须使用DOM0级标准事件（onclick）<!DOCTYPE html><html> <head> <meta charset=utf-8> </head> <body.
复制链接

扫一扫

专栏目录