《牛客网刷题之零基础入门前端之JavaScript》

2023-11-13

ES5

数据类型

基本数据类型检测

ES5

数据类型

基本数据类型检测

题目描述

请补全JavaScript函数，要求以字符串的形式返回参数的类型。
注意：只需检测基本数据类型。

JavaScript

function _typeof(value) {
    // 补全代码
    return typeof value
}

检测复杂数据类型

题目描述

请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。

JavaScript

function _instanceof(left,right) {
    // 补全代码
    return left instanceof right
}

数据类型转换

题目描述

请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
示例：
1. _splice(223,233) -> "223233"
2. _splice(-223,-233) -> "-223-233"

JavaScript

function _splice(left,right) {
    // 补全代码
    return String(left)+String(right)
}

运算符

阶乘

题目描述

请补全JavaScript函数，要求返回数字参数的阶乘。
注意：参数为大于等于0的整数。

JavaScript

function _factorial(number) {
    // 补全代码
    var result=1
    for(let i=1;i<=number;i++)
        result*=i
    return result
}

绝对值

题目描述

请补全JavaScript函数，要求返回数字参数的绝对值。

JavaScript

function _abs(number) {
    // 补全代码
    return Math.abs(number)
}

幂

题目描述

请补全JavaScript函数，要求返回底数为第一个参数，幂为第二个参数的数值。

JavaScript

function _pow(number,power) {
    // 补全代码
    return Math.pow(number,power)
}

平方根

题目描述

请补全JavaScript函数，要求返回数字参数的平方根。

JavaScript

function _sqrt(number) {
    // 补全代码
    return Math.sqrt(number)
}

余数

题目描述

请补全JavaScript函数，要求返回数字参数除以2的余数。

JavaScript

function _remainder(value) {
    // 补全代码
    return value%2
}

数组求和

题目描述

计算并返回给定数组 arr 中所有元素的总和

输入描述：

[ 1, 2, 3, 4 ]

输出描述：

JavaScript

function sum(arr) {
    return eval(arr.join('+'))
}

完全等同

题目描述

判断 val1 和 val2 是否完全等同

JavaScript

function identity(val1, val2) {
    return val1===val2
}

或运算

题目描述

返回参数 a 和 b 的逻辑或运算结果

输入：

false, true

输出：

true

JavaScript

function or(a, b) {
    return a||b
}

且运算

题目描述

返回参数 a 和 b 的逻辑且运算结果

输入描述：

false, true

输出描述：

false

JavaScript

function and(a, b) {
    return a&&b
}

字符串字符统计

题目描述

统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率
1. 不限制 key 的顺序
2. 输入的字符串参数不会为空
3. 忽略空白字符

输入描述：

'hello world'

输出描述：

{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

JavaScript

function count(str) {
    var result={}
    for(let it of str)
        if(it in result)
            result[it]++
        else result[it]=1
    return result
}

流程控制

返回星期数

题目描述

请补全JavaScript函数，要求以字符串的形式返回数字参数所对应的星期。
示例：
1. _getday(1) -> "星期一"
2. _getday(7) -> "星期天"

JavaScript

function _getday(value) {
    // 补全代码
    return '星期'+'一二三四五六天'[value-1]
}

内置对象

从大到小排序

题目描述

请补全JavaScript函数，要求将数组参数中的数字从大到小进行排序并返回。

JavaScript

function _sort(array) {
    // 补全代码
    return array.sort((a,b)=>b-a)
}

大写字符串

题目描述

请补全JavaScript函数，要求将字符串参数转换为大写字符串并返回。

JavaScript

function _touppercase(string) {
    // 补全代码
    return string.toUpperCase()
}

对象属性键名

题目描述

请补全JavaScript函数，要求以数组的形式输出对象各个属性的键名。
示例：
1. _keys({name:'nowcoder',age:7}) -> ['name','age']
注意：只需考虑对象属性均为原始数据类型的情况。

JavaScript

function _keys(object) {
    // 补全代码
    return Object.keys(object)
}

对象数字

题目描述

请补全JavaScript函数，要求将数字参数转换为对象的形式返回。
示例：
1. typeof number === 'number' -> typeof _numbertoobject(number) === 'object'

JavaScript

function _numbertoobject(number) {
    // 补全代码
    return {number}
}

对象字符串

题目描述

请补全JavaScript函数，要求将字符串参数转换为对象的形式返回。
示例：
1. typeof string === 'string' -> typeof _stringtoobject(string) === 'object'

JavaScript

function _stringtoobject(string) {
    // 补全代码
    return {string}
}

去除字符串两端空格

题目描述

请补全JavaScript函数，要求去除参数字符串两端的空格并返回。

JavaScript

function _trim(string) {
    // 补全代码
    return string.trim()
}

输出日期

题目描述

请补全JavaScript函数，要求以字符串的形式输出时间戳参数所对应的"年-月-日"。
示例：
1. _date(1631159776311) -> '2021-9-9'

JavaScript

function _date(number) {
    // 补全代码
    let date=new Date(number).toLocaleDateString('zh-CN')
    return date.replace(/\//g,'-')
}

数字取整

题目描述

请补全JavaScript函数，要求返回数字参数的整数部分。

JavaScript

function _int(value) {
    // 补全代码
    return Math.floor(value)
}

数字反转

题目描述

请补全JavaScript函数，要求将参数数组反转之后返回。

JavaScript

function _reverse(array) {
    // 补全代码
    return array.reverse()
}

数字转字符串

题目描述

请补全JavaScript函数，要求将参数数组转换为字符串输出。
示例：
1. _join([1,'2',3]) -> "123"
注意：只需考虑一维数组且数据类型为原始数据类型。

JavaScript

function _join(array) {
    // 补全代码
    return array.join('')
}

数组最大值

题目描述

请补全JavaScript函数，要求找到数组参数中的最大值并返回。
注意：数组中只包含数字。

JavaScript

function _max(array) {
    // 补全代码
    return Math.max(...array)
}

搜索数字

题目描述

请补全JavaScript函数，要求以boolean的形式返回字符串参数中是否包含数字。

JavaScript

function _search(string) {
    // 补全代码
    for(let it of string)
        if(!isNaN(it))
            return true
    return false
}

头部插入元素

题目描述

请补全JavaScript函数，要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回。

JavaScript

function _unshift(array,value) {
    // 补全代码
    array.splice(0,0,value)
    return array
}

尾部插入元素

题目描述

请补全JavaScript函数，要求将第二个参数插入第一个参数数组的尾部，并且以数组的形式返回。

JavaScript

function _push(array,value) {
    // 补全代码
    array.splice(array.length,0,value)
    return array
}

js-位置查找

题目描述

请补全JavaScript函数，要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。
注意：如果数组中不存在目标值，则返回-1。

JavaScript

function _indexof(array,value) {
    // 补全代码
    for(let i=0;i<array.length;i++)
        if(array[i]===value)
            return i
    return -1
}

向下取整

题目描述

请补全JavaScript函数，要求以数字的形式返回数字参数向下取整的结果。

JavaScript

function _floor(number) {
    // 补全代码
    return Math.floor(number)
}

整数反转

题目描述

请补全JavaScript函数，要求将整数参数反转之后输出。
示例：
1. _reverse(0) -> 0
2. _reverse(233) -> 332
3. _reverse(-223) -> -322

JavaScript

function _reverse(number) {
    // 补全代码
    let result=number.toString().split("")
    result.reverse()
    return parseInt(result.join(""))
}

字符串搜索

题目描述

请补全JavaScript函数，要求以boolean的形式返回字符串首参中是否包含第二个参数。

JavaScript

function _search(string,value) {
    // 补全代码
    for(let it of string)
        if(it===value)
            return true
    return false
}

移除数组中的元素

题目描述

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4, 2], 2

输出描述：

[1, 3, 4]

JavaScript

function remove(arr, item) {
    var result=[]
    for(let i of arr)
        if(i!=item)
            result.push(i)
    return result
}

移除数组中的元素

题目描述

移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果数组返回

输入：

[1, 2, 2, 3, 4, 2, 2], 2

输出：

[1, 3, 4]

JavaScript

function removeWithoutCopy(arr, item) {
    for(let i=0;i<arr.length;i++)
        if(arr[i]===item){
            arr.splice(i,1)
            i--
        }
    return arr
}

添加元素

题目描述

在数组 arr 末尾添加元素 item。结果返回新的数组。

注意：不要直接修改数组 arr!!!

输入描述：

[1, 2, 3, 4], 10

输出描述：

[1, 2, 3, 4, 10]

JavaScript

function append(arr, item) {
    return arr.concat([item])
}

删除数组最后一个元素

题目描述

删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

输入：

[1, 2, 3, 4]

输出：

[1, 2, 3]

JavaScript

function truncate(arr) {
    let result=arr.slice()
    result.splice(arr.length-1,1)
    return result
}

添加元素

题目描述

在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组

输入：

[1, 2, 3, 4], 10

输出：

[10, 1, 2, 3, 4]

JavaScript

function prepend(arr, item) {
    return [item].concat(arr)
}

删除数组第一个元素

题目描述

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4]

输出描述：

[2, 3, 4]

JavaScript

function curtail(arr) {
    let result=arr.slice()
    result.splice(0,1)
    return result
}

数组合并

题目描述

合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4], ['a', 'b', 'c', 1]

输出描述：

[1, 2, 3, 4, 'a', 'b', 'c', 1]

JavaScript

function concat(arr1, arr2) {
    return arr1.concat(arr2)
}

添加元素

题目描述

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组

输入：

[1, 2, 3, 4], 'z', 2

输出：

[1, 2, 'z', 3, 4]

JavaScript

function insert(arr, item, index) {
    let result=arr.slice()
    result.splice(index,0,item)
    return result
}

求二次方

题目描述

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

输入描述：

[1, 2, 3, 4]

输出描述：

[1, 4, 9, 16]

JavaScript

function square(arr) {
    let result=arr.slice()
    for(let i=0;i<arr.length;i++)
        result[i]*=result[i]
    return result
}

查找元素位置

题目描述

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

输入：

['a','b','c','d','e','f','a','b','c'] 'a'

输出：

[0, 6]

JavaScript

function findAllOccurrences(arr, target) {
    var result=[]
    for(let i=0;i<arr.length;i++)
        if(arr[i]===target)
            result.push(i)
    return result
}

正确的使用parseInt

题目描述

修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例

示例1

输入：'12'

输出：12

示例2

输入：'12px'

输出：12

示例3

输入：'0x12'

输出：0

JavaScript

function parse2Int(num) {
    return parseInt(num,10);
}

函数

函数——参数对象

题目描述

请补全JavaScript函数，要求返回它的参数伪数组对象。

JavaScript

function getArguments (a,b,c) {
    // 补充代码
    return arguments
}

this

this指向

题目描述

请补全JavaScript函数，使obj对象中fn函数返回该对象中a属性和b属性的和。

JavaScript

var obj = {
    a: 1,
    b: 2,
    fn: function(){
        // 补全代码
        return this.a+this.b
    }
}

WebAPI

元素操作

JS动态创建节点

题目描述

请补全JavaScript函数，根据参数数组创建li元素。
要求：
1. li元素的个数和数组的长度一样
2. li元素的内容是数组中的每个元素
3. 将创建的所有li元素插入到ul中

JavaScript

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
            // 补全代码
            let ul=document.querySelector('ul')
            for(let it of array){
                let li=document.createElement('li')
                li.innerText=it
                ul.appendChild(li)
            }
        }
    </script>
</html>

根据ID获取元素

题目描述

请补全JavaScript函数，根据id获取html模块中ul标签下第二个li元素并返回。

JavaScript

function getLI(id){
    // 补全代码
    return document.querySelector('#'+id)
}

JS修改元素内容

题目描述

请补全JavaScript函数，将类为"box"的div元素内容修改为"欢迎来到牛客网"。

JavaScript

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            // 补全代码
            document.querySelector('.box').innerHTML='欢迎来到牛客网'
        }
    </script>
</html>

绑定事件

阻止冒泡事件

题目描述

请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。

JavaScript

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.querySelector('li').onclick=(event)=>event.stopPropagation()
    </script>
</html>

阻止默认事件

题目描述

请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
注意：需要自行获取input元素。

JavaScript

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.querySelector('input').onclick=()=>false
    </script>
</html>

操作地址栏

url地址

题目描述

请补全JavaScript函数，实现一个函数返回页面当前url。

JavaScript

function getUrlHref (){
    // 补全代码
    return location.href
}

综合练习

点击按钮隐藏元素

题目描述

请补全JavaScript代码，实现一个盒子的关闭按钮功能。
要求：
1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
2. 使类为"btn"的div元素中内容"X"垂直水平居中
3. 点击"X"按钮可以使类为"box"的div元素隐藏

JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position:relative;
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                position:absolute;
                top:-10px;
                right:-10px;
                text-align:center;
                line-height:20px;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display="none"
            }
        </script>
    </body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)