8-13测试题归纳总结

1、localStorage、sessionStorage、cookie 的区别？

sessionStorage 和 localStorage是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
Web Storage带来的好处：减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储，也可以在服务器端存储。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：

都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同:

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持.
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据.
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

.2D 和 3D Transform中的一些用法

CSS3 2D transform特性可以旋转、倾斜、放大缩小和移动元素，对网页的视觉观感上提供很大的帮助

    transform: transform-function;   
    -webkit-transform: transform-function; /* Safari and Chrome */  
    -moz-transform: transform-function; /* Firefox */  
    -o-transform: transform-function; /* Opera */  
    -ms-transform:transform-function; /* IE9以上 */  

image.png

transform 3D & perspective

CSS3的transform可以做2D的操作，当然也有3D
但需要再一个拥有perspective属性的父元素才能显现3D的效果

<div id="div1"><!-- perspective -->  
  <div id="div2">3D</div><!-- transform -->  
</div>  

perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的角度，让底下子元素使用3D特效时能够完整显示。
perspective使用方法
perspective:150px;

/* 目前并非所有浏览器皆支援 */   
-webkit-perspective:150px;   
-moz-perspective:150px;  

另外还有个属性叫perspective-origin
功能是用来定义X和Y轴为基础的3D位置(定义初始位置)
perspective-origin使用方法：
属性值：(x轴：left、center、right、长度、百分比) (y轴：top、center、bottom、长度、百分比)

/* perspective-origin 参数预设是50% 50% */  
-webkit-perspective-origin: 40% 60%;/* Safari and Chrome */  
-webkit-perspective-origin: 40px 60px;/* Safari and Chrome */  
-moz-perspective-origin:left bottombottom; /* Firefox */  

注意：perspective和perspective-origin受影响的是子元素，而非元素本身
最后就可以对div做3D的效果(rotateX和rotateY)

-webkit-transform: rotateX(290deg);   
-webkit-transform: rotateY(290deg);   
-moz-transform: rotateX(290deg);   
-moz-transform: rotateY(290deg);  

3、0.1+0.2为什么不等于0.3?如何解决浮点的问题？了解bignumber.js的浮点数库函数

console.log(0.1+0.2===0.3); //true or false?
在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为false
如何解决？
怎样来解决0.1+0.2等于0.3? 方法是设置一个误差范围值，通常称为”机器精度“，而对于 JavaScript 来说，这个值通常是2^-52,而在 ES6 中，已经为我们提供了这样一个属性：Number.EPSILON，而这个值正等于2^-52。这个值非常非常小，在底层计算机已经帮我们运算好，并且无限接近0，但不等于0,。这个时候我们只要判断(0.1+0.2)-0.3小于Number.EPSILON，在这个误差的范围内就可以判定0.1+0.2===0.3为true

bignumber.js的浮点数库函数

bignumber.js 库中提供一个 BigNumber 的构造函数，参数必须是长度在15位以内的数字，可以使用2-36进制的数，超过36进制的也可以，不过需要自定义字母来表示了。0-9 加上a-z刚好到36，所以超过36就无法表示了，需要你定义其他的符号来表示了。

x = new BigNumber(1011, 2)          // "11"
y = new BigNumber('zz.9', 36)       // "1295.25"
z = x.plus(y)                       // "1306.25"

做小数运算

0.3 - 0.1                           // 0.19999999999999998
x = new BigNumber(0.3)
x.minus(0.1)                        // "0.2"
x                                   // "0.3"

链式语法调用

x.dividedBy(y).plus(z).times(9)
x.times('1.23456780123456789e+9').plus(9876.5432321).dividedBy('4444562598.111772').integerValu

和 js的Number类型类似，有一些常用的方法：

x = new BigNumber(255.5)
x.toExponential(5)                  // "2.55500e+2"
x.toFixed(5)                        // "255.50000"
x.toPrecision(5)                    // "255.50"
x.toNumber()                        // 255.5

toString方法

x.toString(16)                     // "ff.8"

4、

image.png

1. cd.>cc.txt
2. md test
3. dir
   4.ls -a
4. cd
5. del a.txt
   7.dpkg -i /path/to/packagename.deb

5

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); 
bar(10);

在foo中，声明一个变量tmp，他属于foo作用域下的变量。函数返回一个函数，这个函数被嵌套，函数内部弹出x+y（++tmp）
首先执行var bar = foo（2）；那么foo就执行了，参数2也传进去了，但是执行完毕之后，tmp变量以及参数x就已经被释放回收了吗？并没有，因为返回值里面还等待使用这些变量咯，所以此时，foo虽然执行了，但是foo的变量并没有被释放，在return在等待继续使用这些变量了，这个时候bar就是一个闭包.然后我们再执行bar，

5、call、apply、bind的作用是改变函数运行时this的指向。

call

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。

var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89

可以这么理解：

obj1.fn() 
obj1.fn.call(obj1);

fn1()
fn1.call(null)

f1(f2)
f1.call(null,f2)