開發中常用的JS知識點集錦
阿新 • • 發佈:2018-11-20
索引
1、物件深拷貝 2、網路圖片轉base64, 線上圖片點選下載 3、物件深拷貝 4、物件深拷貝 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);
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>View Code