《牛客网刷题之零基础入门前端之JavaScript》
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
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 ]
输出描述
10
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
}字符串字符统计
题目描述
统计字符串中每个字符的出现频率返回一个 Objectkey 为统计字符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>