前端开发工程师面试题：JavaScript部分与性能

JavaScript部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

1、怎样添加、移除、移动、复制、创建和查找节点？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

1）创建新节点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

/**
 * 对象克隆
 * 支持基本数据类型及对象
 * 递归方法
 */
function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分为两种情况 对象（Object）或数组（Array）
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = [];
                    for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

3、如何消除一个数组里面重复的元素？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

4、想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

function log(){
      var args = Array.prototype.slice.call(arguments);  
//为了使用unshift数组方法，将argument转化为真正的数组
      args.unshift('(app)');
      console.log.apply(console, args);
};

6、Javascript中callee和caller的作用？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

caller是返回一个对函数的引用，该函数调用了当前函数；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

7、请描述一下cookies，sessionStorage和localStorage的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

web storage和cookie的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

8、手写数组快速排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

“快速排序”的思想很简单，整个排序过程只需要三步：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

（1）在数据集之中，选择一个元素作为”基准”（pivot）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;i<str.length;i++){
    var v = str.charAt(i);
    if(obj[v] && obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj[v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}

10、写一个function，清除字符串前后的空格。（兼容所有浏览器）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

其他文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

1、一次完整的HTTP事务是怎样的一个过程？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

基本流程：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

a. 域名解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

b. 发起TCP的3次握手文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

c. 建立TCP连接后发起http请求文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

d. 服务器端响应http请求，浏览器得到html代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

e. 浏览器解析html代码，并请求html代码中的资源文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

f. 浏览器对页面进行渲染呈现给用户文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

2、对前端工程师这个职位你是怎么样理解的？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

b. 参与项目，快速高质量完成实现效果图，精确到1px；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

c. 与团队成员，UI设计，产品经理的沟通；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

d. 做好的页面结构，页面重构和用户体验；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

e. 处理hack，兼容、写出优美的代码格式；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html

f. 针对服务器的优化、拥抱最新前端技术。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9894.html