关于数组处理的技巧,很实用:
1. push():在数组末尾添加一个或多个元素。
2. pop():删除并返回数组的最后一个元素。
3. shift():删除并返回数组的第一个元素。
4. unshift():在数组开头添加一个或多个元素。
5. splice():从数组中删除元素,并在指定位置添加新元素。
6. slice():返回指定位置的数组元素。
7. concat():将两个或多个数组合并为一个新数组。
8. reverse():反转数组中的元素顺序。
9. sort():按照指定的顺序对数组中的元素进行排序。
10. join():将数组中的所有元素转换为一个字符串。
11. map():对数组中的每个元素执行指定的函数,并返回一个新数组。
12. filter():返回一个由数组中满足指定条件的元素组成的新数组。
13. reduce():对数组中的元素执行指定的函数,并返回一个累加值。
14. forEach():对数组中的每个元素执行指定的函数,没有返回值。
15. indexOf():返回指定元素在数组中的位置。
16. lastIndexOf():返回指定元素在数组中最后出现的位置。
1. 数组扁平化
将一个多层嵌套的数组变成一维数组,可以使用 Array.flat()
方法:
const arr = [1, 2, [3, 4, [5, 6]]];
const flatArr = arr.flat(Infinity);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]
在 flat()
方法中传入 Infinity 参数,可以将任意深度的嵌套数组扁平化。
2. 数组去重
去除数组中的重复项,可以使用 Set
和 Array.from()
方法:
const arr = [1, 2, 3, 2, 1, 4];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4]
将数组转换为 Set
类型,再使用 Array.from()
方法将其转换为数组,即可去除数组中的重复项。
3. 使用 Array.reduce()
求和
使用 Array.reduce()
方法可以很方便地对数组进行求和:
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 15
在 Array.reduce()
方法中传入一个回调函数,回调函数接受两个参数,第一个参数表示上一次的计算结果,第二个参数表示当前元素的值,回调函数返回值会作为下一次计算的上一次结果。在这个例子中,将初始值设为 0,然后将数组中的所有元素相加。
4. 使用解构赋值交换变量值
使用解构赋值可以很方便地交换两个变量的值:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
在这个例子中,我们使用解构赋值将变量 a
和 b
的值进行交换。
5. 使用 Array.every()
和 Array.some()
进行条件判断
使用 Array.every()
方法可以判断一个数组中的所有元素是否符合某个条件:
const arr = [1, 2, 3, 4, 5];
const isAllPositive = arr.every(item => item > 0);
console.log(isAllPositive); // true
在这个例子中,使用 Array.every()
方法判断数组中的所有元素是否大于 0。
使用 Array.some()
方法可以判断一个数组中是否存在符合某个条件的元素:
const arr = [1, -2, 3, -4, 5];
const hasNegative = arr.some(item => item < 0);
console.log(hasNegative); // true
在这个例子中,使用 Array.some()
方法判断数组中是否存在小于 0 的元素。
6. 数组过滤
可以使用 Array.filter() 方法过滤数组中的元素:
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item % 2 === 0);
console.log(filteredArr); // [2, 4]
在 filter() 方法中传入一个回调函数,该回调函数返回一个布尔值。如果返回值为 true,表示该元素应该包含在结果数组中;如果返回值为 false,表示该元素应该被排除在结果数组之外。
7. 数组映射
可以使用 Array.map() 方法将数组中的元素转换为新的值:
const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // [2, 4, 6, 8, 10]
在 map() 方法中传入一个回调函数,该回调函数返回一个新的值。该新的值将替换原数组中的元素,最终得到一个包含新值的新数组。
关于对象处理的技巧,很实用:
Object.keys():返回一个包含对象所有属性键名的数组。
Object.values():返回一个包含对象所有属性值的数组。
Object.entries():返回一个包含对象所有属性键值对的数组。
Object.assign():将多个对象合并为一个新对象,可以用于对象的浅拷贝。
Object.freeze():冻结一个对象,防止对其进行修改。
Object.seal():封闭一个对象,防止添加或删除属性,但允许修改现有属性。
Object.hasOwnProperty():检查对象是否具有指定的属性,不会检查原型链上的属性。
Object.getOwnPropertyNames():返回一个数组,包含对象自身所有属性(不包括继承的属性)的名称。
Object.getPrototypeOf():返回指定对象的原型(__proto__ 属性的值)。
Object.create():创建一个新对象,使用现有对象作为新对象的原型。
Object.defineProperty():定义或修改对象的属性,可以控制属性的特性(如可枚举、可配置、可写等)。
Object.getOwnPropertyDescriptor():返回指定对象属性的描述符。
Object.is():比较两个值是否相同,类似于 === 运算符,但处理 NaN 和 -0 的行为更准确。
Object.entries() 和解构:可以使用解构来遍历对象的键值对。
1. 对象解构和重命名
在解构对象时,可以使用重命名的方式对属性进行命名:
const person = { name: 'John', age: 30, gender: 'male' };
const { name: fullName, age, gender } = person;
console.log(fullName, age, gender); // John 30 male
在解构对象时,将属性名 name
重命名为 fullName
,可以更加清晰地表达代码的含义。
2. 对象合并
将多个对象合并为一个对象,可以使用 Object.assign()
方法:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObj = Object.assign({}, obj1, obj2, obj3);
console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
将空对象作为第一个参数传入 Object.assign()
方法,再传入多个对象,即可将它们合并为一个对象。
3. 对象属性检查
可以使用 Object.hasOwnProperty() 方法检查对象是否包含指定属性:
const obj = { name: 'Alice', age: 18 };
const hasName = obj.hasOwnProperty('name');
const hasGender = obj.hasOwnProperty('gender');
console.log(hasName); // true
console.log(hasGender); // false
在 hasOwnProperty() 方法中传入属性名,如果对象包含该属性,则返回 true;否则返回 false。
4. 对象属性复制
可以使用 Object.assign() 方法将一个对象的属性复制到另一个对象中:
const obj1 = { name: 'Alice', age: 18 };
const obj2 = { gender: 'female' };
const mergedObj = Object.assign(obj1, obj2);
console.log(mergedObj); // { name: 'Alice', age: 18, gender: 'female' }
在 assign() 方法中将目标对象和源对象作为参数传入,即可将源对象的属性复制到目标对象中。
5. 对象属性删除
可以使用 delete 运算符从对象中删除指定的属性:
const obj = { name: 'Alice', age: 18 };
delete obj.age;
console.log(obj); // { name: 'Alice' }
在 delete 运算符后面跟上属性名,即可从对象中删除指定的属性。
6. 对象属性枚举
可以使用 for...in 语句枚举对象的所有属性:
const obj = { name: 'Alice', age: 18 };
for (let key in obj) {
console.log(key, obj[key]);
}
// 'name' 'Alice'
// 'age' 18
在 for...in 语句中使用 key 变量遍历对象的所有属性名,并使用 obj[key] 语法获取对应属性的值。
7. 对象属性获取
- 使用 Object.keys() 方法获取对象的所有属性名,
- 使用 Object.values() 方法获取对象的所有属性值,
- 使用 Object.entries() 方法获取对象的所有属性键值对:
const obj = { name: 'Alice', age: 18 };
const keys = Object.keys(obj);
const values = Object.values(obj);
const entries = Object.entries(obj);
console.log(keys); // ['name', 'age']
console.log(values); // ['Alice', 18]
console.log(entries); // [['name', 'Alice'], ['age', 18]]
在 keys()、values() 和 entries() 方法中传入对象作为参数,即可获取对象的属性名、属性值或属性键值对。