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

yangtobeone~

已于 2022-02-09 20:42:15 修改

阅读量2.3k

点赞数 1

分类专栏：前端练习文章标签： javascript 前端开发语言

于 2022-01-31 14:28:31 首次发布

本文链接：https://blog.csdn.net/m0_46233342/article/details/122759665

版权

前端练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS

JS1 直角三角形

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

* 
** 
***

<!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>

<!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"。

<!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’

<!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>

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）

<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>

或

input.onchange=function(){
                span.innerHTML = input.value
            }

JS5 创建数组

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

        <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. 当两个版本号相同时，不需要更新

        <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]

        <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>

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

JS8 数组排序

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

<!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代码，该函数接受两个参数分别为数组、索引值，要求在不改变原数组的情况下返回删除了索引项的新数组。

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

        <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. 每个计数器所统计的数字是独立的

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

JS11 列表动态渲染

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

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

<!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>

<!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天啦~

<!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"属性

<!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

输入：

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

输出：

{id:1, salas: 100}

        <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>

        <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

输入：

_createPage(13,2)

输出：

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

<!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”)从高到低进行排序并返回。

        <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代码，该函数接受两个参数分别为字符串、子字符串，要求返回子字符串在字符串中出现的频次。

        <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"属性

        <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]为最短有效斐波那契数列

        <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>

        <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]

        <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">&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。

        <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>

        <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

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

JS24 Symbol

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

        <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。

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

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

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

//通过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

        <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）

<!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"标签的文字内容。

<!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）

<!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的形式返回参数字符串是否为回文字符串。

        <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>

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

JS31 Proxy计数器

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

        <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"字符串，表示无权限。

        <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"函数

<!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>

总结

这里对文章进行总结：
以上就是nk前端篇-JS能力测评js的前一部分内容，本文介绍了js相关的一些使用方法，在此记录，更多关于前端题目会后续继续整理。

【前端】nk前端篇-零基础FED
【前端】nk前端篇-CSS布局CSS
【前端】nk前端篇-JS能力测评js(1)
【前端】nk前端篇-JS能力测评js(2)

yangtobeone~

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【前端】nk前端篇-JS能力测评js(1)

nk前端篇-JS能力测评js1JSJS1 **直角三角形**JS2 **文件扩展名**JS3 **分隔符**JS4 **单向绑定**JS5 **创建数组**JS6 **判断版本**JS7 **无重复数组**JS8 **数组排序**JS9 **新数组**JS10 **计数器**JS11 **列表动态渲染**JS12 **模板字符串**JS13 **类继承**JS14 **参数解析器**JS15 **生成页码**JS16 **总成绩排名**JS17 **子字符串频次**JS18 **继承**JS19 **判断斐
复制链接

扫一扫