JavaScript 中有用的 Array 和 Object 方法

简介:

我收听了一个很棒的语法FM播客,它总结了有用的JavaScript 数组和对象方法。这些方法可以帮助开发人员编写干净而且可读性高的代码。许多这样的方法可以减少像Lodash这样的实用程序库的依赖。

本文中的所有方法都是可链式调用的,这意味着它们可以相互结合使用,而且它们也不会发生数据突变,这在使用React时尤其重要。 使用所有这些数组和对象的方法,你将发现再也不需要再进行 for 或 while 循环来达到目的了。

.filter()

查看MDN文档

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

示例

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


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

.map()

查看MDN文档

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

示例

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


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

.reduce()

查看MDN文档

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

示例

把数组中的整数加起来。


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

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

.forEach()

查看MDN文档

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

示例

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


const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// 控制台将打印:
// 'happy'
// 'sad'
// 'angry'

.some()

查看MDN文档

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

示例

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


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

.every()

查看MDN文档

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

示例

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


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

.includes()

查看MDN文档

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

示例

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


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

Array.from()

查看MDN文档

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

示例

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


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

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


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

Object.values()

查看MDN文档

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

示例


const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}
 
const colors = Object.values(icecreamColors);
// colors 将等于 ["brown", "white", "red"]

Object.keys()

查看MDN文档

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

示例


const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}
 
const types = Object.keys(icecreamColors);
// types 将等于 ["chocolate", "vanilla", "strawberry"]

Object.entries()

查看MDN文档

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

示例


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() 方法结合使用,以防止数组的直接突变。

示例

组合两个数组。


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]

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


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

Object spread (对象展开)

查看MDN文档

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

示例

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


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

Function Rest (剩余参数)

查看MDN文档

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

示例

显示传递参数的数组。


function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}
 
displayArgumentsArray('hi', 'there', 'bud');
// 将打印 ['hi', 'there', 'bud']

Object.freeze()

查看MDN文档

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

示例

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


const frozenObject = {
  name: 'Robert'
}
 
Object.freeze(frozenObject);
 
frozenObject.name = 'Henry';
// frozenObject 将等于 { name: 'Robert' }

Object.seal()

查看MDN文档

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

示例

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


const sealedObject = {
  name: 'Robert'
}
 
Object.seal(sealedObject);
 
sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject 将等于 { name: 'Bob' }

Object.assign()

查看MDN文档

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

示例

将两个对象组合成一个。


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



原文发布时间为:2018年06月20日
原文作者:掘金

本文来源: 掘金 如需转载请联系原作者


相关文章
|
1月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
85 58
|
2天前
|
安全 IDE Java
重学Java基础篇—Java Object类常用方法深度解析
Java中,Object类作为所有类的超类,提供了多个核心方法以支持对象的基本行为。其中,`toString()`用于对象的字符串表示,重写时应包含关键信息;`equals()`与`hashCode()`需成对重写,确保对象等价判断的一致性;`getClass()`用于运行时类型识别;`clone()`实现对象复制,需区分浅拷贝与深拷贝;`wait()/notify()`支持线程协作。此外,`finalize()`已过时,建议使用更安全的资源管理方式。合理运用这些方法,并遵循最佳实践,可提升代码质量与健壮性。
12 1
|
5天前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5天前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5天前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
5天前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5天前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5天前
|
Web App开发 存储 前端开发
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
130 67

热门文章

最新文章