前端常用数据处理方法

Posted 2022-04-07 黑子Kuroko

本文主要介绍的是项目开发过程中使用频率较高的一些数据处理方法，其他一些不太常用的方法就不在此处多做介绍了，有兴趣的同学可以自行延伸探索哦~

数据类型

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. indexOf
2. includes
   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]