一、请补全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"><100</option>
<option value="2">100~500</option>
<option value="3">>500</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>二、请补全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>三、请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否符合身份证标准。
注意：1. 无需考虑地区信息、出生日期、顺序码与校验码的验证
<script>
/**
* 请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否符合身份证标准。
注意：
1. 无需考虑地区信息、出生日期、顺序码与校验码的验证
*/
// 41088219980825152X
/**
* 分析身份证分为一代和二代
* (1)一代15位，可以是15位数字(^\d{15}$)：\d 数字字符等同于0-9，{15}代表15位
* (2)二代18位，可以是15位数字(^\d{18}$)：\d 数字字符等同于0-9，{18}代表15位
* (3)身份证最后一位可能是''x'|'X''，(^\d{17}(\d|X|x)$
*/
const _isCard = number => {
var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
return regx.test(number)
}
</script>四、请补全JavaScript代码，要求以键/值对的对象形式返回参数数组。要求如下：
1. 键名的数据类型为Symbol
2. 键值为当前数组项
3. Symbol的描述为当前数组项
4. 返回普通对象
const _symbolKey = array => {
// 补全代码
let obj = new Object()
array.forEach(aa => {
obj[Symbol(aa)] = aa
});
return obj
}五、请补全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 | 返回元素计数。 |
六、请补全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>
七、请补全代码，要求当滑动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 规定动画是正在运行还是暂停。
八、根据题目要求，将页面中的“p”标签DOM节点保存在Map对象的键名中，其内容保存在键值中，核心步骤有：
- 通过document.querySelector获取页面中“p”元素标签
- 初始化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>九、请补全JavaScript代码，实现以下效果：
1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
1. 必须使用DOM0级标准事件（onchange）
<!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.querySelector('#all')
// 将类数组使用from转化为真正的数组才能使用every
var options = Array.from(document.querySelectorAll('.item'))
// 全选
all.onchange = () => {
options.forEach(x => x.checked = all.checked)
}
// 利用every判断当最后一个子级勾选后则为全选
options.forEach((item) => {
item.onchange = function () {
all.checked = options.every(x => x.checked)
}
})
</script>
</body>
</html>知识点：
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法。
那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。
所以document.querySelectorAll('.item')在没转换为真正的数组时是下面这样的。
转换后：
十、请补全JavaScript代码，要求以boolean的形式返回参数字符串是否为回文字符串。
<script type="text/javascript">
// 请补全JavaScript代码，要求以boolean的形式返回参数字符串是否为回文字符串。
// 法一：
const _isPalindrome = string => {
// 补全代码
var arr = string.split('')
// 反转数组
var newArr = JSON.parse(JSON.stringify(arr)).reverse()
// 比较两个数组，有一个不相等即为false
var flag = arr.every((item, i) => {
return item == newArr[i]
})
return flag
}
// 法二：
const _isPalindrome2 = string => {
return string === string.split('').reverse().join('')
}
</script>学会巧妙运用数组的reverse反转方法，以及数组转字符串方法join。