Object.prototype.toString.call([]); //控制台输出[object Array] Object.prototype.toString.apply(""); //控制台输出[object String]
二、HTML5的API接口getBoundingClientRect(),可以在JS中获取页面元素的位置信息,包括top、right、bottom、left、width、height等元素位置、属性信息。
console.log(document.getElementById("demo").getBoundingClientRect());
三、js中不同循环方法解析:for forIn forOf
for:获取所有符合条件的,然后一个个进行遍历
forIn:获取所有的下标,然后根据下标找出符合的元素
forOf:是ES6中新增的一种循环方法,可以直接获取对象的值
性能上,forOf性能最好,for次之,for最差
应用:原来,我们遍历元素集合,一般使用for循环,或者forEach方法 [].forEach.call(nodeList,function(){}).
现在,我们可以直接使用forOf进行遍历 for(var item of nodeList){} 直接获取元素集合中的元素。
四、前端优化,遵循高内聚,低耦合的准则
将业务代码归在一起,算法代码(纯函数)单独建立
纯函数概念:
1、代码内容仅仅只用到了传入的参数;
2、没有影响到任何外面的参数;
3、不对页面业务产生任何干扰。(执行纯函数后,页面渲染不发生改变)
纯函数是业务逻辑分离出來的逻辑,最好加上注释,便于理解和复用
/**
*@param 差值算法
*@p0:初始状态
*@p1:结束状态
*@t:变化函数
*/
五、arguments.callee调用函数自身
在函数中,使用arguments.callee()可以调用函数本身,相当于面向对象中的递归。但是ES5以后已经不建议使用了,建议使用函数名调用函数自身。
六、在web开发中,当元素内容超出元素盒模型时,我们通常会使用滚动条来显示元素的所有内容,但是浏览器自带的滚动条太丑了,在谷歌浏览器中,我们可以使用伪元素 ::-webkit-scrollbar{} 来自定义滚动条的样式;也可以在滚动条中设置内边距 padding-left:100px; 来隐藏滚动条。
七、perspective-origin的使用
目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴(属性值只有两个)。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。
注释:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。
八、不使用for循环,输出1到100.
var arr = Array.from({length:100}, (v,k) => k); alert(arr.join(","));Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。
伪数组对象(拥有一个 length 属性和若干索引属性的任意对象),如在js中通过get获取的DOM元素
可迭代对象(可以获取对象中的元素,如 Map和 Set 等)
九、html dtd
DTD (Document Type Definition) 文档类型定义
从理论上讲,文档声明确实没必要了,但是由于历史原因又不得不保留,所以简化成了这个样子。因为最早期HTML标准一片混乱的时候,大家都不写文档声明的,而这些网页往往都是适配IE6以下的,就是现在我们说的怪异模式。后来,HTML标准逐步规范了,但是那个年代遗留的网页实在太多了,为了兼容它们,就做了个判断:只要没有文档声明的网页,都使用怪异模式渲染。所以,现在保留文档声明的唯一作用就是跟“历史遗留网页”区分开。