用JS解基础前端笔试算法练习题

迷南。 2024-04-07 12:39 61阅读 0赞

**目录**

JS1 直角三角形

JS2 文件扩展名

JS3 分隔符

JS4 单向绑定

--------------------

### JS1 直角三角形 ###

**描述**

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

**JavaScript node题解：**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <div class='triangle'></div>
    
            <script>
                var triangle = document.querySelector('.triangle');
                // 补全代码
                triangle.innerText += '*'
                triangle.innerHTML += "<br/>"
                triangle.innerText += '**'
                triangle.innerHTML += "<br/>"
                triangle.innerText += '***'
            </script>
        </body>
    </html>

**解析：**

> innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
> 
> innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
> 
> **也就是说，innerText可以用来填写扩充标签内的文字**
> 
> **innerHTML可以用来拼接标签**
> 
> **因为 只需要三次，所以不用特意去搞循环**

--------------------

### JS2 文件扩展名 ###

**描述**

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

**JavaScript node题解：**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            
            <script>
                const _getExFilename = (filename) => {
                    // 补全代码
                    return "."+filename.split('.').pop()
                }
            </script>
        </body>
    </html>

**解析：**

> split(',')分割字符串，返回分割的字符串数组。文件扩展名为最后一个字符串，可以直接pop出来；

--------------------

### JS3 分隔符 ###

**描述**

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

**示例1**

> 输入：\_comma(12300)
> 
> 输出：'12,300'

**JavaScript题解：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8>
        </head>
        <body>
        	
            <script type="text/javascript">
                function _comma(number) {
                    // 补全代码
                    var arr = number.toString()
                    return arr.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                }
            </script>
        </body>
    </html>

--------------------

### JS4 单向绑定 ###

**描述**

> 请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。

> 注意：必须使用DOM0级标准事件（onchange）

**JavaScript题解：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8>
        </head>
        <body>
        	<input id="input" type="text" />
            <span id="span"></span>
    
            <script type="text/javascript">
                // 补全代码
                document.getElementById("input").onchange = function(){
                    //dom事件里的函数的this指向触发者，即input标签
                    //注意：这里不能使用箭头函数，因为箭头函数没有this指针，箭头函数的this是根据执行上下文确定的，即这里的this指向window，会报错
                    document.getElementById("span").innerHTML = this.value
                }
            </script>
        </body>
    </html>

**解析：**

>  *  dom事件里的函数的this指向触发者，即input标签；
>  *  注意：这里不能使用箭头函数，因为箭头函数没有this指针，箭头函数的this是根据执行上下文确定的，即这里的this指向window，会报错；
>  *  input的内容应该用innertext提取，而span的内容应该用innerHTML提取；