牛客网零基础入门前端（二）

最新推荐文章于 2024-02-19 12:21:46 发布

liulizhi1996

最新推荐文章于 2024-02-19 12:21:46 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/liulizhi1996/article/details/124634157

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript中一系列常用的函数实现，包括数组排序、字符串转换、日期处理、对象操作、数组操作以及DOM操作等。这些函数涵盖了基本的数据处理和网页交互，对于前端开发人员来说是非常实用的工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FED29 从大到小排序

function _sort(array) {
    // 补全代码
    return array.sort(function (a, b) {return b - a;});
}

FED30 大写字符串

function _touppercase(string) {
    // 补全代码
    return string.toUpperCase();
}

FED31 对象属性键名

function _keys(object) {
    // 补全代码
    return Object.keys(object);
}

FED32 对象数字

function _numbertoobject(number) {
    // 补全代码
    return Object(number);
}

FED33 对象字符串

function _stringtoobject(string) {
    // 补全代码
    return Object(string);
}

FED34 去除字符串两端空格

function _trim(string) {
    // 补全代码
    return string.trim();
}

FED35 输出日期

function _date(number) {
    // 补全代码
    let date = new Date(number);
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}

FED36 数字取整

function _int(value) {
    // 补全代码
    return Math.floor(value);
}

FED37 数组反转

function _reverse(array) {
    // 补全代码
    return array.reverse();
}

FED38 数组转字符串

function _join(array) {
    // 补全代码
    return array.join('');
}

FED39 数组最大值

function _max(array) {
    // 补全代码
    return Math.max(...array);
}

FED40 搜索数字

function _search(string) {
    // 补全代码
    return string.search(/\d/) !== -1;
}

FED41 头部插入元素

function _unshift(array,value) {
    // 补全代码
    array.unshift(value);
    return array;
}

FED42 尾部插入元素

function _push(array,value) {
    // 补全代码
    array.push(value);
    return array;
}

FED43 js-位置查找

function _indexof(array,value) {
    // 补全代码
    return array.indexOf(value);
}

FED44 向下取整

function _floor(number) {
    // 补全代码
    return Math.floor(number);
}

FED45 整数反转

function _reverse(number) {
    // 补全代码
    let sign = number >= 0 ? 1 : -1;
    let ans = 0;
    number = Math.abs(number);
    while (number > 0) {
        ans = 10 * ans + number % 10;
        number = Math.floor(number / 10);
    }
    ans *= sign;
    return ans;
}

FED46 字符串搜索

function _search(string,value) {
    // 补全代码
    return string.search(value) >= 0;
}

FED57 移除数组中的元素

function remove(arr, item) {
    return arr.filter(value => {return value !== item;});
}

FED58 移除数组中的元素

function removeWithoutCopy(arr, item) {
    for (let i = 0; i < arr.length; ) {
        arr[i] === item ? arr.splice(i, 1) : i++;
    }
    return arr;
}

FED59 添加元素

function append(arr, item) {
    return arr.concat([item]);
}

FED60 删除数组最后一个元素

function truncate(arr) {
    return arr.slice(0, arr.length - 1);
}

FED61 添加元素

function prepend(arr, item) {
    return [item].concat(arr);
}

FED62 删除数组第一个元素

function curtail(arr) {
    return arr.slice(1, arr.length);
}

FED63 数组合并

function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

FED64 添加元素

function insert(arr, item, index) {
    return arr.slice(0, index).concat([item]).concat(arr.slice(index, arr.length));
}

FED65 求二次方

function square(arr) {
    return arr.map((a) => {return a * a;});
}

FED66 查找元素位置

function findAllOccurrences(arr, target) {
    return arr.reduce((ans, elem, idx) => {
        if (elem === target) {
            ans.push(idx);
        }
        return ans;
    }, []);
}

FED68 正确的使用 parseInt

function parse2Int(num) {
    return parseInt(num, 10);
}

FED47 函数——参数对象

function getArguments (a,b,c) {
    // 补充代码
    return arguments;
}

FED48 this指向

var obj = {
    a: 1,
    b: 2,
    fn: function(){
        // 补全代码
        return this.a + this.b;
    }
}

FED49 JS动态创建节点

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
            // 补全代码
            let ul = document.getElementsByTagName("ul")[0];
            for (let elem of array) {
                let li = document.createElement("li");
                li.innerText = elem;
                ul.appendChild(li);
            }
        }
    </script>
</html>

FED50 根据ID获取元素

function getLI(id){
    // 补全代码
    return document.getElementById(id);
}

FED51 JS修改元素内容

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            // 补全代码
            document.querySelector('div[class="box"]').textContent = '欢迎来到牛客网';
        }
    </script>
</html>

FED52 阻止冒泡事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.querySelector("li").addEventListener("click", e => e.stopPropagation());
    </script>
</html>

FED53 阻止默认事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.getElementById("checkbox").addEventListener("click", e => e.preventDefault());
    </script>
</html>

FED54 url地址

function getUrlHref (){
    // 补全代码
    return location.href;
}

FED55 点击按钮隐藏元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position: relative;
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                position: absolute;
                top: -10px;
                right: -10px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display = "none";
            }
        </script>
    </body>
</html>