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

索引

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);

2、網路圖片轉成base64, 線上圖片或文件點擊下載（隱藏鏈接）

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