開發中經常使用的JS知識點集錦

時間 2019-12-09

標籤開發中經常使用的知識集錦欄目 JavaScript 简体版

原文原文鏈接

索引javascript

一、對象深拷貝

二、網絡圖片轉base64, 在線圖片點擊下載

三、經常使用CSS樣式記錄（超出寬高省略展現/播放icon/按鈕背景顏色漸變...）

四、JS中某些數字間加減乘除會出現多位小數問題（精度丟失）

五、對象深拷貝

六、對象深拷貝

一、對象的深拷貝（一級屬性拷貝和多級屬性嵌套拷貝）java

//深拷貝函數（知足屬性多級嵌套）
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;
}

//一、測試對象的深拷貝
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"}    //全部層級深拷貝

*/


//二、測試數組的深拷貝
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

二、網絡圖片轉成base64, 在線圖片或文件點擊下載（隱藏連接）
es6

<div>
            <div onclick="clickMeDownload()">點我下載</div>
            
            <script type="text/javascript">
                /**
                 * 根據遠程圖片轉成base64數據 (遠程圖片和當前頁面不是同一域名時，須要進行web服務器配置，使其能夠跨域下載)
                 * @param url      圖片連接
                 * @param callback 回調函數
                 */
                function getBase64ByImgUrl(url, callback){
                    let canvas = document.createElement('canvas'),
                        ctx = canvas.getContext('2d'),
                        img = new Image;
                    img.crossOrigin = 'Anonymous';
                    img.onload = function(){
                        canvas.height = img.height;
                        canvas.width = img.width;
                        ctx.drawImage(img,0,0);

                        //獲取base64數據
                        let base64 = canvas.toDataURL('image/png');
                        //回調
                        if (callback){
                            callback(base64);
                        }
                        canvas = null;
                    }
                    img.src = url;
                }

                /**
                 * 把base64轉成文件流
                 * @param base64     base64數據
                 * @param filename   自定義文件的名字
                 */
                function getFileByBase64(base64, filename){

                    let arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                    while(n--){
                        u8arr[n] = bstr.charCodeAt(n);
                    }

                    return new File([u8arr], filename, {type:mime});
                }


                /**
                 * 測試例子：點擊下載，隱藏下載連接
                 */
                function clickMeDownload(){

                    let imgUrl = 'https://img2018.cnblogs.com/blog/454511/201811/454511-20181114115022054-611805083.png';

                    getBase64ByImgUrl(imgUrl, function(base64){
                        console.log(base64);

                        //建立a標籤, 設置a標籤的href屬性和download屬性
                        var aEle = document.createElement('a');
                        aEle.setAttribute('href', base64);
                        aEle.setAttribute('download', 'temp.png');
                        aEle.style.display = 'none'; //隱藏a標籤
                        document.body.appendChild(aEle);  //將a標籤添加到body裏
                        aEle.click();    //觸發a標籤點擊事件

                        document.body.removeChild(aEle);  //下載圖片後，移除a標籤

                    });
                }
            </script>
        </div>

View Code

三、經常使用CSS樣式記錄web

3.1 給定標籤寬高，內容超出限制寬高後，以省略點展現，示例：canvas

<div class="text-box">寬度500px, 高度50px，超出高度後後綴...展現。這倆人是現今世上，手段最高明的摸金校尉，都有萬夫不擋之勇，神鬼莫測之機，兼有云長之忠，翼德之猛，子龍之勇，孔明之智，那面古鏡必定就是他們從雲南掏出來的。</div>

View Code

/* 六、超出限制寬高後省略點展現
            多行後顯示省略點，只應用於-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屬性，設置出外圓邊框，內三角形圖標跨域

<span class="video-icon"></span>

/* 五、視屏圖標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 單選切換：兩個按鈕，只能選中一個，左邊按鈕的左邊和右邊按鈕的右邊圓角數組

<div class="grade_box"><div class="grade_first grade_sel">一級分類</div><div class="grade_second">二級分類</div></div>
        <script type="text/javascript">
            var gradeList = (document.getElementsByClassName('grade_box')[0]).children;

            for (var i = 0; i < gradeList.length; i++){
                var obj = gradeList[i];

                obj.setAttribute('index', i);

                obj.onclick = function(){
                    var index = this.getAttribute('index');

                    console.log(this);

                    if (index == 0){
                        gradeList[0].className = 'grade_first grade_sel';
                        gradeList[1].className = 'grade_second';
                    }
                    else{
                        gradeList[0].className = 'grade_first';
                        gradeList[1].className = 'grade_second grade_sel';
                    }
                }
            }
        </script>

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 按鈕背景顏色漸變瀏覽器

<div class="bg_change_btn">四、按鈕背景顏色漸變</div>

.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

四、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