前端常用數據處理方法

本文主要介紹的是項目開發過程中使用頻率較高的一些數據處理方法，其他一些使用頻率不高的方法就不在此處多做介紹了，有興趣的同學可以自行延伸探索哦~

數據類型

1. 值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol
2. 引用數據類型：對象(Object)、數組(Array)、函數(Function)
   兩者區別：
   存儲上，基本類型的值是存在棧中，引用類型的值是存在堆中，引用類型的指針是存在棧中；
   賦值上，基本類型是按值傳遞，引用類型是按指針傳遞。

深拷貝與淺拷貝

1. 賦值運算符（=）
2. 擴展運算符（…）
3. JSON.parse(JSON.stringify(a))

// 淺拷貝
var a = [1, 2, 3];
var a2 = a;
a2[0] = 9;
console.log(a); // [9, 2, 3]

// 簡單的深拷貝
var a = [1, 2, 3];
var a2 = [...a];
a2[0] = 9;
console.log(a); // [1, 2, 3]

// 複雜的深拷貝 - 失敗例子
var a = [{id: 1}, {id: 2}, {id: 3}];
var a2 = [...a];
a2.push({id: 4});
console.log(a); // [{id: 1}, {id: 2}, {id: 3}]
// 但是子元素還是屬於淺拷貝
a2[0].id = 9;
console.log(a); // [{id: 9}, {id: 2}, {id: 3}]

// 複雜的深拷貝 - 成功例子
var a = [{id: 1}, {id: 2}, {id: 3}];
var a2 = JSON.parse(JSON.stringify(a));
a2[0].id = 9;
console.log(a); //[{id: 1}, {id: 2}, {id: 3}]

判斷數據類型

1. typeof
2. instanceof
   區別：
   typeof 一般只能返回如下幾個結果：
   number, boolean, string, function, object(NULL, 數組, 對象), undefined
   instanceof 可用於判斷一個變量是否某個對象的實例

// 判斷是否爲數組
var a = [];
var b = {};
typeof(a); // "object"
typeof(b); // "object"
Array.isArray(a); // true
Array.isArray(b); // false
// 其他方法
a instanceof Array; // true
b instanceof Object; // true

// 判斷是否爲空對象
var data = {};
JSON.stringify(data) === "{}"; // true
// 其他方法
Object.keys(data).length === 0; // true

數組轉換

1. join 數組轉字符串
2. split 字符串轉數組

var a = [1, [2, [[3, 4], 5], 6]]
a.join().split(‘,’);
// 輸出：[1,2,3,4,5,6]

數組遍歷

1. for
2. forEach
3. map
4. for of

var a = [{id: 1}, {id: 2}, {id: 3}]
// for
// 使用臨時變量，將長度緩存起來，避免重複獲取數組長度
let len = a.length;
for(let i = 0; i < len; i++) {}

// foreach -- 推薦使用
a.forEach((item, index, array) => {})
// 參數：item數組中的當前項, index當前項的索引, array原始數組
// 遍歷數組中的每一項，沒有返回值，對原數組沒有影響，不支持IE
// 注：這裏的“對原數組沒有影響”指的是原始數據類型的數組，引用數據類型的數組還是會受影響
// eg:
a.forEach(item => {
	item.id ++;
})
console.log(a);
// 輸出：[{id: 2}, {id: 3}, {id: 4}]

var b = [1, 2, 3];
b.forEach(item => {
	item ++;
})
console.log(b);
// 輸出：[1, 2, 3]

b.forEach((item, index, array) => {
	array[index] ++;
})
console.log(b);
// 輸出：[2, 3, 4]

// map -- 需要一份新數組時使用
a.map((item, index, array) => {})
// 同foreach，但是可以有返回值，相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了
var b = [1, 2, 3];
b = b.map(item => {
	return (item + 1);
})
console.log(b);
// 輸出：[2, 3, 4]

// for of
for(let i of a) {
	console.log(i);
	console.log(i.id);
}
// 輸出：{id: 1} 1 {id: 2} 2 {id: 3} 3

// for in
for(let i in a) {
	console.log(i);
	console.log(i.id);
}
// 輸出：0 undefined 1 undefined 2 undefined

數組過濾

1. filter
2. find

var a = [{id: 1}, {id: 2}, {id: 3}]
// 取id大於1的數據
// filter
// 不會改變原始數組,返回新數組
// 注：這次是真的解耦，不影響任何類型的原數組
// eg:
let b = a.filter(item => item.id > 1);
console.log(b);
console.log(a);
// 輸出： 
// [{id: 2}, {id: 3}]
// [{id: 1}, {id: 2}, {id: 3}]

// 轉爲ES5語法，方便理解
let b = a.filter(function(item){
	return item.id > 1;
})

// 取id等於2的數據
// find
// find()方法返回數組中符合測試函數條件的第一個元素。否則返回undefined 
a.find(item => item.id == 2);
// 輸出：{id: 2}
a = [{id: 1}, {id: 2}, {id: 3}, {id: 2}];
// 輸出：{id: 2}

數組判斷

1. includes
2. indexOf
   Array.prototype.includes方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法類似。該方法屬於 ES7 ，但 Babel 轉碼器已經支持。沒有該方法之前，我們通常使用數組的indexOf方法，檢查是否包含某個值。

// eg:
var a = [1, 2, 3];
if (a.includes(3)) {}
// 或
if (a.indexOf(3) !== -1) {}

對象遍歷

1. for in
2. Object.keys(a)
3. Object.values(a)

// eg:
var a = {id: 1, name: "zhangsan", age: 18};
for(let key in a) {
	console.log(key + ":" + a[key]);
}
// 輸出：
// id:1
// name:zhangsan
// age:18

Object.keys(a);
// 輸出：["id", "name", "age"]

Object.values(a)
// 輸出：[1, "zhangsan", 18]