开发中常用的JS知识点集锦

索引

1、对象深拷贝

2、网络图片转base64, 在线图片点击下载

3、常用CSS样式记录（超出宽高省略展示/播放icon/按钮背景颜色渐变...）

4、JS中某些数字间加减乘除会出现多位小数问题（精度丢失）

5、对象深拷贝

6、对象深拷贝

1、对象的深拷贝（一级属性拷贝和多级属性嵌套拷贝）

//深拷贝函数（满足属性多级嵌套）
function deepCloneObj(sourceObj){
    var obj = (sourceObj instanceof Array) ? [] : {};
    
    for (var key in sourceObj){
        var tmp = sourceObj[key];
        
        //处理重复引用，防止死循环
        if (tmp === sourceObj){
            continue; 
        }

        if (typeof tmp === 'object'){
            obj[key] = arguments.callee(tmp); //属性为对象，递归深度复制
        }
        else{
            obj[key] = tmp;
        }
    }
    return obj;
}

//1、测试对象的深拷贝
var obj = {info:{name:'大锤'}, sign: 'xxx'};
var obj2 = Object.assign({}, obj);  //一级属性深拷贝 （es6的Object.assign函数特性）
var obj3 = {...obj};            //一级属性深拷贝 (es6扩展运算符)
var obj4 =  deepCloneObj(obj);  //递归深拷贝所有层级属性
var obj5 = JSON.parse(JSON.stringify(obj)); //深拷贝所有层级属性

console.log('obj: ', JSON.stringify(obj));
console.log('obj2: ', JSON.stringify(obj2));
console.log('obj3: ', JSON.stringify(obj3));
console.log('obj4: ', JSON.stringify(obj4));
console.log('obj5: ', JSON.stringify(obj5));
console.log(".........end..........");

setTimeout(function(){

    obj.sign = 'a**b'; 
    obj.info.name = '一二三';
    console.log('\n****update info ****');
    console.log('obj: ', JSON.stringify(obj));
    console.log('obj2: ', JSON.stringify(obj2));
    console.log('obj3: ', JSON.stringify(obj3));
    console.log('obj4: ', JSON.stringify(obj4));
    console.log('obj5: ', JSON.stringify(obj5));
    console.log(".........end..........");
},100);

/*
打印日志结果：
obj:  {"info":{"name":"大锤"},"sign":"xxx"}
obj2:  {"info":{"name":"大锤"},"sign":"xxx"}
obj3:  {"info":{"name":"大锤"},"sign":"xxx"}
obj4:  {"info":{"name":"大锤"},"sign":"xxx"}
obj5:  {"info":{"name":"大锤"},"sign":"xxx"}
.........end..........

****update info ****
obj:  {"info":{"name":"一二三"},"sign":"a**b"}   //只拷贝了第一级属性
obj2:  {"info":{"name":"一二三"},"sign":"xxx"}   //只拷贝了第一级属性
obj3:  {"info":{"name":"一二三"},"sign":"xxx"}   //只拷贝了第一级属性
obj4:  {"info":{"name":"大锤"},"sign":"xxx"}     //所有层级深拷贝
obj5:  {"info":{"name":"大锤"},"sign":"xxx"}    //所有层级深拷贝

*/


//2、测试数组的深拷贝
setTimeout(function(){
    console.log('\n\n.....数组的深拷贝测试....');
    var arr = [{name: '小明'}, true, 18];
    var arr2 = Object.assign([], arr);
    var arr3 = [...arr2];
    var arr4 = deepCloneObj(arr);
    var arr5 = JSON.parse(JSON.stringify(arr));

    console.log('arr: ', JSON.stringify(arr));
    console.log('arr2: ', JSON.stringify(arr2));
    console.log('arr3: ', JSON.stringify(arr3));
    console.log('arr4: ', JSON.stringify(arr4));
    console.log('arr5: ', JSON.stringify(arr5));
    console.log("......end......\n");

    setTimeout(function(){

        arr[0].name = '五六七', arr[1] = false, arr[2] = 99;
        console.log('arr: ', JSON.stringify(arr));
        console.log('arr2: ', JSON.stringify(arr2));
        console.log('arr3: ', JSON.stringify(arr3));
        console.log('arr4: ', JSON.stringify(arr4));
        console.log('arr5: ', JSON.stringify(arr5));

    }, 100);
    
    /*
    数组测试打印日志结果：
    .....数组的深拷贝测试....
    arr:  [{"name":"小明"},true,18]
    arr2:  [{"name":"小明"},true,18]
    arr3:  [{"name":"小明"},true,18]
    arr4:  [{"name":"小明"},true,18]
    arr5:  [{"name":"小明"},true,18]
    ......end......

    arr:  [{"name":"五六七"},false,99]
    arr2:  [{"name":"五六七"},true,18]    //只拷贝了第一级属性
    arr3:  [{"name":"五六七"},true,18]   //只拷贝了第一级属性
    arr4:  [{"name":"小明"},true,18]    //所有层级深拷贝
    arr5:  [{"name":"小明"},true,18]   //所有层级深拷贝
    */

},1000);

View Code

 

2、网络图片转成base64, 在线图片或文件点击下载（隐藏链接）

            
点我下载
            
            
        

View Code

 

3、常用CSS样式记录

3.1 给定标签宽高，内容超出限制宽高后，以省略点展示，示例：

宽度500px, 高度50px，超出高度后后缀...展示。这俩人是现今世上，手段最高明的摸金校尉，都有万夫不挡之勇，神鬼莫测之机，兼有云长之忠，翼德之猛，子龙之勇，孔明之智，那面古镜一定就是他们从云南掏出来的。

View Code

/* 6、超出限制宽高后省略点展示
            多行后显示省略点，只应用于-webkit内核； 移动端浏览器基本都是WebKit内核的，所以该样式适用于移动端
        */
        .text-box{
            margin-top: 20px; width: 500px; height: 50px; border:1px dashed #999; color: #999; line-height: 25px;
            overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
            -webkit-line-clamp: 2; /* 这个是设置最多展示几行 */
            -webkit-box-orient: vertical; word-break:break-all;
        }

View Code

3.2  一个标签，配合before和after属性，设置出外圆边框，内三角形图标

/* 5、视屏图标icon */
        .video-icon { display: inline-block; width: 30px; height: 30px; border: 2px solid blue; border-radius: 30px; position: relative; cursor: pointer; }
        .video-icon:after {
            position: absolute; left: 12px; top: 7px; content: '';
            border-width:8px 0 8px 10px; border-style:solid;
            border-color:transparent transparent transparent blue;
        }

View Code

3.3  单选切换：两个按钮，只能选中一个，左边按钮的左边和右边按钮的右边圆角

一级分类
二级分类
        

View Code

.grade_box { width: 300px; height: 40px; }
        .grade_box div {
            display: inline-block; height: 100%; width: 50%; line-height: 40px; text-align: center; background-color: #f4f4f4; color: #ff7800; border: 1px solid #ff7800; box-sizing: border-box; cursor: pointer;
        }
        .grade_box .grade_sel { background-color: #ff7800; color: #fff; }
        .grade_box .grade_first { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
        .grade_box .grade_second { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }

View Code

3.4 按钮背景颜色渐变

4、按钮背景颜色渐变

.bg_change_btn{
            width: 200px; height: 50px; line-height: 50px; border-radius: 50px; margin-top: 30px; text-align: center;
            background-image: linear-gradient(-45deg, orange 0%, yellow 100%), linear-gradient( green, black); cursor: pointer;
        }

View Code

 

4、JS中某些数字加减乘除会出现多位小数点现象，精度丢失，举例：

console.log("0.1+0.2 = ", 0.1+0.2);   //0.1+0.2 =  0.30000000000000004
console.log("0.1+0.7 = ", 0.1+0.7);   //0.1+0.7 =  0.7999999999999999
console.log("0.2+0.7 = ", 0.2+0.7)    //0.2+0.7 =  0.8999999999999999
console.log("1.1+0.3 = ", 1.1+0.3)    //1.1+0.3 =  1.4000000000000001

console.log("1.7-0.1 = ", 1.7-1.1);   //1.7-0.1 =  0.5999999999999999
console.log("1.7-1.2 = ", 1.7-1.3);   //1.7-1.2 =  0.3999999999999999
console.log("1.7-1.4 = ", 1.7-1.4);   //1.7-1.4 =  0.30000000000000004

console.log("1.10*100 =", 1.10*100);  //1.10*100 = 110.00000000000001
console.log("1.11*100 =", 1.11*100);  //1.11*100 = 111.00000000000001
console.log("1.12*100 =", 1.12*100);  //1.12*100 = 112.00000000000001
console.log("1.13*100 =", 1.13*100);  //1.13*100 = 112.99999999999999
console.log("1.14*100 =", 1.14*100);  //1.14*100 = 113.99999999999999
console.log("1.15*100 =", 1.15*100);  //1.15*100 = 114.99999999999999
console.log("1.16*100 =", 1.16*100);  //1.16*100 = 115.99999999999999

console.log("0.7/0.1 = ", 0.7/0.1);   //0.7/0.1 =  6.999999999999999
console.log("0.6/0.1 = ", 0.6/0.1);   //0.6/0.1 =  5.999999999999999

解决方式1，使用Math.round函数处理，假设数字变量名为num, 格式为：Math.round(num*100) / 100：

console.log("0.1+0.2 = ", Math.round((0.1+0.2)*100)/100);   //0.1+0.2 =  0.3
console.log("0.1+0.7 = ", Math.round((0.1+0.7)*100)/100);   //0.1+0.7 =  0.8
console.log("0.2+0.7 = ", Math.round((0.2+0.7)*100)/100)    //0.2+0.7 =  0.9
console.log("1.1+0.3 = ", Math.round((1.1+0.3)*100)/100)    //1.1+0.3 =  1.4

console.log("1.7-0.1 = ", Math.round((1.7-0.1)*100)/100);   //1.7-0.1 =  1.6
console.log("1.7-1.2 = ", Math.round((1.7-1.2)*100)/100);   //1.7-1.2 =  0.5
console.log("1.7-1.4 = ", Math.round((1.7-1.4)*100)/100);   //1.7-1.4 =  0.3

console.log("1.10*100 =", Math.round((1.10*100)*100)/100);  //1.10*100 = 110
console.log("1.11*100 =", Math.round((1.11*100)*100)/100);  //1.11*100 = 111
console.log("1.12*100 =", Math.round((1.12*100)*100)/100);  //1.12*100 = 112
console.log("1.13*100 =", Math.round((1.13*100)*100)/100);  //1.13*100 = 113
console.log("1.14*100 =", Math.round((1.14*100)*100)/100);  //1.14*100 = 114
console.log("1.15*100 =", Math.round((1.15*100)*100)/100);  //1.15*100 = 115
console.log("1.16*100 =", Math.round((1.16*100)*100)/100);  //1.16*100 = 116

console.log("0.7/0.1 = ", Math.round((0.7/0.1)*100)/100);   //0.7/0.1 =  7
console.log("0.6/0.1 = ", Math.round((0.6/0.1)*100)/100);   //0.6/0.1 =  6

 

解决方式2：使用parseInt函数，假设数字变量名为num, 格式为：parseInt(num*100 + 0.1)/100

console.log("0.1+0.2 = ", parseInt((0.1+0.2)*100+0.1)/100);   //0.1+0.2 =  0.3
console.log("0.1+0.7 = ", parseInt((0.1+0.7)*100+0.1)/100);   //0.1+0.7 =  0.8
console.log("0.2+0.7 = ", parseInt((0.2+0.7)*100+0.1)/100)    //0.2+0.7 =  0.9
console.log("1.1+0.3 = ", parseInt((1.1+0.3)*100+0.1)/100)    //1.1+0.3 =  1.4

console.log("1.7-0.1 = ", parseInt((1.7-0.1)*100+0.1)/100);   //1.7-0.1 =  1.6
console.log("1.7-1.2 = ", parseInt((1.7-1.2)*100+0.1)/100);   //1.7-1.2 =  0.5
console.log("1.7-1.4 = ", parseInt((1.7-1.4)*100+0.1)/100);   //1.7-1.4 =  0.3

console.log("1.10*100 =", parseInt((1.10*100)*100+0.1)/100);  //1.10*100 = 110
console.log("1.11*100 =", parseInt((1.11*100)*100+0.1)/100);  //1.11*100 = 111
console.log("1.12*100 =", parseInt((1.12*100)*100+0.1)/100);  //1.12*100 = 112
console.log("1.13*100 =", parseInt((1.13*100)*100+0.1)/100);  //1.13*100 = 113
console.log("1.14*100 =", parseInt((1.14*100)*100+0.1)/100);  //1.14*100 = 114
console.log("1.15*100 =", parseInt((1.15*100)*100+0.1)/100);  //1.15*100 = 115
console.log("1.16*100 =", parseInt((1.16*100)*100+0.1)/100);  //1.16*100 = 116

console.log("0.7/0.1 = ", parseInt((0.7/0.1)*100+0.1)/100);   //0.7/0.1 =  7
console.log("0.6/0.1 = ", parseInt((0.6/0.1)*100+0.1)/100);   //0.6/0.1 =  6

View Code