17个实用的JavaScript数组和对象的方法

原文： Useful Javascript Array and Object Methods
做者： Robert Cooper
译者：Jim Xiao

前段时间，我收听了一个很棒的Syntax FM播客，其中总结了一些实用的JavaScript数组和对象方法。这些方法能够帮助开发人员编写简洁可读的代码，而且这些原生的JavaScript方法减小了对相似Lodash这样第三方库的依赖。

本文中全部提到的函数方法都是能够链式调用的，意味着它们能够相互结合地使用。更重要的是，它们并不会变动原始数据，当使用React时，这点尤为重要。经过使用这些数组和对象的方法，你再也不须要for和while循环来得到数组和对象中的数据。

下面每一个函数都包含一个连接，能够跳转到相对应的中文mozilla developer network（MDN）的解释页面。

.filter()

建立一个新数组, 其包含经过所提供函数实现的测试的全部元素。

好比，建立一个学生年龄数组，该数组的值必须大于法定饮酒年龄：

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// [19, 21]

.map()

建立一个新数组，其结果是该数组中的每一个元素都调用一个提供的函数后返回的结果。该方法很是便于数据处理，并且在React代码中常看到，由于它不会改变原始数组中的数据。

好比，建立一个数组，在每一个数字的开头添加一个$符号：

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// ['$2', '$3', '$4', '$5']

.reduce()

这是一个常常被忽略的方法。对累加器和数组中的每一个元素（从左到右）应用一个函数，将其减小为单个值。该方法对于计算总数很是管用。返回值能够是任何类型(例如对象，数组，字符串，整数)。

好比，对数组中的元素进行加和运算：

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// 30

在MDN的文档中还有许多用到.reduce()方法的例子，好比展开数组，按属性分组对象以及删除数组中的重复项等。

.forEach()

对数组的每一个元素执行一次提供的函数。

好比，把数组中的每一个元素打印到控制台：

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion));
// 'happy'
// 'sad'
// 'angry'

.some()

判断数组中的某些元素是否经过由提供的函数实现的测试。一个颇有用的实例就是检查用户的权限。它在有些时候与.forEach()相似，不一样的是，当测试数组中的每一个元素的过程当中，若是一个truthy值返回，就会当即终止该循环。

好比，检查数组中是否至少有一个'admin'存在：

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
// true

.every()

检查是否数组中的每一个值都知足条件。

好比，检查数组中的评价是否都大于等于3颗星：

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// true

.includes()

检查是否一个数组包含一个肯定的值。与.some()类似，但它不是知足某个条件，而是判断是否该数列包含某个具体值。

好比，检查是否数列包含一项名为'waldo'的字符串：

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// true

Array.from()

这是一个能够从其余数组或者字符串中创造新array的方法。你也能够传入一个回调函数做为参数来操做新数组的数据。

好比，经过一个字符串来建立数组：

const newArray = Array.from('hello');
// ['h', 'e', 'l', 'l', 'o']

好比，建立一个数组，该数组的值是其余数组中每一个项的值的两倍：

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

Objects.values()

返回一个由给定对象本身的全部可枚举属性值的数组。

好比，返回一个对象全部的属性值：

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);
// ["brown", "white", "red"]

Objects.keys()

返回一个由给定对象的自身可枚举属性组成的数组。

好比，返回一个对象全部的属性名：

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);
// ["chocolate", "vanilla", "strawberry"]

Object.entries()

返回一个由一个给定对象的键值对组成的数组。

好比，返回一个对象全部的键值对构成的数组：

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array spread

在数组中使用扩展运算符（…）能够展开数组中的元素。将多个数组合并成一个数组时很是有用。并且当移除数组中的某个元素时，咱们也可使用扩展运算符，而不须要常规的splice()方法，由于splice()方法会修改原始数组中的数据。

好比，合并两个数组：

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];

const combined = [...spreadableOne, ...spreadableTwo];
// [1, 2, 3, 4, 5, 6, 7, 8]

好比，移除数组中的元素而不改变原数组：

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];
// ['squirrel', 'bear', 'deer', 'rat']

Object spread

扩展对象容许为一个没有更改的对象添加新的属性和方法（换句话说，建立了一个新对象）。对象扩展符也能够把多个对象合并在一块儿。注意，该方法不适合嵌套对象的复制。

好比，为新对象添加属性和值而并不影响原始的对象：

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Function rest

函数可使用剩余参数的语法来接受任意数量的实参。

好比，显示传入的实参数组：

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');
// ['hi', 'there', 'bud']

Object.freeze()

防止修改现有的对象属性或者向对象添加新的属性和值。一般认为该功能跟const很像，可是，const能够容许修改对象中的属性。

好比，冻结一个对象以防止更改其属性：

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';
// { name: 'Robert' }

Object.seal()

中止将任何新属性添加到对象，但仍容许更改现有属性。

好比：密封对象以防止添加wearWatch属性：

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// { name: 'Bob' }

Object.assign()

容许将对象组合在一块儿。由于有了对象扩展的语法，Object.assign()的方法变得不那么重要。与对象扩展符同样，它也不能实现深拷贝。若是想实现对象的深拷贝，一个很好的方法是使用像Lodash这样的第三方库。

好比， 把两个对象合并成一个：

const firstObject = {
  firstName: 'Robert'
}

const secondObject = {
  lastName: 'Cooper'
}

const combinedObject = Object.assign(firstObject, secondObject);
// { firstName: 'Robert', lastName: 'Cooper' }