【前端】nk前端篇-JS能力测评js(1)JS总结更多

100 阅读 0 评论 66 点赞

我是靠谱客的博主高贵钥匙，这篇文章主要介绍【前端】nk前端篇-JS能力测评js(1)JS总结更多，现在分享给大家，希望可以做个参考。

nk前端篇-JS能力测评js1

JS
- - - JS1 **直角三角形**
    - JS2 **文件扩展名**
    - JS3 **分隔符**
    - JS4 **单向绑定**
    - JS5 **创建数组**
    - JS6 **判断版本**
    - JS7 **无重复数组**
    - JS8 **数组排序**
    - JS9 **新数组**
    - JS10 **计数器**
    - JS11 **列表动态渲染**
    - JS12 **模板字符串**
    - JS13 **类继承**
    - JS14 **参数解析器**
    - JS15 **生成页码**
    - JS16 **总成绩排名**
    - JS17 **子字符串频次**
    - JS18 **继承**
    - JS19 **判断斐波那契数组**
    - JS20 **数组扁平化**
    - JS21 **数组过滤**
    - JS22 **判断质数**
    - JS23 **验证是否是身份证**
    - JS24 **Symbol**
    - JS25 **相同的Set**
    - JS26 **Getter**
    - JS27 **控制动画**
    - JS28 **Map保存节点**
    - JS29 **全选**
    - JS30 **回文字符串**
    - JS31 **Proxy计数器**
    - JS32 **Proxy拦截器**
    - JS33 **监听对象**
总结
更多

JS

JS1 直角三角形

请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下：

复制代码

1
2
3
4
*
**
***

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='triangle'></div>
<script>
var triangle = document.querySelector('.triangle');
// 补全代码
triangle.innerHTML = "*<br>**<br>***"
</script>
</body>
</html>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='triangle'></div>
<script>
var triangle = document.querySelector('.triangle');
// 补全代码
let str = ''
for(var i = 0;i < 4;i++){
for(var j = 0;j < i;j++){
str += `*`
}
str += `<br>`
}
triangle.innerHTML = str
</script>
</body>
</html>

JS2 文件扩展名

请补全JavaScript代码，要求以字符串的形式返回文件名扩展名，文件名参数为"filename"。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const _getExFilename = (filename) => {
// 补全代码
return "." + filename.split('.')[1]
}
</script>
</body>
</html>

JS3 分隔符

请补全JavaScript代码，要求返回参数数字的千分位分隔符字符串。

示例1

输入：_comma(12300)

输出：‘12,300’

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
function _comma(number) {
// 补全代码
number = (''+ number).replace(/d{1,3}(?=(d{3})+$)/g,(val)=>val+',')
return number;
}
</script>
</body>
</html>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
function _comma(number) {
// 补全代码
let arr = Math.abs(number).toString().split('').reverse();
let i = 3;
while (i < arr.length) {
arr.splice(i, 0, ',');
i += 4;
}
let str = arr.reverse().join('');
return number >= 0 ? str : '-' + str;
}

JS4 单向绑定

请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意：
1. 必须使用DOM0级标准事件（onchange）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<input id="input" type="text" />
<span id="span"></span>
<script type="text/javascript">
// 补全代码
input = document.querySelector('#input')
span = document.getElementById('span')
input.onchange=function(){
span.innerText = input.value
}
</script>
</body>

或

复制代码

1
2
3
4
input.onchange=function(){
span.innerHTML = input.value
}

JS5 创建数组

请补全JavaScript代码，要求返回一个长度为参数值并且每一项值都为参数值的数组。
注意：请勿直接使用for/while

复制代码

1
2
3
4
5
6
7
8

<script type="text/javascript">
const _createArray = (number) => {
// 补全代码
return Array(number).fill(number)
}
</script>

JS6 判断版本

请补全JavaScript代码，该函数接收两个参数分别为旧版本、新版本，当新版本高于旧版本时表明需要更新，返回true，否则返回false。
注意：
1. 版本号格式均为"X.X.X"
2. X∈[0,9]
3. 当两个版本号相同时，不需要更新

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
const _shouldUpdate = (oldVersion, newVersion) => {
// 补全代码
let oldV = Number(oldVersion.split('.').join(''))
let newV = Number(newVersion.split('.').join(''))
if(oldV < newV){
return true
}else{
return false
}
}
</script>

JS7 无重复数组

请补全JavaScript代码，实现一个函数，要求如下：
1. 根据输入的数字范围[start,end]和随机数个数"n"生成随机数
2. 生成的随机数存储到数组中，返回该数组
3. 返回的数组不能有相同元素
注意：
1. 不需要考虑"n"大于数字范围的情况

示例1

输入：getUniqueNums(2,10,4)

输出：[4,6,2,8]

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
const _getUniqueNums = (start,end,n) => {
// 补全代码
if(n > end - start + 1)	return []
let res = []
for(let i = 0;i < n;i++){
let num
do{
num = Math.floor(Math.random() * (end - start + 1)) + start
}while(res.includes(num))
res.push(num)
}
return res;
}
</script>

复制代码

1
2
3
//start-end之间的随机整数求解方法:
Math.floor(Math.random()*(max-min+1))+min

JS8 数组排序

请补全JavaScript代码，根据预设代码中的数组，实现以下功能：
1. 列表只展示数组中的name属性
2. 实现点击"销量升序"按钮，列表内容按照销量升序重新渲染
3. 实现点击"销量降序"按钮，列表内容按照销量降序重新渲染
注意：
1. 必须使用DOM0级标准事件（onclick）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button class='up'>销量升序</button>
<button class='down'>销量降序</button>
<ul></ul>
<script>
var cups = [
{ type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },
{ type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },
{ type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
{ type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
]
var ul = document.querySelector('ul');
var upbtn = document.querySelector('.up');
var downbtn = document.querySelector('.down');
// 补全代码
let up = function(){
return cups.sort((a,b) => {return a.sales - b.sales})
}
let down = function(){
return cups.sort((a,b) => {return b.sales - a.sales})
}
let render = function(){
let str = ''
for(let i = 0;i < cups.length;i++){
str += '<li>' + cups[i].name + '</li>';
}
ul.innerHTML = str;
}
upbtn.onclick = function(){
up()
render()
}
downbtn.onclick = function(){
down()
render()
}
</script>
</body>
</html>

JS9 新数组

请补全JavaScript代码，该函数接受两个参数分别为数组、索引值，要求在不改变原数组的情况下返回删除了索引项的新数组。

复制代码

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
const _delete = (array,index) => {
// 补全代码
let res = JSON.parse(JSON.stringify(array))
res.splice(index,1)
return res
}
</script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
const _delete = (array,index) => {
// 补全代码
let res = []
for(let i = 0;i < array.length;i++){
if(i != index){
res.push(array[i])
}
}
return res
}
</script>

JS10 计数器

请补全JavaScript代码，要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
注意：
1. 初次调用返回值为1
2. 每个计数器所统计的数字是独立的

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
const closure = () => {
// 补全代码
var count = 0
return function(){
count++
return count
}
}
</script>

JS11 列表动态渲染

请补全JavaScript代码，将预设代码中的"people"数组渲染在页面中。实现下面的列表：

牛油1号 20岁
牛油2号 21岁
牛油3号 19岁

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul></ul>
<script>
var people = [
{ name: '牛油1号', id: 1, age: 20 },
{ name: '牛油2号', id: 2, age: 21 },
{ name: '牛油3号', id: 3, age: 19 },
]
var ul = document.querySelector('ul');
// 补全代码
people.map((item) => {
ul.innerHTML += `<li>${item.name} ${item.age}岁</li>`
});
</script>
</body>
</html>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul></ul>
<script>
var people = [
{ name: '牛油1号', id: 1, age: 20 },
{ name: '牛油2号', id: 2, age: 21 },
{ name: '牛油3号', id: 3, age: 19 },
]
var ul = document.querySelector('ul');
// 补全代码
for (let i = 0; i < people.length; i++) {
let lis = document.createElement('li');
lis.innerHTML = people[i].name + " " +
people[i].age + '岁';
ul.appendChild(lis);
}
</script>
</body>
</html>

JS12 模板字符串

请补全JavaScript代码，实现以下功能：
1. 根据已有的person对象的注册时间求出距离当前时间的天数（天数向下取整）。
2. 将获得的天数和person数据拼接成字符串，作为h2标签的内容。
注意：使用模板字符串进行字符串拼接，字符串最终内容如：尊贵的牛客网2级用户小丽您好，您已经注册牛客网3天啦~

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2></h2>
<script>
var person = {
level: '2',
name: '小丽',
registTime: '2021-11-01',
}
var h2 = document.querySelector('h2');
// 补全代码
let date = new Date();
let now = date.getTime();
let start = new Date(person.registTime).getTime();
let temp = now - start;
let days = Math.floor(temp / (24 * 60 * 60 *1000));
h2.innerText = `尊贵的牛客网${person.level}级用户${person.name}您好，您已经注册牛客网${days}天啦~`;
</script>
</body>
</html>

JS13 类继承

请补全JavaScript代码，完成类的继承。要求如下：
1. "Chinese"类继承于"Human"类
2. “Human"类实现一个函数"getName”，返回该实例的"name"属性
3. “Chinese"类构造函数有两个参数，分别为"name”、“age”
4. “Chinese"类实现一个函数"getAge”，返回该实例的"age"属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
class Human {
constructor(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
// 补全代码
getName(){
return this.name;
}
}
// 补全代码
class Chinese extends Human{
constructor(name,age){
super(name);
this.age = age;
}
getAge(){
return this.age;
}
}
</script>
</body>
</html>

JS14 参数解析器

请补全JavaScript代码，要求将字符串参数URL中的参数解析并以对象的形式返回。

示例1

输入：

复制代码

1
2
getParams('https://nowcoder.com/online?id=1&salas=1000')

输出：

复制代码

1
2
{id:1, salas: 100}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
const _getParams = (url) => {
// 补全代码
let obj = {}
let urlArr = url.split('?')[1].split('&')
urlArr.forEach(item => {
let itemArr = item.split('=')
obj[itemArr[0]] = itemArr[1]
})
return obj
}
</script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
const _getParams = (url) => {
// 补全代码
let obj = {}
let urlArr = url.split('?')[1].split('&')
for(var i = 0;i < urlArr.length;i++){
var temp = urlArr[i].split('=')
obj[temp[0]]=temp[1]
}
return obj
}
</script>

JS15 生成页码

请补全JavaScript代码，要求根据参数动态生成"li"标签页码并插入"ul"标签下。要求如下：
1. "allItem"为总数据项个数，"pageItem"为每页的数据项个数
2. "li"标签内容为当前页码数，页码从1开始

示例1

输入：

复制代码

1
2
_createPage(13,2)

输出：

复制代码

1
2
"li"长度为7，"li"内容依次为"1","2","3","4","5","6","7"

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul id="ul">
</ul>
<script type="text/javascript">
const _createPage = (allItem, pageItem) => {
// 补全代码
let ulbox = document.querySelector('#ul')
let page = Math.ceil(allItem / pageItem)
let html = ''
for(let i = 1; i <= page;i++){
html += `<li>${i}</li>`
}
ulbox.innerHTML = html
}
</script>
</body>
</html>

JS16 总成绩排名

请补全JavaScript代码，要求将数组参数中的对象以总成绩(包括属性"chinese"、“math”、“english”)从高到低进行排序并返回。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
const _rank = array => {
// 补全代码
array.sort((a,b) => {
let left = a.chinese + a.math + a.english
let right = b.chinese + b.math + b.english
return right - left
})
return array
}
</script>

JS17 子字符串频次

请补全JavaScript代码，该函数接受两个参数分别为字符串、子字符串，要求返回子字符串在字符串中出现的频次。

复制代码

1
2
3
4
5
6
7
8
9

<script>
const _searchStrIndexOf = (str, target) => {
// 补全代码
let arr = str.split(target)	//字符串分割
return arr.length - 1
}
</script>

JS18 继承

请补全JavaScript代码，实现以下功能：
1. 给"Human"构造函数的原型对象添加"getName"方法，返回当前实例"name"属性
2. 将"Chinese"构造函数继承于"Human"构造函数
3. 给"Chinese"构造函数的原型对象添加"getAge"方法，返回当前实例"age"属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script type="text/javascript">
function Human(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
function Chinese(name,age) {
Human.call(this,name)
this.age = age
this.color = 'yellow'
}
// 补全代码
Human.prototype.getName = function(){
return this.name;
};
Chinese.prototype = new Human();
Chinese.prototype.constructor = Chinese;
Chinese.prototype.getAge = function(){
return this.age;
}
</script>

JS19 判断斐波那契数组

请补全JavaScript代码，要求以Boolean的形式返回参数数组是否为斐波那契数列。在数学上，斐波那契数列以如下方法定义：F(0)=0，F(1)=1, F(n)=F(n - 1)+F(n - 2)（n ≥ 2，n ∈ N）
注意：
1. [0,1,1]为最短有效斐波那契数列

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
const _isFibonacci = array => {
// 补全代码
if(array.length < 3)
return false;
let a = 0,b = 1,c = a + b;
for(let i = 0;i < array.length;i++){
if(array[i] != a)
return false;
a = b;b = c;c = a + b;
}
return true;
}
</script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
const _isFibonacci = array => {
// 补全代码
if(array.length < 3)
return false;
for(let i = 2;i<array.length;i++){
if(array[i-2]+array[i-1] != array[i]){
return false
}
}
return true;
}
</script>
//F(n)=F(n - 1)+F(n - 2)规律符合，但F(0)=0，F(1)=1没有判断

JS20 数组扁平化

请补全JavaScript代码，要求将数组参数中的多维数组扩展为一维数组并返回该数组。
注意：
1. 数组参数中仅包含数组类型和数字类型

示例1

输入：[1,[2,[3,[4]]]]

输出：[1,2,3,4]

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
const _flatten = arr => {
// 补全代码
let res = []
for(let i = 0;i < arr.length;i++){
if( typeof(arr[i]) == 'number'){
res.push(arr[i])
}else{
arr = arr[i];
i = -1;
}
}
return res
}
</script>

JS21 数组过滤

请补全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');
// 补全代码
function selectS(ul,cups){
ul.innerHTML = ''
cups.forEach(item => {
let li = document.createElement('li')
li.innerHTML = item.name
ul.append(li)
})
}
select.onchange = function(e){
let value = this.value
if(value == 1){
let _cups = cups.filter(cup => cup.sales < 100)
selectS(ul,_cups)
}else if(value == 2){
let _cups = cups.filter(cup => cup.sales >= 100 && cup.sales <= 500)
selectS(ul,_cups)
}else if(value == 3){
let _cups = cups.filter(cup => cup.sales > 500)
selectS(ul,_cups)
}else{
selectS(ul,cups)
}
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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');
// 补全代码
function selectS(ul,cups){
ul.innerHTML = ''
cups.forEach(item => {
let li = document.createElement('li')
li.innerHTML = item.name
ul.append(li)
})
}
select.onchange = function(e){
let value = this.value
if(value == 1){
let _cups = cups.filter(cup => cup.sales < 100)
selectS(ul,_cups)
}else if(value == 2){
let _cups = cups.filter(cup => cup.sales >= 100 && cup.sales <= 500)
selectS(ul,_cups)
}else if(value == 3){
let _cups = cups.filter(cup => cup.sales > 500)
selectS(ul,_cups)
}else{
selectS(ul,cups)
}
}
</script>
</body>
</html>

JS22 判断质数

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
// 补全代码
Number.prototype._isPrime = function(number){
if(number < 2){
return true
}
for(let i = 2;i <= Math.sqrt(number);i++){
if(number % i == 0){
return false
}
}
return true
}
</script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript">
// 补全代码
Number.prototype._isPrime = function(){
let number = this.valueOf()
//let num=Number(this);
if(number < 2){
return true
}
for(let i = 2;i<=Math.sqrt(number);i++){
if(number % i == 0){
return false
}
}
return true
}
</script>

JS23 验证是否是身份证

请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否符合身份证标准。
注意：
1. 无需考虑地区信息、出生日期、顺序码与校验码的验证

示例1

输入：_isCard(‘21062319980907888X’)

输出：true

复制代码

1
2
3
4
5
6
7
8
9

<script>
const _isCard = number => {
// 补全代码
let reg = /^[d]{17}[Xd]{1}$/
return reg.test(number)
}
</script>

JS24 Symbol

请补全JavaScript代码，要求以键/值对的对象形式返回参数数组。要求如下：
1. 键名的数据类型为Symbol
2. 键值为当前数组项
3. Symbol的描述为当前数组项
4. 返回普通对象

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
const _symbolKey = array => {
// 补全代码
let obj = {}
array.forEach(item =>{
obj[Symbol(item)] = item;
})
return obj;
}
</script>

JS25 相同的Set

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

复制代码

1
2
3
4
5
6
7
8

<script>
const _isSameSet = (s1, s2) => {
// 补全代码
return s1 == s1
}
</script>

复制代码

1
2
return JSON.stringify(s1)==JSON.stringify(s2);

复制代码

1
2
3
4
5
6
7
8
9

if (s1.size !== s2.size)
return false
for (const e of s1) {
if (!s2.has(e))
return false
}
return true

复制代码

1
2
3
4
5
6
7
8
9
//通过ES6[...]扩展字符将set对象的伪数组转换为数组再调用every进而判断该数组中的每一项是否存在于另一个set对象中
const _isSameSet = (s1, s2) => {
// 补全代码
if (s1.size !== s2.size) {
return false
}
return [...s1].every(i => s2.has(i))
}

JS26 Getter

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

示例1

输入：new Rectangle(12,12).area

输出：144

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
class Rectangle {
// 补全代码
constructor(height,width){
this.height = height
this.width = width
}
get area(){
return this.height * this.width
}
}
</script>

JS27 控制动画

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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" 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>

JS28 Map保存节点

请补全JavaScript代码，要求将页面中的"p"标签以键名的形式保存在Map对象中，键名所对应的键值为该"p"标签的文字内容。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<p>1</p>
<script type="text/javascript">
const _elementKey = () => {
// 补全代码
let key = document.querySelector('p');
let value = key.textContent;
let m = new Map();
m.set(key,value);
return m;
}
</script>
</body>
</html>

JS29 全选

请补全JavaScript代码，实现以下效果：
1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
1. 必须使用DOM0级标准事件（onchange）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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")//用let不能通过
var options = Array.from(document.querySelectorAll(".item"))
all.onchange = () => {
options.forEach((item) => {
item.checked = all.checked
})
}
options.forEach((item) => {
item.onchange = function () {
let isCheckAll = true
options.forEach((item) => {
if (!item.checked) {
isCheckAll = false
}
})
all.checked = isCheckAll
}
})
</script>
</body>
</html>

JS30 回文字符串

请补全JavaScript代码，要求以boolean的形式返回参数字符串是否为回文字符串。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
const _isPalindrome = string => {
// 补全代码
let left = 0,right = string.length - 1
while(left < right){
if(string[left++] !== string[right--]){
return false
}
}
return true
}
</script>

复制代码

1
2
3
4
5
6
7
8

<script type="text/javascript">
const _isPalindrome = string => {
// 补全代码
return string === string.split('').reverse().join('')
}
</script>

JS31 Proxy计数器

请补全JavaScript代码，请给参数对象添加拦截代理功能，并返回这个代理，要求每当通过代理调用该对象拥有的属性时，"count"值加1，否则减1。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript">
let count = 0
const _proxy = object => {
// 补全代码
let proxy = new Proxy(object,{
get:function(target,prokey){
if(prokey in target){
count++
}else{
count--
}
}
})
return proxy
}
</script>

JS32 Proxy拦截器

请补全JavaScript代码，请给参数对象添加拦截代理功能并返回这个代理。要求如下：
1. 该函数接收多个参数，首个参数为对象，从第二个参数（包括）往后皆是该对象的属性名
2. 通过该函数给首个参数对象添加拦截器功能，每当该对象访问到该函数第二个参数（包括）往后的属性时，返回"noright"字符串，表示无权限。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
const _proxy = (object,...prototypes) => {
// 补全代码
return new Proxy(object,{
get(obj,key){
if(prototypes.indexOf(key) > -1)
return 'noright'
return obj[key]
}
})
}
</script>

JS33 监听对象

请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 可以使用预设代码"_render"函数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
ul {
list-style: none;
}
</style>
<ul></ul>
<script>
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);
// 补全代码
Object.keys(person).forEach(key => {
let value = person[key]
Object.defineProperty(person,key,{
get(){
return value
},
set(newVal){
if(newVal != value){
value = newVal
_render(ul)
}
}
})
})
</script>
</body>
</html>