开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【前端】nk前端篇-JS能力测评js(1) -> 正文阅读

[JavaScript知识库]【前端】nk前端篇-JS能力测评js(1)

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>