【整理】牛客网编程题前端篇（较难难度）

（1）获取url参数

描述：
获取 url 中的参数

1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组
4. 不支持URLSearchParams方法

示例1
输入：http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key
输出：[1, 2, 3]
解题思路：

function getUrlParam(sUrl, sKey) {
    var qs = sUrl.split('?')[1].split('#')[0],
        args = {},
        items = qs.length ? qs.split('&') : [],
        item = null,
        name = null,
        value = null;
    for (var i=0; i<items.length; i++) {
        item = items[i].split('=');
        name = item[0];
        value = item[1];
        if (!args[name]) {
            args[name] = value;
        } else {
            if (Array.isArray(args[name])) {
                args[name].push(value);
            } else {
                args[name] = [args[name], value];
            }
        }
    }
    return sKey ? args[sKey] || '' : args;
}

虽然用例全部通过了，但事实上还需要进一步判断url具体形式，例如先判断是否存在？再分割。

（2）数组去重

描述：
为 Array 对象添加一个去除重复项的方法
示例1
输入：[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]
输出：[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]
解题思路：
使用ES6中新增的Set对象

Array.prototype.uniq = function () {
    return Array.from(new Set(this));
}

不使用Set对象：

Array.prototype.uniq = function () {
    var arr = [],
        flag = true;
    for (var i=0;i<this.length;i++) {
        if (arr.indexOf(this[i]) == -1) {
            if (this[i] != this[i]) {
                if (flag) {
                    arr.push(this[i]);
                    flag = false;
                }
            } else {
                arr.push(this[i]);
            }
        }
    }
    return arr;
}

判断是否为NaN：
isNaN()是ES5的方法，Number.isNaN()是ES6的方法
可能有一些同学会认为isNaN直译为“是不是NaN”，其本意不是，isNaN本意是通过Number方法把参数转换成数字类型，如若转换成功，则返回false，反之返回true，它只是判断参数是否能转成数字，不能用来判断是否严格等于NaN。如果要判断某个值是否严格等于NaN不能用这个方法。
ES6提供了Number.isNaN方法用来判断一个值是否严格等于NaN，它会首先判断传入的值是否为数字类型，如不是，直接返回false。
NaN不等于NaN
数组去重算法参考：https://blog.csdn.net/qxuewei/article/details/52837083
Set对象：
Set对象是ES6中新增的类型，可以自动排除重复项，生成Set对象后，可以轻松遍历它所包含的内容。
Array.from方法可以将 Set 结构转为数组。
类数组对象的特点有以下四点：

• 有数字索引
• 有长度
• 是个对象
• 能被迭代

Array.from(arr)和[…arr]的区别就是在转换类数组对象时，如果不含迭代器属性和方法，那么[…arr]这种转换方法会报错！

（3）设置文字颜色

描述：
请使用嵌入样式将所有p标签设置为红色文字
解题思路：
使用JS返回所有p标签元素（NodeList）

const ele = document.querySelectorAll('p');
for (var i=0;i<ele.length;i++) {
    ele[i].style.color = 'red';
}

（4）模块

描述：
完成函数 createModule，调用之后满足如下要求：
1、返回一个对象
2、对象的 greeting 属性值等于 str1， name 属性值等于 str2
3、对象存在一个 sayIt 方法，该方法返回的字符串为 greeting属性值 + ', ’ + name属性值
解题思路：

function createModule(str1, str2) {
    var obj = {
        greeting: str1,
        name: str2,
        sayIt: function () {
            return obj.greeting + ', ' + obj.name;
        }
    };
    return obj;
}

根据《JavaScript高级程序设计（第3版）》，修改程序，避免每创建一个对象实例就要执行一次函数，直接将属性和方法赋给this对象，没有显示的创建对象，没有return语句：

function createModule(str1, str2) {
    function Obj (str1, str2) {
        this.greeting = str1;
        this.name = str2;
        this.sayIt = sayIt;
    }
    function sayIt () {
        return this.greeting +', ' + this.name;
    }
    return new Obj(str1, str2);
}