js牛客网编程练习汇总

Posted suoh's Blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js牛客网编程练习汇总相关的知识,希望对你有一定的参考价值。

1、请补全javascript代码,要求根据下拉框选中的条件变换重新渲染列表中展示的商品,且只展示符合条件的商品。

            注意:1. 必须使用DOM0级标准事件(onchange)

                       2. 建议使用ES6的filter方法

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
</head>

<body>
      <select name="" id="">
            <option value="0">请选择销量范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
      </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');
            // 补全代码
            /**
             * 请补全JavaScript代码,要求根据下拉框选中的条件变换重新渲染列表中展示的商品,且只展示符合条件的商品。
            注意:
            1. 必须使用DOM0级标准事件(onchange)
            2. 建议使用ES6的filter方法
            */
            select.onchange = function (e) 
                  ul.innerHTML = ''
                  switch (parseInt(this.value)) 
                        case 1:
                              var newArr = cups.filter((item) => 
                                    return item.sales < 100
                              )
                              break
                        case 2:
                              var newArr = cups.filter((item) => 
                                    return item.sales >= 100 && item.sales <= 500
                              )
                              break
                        case 3:
                              var newArr = cups.filter((item) => 
                                    return item.sales > 500
                              )
                              break
                  
                  showContent(newArr)
            

            function showContent(arr) 
                  var str = ''
                  arr.forEach(item => 
                        str += `<li>$item.name</li>`
                  );
                  ul.innerHTML = str
            
      </script>
</body>

</html>

2、请补全JavaScript代码,要求在Number对象的原型对象上添加"_isPrime"函数,该函数判断调用的对象是否为一个质数,是则返回true,否则返回false。

      <script type="text/javascript">
            // 补全代码
            /**
             * 请补全JavaScript代码,要求在Number对象的原型对象上添加"_isPrime"函数,
             * 该函数判断调用的对象是否为一个质数,是则返回true,否则返回false。
             */
            // 质数:指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数。
            Number.prototype._isPrime = function (num) 
                  if (num < 2) return false
                  for (var i = 2; i < num; i++) 
                        if (num % i === 0) 
                              return false
                        
                  
                  return true
            
      </script>

3、请补全JavaScript代码,要求以Boolean的形式返回字符串参数是否符合身份证标准。

注意:1. 无需考虑地区信息、出生日期、顺序码与校验码的验证

      <script>
            /**
             * 请补全JavaScript代码,要求以Boolean的形式返回字符串参数是否符合身份证标准。
            注意:
            1. 无需考虑地区信息、出生日期、顺序码与校验码的验证
            */
            // 41088219980825152X
            /**
             * 分析身份证分为一代和二代
             * (1)一代15位,可以是15位数字(^\\d15$):\\d 数字字符等同于0-9,15代表15位
             * (2)二代18位,可以是15位数字(^\\d18$):\\d 数字字符等同于0-9,18代表15位
             * (3)身份证最后一位可能是''x'|'X'',(^\\d17(\\d|X|x)$
             */
            const _isCard = number => 
                  var regx = /(^\\d15$)|(^\\d18$)|(^\\d17(\\d|X|x)$)/
                  return regx.test(number)
            
      </script>

4、请补全JavaScript代码,要求以键/值对的对象形式返回参数数组。要求如下:

         1. 键名的数据类型为Symbol

         2. 键值为当前数组项

         3. Symbol的描述为当前数组项

         4. 返回普通对象

            const _symbolKey = array => 
                  // 补全代码
                  let obj = new Object()
                  array.forEach(aa => 
                        obj[Symbol(aa)] = aa
                  );
                  return obj
            

5、请补全JavaScript代码,要求以boolean的形式返回两个Set对象参数是否一样,是则返回true,否则返回false。

      <script>
            /**
             * 请补全JavaScript代码,
             * 要求以boolean的形式返回两个Set对象参数是否一样,是则返回true,否则返回false
             */
            const _isSameSet = (s1, s2) => 
                  // 补全代码
                  if (s1.size !== s2.size) 
                        return false
                  
                  return [...s1].every(i => s2.has(i))
            
            const letters = new Set();
            const letters1 = new Set();
            letters.add('a');
            letters.add('b');
            letters.add('c');
            letters1.add(0)
            letters1.add('d')
            letters1.add('f')
            console.log(_isSameSet(letters, letters1))
      </script>

 知识点补充:

new Set()创建新的 Set 对象。
add()向 Set 添加新元素。
clear()从 Set 中删除所有元素。
delete()删除由其值指定的元素。
entries()返回 Set 对象中值的数组。
has()如果值存在则返回 true。
forEach()为每个元素调用回调。
keys()返回 Set 对象中值的数组。
values()与 keys() 相同。
size返回元素计数。

 6、请补全JavaScript代码,完成名为"Rectangle"的矩形类。要求如下:
        1. 构造函数只包含两个参数,依次为"height"、"width"
        2. 设置Getter,当获取该对象的"area"属性时,返回该对象"height"与"width"属性的乘积

这里涉及到了class类的知识点,可以参考以下详细讲解文章:

ES6--class类(详解/看完必会)_class类详解_suoh's Blog的博客-CSDN博客

<script type="text/javascript">
      /**
       * 请补全JavaScript代码,完成名为"Rectangle"的矩形类。要求如下:
      1. 构造函数只包含两个参数,依次为"height"、"width"
      2. 设置Getter,当获取该对象的"area"属性时,返回该对象"height"与"width"属性的乘积
      */
      class Rectangle 
            // 补全代码
            constructor(height, width) 
                  this.height = height
                  this.width = width
            
            get area() 
                  return this.calcArea()
            
            calcArea() 
                  return this.height * this.width
            
      
      var area = new Rectangle(12, 12).area
      console.log(area)
</script>

 7、请补全代码,要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下:
        1. id为"rect"的矩形初始动画周期为10秒
        2. id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为1
        3. 当滑动滑块值为1时,矩形动画周期为10秒、当...,为...、当滑动滑块值为10时,矩形动画周期为1秒
注意:
1. 必须使用DOM0级标准事件(onchange)

<!DOCTYPE html>
<html>

<head>
      <meta charset=utf-8>
      <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>
</head>

<body>
      <!-- 补全代码 -->
      <div id="rect"></div>
      <input id="range" type="range" step="1" defaultValue="1" value="5" min="1" max="10" />

      <script type="text/javascript">
            // 补全代码
            document.querySelector('#range').onchange = function () 
                  let speed = document.querySelector('#range').value
                  document.querySelector('#rect').style.animationDuration = 11 - speed + 's'
            
      </script>
</body>

</html>

知识点: 

input框的type类型为range,就是一个进度条展示,可能平时用的少,今天拓展一下

<input id="range" type="range" step="1" defaultValue="1" value="5" min="1" max="10" />

 动画属性:

animation: name duration timing-function delay iteration-count direction;
animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function

规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
animation-fill-mode规定动画在执行时间之外应用的值。
animation-play-state规定动画是正在运行还是暂停。

 8、根据题目要求,将页面中的“p”标签DOM节点保存在Map对象的键名中,其内容保存在键值中,核心步骤有:

  1. 通过document.querySelector获取页面中“p”元素标签
  2. 初始化Map实例保存“p”标签DOM节点和内容
<body>
      <p>1</p>
      <script type="text/javascript">
            /**
             * 请补全JavaScript代码,要求将页面中的"p"标签以键名的形式保存在Map对象中,
             * 键名所对应的键值为该"p"标签的文字内容。
             */
            const _elementKey = () => 
                  // 补全代码
                  let p = document.querySelector('p')
                  return new Map([
                        [p, p.innerText]
                  ])
            
            console.log(_elementKey())
      </script>
</body>

SQL练习题-牛客网

牛客网在线编程网址:https://www.nowcoder.com/activity/oj

(默认使用SQLite)

 

题目1:

删除emp_no重复的记录,只保留最小的id对应的记录

CREATE TABLE IF NOT EXISTS titles_test (
id int(11) not null primary key,
emp_no int(11) NOT NULL,
title varchar(50) NOT NULL,
from_date date NOT NULL,
to_date date DEFAULT NULL);
insert into titles_test values (1, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(2, 10002, Staff, 1996-08-03, 9999-01-01),
(3, 10003, Senior Engineer, 1995-12-03, 9999-01-01),
(4, 10004, Senior Engineer, 1995-12-03, 9999-01-01),
(5, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(6, 10002, Staff, 1996-08-03, 9999-01-01),
(7, 10003, Senior Engineer, 1995-12-03, 9999-01-01);
delete from titles_test
where id not in
(
    select min(id) from titles_test group by emp_no
);

 

题目2:

将所有to_date为9999-01-01的全部更新为NULL,且 from_date更新为2001-01-01。

CREATE TABLE IF NOT EXISTS titles_test (
id int(11) not null primary key,
emp_no int(11) NOT NULL,
title varchar(50) NOT NULL,
from_date date NOT NULL,
to_date date DEFAULT NULL);
insert into titles_test values (1, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(2, 10002, Staff, 1996-08-03, 9999-01-01),
(3, 10003, Senior Engineer, 1995-12-03, 9999-01-01),
(4, 10004, Senior Engineer, 1995-12-03, 9999-01-01),
(5, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(6, 10002, Staff, 1996-08-03, 9999-01-01),
(7, 10003, Senior Engineer, 1995-12-03, 9999-01-01);
update titles_test
set to_date = NULL, from_date = 2001-01-01;

 

题目3:

将id=5以及emp_no=10001的行数据替换成id=5以及emp_no=10005,其他数据保持不变,使用replace实现。

insert into titles_test values (1, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(2, 10002, Staff, 1996-08-03, 9999-01-01),
(3, 10003, Senior Engineer, 1995-12-03, 9999-01-01),
(4, 10004, Senior Engineer, 1995-12-03, 9999-01-01),
(5, 10001, Senior Engineer, 1986-06-26, 9999-01-01),
(6, 10002, Staff, 1996-08-03, 9999-01-01),
(7, 10003, Senior Engineer, 1995-12-03, 9999-01-01);
update titles_test set emp_no = replace(emp_no, 10001, 10005) where id = 5;

http://sqlite.org/lang_corefunc.html#replace

replace(X,Y,Z)

The replace(X,Y,Z) function returns a string formed by substituting string Z for every occurrence of string Y in string X. The BINARY collating sequence is used for comparisons. If Y is an empty string then return X unchanged. If Z is not initially a string, it is cast to a UTF-8 string prior to processing.

 

题目4:

将titles_test表名修改为titles_2017。

ALTER table titles_test rename to titles_2017

 

题目5:

在audit表上创建外键约束,其emp_no对应employees_test表的主键id。

CREATE TABLE employees_test(
ID INT PRIMARY KEY NOT NULL,
NAME TEXT NOT NULL,
AGE INT NOT NULL,
ADDRESS CHAR(50),
SALARY REAL
);
CREATE TABLE audit(
EMP_no INT NOT NULL,
create_date datetime NOT NULL
);
Drop table audit;
CREATE TABLE audit(
EMP_no INT NOT NULL,
create_date datetime NOT NULL,
foreign key(emp_no) references employees_test(id)
);

如果是在mysql中,可以直接用

Alter table audit add foreign key(emp_no) references employees_test(id);

w3school.

以上是关于js牛客网编程练习汇总的主要内容,如果未能解决你的问题,请参考以下文章

SQL练习题-牛客网

SQL练习题-牛客网

给编程学习者的一些忠告以及牛客网初阶练习

牛客网python篇入门编程习题

牛客网专题SQL206 获取每个部门中当前员工薪水最高的相关信息

前端刷题 —— 牛客网前端题库60道详解