Html5 面试题总结

localstorage和sessionstorage的区别

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信

常用的数组方法

forEach()  遍历数组

 var colors = ["red","blue","green"];

// ES5遍历数组方法

for(var i = 0; i < colors.length; i++){

console.log(colors[i]);//red blue green }

// ES6 forEach遍历

colors.forEach(function(color){

console.log(color);//red blue green  })

map

map：将数组映射成另一个数组

map通过指定函数处理数组的每个元素，并返回处理后新的数组，map 不会改变原始数组。

forEach和map的区别在于，forEach没有返回值。 map需要返回值，如果不给return，默认返回undefined

使用场景1 假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组

var numbers = [1,2,3];

var doubledNumbers = [];

// es5写法

for(var i = 0; i < numbers.length; i++){

 doubledNumbers.push(numbers[i] * 2);}

console.log(doubledNumbers);//[2,4,6]

// es6 map方法

var doubled = numbers.map(function(number){

 return number * 2;})

console.log(doubled);//[2,4,6]

Array.length 获取数组的长度 返回值 number

indexOf

arr.pop() 移除末尾的一个元素，返回移除的元素

push() 可向数组的末尾添加一个或多个元素，并返回新的长度，（用来改变数组长度）。

Splice的用法  ！！！

1. 删除功能 array.splice(index,num) 从index项起  删除num个

插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

array.splice(index,0,insertValue)

替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

array.splice(index,num,insertValue)

数组去重都有哪些方法？

得分点

对象属性、new Set() 、indexOf、hasOwnProperty、reduce+includes、filter

标准回答

第一种方法：利用对象属性key排除重复项：遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中，并且把数组元素作为key，设置一个值，存储在对象中，最后返回新数组。这个方法的优点是效率较高，缺点是占用了较多空间，使用的额外空间有一个查询对象和一个新的数组

第二种方法：利用Set类型数据无重复项：new 一个 Set，参数为需要去重的数组，Set 会自动删除重复的元素，再将 Set 转为数组返回。这个方法的优点是效率更高，代码简单，思路清晰，缺点是可能会有兼容性问题

第三种方法：这个方法比较巧妙，从头遍历数组，如果元素在前面出现过，则将当前元素挪到最后面，继续遍历，直到遍历完所有元素，之后将那些被挪到后面的元素抛弃。这个方法因为是直接操作数组，占用内存较少。

第四种方法：reduce +includes去重：这个方法就是利用reduce遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入到新数组中。这种方法时间消耗多，内存空间也有额外占用。

加分回答 

以上四个方法中，在数据低于10000条的时候没有明显的差别，高于10000条，第一种和第二种的时间消耗最少，后面两种时间消耗依次增加，由于第一种内存空间消耗比较多，且现在很多项目不再考虑低版本浏览器的兼容性问题，所以建议使用第二种去重方法，简洁方便。