️ NodeJS专栏:Node.js从入门到精通
️ 蓝桥杯真题解析:蓝桥杯Web国赛真题解析
加入社区领红包:海底烧烤店ai(从前端到全栈)
个人简介:即将大三的学生,一个不甘平庸的平凡人
你的一键三连是我更新的最大动力❤️!
分享博主自用牛客网:一个非常全面的面试刷题求职网站,真的超级好用
最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!
牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网
牛客网 | 牛客网 |
---|---|
本篇文章所有示例来自于牛客网题库/在线编程/JS篇
(21-30题),这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础
根据下拉框选中的条件变换重新渲染列表中展示的商品,且只展示符合条件的商品:
<body>
<select name="" id="">
<option value="0">请选择销量范围option>
<option value="1"><100option>
<option value="2">100~500option>
<option value="3">>500option>
select>
<ul>
<li>牛客logo马克杯li>
<li>无盖星空杯li>
<li>老式茶杯li>
<li>欧式印花杯li>
ul>
<script>
var cups = [
{ type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
{ type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
{ type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
{ type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
]
var select = document.querySelector('select');
var ul = document.querySelector('ul');
// 补全代码
select.onchange = function () {
let newList = []
switch (this.value) {
case '1':
newList = cups.filter(item => item.sales < 100)
render(newList)
return;
case '2':
newList = cups.filter(item => item.sales <= 500 && item.sales >= 100)
render(newList)
return;
case '3':
newList = cups.filter(item => item.sales > 500)
render(newList)
return;
default:
render(cups)
return;
}
}
function render(list) {
let str = ``
list.forEach(item => {
str += `${item.name}`
})
ul.innerHTML = str
}
script>
body>
在Number
对象的原型对象上添加"_isPrime
"函数,该函数判断调用的对象是否为一个质数,是则返回true
,否则返回false
:
<script type="text/javascript">
// 补全代码
Number.prototype._isPrime = function () {
// valueOf() 方法返回指定对象的原始值。
const num = this.valueOf()
// Number.isInteger() 方法用来判断给定的参数是否为整数
if (num < 2 || !Number.isInteger(num)) return false;
// Math.floor() 返回小于或等于一个给定数字的最大整数
// Math.sqrt() 函数返回一个数的平方根
for (let i = 2, ceil=Math.floor(Math.sqrt(num)); i <= ceil; i++) {
if (num % i === 0) {
return false
}
}
return true
}
script>
质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数
思路:
prototype
上添加方法this.valueOf()
获取调用该方法对象的原始值num
num
小于2或者不是整数时返回false
i
初始值为2 ,不需要遍历到最后,遍历到原数值的1/2处 即可判断出它是不是质数num
能被i
整除,返回false
true
_isCard
为检验输入字符是否为身份证号的函数:
const _isCard = str=> {
// 补全代码
var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
return regx.test(str)
}
思路:
\d
表示任意数字相当于[0-9]
,^
表示开头$
表示结尾,|
表示或,{n}
表示出现n
次/^\d{15}$/
(验证15位数字)/^\d{18}$/
(验证18位数字)x
或X
:/^\d{17}(\d|X|x)$/
(检验前17位为数字,最后一位为数字或X或x)以键/值对的对象形式返回参数数组。要求如下:
const _symbolKey = array => {
// 补全代码
let obj={}
for(item of array){
// 使用Symbol方法获取Symbol类型的数据作为键名使用
let key = Symbol(item);
obj[key] = item;
}
return obj
}
以boolean
的形式返回两个Set对象参数是否一样,是则返回true
,否则返回false
。
const _isSameSet = (s1, s2) => {
// 补全代码
// 长度不同直接false
if(s1.size !== s2.size) return false;
// 判断s1内的元素是否都在s2中
return [...s1.values()].every(item => s2.has(item))
}
Set.prototype.size
返回 Set
对象中的值的个数Set.prototype.values()
返回一个新的迭代器对象,该对象包含 Set
对象中的按插入顺序排列的所有元素的值。every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。Set.prototype.has(value)
表示该值在 Set
中存在与否完成名为"Rectangle
"的矩形类。要求如下:
height
"、“width
”Getter
,当获取该对象的"area
"属性时,返回该对象"height
"与"width
"属性的乘积\示例:
输入:
new Rectangle(12,12).area
输出:144
class Rectangle {
// 补全代码
constructor(height,width) {
this.height = height;
this.width = width;
}
_area() {
return this.height*this.width
}
get area() {
return this._area()
}
}
要求当滑动id
为"range
"的滑块控件时可以改变id
为"rect
"的矩形旋转速度。要求如下:
id
为"rect
"的矩形初始动画周期为10秒id
为"range
"的滑块控件默认值为1、最小值为1、最大值为10、滑动间隔为1<html>
<head>
<meta charset=utf-8>
<style type="text/css">
#rect {
width: 120px;
height: 100px;
background-color: black;
/*补全代码*/
/*rect动画名,linear动画匀速,infinite无限循环 */
animation:rect 10s linear infinite;
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
style>
head>
<body>
<div id="rect">div>
<input id="range" type="range" min="1" max="10" step="1" value="1"/>
<script type="text/javascript">
// 补全代码
document.querySelector("#range").onchange = function(){
let inputVal = document.querySelector('#range').value;
let time = 10 - inputVal + 1;
let rect = document.querySelector("#rect");
rect.style.animationDuration = time + 's';
}
script>
body>
html>
将页面中的"p
"标签以键名的形式保存在Map对象中,键名所对应的键值为该"p
"标签的文字内容
Map
对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。
<body>
<p>1p>
<script type="text/javascript">
const _elementKey = () => {
// 补全代码
const map = new Map()
map.set(document.querySelector('p'),document.querySelector('p').innerText)
return map
}
script>
body>
实现以下效果:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
head>
<style>
ul {
list-style: none;
}
style>
<body>
<ul>
<li>全选<input type='checkbox' id='all'>li>
<li>Java<input type='checkbox' class='item'>li>
<li>javaScript<input type='checkbox' class='item'>li>
<li>C++<input type='checkbox' class='item'>li>
<li>python<input type='checkbox' class='item'>li>
<li>.net<input type='checkbox' class='item'>li>
ul>
<script>
var all = document.getElementById("all")
// 使用Array.from()将类数组转化为真正的数组
var options = Array.from(document.querySelectorAll(".item"))
// 补全代码
all.onchange = () => {
options.forEach((item) => item.checked = all.checked)
}
options.forEach((item) => {
item.onchange = () => {
all.checked = options.every(x => x.checked)
}
})
script>
body>
html>
every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
要求以boolean的形式返回参数字符串是否为回文字符串:
回文字符串:正读和反读都一样的字符串
const _isPalindrome = string => {
// 补全代码
return string == string.split('').reverse().join('');
}
思路:
牛客网的JS
题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,身为前端,之前的我非常迷茫,不知道怎么刷题,后端常刷的算法题又不太适合我,直到发现牛客网,才结束这一现状!牛客网里的题真的是对前端太友好了,强烈将牛客网推荐给大家!
如果本篇文章对你有所帮助,还请客官一件四连!❤️
基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!