JS笔记(长期更新的js杂七杂八)
程序员文章站
2024-01-23 20:59:16
...
1.使用window.crypto.getRandomValues方法生成随机数组
crypto.getRandomValues接受一个参数typedArray,typedArray的值可以是如下对象的实例:
Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array
例如要生成6个0~256的随机整数组成的数组可以这样做:
var array = new Uint8Array(6); window.crypto.getRandomValues(array);
2.使用字面量重写构造函数prototype属性时constructor指向问题的解决
function Demo(){} Demo.prototype={} var pp=new Demo; pp.constructor;//Object.....(我们期望的值是Demo,但是由于pp.__proto__.__proto__.constructor是Object,最终使得此处为Object) //解决办法,使用Object.defineProperty为构造函数的prototype手动添加constructor属性并指向Demo Object.defineProperty(Demo.prototype,"constructor",{ value:Demo, enumerable:false //因为默认是可枚举的,所以此处必须设置 }); Demo.prototype.propertyIsEnumerable("constructor");//false //如果不设置enumerable像下面这样 Demo.prototype.constructor=Demo; //那么constructor是可以被枚举的 Demo.prototype.propertyIsEnumerable("constructor");//true //测试 var ii=new Demo; ii.constructor;//Demo
3.两个变量A和B交换值的3种方法:
- 使用中间变量C
C=A; A=B; B=C; - 使用加减法运算(数值)
A=A+B; B=A-B; A=A-B; - 使用异或运算(数值)
A=A^B; B=A^B; A=A^B;
4.一个有关函数作用域与全局变量赋值的问题
var addCount; function rr() { var count = 0; addCount = function () { count++; } function r2() { console.log(count); } return r2; } var res1 = rr(); var res2 = rr(); addCount(); res1(); //0 res2(); //1
分析:
为什么第一次执行res1输出0,而第二次是1;
此处的关键在于addCount变量,它是一个全局变量,只有一个;
当对res1赋值成功时,addCount被赋值成功,但是,当res2被赋值成功时,addCount又被重新赋值,所以最终addCount是在res2里面被赋值成功的,也在res2里面形成了闭包,而与res1已经断了关系;
理解了上面这个,那么下面的这种情况也就不难理解了,和上面是同样的道理:
var addCount; function rr() { var count = 0; addCount = function () { count++; } function r2() { console.log(count); } return r2; } var res1 = rr(); addCount(); addCount(); var res2 = rr(); addCount(); var res3 = rr(); addCount(); res1(); //2 res2(); //1 res3(); //1
5.文字超出部分显示省略号
.text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
6.关于parseInt方法的一个需要注意的地方
["1","2","3"].map(parseInt);//[1,NaN,NaN]
这里稍不注意就会以为是输出[1,2,3],而忽略了parseInt其实是可以有两个参数的,所以实际执行的时候应该是这样的:
//会将item和index两个参数都传入进去,因为对于parseInt来说这样是允许的 parseInt("1",0); parseInt("2",1); parseInt("3",2);
如果换成诸如Number或parseFloat这种只允许一个参数的方法则是正常的
7.永久修改npm源
#编辑文件~/.npmrc(如果没有此文件,创建即可) vi ~/.npmrc #在文件中加入以下配置 registry = https://registry.npm.taobao.org #保存退出 #使用命令npm config list查看是否生效
8.含中文的字符串验证小例子
//限制字节长度 function navigatorId(id){ //双字节字符(这里只匹配了中文)都换成两个a字母 var newId=id.replace(/[\u4e00-\u9fa5]/g,"aa"); return /^\w{0,20}$/.test(newId); }
9.mouseout和mousemove的事件冒泡带来的问题,解决方法
结合mouseenter和mouseleave来做,或者直接代替
10.去掉页面滚动条
/***两个方向都隐藏****/ html{ overflow:hidden; } /***隐藏垂直方向滚动条****/ html{ overflow-y:hidden; } /***隐藏水平方向滚动条****/ html{ overflow-x:hidden; }
11.只用css实现div盒子高度根据父容器宽度的变化自适应
#box{ width:25%;//会相对于父容器 height:0; padding-bottom:25%;//会相对于父容器 } /**** box里面可以放任意的东西 ****/
12.ElementObj.getBoundingClientRect()
其中包含某个元素相对于视窗的位置集合,集合中有top, right, bottom, left等属性,兼容IE6
var box=document.getElementById('box'); // 获取某个元素 box.getBoundingClientRect().top; // 元素上边距离页面上边的距离 box.getBoundingClientRect().right; // 元素右边距离页面左边的距离 box.getBoundingClientRect().bottom; // 元素下边距离页面上边的距离 box.getBoundingClientRect().left; // 元素左边距离页面左边的距离
13.字符串比较
a.localeCompare(b);//1或-1
14.通过ele或document获取window
var doc = ele.ownerDocument; var win = doc.defaultView;
上一篇: 使用Ruby编写发送邮件的程序的简单教程
推荐阅读
-
JS笔记(长期更新的js杂七杂八)
-
dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnose
-
遇见 vue.js --------阿文的vue.js学习笔记(目录)
-
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件_javascript技巧
-
自己收集的好玩的JS特效(持续更新)
-
vue.js通过自定义指令实现数据拉取更新的实现方法
-
了不起的node.js读书笔记之node.js中的特性_node.js
-
前端新人学习笔记-------html/css/js基础知识点(三) - 不穿裤子的衣服
-
火狐浏览器更新到新版本之后 禁用JS的选项没有了的解决方法
-
JS学习笔记:JS 的function( window, undefined ) {}(window)写法