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

原文:Useful Javascript Array and Object Methods
作者:Robert Cooper
译者:Jim Xiao
前段时间,我收听了一个很棒的Syntax FM播客,其中总结了一些实用的JavaScript数组和对象方法。这些方法可以帮助开发人员编写简洁可读的代码,并且这些原生的JavaScript方法减少了对类似Lodash这样第三方库的依赖。
本文中所有提到的函数方法都是可以链式调用的,意味着它们可以相互结合地使用。更重要的是,它们并不会变更原始数据,当使用React时,这点尤其重要。通过使用这些数组和对象的方法,你不再需要forwhile循环来获得数组和对象中的数据。
下面每个函数都包含一个链接,可以跳转到相对应的中文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这样的第三方库。
【17个实用的JavaScript数组和对象的方法】比如, 把两个对象合并成一个:
const firstObject = { firstName: 'Robert' }const secondObject = { lastName: 'Cooper' }const combinedObject = Object.assign(firstObject, secondObject); // { firstName: 'Robert', lastName: 'Cooper' }

    推荐阅读