JS笔记(长期更新的js杂七杂八)

最新推荐文章于 2025-10-11 19:28:00 发布

最新推荐文章于 2025-10-11 19:28:00 发布 · 330 阅读

文章标签：

#javascript #web #html #css #ViewUI

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了前端开发中的多种实用技巧，包括生成随机数、解决构造函数指向问题、元素位置获取、字符串处理等内容，并提供了代码示例。

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;