0、引言
这周在工作中，遇到了许多数据转换的问题，主要为数组和对象，因此，在这篇文章中总结了一些常用的数组与对象方法
1、数组相关
- 数组转换字符串：toString（）、toLocaleString（）、join（*），最后一个可以制定转换为字符串时的分隔符
- 尾部操作：弹出尾部元素pop（）、尾部添加元素push（a）
- 首部操作：删除首部shift（）、首部插入unshift（a）
- 重排序：反转数组reverse（）、默认从小到大sort（）
let a = [1, 2, 3, 4, 5, 0.1]
a.sort(function (a, b){ return b - a }) //[ 5, 4, 3, 2, 1, 0.1 ] 降序
a.sort(function (a, b){ return a - b }) //[ 0.1, 1, 2, 3, 4, 5 ] 升序
const arr = [3, NaN, 2, 'a'];
console.log(arr.sort((a, b) => a - b)); // [3, NaN, 2, 'a']
但是sort方法使用过程中需要注意以下几点：
- 默认排序基于字符串字典顺序，数值排序必须提供比较函数，比较函数如上方代码所示
- 排序
会修改原数组，保留原数组需先复制 - 对于复杂数据，确保比较函数正确处理边界情况（如
NaN和本地化排序）
- 数组连接concat（）
let a = [1, 2, 3, 4, 5]
let b = [6, 7, 8, 9, 10]
let c = a.concat(b)
console.log(c); // [1, 2, 3, 4, 5 , 6, 7, 8, 9, 10]
不修改原数组，会返回一个新数组，适合需要保持原数组不变的场景- 使用扩展运算符也可以实现类似的效果
- 数组截取：slice（）
let a = [1, 2, 3, 4, 5]
console.log(a.slice(2)); // 从下标为2开始 [ 3, 4, 5 ]
console.log(a.slice(2,4)); // 左闭右开 [ 3, 4 ]
console.log(a.slice(1,5)); // 超出范围 [ 2, 3, 4, 5 ]
console.log(a.slice(-2)); // 倒数两个 [ 4, 5 ]
console.log(a.slice(2,-1)); // 取两个，从倒数第二个位置开始 [ 4, 5 ]
console.log(a.slice()); // 全部读取
const arr = [{ a: 1 }, { b: 2 }];
const result = arr.slice(0, 1);
result[0].a = 99;
console.log(arr[0].a); // 99 （共享引用）
- 不仅适用于数组，也适用于字符串，并且
不改变原数据 - 对于原始类型（如数字、字符串），拷贝的值是独立的，对于引用类型，拷贝则是引用
- 数组插入&&删除&&替换：splice（startIndex, deleteCount, item1, item2, ...）
const array = [1, 2, 3, 4, 5];
arr.splice(2) // 截取2个
console.log(arr); // [1,2]
array.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(array); // 输出: [1, 2, 4, 5]
array.splice(2, 0, 6); // 在索引 2 处插入元素 6，不删除任何元素
console.log(array); // 输出: [1, 2, 6, 3, 4, 5]
array.splice(2, 1, 6); // 从索引 2 处删除 1 个元素，并插入元素 6
console.log(array); // 输出: [1, 2, 6, 4, 5]
array.splice(1, 2, 6, 7, 8); // 从索引 1 处删除 2 个元素，并插入元素 6, 7, 8
console.log(array); // 输出: [1, 6, 7, 8, 4, 5]
array.splice(1, 3); // 从索引 1 处删除 3 个元素
console.log(array); // 输出: [1, 5]
array.splice(array.length, 0, 4); // 在数组末尾插入元素 4
console.log(array); // 输出: [1, 2, 3, 4]
会修改原数组
- 数组检测方法
// indexOf()方法
console.log(arr.indexOf(1)); //数组中有该元素，返回0，否则返回-1
// every()方法
console.log(arr.every(e => e > 0)); //true 数组中所有元素满足条件返回true，否则返回false
// some()方法
//用于检查数组中是否至少有一个元素满足指定的条件。这个方法会遍历数组的每个元素，直到找到一个满足条件的元素，如果找到了就返回 true，否则返回 false
console.log(arr.some(e => e % 2 == 0)); // true
// find()方法
// 用于查找数组中满足指定条件的第一个元素，并返回该元素，没有满足条件的返回underfined
console.log(arr.find(e) => e > 3) // 4
- 数组过滤方法
// for循环
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
// filter()方法
// 用于创建一个新数组，其中包含满足指定条件的原数组元素
console.log(arr.filter(e => e > 3)); //[ 4, 5 ]
// map()方法
// 用于创建一个新数组，该数组的元素是原始数组经过某个函数处理后的结果
console.log(arr.map(e => e * 2)); // [ 2, 4, 6, 8, 10 ]
// forEach()方法
// 用于遍历数组的每个元素，并对每个元素执行指定的操作
arr.forEach(function (e, index){
console.log(e);
}); //1 2 3 4 5
// for...of
const arr = [10, 20, 30];
for (const value of arr) {
console.log(value); // 输出: 10, 20, 30
}
2、对象相关
- Object.keys()：返回一个包含对象所有可枚举属性名称（键）的数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ['a', 'b', 'c']
- Object.values()：返回一个包含对象所有可枚举属性值的数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
- Object.entries()：返回一个包含对象所有可枚举属性
[key, value]对的数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]
- Object.freeze()
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // 不会生效
console.log(obj.a); // 1
- for...in：遍历对象的所有可枚举属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]); // 输出属性名和对应的值
}
3、for...in与for...of
- for...of在ES6中提出，主要用于遍历数组、字符串、
Map、Set等可迭代对象的 值，而不是对象的键或数组的索引。 - for...in主要用于遍历对象的键（或数组的索引）
在使用中，建议使用for...of来进行相关的数组遍历，他在遍历过程中，不会遍历继承而来的属性，所以比较准确，并且在遍历过程中，会按照相关的顺序进行遍历；而for...of会便利继承的属性并且顺序也不固定，可能会导致出现意外的结果
