いくつかの基本的な知識を整理します。
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 の「スプレッド演算子」の構文の 1 つです。反復可能なオブジェクト (配列、文字列など) を個々の要素に分割し、それらを別の反復可能なオブジェクトに挿入できます。
例: ...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
ご覧のとおり、この例では、中括弧 {} を使用して、name 属性と age 属性が myObj オブジェクトから抽出され、それらの対応する値が 2 つの変数 newName と newAge に割り当てられることを指定しています
。同時に、変数名と属性名が一致しない場合に、マッピング関係を指定するために : 記号も使用します。オブジェクトの分割代入には、デフォルト値の特性もあります。抽出されたプロパティがオブジェクトに存在しない場合、エラーを回避するためにデフォルト値を設定できます。例は次のとおりです。
const myObj = {
name: 'Lucas',
age: 25,
};
// 从 myObj 中提取 weight 属性，如果 weight 属性不存在则将默认值设为 60
const {
weight = 60} = myObj;
console.log(weight); // Output: 60