牛客网js题库正解 (21-40题)
21、数组过滤
要求根据下拉框选中的条件变换重新渲染列表中展示的商品，且只展示符合条件的商品。
// 补全代码
var str = '';
select.onchange = function (){
str = '';
renderDom(this.value);
}
function renderDom(val){
console.log(val)
switch (val){
case '1':
var cupsList = cups.filter(item =>{return item.sales < 100});
break;
case '2':
var cupsList = cups.filter(item =>{return item.sales >=100 && item.sales <= 500});
break;
case '3':
var cupsList = cups.filter(item =>{return item.sales > 500});
break;
}
for(let i = 0; i < cupsList.length; i++){
str += `<li> ${cupsList[i].name}</li>`;
}
ul.innerHTML = str;
}22、判断质数
要求在Number对象的原型对象上添加"_isPrime"函数，该函数判断调用的对象是否为一个质数，是则返回true，否则返回false。
Number.prototype._isPrime=function(){
let number = this.valueOf()
if(number<2) return false
for(let i=2;i<number;i++){
if(number%i ===0) return false
}
return true
}23、验证是否是身份证
要求以Boolean的形式返回字符串参数是否符合身份证标准。
let reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
return reg.test(number)24、Symbol
要求以键/值对的对象形式返回参数数组
let obj = {};
for(item of array) {
let key = Symbol(item)
obj[key] = item
}
return obj;
}25、相同的Set
要求以boolean的形式返回两个Set对象参数是否一样，是则返回true，否则返回false。
if (s1.size !== s2.size) return false;
return [...s1.values()].every(v => s2.has(v));26、Getter
class Rectangle {
// 补全代码
constructor(width,height){
this.width = width;
this.height = height;
}
get area(){
return this.width * this.height
}
}27、控制动画
<style type="text/css">
#rect {
width: 120px;
height: 100px;
background-color: black;
/*补全代码*/
animation: rect 10s linear infinite ;
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<body>
<!-- 补全代码 -->
<div id="rect"></div>
<input id="range" type="range" step="1" value="1" min="1" max="10" />
<script type="text/javascript">
// 补全代码
let inpRange = document.querySelector("#range");
inpRange.onchange = function (){
let inputVal = inpRange.value;
let time = 10 - inputVal + 1;
let rect = document.querySelector("#rect");
rect.style.animationDuration = time + 's';
}
</script>
</body>28、Map保存节点
let p = document.querySelector('p');
return new Map([[p,p.innerText]])29、全选
var all = document.querySelector('#all')
var options = Array.from(document.querySelectorAll('.item'))
all.onchange = () => {
options.forEach(x => x.checked = all.checked)
}
options.forEach((item)=>{
item.onchange = function() {
if(!this.checked){
all.checked = false
}else{
if(options.every(x => x.checked)){
all.checked = true
}else{
all.checked = false
}
}
}
})30、回文字符串
回文：就是字符串中心对称，从左向右读和从右向左读的内容是一样的
let oldstr=string.split('').join('')
let newstr=string.split('').reverse().join('')
if(oldstr==newstr){
return true
}else{
return false
}31、Proxy计数器
let count = 0
const _proxy = object => {
// 补全代码
return new Proxy(object, {
get(obj, key){
if(obj[key] === undefined){
count--;
}else{
count++;
}
return obj[key];
}
});
}32、Proxy拦截器
const _proxy = (object,...prototypes) => {
// 补全代码
let privatePrototype=prototypes
return new Proxy(object,{
get(object,prototype){
if(privatePrototype.includes(prototype)) return 'noright'
return object[prototype]
}
})
}33、监听对象
var ul = document.querySelector('ul');
var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
const _render = element => {
var str = `<li>姓名：<span>${person.name}</span></li>
<li>性别：<span>${person.sex}</span></li>
<li>年龄：<span>${person.age}</span></li>
<li>身高：<span>${person.height}</span></li>
<li>体重：<span>${person.weight}</span></li>`
element.innerHTML = str;
}
// _render(ul);
// 补全代码
for (let key in person) {
let value = person[key]
Object.defineProperty(person, key, {
get () { return value },
set (newVal) {
value = newVal;
_render(ul)
}
})
}34、购物面板
function clickBtn(e, typeId, price) {
let totalPrice = document.querySelector('#total')
let typeNode = document.querySelector('#' + typeId)
let action = e.target.innerText
if (action == '+') {
typeNode.innerText = +typeNode.innerText + 1
totalPrice.innerText =
+totalPrice.innerText + typeNode.innerText * price
} else if (typeNode.innerText != '0') {
totalPrice.innerText =
+totalPrice.innerText - typeNode.innerText * price
typeNode.innerText = typeNode.innerText - 1
}
}35、接口
const _api = string => {
// 补全代码
var strArr = string.split("?");
if(strArr[0]=="get"){
return data
}else if(strArr[0]=="update"){
var x = strArr[1].split("&")[0].split("=");
var y = strArr[1].split("&")[1].split("=");
for(let i =0;i<data.length;i++){
if(data[i].name==x[1]){
data[i].name = y[1];
}
}
return data
}
}36、切换Tab栏目
options.onclick=function(e){
for(let i in optionItems)
if(e.target===optionItems[i]){
optionItems[i].style.backgroundColor='#25bb9b'
items[i].style.display='block'
}else{
optionItems[i].style.backgroundColor='#fff'
items[i].style.display='none'
}
}37、双向绑定
// 补全代码
const personData = Object.keys(person).reduce((o, k) => {
o[k] = person[k];
return o;
}, {});
const props = Object.keys(person).reduce((o, k) => {
o[k] = {
set(v) {
personData[k] = v;
_render();
},
get() {
return personData[k];
},
};
return o;
}, {});
Object.defineProperties(person, props);
inp.oninput = function() {
person.weight = this.value;
}38、高频数据类型
const _findMostType = array => {
// 补全代码
let data={};let maxNum=0;let arr=[];
for(let i=0;i<array.length;i++){
var t=array[i]===null?'null':(typeof item==='function'?'object': (typeof array[i]))
data[t]=data[t]?data[t]+1:1;
maxNum=data[t]>maxNum?data[t]:maxNum;
}
for (let key of Object.keys(data))
{
if(data[key]===maxNum){
arr.push(key);
}
}
arr.push(maxNum);
return arr;
}39、字体高亮
btn.onclick = () => {
// 补全代码
let value = search.value;
if(value == '' || text.innerText.search(value) == -1) {
text.innerHTML = text.innerText;
};
if(text.innerText.search(value) > -1){
text.innerHTML = text.innerText;
let reg = new RegExp(value,'g')
text.innerHTML = text.innerHTML.replace(reg,`<b style='background:yellow;'>${value}</b>`);
}
}40、虚拟DOM
const _createElm = function (vnode) {
// 补全代码
let node=document.createElement(vnode.tag);
for (const key in vnode.props) {
node.setAttribute(key,vnode.props[key])
}
node.innerText=vnode.text;
for (let child of vnode.children) {
node.appendChild( arguments.callee(child))
}
return node;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录