基础总结与面试题

字符串常用方法：

1.str.charAt(index);  返回子字符串，index为字符串下标，index取值范围[0,str.length-1]

2.str.indexOf(searchString,startIndex);  返回子字符串第一次出现的位置，从startIndex开始查找，找不到时返回-1

3.str.substring(start,end);  两个参数都为正数，返回值：[start,end) 也就是说返回从start到end-1的字符

4.str.slice(start,end);  两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从start到end-1的字符

5.str.split(separator,maxLen); 方法用于把一个字符串分割成字符串数组。 参数1指定字符串或正则，参照2指定返回数组的最大长度

       例子：字符串逆序

var str = "abcdefg";

var newStr = str.split('').reverse().join('');

6.str.replace(rgExp/substr,replaceText)   返回替换后的字符串

7.str.match(rgExp);  正则匹配

数组常方法：

数组：

1.push(): 向数组尾部添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

1 var arr = [1,2,3];
2 console.log(arr);        //  [1, 2, 3]
3 var b = arr.push(4);  
4 console.log(b);          //  4   //表示当前数组长度
5 console.log(arr);        // [1, 2, 3, 4]   

pop(): 删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

1 var arr = [1,2,3];
2 console.log(arr);                // [1,2,3]
3 arr.pop();
4 console.log( arr.pop() );　　// [3]　　//返回删除的元素
5 console.log(arr);                // [1,2] 

 2.unshift():在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

1 var arr = ['a', 'b', 'c'];
2 arr.unshift('x');        // 4
3 console.log(arr);        // ['x', 'a', 'b', 'c']

shift():删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

1 var arr = ['a', 'b', 'c'];
2 arr.shift()         // 'a'
3 console.log(arr)     // ['b', 'c']    

shift()方法还可以遍历并清空一个数组。

1 var list = [1, 2, 3, 4, 5, 6];
2 var item;
3 
4 while (item = list.shift()) {
5   console.log(item);
6 }
7 
8 console.log(list);     // []

 3.valueOf():返回数组的本身。

1 var arr = [1, 2, 3];
2 arr.valueOf()     // [1, 2, 3]    

indexOf():返回指定元素在数组中出现的位置，如果没有出现则返回-1。

1 var arr = ['a', 'b', 'c'];
2 
3 arr.indexOf('b') // 1
4 arr.indexOf('y') // -1

indexOf方法还可以接受第二个参数，表示搜索的开始位置。

1 ['a', 'b', 'c'].indexOf('a', 1)     // -1

上面代码从1号位置开始搜索字符a，结果为-1，表示没有搜索到。

toString():返回数组的字符串形式。

1 var arr = [1, 2, 3];
2 arr.toString()     // "1,2,3"
3 
4 var arr = [1, 2, 3, [4, 5, 6]];
5 arr.toString()     // "1,2,3,4,5,6"

4.join():以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

1 var arr = [1, 2, 3, 4];
2 
3 arr.join(' ')     // '1 2 3 4'
4 arr.join(' | ')     // "1 | 2 | 3 | 4"
5 arr.join()     // "1,2,3,4"

5.concat():用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

1 var arr = [1,2,3];
2 var b = arr.concat([4,5,6]);
3 console.log(b);        //[1,2,3,4,5,6]

6.reverse():用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。

1 var arr = ['a', 'b', 'c'];
2 
3 arr.reverse() // ["c", "b", "a"]
4 console.log(arr) // ["c", "b", "a"]

7.slice():用于截取原数组的一部分，返回一个新数组，原数组不变。

slice(start,end)它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。

 1 var arr = ['a', 'b', 'c'];
 2 
 3 arr.slice(0)         // ["a", "b", "c"]
 4 arr.slice(1)         // ["b", "c"]
 5 arr.slice(1, 2)     // ["b"]
 6 arr.slice(2, 6)     // ["c"]
 7 arr.slice()           // ["a", "b", "c"]    无参数返回原数组
 8 
 9 arr.slice(-2)          // ["b", "c"]    参数是负数，则表示倒数计算的位置
10 arr.slice(-2, -1)     // ["b"] 

8.splice():删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

splice(start,delNum,addElement1,addElement2,...)第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

1 var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
2 arr.splice(4, 2)     // ["e", "f"]　　从原数组4号位置，删除了两个数组成员
3 console.log(arr)     // ["a", "b", "c", "d"]

1 var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
2 arr.splice(4, 2, 1, 2)     // ["e", "f"]　　原数组4号位置，删除了两个数组成员,又插入了两个新成员
3 console.log(arr)         // ["a", "b", "c", "d", 1, 2]

1 var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
2 arr.splice(-4, 2)     // ["c", "d"]    起始位置如果是负数，就表示从倒数位置开始删除

1 var arr = [1, 1, 1];
2 
3 arr.splice(1, 0, 2)     // []    如果只插入元素,第二个参数可以设为0
4 conlose.log(arr)     // [1, 2, 1, 1]

1 var arr = [1, 2, 3, 4];
2 arr.splice(2)     // [3, 4] 如果只有第一个参数，等同于将原数组在指定位置拆分成两个数组
3 console.log(arr)     // [1, 2]

9.sort():对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

 1 ['d', 'c', 'b', 'a'].sort()
 2 // ['a', 'b', 'c', 'd']
 3 
 4 [4, 3, 2, 1].sort()
 5 // [1, 2, 3, 4]
 6 
 7 [11, 101].sort()
 8 // [101, 11]
 9 
10 [10111, 1101, 111].sort()
11 // [10111, 1101, 111]

上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照对应字符串的字典顺序排序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。

如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。

 1 var arr = [10111, 1101, 111];
 2 arr.sort(function (a, b) {
 3   return a - b;
 4 })
 5 // [111, 1101, 10111]
 6 
 7 var arr1 = [
 8               { name: "张三", age: 30 },
 9               { name: "李四", age: 24 },
10               { name: "王五", age: 28 }
11            ]
12 
13 arr1.sort(function (o1, o2) {
14   return o1.age - o2.age;
15 }) 
16 // [
17 //   { name: "李四", age: 24 },
18 //   { name: "王五", age: 28 },
19 //   { name: "张三", age: 30 }
20 // ]

10.map():对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。

1 var numbers = [1, 2, 3];
2 
3 numbers.map(function (n) {
4   return n + 1;
5 });
6 // [2, 3, 4]
7 
8 numbers
9 // [1, 2, 3]

上面代码中，numbers数组的所有成员都加上1，组成一个新数组返回，原数组没有变化。

 11.filter():参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

1 var arr = [1, 2, 3, 4, 5]
2 arr.filter(function (elem) {
3   return (elem > 3);
4 })
5 // [4, 5]

面试题：

1.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

function getDataType(data){  
    var getType=Object.prototype.toString;  
    var myType=getType.call(data);//调用call方法判断类型，结果返回形如[object Function]  
    var typeName=myType.slice(8,-1);//[object Function],即取除了“[object ”的字符串。  
    var copyData='';//复制后的数据  
    //console.log(data+" is "+myType);  
    switch(typeName){  
        case 'Number': copyData=data-0;  
                break;  
        case 'String': copyData="'"+data+"'";  
                break;  
        case 'Function': copyData=data;  
                break;  
        case 'Null': copyData=null;  
                break;  
        case 'Undefined': copyData="Undefined";  
                break;  
        case 'Array':   
                    copyData=[];//先将copyData变为空数组  
                    for(var i=0;i<data.length;i++){  
                        copyData[i]=data[i];//将data数组数据逐个写入copyData  
                    }  
                break;  
        case 'Object':   
                    copyData={};//先将copyData变为空对象  
                    for(var x in data){  
                        copyData[x]=data[x];  
                    }  
                break;  
        case 'Boolean': copyData=data;  
                break;  
        default : copyData=data;  
                break;  
    }  
    return copyData;  
}   

2.数组去重

 function fun(arr) {
            return Array.from(new Set(arr)); // Set本身是一个构造函数，用来生成Set数据结构,利用Array.from将Set结构转换成数组
        }
        console.log(fun([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));//Set可以接受一个数组（或者类数组对象）作为参数，用来初始化

3.对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

4.、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户