一些基础知识的巩固:
1、Array.prototype.map()
你可以使用 Array.prototype.map() 方法来遍历对象数组中的每个元素,并返回一个新的对象数组,该数组包含你需要的属性。
const users = [
{
id: 1, name: 'Alice', age: 25 },
{
id: 2, name: 'Bob', age: 30 },
{
id: 3, name: 'Charlie', age: 20 }
];
const userNames = users.map(user => {
return {
id: user.id, // 将原数组中的 id 属性复制到新数组中
name: user.name // 将原数组中的 name 属性复制到新数组中
};
});
console.log(userNames);
// Output: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]
2、Array.prototype.forEach()
可以使用 Array.prototype.forEach() 方法来遍历数组中的每个元素并将其转换为对象。
const fruits = ['apple', 'banana', 'orange'];
const fruitObjects = [];
fruits.forEach((fruit, index) => {
fruitObjects.push({
id: index + 1, // 为每个水果生成自增ID
name: fruit
});
});
console.log(fruitObjects);
// Output: [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }]
3、…js扩展运算符
… 是 JavaScript 中“扩展运算符”(Spread Operator)的语法之一。它可以将一个可迭代对象(比如数组、字符串等)拆分为单个元素,并将它们插入到另一个可迭代对象中。
例:…a 表示将数组 a 展开成单独的元素,可以用来实现数组的合并、复制、删除元素等操作。以下是一些 …a 的示例用法:
// 1.数组拼接
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 2.数组复制
const originalArr = [1, 2, 3];
const copyArr = [...originalArr]; // [1, 2, 3]
3.删除数组元素
const originalArr = [1, 2, 3];
const removedElementArr = [...originalArr.slice(0, 1), ...originalArr.slice(2)]; // [2, 3]
/*需要注意的是,使用 ... 运算符时需要将其放置在所需参数的前面。比如,在函数调用中,需要将 ...a 放在参数列表最前面以展开数组或其他可迭代对象:*/
function myFunction(arg1, arg2, ...args) {
// args 包含了所有未命名的参数,作为一个数组
}
myFunction(1, 2, 3, 4, 5);
4、对象解构赋值
对象的解构赋值是 ES6 中一个比较实用的语法特性,可以方便地从一个对象中提取需要的属性值,并赋值给新的变量。它通过一种模式匹配的方式,按照同样名称的属性赋值到新的变量上。示例代码如下:
const myObj = {
name: 'Lucas',
age: 25,
gender: 'male'
};
// 从 myObj 中提取 `name` 和 `age` 属性,分别赋值给 newName 和 newAge 变量
const {
name: newName, age: newAge} = myObj;
console.log(newName); // Output: 'Lucas'
console.log(newAge); // Output: 25
可以看到,在示例中,我们通过花括号 {} 来指定从 myObj 对象中提取 name 和 age 两个属性,并将其对应的值赋值到
newName 和 newAge 两个变量上。同时,我们还使用了 : 符号来指定变量名与属性名不一致时的映射关系。对象的解构赋值还具有默认值的特点。当所提取的属性在对象中不存在时,可以为其设置默认值以避免出现错误。示例如下:
const myObj = {
name: 'Lucas',
age: 25,
};
// 从 myObj 中提取 weight 属性,如果 weight 属性不存在则将默认值设为 60
const {
weight = 60} = myObj;
console.log(weight); // Output: 60