欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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种方法:

  1. 使用中间变量C
    C=A; A=B; B=C;
  2. 使用加减法运算(数值)
    A=A+B; B=A-B; A=A-B;
  3. 使用异或运算(数值)
    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;