JavaScript 中有用的 Array 和 Object 方法

.filter()

查看MDN文档

根据数组元素是否通过特定条件测试来创建新数组。

示例

创建一个符合法定饮酒年龄的学生年龄数组。

	JavaScript 代码:



	
	

		const studentsAge = [17, 16, 18, 19, 21, 17];
	

	

		const ableToDrink = studentsAge.filter( age => age > 18 );
	

	

		// ableToDrink 将等于 [19, 21]
	

.map()

查看MDN文档

通过操作一个数组中的值来创建一个新数组。 这个方法非常适合数据操作，它经常用于React，因为它是一种不可变的方法。

示例

创建一个数组，在每个数字的开头添加一个$。

	JavaScript 代码:



	
	

		const numbers = [2, 3, 4, 5];
	

	

		const dollars = numbers.map( number => '$' + number);
	

	

		// dollars 将等于 ['$2', '$3', '$4', '$5']
	

.reduce()

查看MDN文档

这是一个经常被忽视的方法，使用一个累加器将数组中的所有元素项减少为单个值。非常适合计算总数。返回的值可以是任何类型（即对象，数组，字符串，整数）。

示例

把数组中的整数加起来。

	JavaScript 代码:



	
	

		const numbers = [5, 10, 15];
	

	

		const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
	

	

		// total 将等于 30
	

在MDN文档中，列出的 .reduce() 一些非常酷的用例，比如如何执行平铺数组，通过属性对对象分组，以及删除数组中的重复项等操作示例。

.forEach()

查看MDN文档

在数组中的每个元素项上应用一个函数。

示例

将每个数组元素项记录到控制台

	JavaScript 代码:



	
	

		const emotions = ['happy', 'sad', 'angry'];
	

	

		emotions.forEach( emotion => console.log(emotion) );
	

	

		// 控制台将打印:
	

	

		// 'happy'
	

	

		// 'sad'
	

	

		// 'angry'
	

.some()

查看MDN文档

检查数组中的任何元素是否通过该条件。一个好的用例是检查用户权限。它也可以类似于.forEach()，您可以在每个数组项上执行操作，并在返回真值(truthy)后跳出循环。

示例

检查数组中是否至少有一个’admin’。

	JavaScript 代码:



	
	

		const userPrivileges = ['user', 'user', 'user', 'admin'];
	

	

		const containsAdmin = userPrivileges.some( element => element === 'admin');
	

	

		// containsAdmin 将等于 true
	

.every()

查看MDN文档

与 .some() 类似，但检查数组中的所有项是否通过条件。

示例

检查所有评级是否等于或大于3星。

	JavaScript 代码:



	
	

		const ratings = [3, 5, 4, 3, 5];
	

	

		const goodOverallRating = ratings.every( rating => rating >= 3 );
	

	

		// goodOverallRating 将等于 true
	

.includes()

查看MDN文档

检查数组是否包含某个值。它类似于 .some() ，但是它不是寻找要传递的条件，而是查看数组是否包含一个特定的值。

示例

检查数组是否包含字符串 ‘waldo’ 元素项。

	JavaScript 代码:



	
	

		const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
	

	

		const includesWaldo = names.includes('waldo');
	

	

		// includesWaldo 将等于 true
	

Array.from()

查看MDN文档

这是一种基于另一个数组或字符串创建数组的静态方法。 您还可以将 map回调函数作为参数，新数组中的每个元素会执行该回调函数。 老实说，我不太确定为什么有人会通过 .map() 方法使用它。

示例

从一个字符串创建一个数组。

	JavaScript 代码:



	
	

		const newArray = Array.from('hello');
	

	

		// newArray 将等于 ['h', 'e', 'l', 'l', 'o']
	

创建一个数组，该数组的值是另一个数组中每个值的两倍。

	JavaScript 代码:



	
	

		const doubledValues = Array.from([2, 4, 6], number => number * 2);
	

	

		// doubleValues 将等于 [4, 8, 12]
	

Object.values()

查看MDN文档

返回一个对象属性值的数组。

示例

	JavaScript 代码:



	
	

		const icecreamColors = {
	

	

		 chocolate: 'brown',
	

	

		 vanilla: 'white',
	

	

		 strawberry: 'red',
	

	

		}
	

	

		 
	

	

		const colors = Object.values(icecreamColors);
	

	

		// colors 将等于 ["brown", "white", "red"]
	

Object.keys()

查看MDN文档

返回一个对象属性名的数组。

示例

	JavaScript 代码:



	
	

		const icecreamColors = {
	

	

		 chocolate: 'brown',
	

	

		 vanilla: 'white',
	

	

		 strawberry: 'red',
	

	

		}
	

	

		 
	

	

		const types = Object.keys(icecreamColors);
	

	

		// types 将等于 ["chocolate", "vanilla", "strawberry"]
	

Object.entries()

查看MDN文档

创建一个数组，其中包含一个对象的键/值对数组。

示例

	JavaScript 代码:



	
	

		const weather = {
	

	

		 rain: 0,
	

	

		 temperature: 24,
	

	

		 humidity: 33,
	

	

		}
	

	

		 
	

	

		const entries = Object.entries(weather);
	

	

		// entries 将等于
	

	

		// [['rain', 0], ['temperature', 24], ['humidity', 33]]
	

Array spread (数组展开)

查看MDN文档

使用展开运算符（ ... ）展开数组，允许你展开数组中的元素。 将一堆数组连接在一起时非常有用。 当从数组中删除某些元素时，避免使用 splice() 方法也是一种好方法，因为它可以与 slice() 方法结合使用，以防止数组的直接突变。

示例

组合两个数组。

	JavaScript 代码:



	
	

		const spreadableOne = [1, 2, 3, 4];
	

	

		const spreadableTwo = [5, 6, 7, 8];
	

	

		 
	

	

		const combined = [...spreadableOne, ...spreadableTwo];
	

	

		// combined 将等于 [1, 2, 3, 4, 5, 6, 7, 8]
	

删除一个数组元素而不改变原始数组。

	JavaScript 代码:



	
	

		const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
	

	

		const mammals = [...animals.slice(0,3), ...animals.slice(4)];
	

	

		// mammals 将等于 ['squirrel', 'bear', 'deer', 'rat']
	

Object spread (对象展开)

查看MDN文档

展开一个对象，允许向一个对象添加新的属性和值，而不突变(比如创建一个新对象)，也可以将多个对象组合在一起。应该注意的是，展开对象不会进行嵌套复制。

示例

添加一个新的对象属性和值，而不会改变原始对象。

	JavaScript 代码:



	
	

		const spreadableObject = {
	

	

		 name: 'Robert',
	

	

		 phone: 'iPhone'
	

	

		};
	

	

		 
	

	

		const newObject = {
	

	

		 ...spreadableObject,
	

	

		 carModel: 'Volkswagen'
	

	

		}
	

	

		// newObject 将等于
	

	

		// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }
	

Function Rest （剩余参数）

查看MDN文档

函数可以使用 rest（剩余）参数语法接受任意数量的参数作为数组。

示例

显示传递参数的数组。

	JavaScript 代码:



	
	

		function displayArgumentsArray(...theArguments) {
	

	

		 console.log(theArguments);
	

	

		}
	

	

		 
	

	

		displayArgumentsArray('hi', 'there', 'bud');
	

	

		// 将打印 ['hi', 'there', 'bud']
	

Object.freeze()

查看MDN文档

防止你修改现有的对象属性或向对象添加新的属性和值。通常人们认为 const 会这样做，但是 const 允许你修改对象。

示例

冻结对象以防止更改 name 属性。

	JavaScript 代码:



	
	

		const frozenObject = {
	

	

		 name: 'Robert'
	

	

		}
	

	

		 
	

	

		Object.freeze(frozenObject);
	

	

		 
	

	

		frozenObject.name = 'Henry';
	

	

		// frozenObject 将等于 { name: 'Robert' }
	

Object.seal()

查看MDN文档

拒绝将任何新属性添加到对象，但允许更改现有属性。

示例

封闭一个对象，以防止添加 wearsWatch 属性。

	JavaScript 代码:



	
	

		const sealedObject = {
	

	

		 name: 'Robert'
	

	

		}
	

	

		 
	

	

		Object.seal(sealedObject);
	

	

		 
	

	

		sealedObject.name = 'Bob';
	

	

		sealedObject.wearsWatch = true;
	

	

		// sealedObject 将等于 { name: 'Bob' }
	

Object.assign()

查看MDN文档

允许对象组合在一起。不再需要这个方法，因为您可以使用上面说的对象展开语法。与对象展开操作符一样，Object.assign() 也不会执行深层克隆。当谈到深度克隆对象时，Lodash 是你最好的朋友。

示例

将两个对象组合成一个。

	JavaScript 代码:



	
	

		const firstObject = {
	

	

		 firstName: 'Robert'
	

	

		}
	

	

		 
	

	

		const secondObject = {
	

	

		 lastName: 'Cooper'
	

	

		}
	

	

		 
	

	

		const combinedObject = Object.assign(firstObject, secondObject);
	

	

		// combinedObject 将等于 { firstName: 'Robert', lastName: 'Cooper' }