Array.prototype.map()和Array.prototype.forEach()的区别

一些基础知识的巩固:

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

猜你喜欢

转载自blog.csdn.net/weixin_56733569/article/details/130389671