2018-5-31 JavaScript面试题

第七篇博客.png

前端面试题，保持更新......

一、数组去重

1.1 常规方法

/* 
 * 功能：数组去重
 * 函数名：unip
 * 参数：一个数组
 */function unip(array){    // 创建一个临时数组
    var temp = [];    for(var i = 0;i < array.length;i++)
    {        // 如果临时数组中不存在该数值，就将其存入数组中
        if(temp.indexOf(array[i]) < 0)
        {
            temp.push(array[i]);
        }
    }    return temp;
}

1.2 ES6新特性

/*
 * 功能：数组去重（使用ES6新特性）
 * 函数名：unipES6
 * 参数：一个数组
 */function unipES6(array){    // set是一种新的数据结构，它可以接收一个数组或者类数组对象，自动去重其中的重复项目
    // Array.from的作用，就是把类数组对象、可迭代对象转化为数组
    var temp = new Set(array);    var temp1 = Array.from(temp);    return temp1;
}

二、去除字符串中的空格

2.1 trim()方法
trim()：只能去除两边的空格，无法去除中间的空格
trimLeft()：去除左边的空格
trimRight()：去除右边的空格

2.2 replace()方法

/*
 * 功能：去除字符串内部的空格
 * 函数名：rmWhiteSpace
 * 参数：字符串
 */
 function rmWhiteSpace(str) {    return str.replace(/\s*/g,"");
 }

三、获取浏览器URL查询字符串中的参数

3.1 代码

function getParameter(url){    var args = url.split("?");    if(args[0] == url)
    {        return "";
    }    var arr = args[1].split("&");    var temp = {};    for(var i=0;i<arr.length;i++)
    {        var arg = arr[i].split("=");
        temp[arg[0]] = arg[1];
    }    return temp;
}

3.2 处理步骤（http://www.a.com?name=zpc&age=20&nickname=zpcjingyu）
第一步：http://www.a.com、name=zpc&age=20&nickname=zpcjingyu
第二步：name=zpc、age=20、nickname=zpcjingyu
第三步：name、zpc和age、20和nickname、zpcjingyu存入对象

四、字符串方法

toString()：将数组转化为以逗号隔开的字符串
valueOf()：输出数组
toLocaleString()：将数组转化为以逗号隔开的字符串

使用alert()方法输出这三种方法输出的值时都是用逗号隔开的字符串

栈方法：（操作栈尾）
push()：从栈尾推入数据
pop()：从栈尾推出数据

队列方法：（操作队顶）
shift()：从队列顶部取出数据
unshift()：从队列顶部插入数据

reverse()：数组反置
sort()：数组排序，需要创建排序规则

concat()：连接数组
slice()：从数组中取特定的项到另一个数组中
splice(）：
例如：
splice(m,n)：从m项开始，删除n个元素
splice(m,n,"","")：从m项开始，删除n个元素，然后从m项开始插入接下来的元素

indexOf()：返回数组中查找项的索引，从数组开头向后查找
lastIndexOf()：返回数组中查找项的索引，从数组结尾向前查找

五、数组方法

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
charAt() – 返回指定位置的字符。
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1
match() – 检查一个字符串是否匹配一个正则表达式。
substr() 函数 -- 返回从string的startPos位置，长度为length的字符串
substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
slice() – 提取字符串的一部分，并返回一个新字符串。
replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase() – 将整个字符串转成小写字母。
toUpperCase() – 将整个字符串转成大写字母

六、字符串反置

使用数组内置的reverse方法，先将字符串转化为数组，再将数组转化为字符串。

/*
 * 功能：字符串反置
 * 函数名:strReverse
 * 参数：一个字符串
 */function strReverse(str){    return str.split("").reverse().join("");
}

七、数组排序

使用数组内置的sort方法，先创建一个比较函数，这是为sort的排序创建规则。

/*
 * 功能：数组排序
 * 函数名：arrSort
 * 参数：一个数组
 */function arrSort(arr){    return arr.sort(compareUp);
}// 升序规则function compareUp(value1,value2){    return value1-value2;
}// 降序规则function compareDown(value1,value2){    return value2-value1;
}

八、判断字符串中出现最多次数的字符、并统计次数

/*
 * 功能：统计字符串中字符的数目
 * 函数名：strCharNum
 * 参数：一个字符串
 */function strCharNum(str){    var temp = {};    for(var i=0;i<str.length;i++)
    {        if(temp[str.charAt(i)])
        {
            temp[str.charAt(i)]++;
        }else{
            temp[str.charAt(i)] = 1;
        }
    }    return temp;
}

九、闭包

9.1 闭包简单的理解来说就是可以读取函数内部变量的函数，或者说定义在一个函数内部的函数。本质上，闭包是连接函数内部和函数外部的一个桥梁。

9.2 作用
1.读取函数内部的变量
2.让这些变量的值始终保存在内存当中

9.3 注意点
1.内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2.会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

十、垃圾收集

10.1 标记清除
垃圾收集器在运行的时候会给存储在内存当中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量。

10.2 引用计数
引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变为0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。

十一、this是什么？

this是javascript语言中的一个关键字，它代表函数运行时，自动生成的内部对象，只能在函数内部使用。随着函数使用场合的不同，this值会发生变化，但是总指向调用函数的那个对象。

十二、数据类型、typeof

1.数据类型：简单数据类型、复杂数据类型
简单数据类型：null、undefined、array、number、boolean
复杂数据类型：object
2.typeof返回值：object、number、boolean、undefined、function
3.特殊值
typeof null ->object
typeof NaN->number
typeof [1,2,3]->object

十三、随机生成长度的字符串

/*
 * 功能：随机生成一个指定长度的字符串
 * 函数名：randomStr
 * 参数：长度
 */function randomStr(length){    var str = "";    var s = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";    for(var i=0;i<length;i++)
    {
        str = str + s.charAt(Math.floor(Math.random()*s.length));
    }    return str;
}

十四、优雅降级、渐进增强

1.渐进增强：（在保证页面没有JavaScript能够正常访问的情况下增强动态效果）
渐进增强原则基于这样一种思想，你应该总是从最核心的部分，也就是从内容开始。应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容。这些增强工作既可以是通过CSS改进呈现效果，也可以是通过DOM添加各种行为。如果你正在使用DOM添加核心内容，那么你添加的时机就未免太迟了，内容应该在刚开始编写文档时就成为文档的组成部分。

2.平稳退化：（确保网页在没有JavaScript的情况下也能正常工作）
渐进增强的实现必然支持平稳退化。如果你按照渐进增强的原则去充实内容，你的内容添加的样式和行为就自然支持平稳退化，那么缺少必要的CSS和DOM支持的访问者仍可以访问到你的核心内容。如果你用JavaScript去添加这些重要内容，它就没法支持平稳退化，不支持JavaScript，就看不到内容。这好像是一种限制，利用DOM去生成内容有着广泛的用途。

作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/2d24aeec256f