WEB前端資源代碼:常用篇
阿新 • • 發佈:2018-10-29
樹形數據 文件的 none tps element his 裏的 all 簡單
對象的判空
- 將json對象轉化成json字符串,然後進行判斷是否等於字符串‘{}‘,直接寫{}無法進行判斷
let isObject = {};
console.log(JSON.stringify(isObject) == ‘{}‘);
- 使用for循環來判斷,若不為空,則返回false
let listObject = { a: 1, b: 3, c: 4 }; function isEmptyObject() { for(let key in listObject) { return false; }return true; } console.log(isEmptyObject());
- 使用Object.keys()來判斷,返回的是一個數組,根據數組長度來判斷
function isEmptyObject2(obj) { return Object.keys(obj).length == 0; } console.log(isEmptyObject2(isObject));
- 對這個對象中一定存在的屬性進行判斷
console.log(isObject.id == null);
用對象的屬性查找數組裏的對象
var inventory = [ {name:‘apples‘, quantity: 2}, {name: ‘bananas‘, quantity: 0}, {name: ‘cherries‘, quantity: 5} ]; function findCherries(fruit) { return function(value){ return value.name == fruit } } console.log(inventory.find(findCherries(‘cherries‘))); // { name: ‘cherries‘, quantity: 5 }
將對象轉換成數組
Object.values()
方法返回一個給定對象自身的所有可枚舉屬性值的數組,值的順序與使用for...in
循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。
var obj = { foo: ‘bar‘, baz: 42 }; console.log(Object.values(obj)); // [‘bar‘, 42] // array like object var obj = { 0: ‘a‘, 1: ‘b‘, 2: ‘c‘ }; console.log(Object.values(obj)); // [‘a‘, ‘b‘, ‘c‘] // array like object with random key ordering // when we use numeric keys, the value returned in a numerical order according to the keys var an_obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ }; console.log(Object.values(an_obj)); // [‘b‘, ‘c‘, ‘a‘] // getFoo is property which isn‘t enumerable var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); my_obj.foo = ‘bar‘; console.log(Object.values(my_obj)); // [‘bar‘] // non-object argument will be coerced to an object console.log(Object.values(‘foo‘)); // [‘f‘, ‘o‘, ‘o‘]
Object.values()詳細參考地址:《MDN:Object.values(obj)
》
將類數組對象轉換成數組
- Array.prototype.slice.call(arguments)或者
[].slice.call(arguments)
/* 該方法可以將類數組對象轉換為數組,所謂類數組對象,就是含 length 和索引屬性的對象 * 返回的數組長度取決於對象 length 屬性的值,並且非索引屬性的值或索引大於 length 的值都不會被返回到數組中 * Array.prototype.slice.call(obj,start,end) start:方法中slice截取的開始位置,end終止位置,默認從0開始 * */ let testObject = { 0: ‘a‘, 1: ‘b‘, 2: ‘c‘, name: ‘admin‘, length: 3, }; /* 對象中必須定義length,且屬性值不能為非數字,非數字無法返回 */ console.log(Array.prototype.slice.call(testObject)); /* 或者簡寫為[].slice.call(testObject) */ console.log([].slice.call(testObject));
- Array.from()
/* Array、Set、Map 和字符串都是可叠代對象(WeakMap/WeakSet 並不是可叠代對象) * 這些對象都有默認的叠代器,即具有 Symbol.iterator 屬性 * 所有通過生成器創建的叠代器都是可叠代對象 * 可以用 for of 循環 * */ let testObject2 = { 0: ‘a‘, 1: ‘b‘, 2: ‘c‘, name: ‘admin‘, length: 3, }; console.log(Array.from(testObject2));
判斷是否為數組
let temporaryArray3 = [1,2,1,2,3]; console.log(temporaryArray3 instanceof Array); console.log(temporaryArray3.constructor == Array); console.log(Array.isArray(temporaryArray3)); console.log(Object.prototype.toString.call(temporaryArray3) === "[object Array]");
將數組轉換成鍵值對對象
let transformObject = Object.assign({}, temporaryArray3); console.log(transformObject); let transformObject2 = {...temporaryArray3}; console.log(transformObject2);
深拷貝與淺拷貝
較常用的對象深拷貝方法:
let copyObject = JSON.parse(JSON.stringify(obj));
- Object.assign
assign對對象分配賦值,實現淺拷貝,但是它有一個特殊的地方,可以處理第一層的深拷貝。
assign(targetObject, obj, obj1) assign會改變targetObject的值,較好的做法就是將targetObject定義為空對象{}
assign是將這個3者合並,若有相同的屬性,後面的屬性會覆蓋前面對象的屬性
let temporaryObject2 = {a: 1, d: {e: 3}}; let temporaryObject3 = {b: 1,a: 2}; let mergeObject = Object.assign({}, temporaryObject2, temporaryObject3); console.log(mergeObject); /* mergeObject.d.e不會改變temporaryObject2裏a的值,但會改變temporaryObject2裏e的值 */ mergeObject.a = 5; mergeObject.d.e = 5; console.log(mergeObject);
- 數組slice淺拷貝
let copyArray1 = copyArray.slice(0);
- 數組concat淺拷貝
let copyArray2 = copyArray.concat();
Date類的相關例
// 以chrome為例 new Date(); // Mon Oct 23 2017 23:38:02 GMT+0800 (CST) new Date(false); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(0); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(null); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(‘‘); // Invalid Date new Date(undefined); // Invalid Date
詳情參考:你可能不知道的 Date 類
JS 將有父子關系的數組轉換成樹形數據
data.forEach(ele => { let parentId = ele.parentId; if (parentId === 0) { //是根元素的hua ,不做任何操作,如果是正常的for-i循環,可以直接continue. } else { //如果ele是子元素的話 ,把ele扔到他的父親的child數組中. data.forEach(d => { if (d.id === parentId) { let childArray = d.child; if (!childArray) { childArray = [] } childArray.push(ele); d.child = childArray; } }) } }); //去除重復元素 data = data.filter(ele => ele.parentId === 0); console.log(‘最終等到的tree結構數據: ‘, data);
前端通過Blob下載文件流
先看下網上一個簡單的代碼片段:
let blob = new Blob([res], { type: `application / pdf` //word文檔為msword,pdf文檔為pdf }); let objectUrl = URL.createObjectURL(blob); let link = document.createElement("a"); let fname = `我的文檔`; //下載文件的名字 link.href = objectUrl; link.setAttribute("download", fname); document.body.appendChild(link); link.click();
全面:
/** * @param {String} resource 文件流 * @param {String} fileType 文件類型 * @param {String} fileName 文件名 * */ var downloadBlob=function(resource,fileType,fileName){ var data = new Blob([resource],{ type:fileType }); if(‘download‘ in document.createElement(‘a‘)){ //非IE var downloadUrl = window.URL.createObjectURL(data); var anchor = document.createElement("a"); anchor.href = downloadUrl; anchor.download = fileName; anchor.style.display = ‘none‘; document.body.appendChild(anchor); anchor.click(); window.URL.revokeObjectURL(anchor.href); document.body.removeChild(anchor); }else{ //IE10+下載 navigator.msSaveBlob(data, fileName); } }
調用方式:
downloadBlob(res,‘application/pdf‘,‘文檔名稱‘)
WEB前端資源代碼:常用篇