對象的判空、遍歷及轉換和對數組的操做

在聯調時，發現後臺返回的不是數組，或者返回的類型與不爲空時的類型不同，這裏小結下對對象的操做

1.對象的判空

/* 先聲明一個對象字面量 */
let isObject = {};

• 將json對象轉化成json字符串，而後進行判斷是否等於字符串'{}'，直接寫{}沒法進行判斷

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

2.將對象轉換成數組

let listData = {a: 1, b: 2, c: 3};
let temporaryArray = [];

• 只須要將對象中的值轉換成數組時

for(let i in listData) {
    temporaryArray.push(listData[i]);
}
console.log(temporaryArray);

• 將對象中的鍵與值一塊兒轉換成數組

let temporaryArray2 = [];
for(let i in listData) {
    let temporaryObject = {};
    temporaryObject[i] = listData[i];
    temporaryArray2.push(temporaryObject);
}
console.log(temporaryArray2);

• 使用Object原生屬性

console.log(Object.values(listData));

3.將非數組轉換成數組

• Array.prototype.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));

4.判斷是否爲數組，返回true則爲數組

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

5.將數組轉換成鍵值對對象,能夠利用for循環

let transformObject = Object.assign({}, temporaryArray3);
console.log(transformObject);
let transformObject2 = {...temporaryArray3};
console.log(transformObject2);

6.講講深拷貝與淺拷貝

淺拷貝其實只是引用的拷貝，二者仍是指向內存中的同一個地址
深拷貝就是二者指向不一樣的內存地址，是真正意義上的拷貝

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

• 較經常使用的對象深拷貝方法

let copyObject = JSON.parse(JSON.stringify(temporaryObject2));
console.log(copyObject);
copyObject.a = 0;
console.log(copyObject);

• 數組slice淺拷貝

let copyArray = [1, 2, [1, 5], 3];
let copyArray1 = copyArray.slice(0);
console.log(copyArray1);
copyArray1[1] = 20;
copyArray1[2][1] = 23;
console.log(copyArray1);

• 數組concat淺拷貝

let copyArray2 = copyArray.concat();
console.log(copyArray2);
copyArray2[1] = 20;
copyArray2[2][1] = 23;
console.log(copyArray2);

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 判斷ios和Android及PC端
  • 純css實現瀑布流（multi-column多列及flex佈局）
  • 實現文字的省略號