JS能力测评

最新推荐文章于 2023-03-20 15:15:44 发布

m0_66557301

最新推荐文章于 2023-03-20 15:15:44 发布

阅读量78

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： javascript 前端开发语言后端面试

本文链接：https://blog.csdn.net/m0_66557301/article/details/124815720

版权

面试同时被 3 个专栏收录

135 篇文章 10 订阅

订阅专栏

阿里巴巴

124 篇文章 1 订阅

订阅专栏

学习路线

119 篇文章 2 订阅

订阅专栏

JS1直角三角形

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>

        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            let innerHTMLValur = '';
            for(let i = 1; i < 4; i++) {
                for(let j = 0; j < i; j++) {
                    innerHTMLValur += '*'
                }
                // 每行生成之后添加换行符
                innerHTMLValur += '<br />'
            }
             triangle.innerHTML = innerHTMLValur;
        </script>
    </body>
</html>

JS2文件扩展名

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script>
            const _getExFilename = (filename) => {
                // 补全代码
                //以点符号作为分割符，考虑到部分文件名里也可能包含有 . 符号，
                //但扩展名肯定是最后一个 . 符号之后，因此直接使用数组的pop从末尾获取即可，
                //题目要求的扩展名是 '.XXX'是需要带上点符号的，需要在返回结果中重新加上。
                return `.${filename.split('.').pop()}`
            }
        </script>
    </body>
</html>

JS3分隔符

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

   function _comma(number) {
               // splice插入处理
                const arr = number.toString().split('');
                const len = arr.length;
                // 主要处理点：插入位置的计算
                for(let i = len - 3; i >= 0; i = i - 3) {
                    arr.splice(i, 0, ',');
                }
                return number > 1000 ? arr.join('') : number.toString();
            }

JS4单向绑定

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

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<input id="input" type="text" />
        <span id="span"></span>

        <script type="text/javascript">
            // 获取元素节点，触发事件，并给元素进行赋值。
            document.querySelector('#input').onchange = function() {
                document.querySelector('#span').innerText = this.value;
            }
        </script>
    </body>
</html>

JS5创建数组

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

   const _createArray = (number) => {
                // 补全代码
                return new Array(number).fill(number);
            }

JS6判断版本

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

    const _shouldUpdate = (oldVersion, newVersion) => {
                // 补全代码
                const toVersionNum = version => {
                    return Number(version.split('.').join(''))
                };
                return newVersion > oldVersion
            }

JS7无重复数组

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

知识点：（1）Set数据的长度使用size属性获取（2）新增元素使用add方法

       const _getUniqueNums = (start,end,n) => {
                // 重复判断，无重复数组
                let arr = new Set();
                while(arr.size < n) {
                    const num = Math.floor(Math.random() * (end - start + 1) + start);
                    arr.add(num);
                }
                return [...arr];
                
            }

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');
            // 渲染函数
            const listRender = rendArr => {
                let str = '';
                rendArr.forEach(item => str += `<li>${item.name}</li>`);
                ul.innerHTML = str;
            }
            // 升序操作
            upbtn.onclick = function() {
                const upArr = cups.sort((a,b) => a.sales - b.sales);
                listRender(upArr);
            }
           // 降序操作
            downbtn.onclick = function() {
                const downArr = cups.sort((a,b) => b.sales - a.sales);
                listRender(downArr);
            }
        </script>
    </body>
</html>

JS9新数组

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

   const _delete = (array,index) => {
                // 本题考点：concat、splice、深拷贝
                const arr = array.concat();
                arr.splice(index, 1);
                return arr;
            }

JS10计数器

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

本题考点：闭包、匿名函数

    const closure = () => {
                let count = 0;
                return function() {
                    count++;
                    return count;
                    //或者直接return ++count
                }
            }

JS11列表动态渲染

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

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

牛油3号 19岁

    <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');
        // 补全代码
        let str = '';
        people.forEach(item => {
            str += `<li>${item.name} ${item.age}岁</li>`
        });
        ul.innerHTML = str;
        
    </script>
</body>

JS12模板字符串

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

       <script>
            var person = {
                level: '2',
                name: '小丽',
                registTime: '2021-11-01',
            }
            var h2 = document.querySelector('h2');
            let oldT = +new Date();
            let nowT = +new Date(person.registTime);
            let cha = parseInt((oldT - nowT) / 1000 / 60 / 60 / 24);
            h2.innerHTML = `尊贵的牛客网${person.level}级用户${person.name}您好，您已经注册牛客网${cha}天啦~`
        </script>

知识点：（1）日期转时间戳方法：前面添加 + 转为数字

JS13类继承

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

知识点：super的传递

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

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']
            }
            
            Human.prototype.getName = function() {
                return this.name;
            }
            
            function Chinese(name,age) {
                Human.call(this,name)
                this.age = age
                this.color = 'yellow'
            }

            // 原型链继承
            Chinese.prototype = new Human();
            Chinese.prototype.getAge = function() {
                return this.age;
            }
            
        </script>

JS14参数解析器

   const _getParams = (url) => {
                // 补全代码
                const obj = {};
                const serachParams = url.split('?')[1].split('&');
                serachParams.forEach(item => {
                    const [key, value] = item.split('=');
                    obj[key] = value;
                });
                return obj;
            }

JS15生成页码

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<ul id="ul">
            
        </ul>
        <script type="text/javascript">
            const _createPage = (allItem, pageItem) => {
                // 补全代码
                let str = '';
                const pageNums = Math.ceil(allItem / pageItem);
                /**
                for(let i = 1; i <= nums; i++) {
                    str += `<li>${i}</li>`;
                }
                document.querySelector('#ul').innerHTML = str;
                **/
                let ul = document.querySelector('#ul');
                for(let i = 1; i <= pageNums; i++) {
                      let li = document.createElement('li')
                       li.innerText = i
                       ul.appendChild(li)
                }
                
            }
        </script>
    </body>
</html>

JS16总成绩排名

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

 const _rank = array => {
                array.sort((left, right) => {
                let lg = left.chinese + left.math + left.english
                let rg = right.chinese + right.math + right.english
                return rg - lg
            })
            return array
        }

JS17子字符串频次

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

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

首先判断数组参数的长度是否小于3，第一、二项的值是否分别为0、1，如果其中一项不符合，那么返回false
遍历数组参数，从第三项开始，判断该项的值是否符合_F_(n)=F(n - 1)+F(n - 2)，是则continue，否则返回false
当数组遍历完成时返回true

      const _isFibonacci = array => {
                if(array.length < 3 || array[0] !==0 || array[1] !==1) return false;
                for(let i=2; i<array.length; i++) {
                    if(array[i] === array[i-1] + array[i-2]) {
                        continue;
                    } else {
                        return false;
                    }
                }
                return true;
            }

JS20数组扁平化

???

方法一：递归+reduce方法

使用reduce承接每次递归遍历的结果

  const _flatten = arr => {
                return arr.reduce((target, item) => {
                    return target.concat(Array.isArray(item) ? _flatten(item) : item);
                }, [])
            }

方法二：递归+空数组

使用[ ]承接每次递归遍历的结果

     const _flatten = arr => {
                let res = [];
                arr.forEach(item => {
                    if(Array.isArray(item)) {
                        res = res.concat(_flatten(item))
                    } else {
                        res.push(item);
                    }
                });
                return res;
            }

方法三：扩展运算符

通俗而言就是对arr进行“扒皮”，一层一层扒，直至arr没有数组

    const _flatten = arr => {
                /*扩展运算符*/
                while(arr.some(item => Array.isArray(item))) {
                    arr = [].concat(...arr);
                }
                return arr;
            }

方法四：利用字符串特性，可以将嵌套数组拍平

   const _flatten = arr => {
              return arr.toString().split(',').map(item => Number(item));
            }

JS22判断质数

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

       <script type="text/javascript">
            Number.prototype._isPrime = function () {
                let number = this.valueOf(); // valueOf()函数用于返回指定对象的原始值。
                if(number < 2) return false;   //1不是质数
                for(let i=2; i<=number; i++) {
                    if(i === number) return true;
                    if(number%i === 0) return false;
                    if(number%i !==0) continue;
                }
            }
        	
        </script>

valueOf()函数用于返回指定对象的原始值。

Number

数字值。

// Number：返回数字值
var num = 15.26540;
document.writeln( num.valueOf() ); // 15.2654

m0_66557301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS能力测评

目录JS1?直角三角形?编辑JS2?文件扩展名JS3?分隔符JS4?单向绑定JS5?创建数组JS6?判断版本JS7?无重复数组JS8?数组排序?JS9?新数组JS10?计数器JS11?列表动态渲染JS13?类继承JS18?继承?JS14?参数解析器?JS15?生成页码?JS16?总成绩排名JS17?子字符串频次JS19?判断斐波那契数组JS20?数组扁平化JS22?判断质数JS1直角三角形<!DOCTYPE html><html lang="
复制链接

扫一扫