博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 中有用的 Array 和 Object 方法
阅读量:6412 次
发布时间:2019-06-23

本文共 4667 字,大约阅读时间需要 15 分钟。

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

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

.filter()

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

示例

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

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

.map()

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

示例

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

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

.reduce()

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

示例

把数组中的整数加起来。

const numbers = [5, 10, 15];const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);// total 将等于 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');// containsAdmin 将等于 true

.every()

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

示例

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

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

.includes()

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

示例

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

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

Array.from()

这是一种基于另一个数组或字符串创建数组的静态方法。 您还可以将 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()

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

示例

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

Object.keys()

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

示例

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

Object.entries()

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

示例

const weather = {  rain: 0,  temperature: 24,  humidity: 33,} const entries = Object.entries(weather);// entries 将等于// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array spread (数组展开)

使用展开运算符( ... )展开数组,允许你展开数组中的元素。 将一堆数组连接在一起时非常有用。 当从数组中删除某些元素时,避免使用 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 (对象展开)

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

示例

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

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

Function Rest (剩余参数)

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

示例

显示传递参数的数组。

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

Object.freeze()

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

示例

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

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

Object.seal()

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

示例

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

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

Object.assign()

允许对象组合在一起。不再需要这个方法,因为您可以使用上面说的对象展开语法。与对象展开操作符一样,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日
原文作者:掘金

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

你可能感兴趣的文章
Java模拟HTTP的Get和Post请求(增强)
查看>>
php 环境搭建(windows php+apache)
查看>>
让虚拟机的软盘盘符不显示(适用于所有windows系统包括Windows Server)
查看>>
Cygwin不好用
查看>>
jQuery插件之验证控件jquery.validate.js
查看>>
[经验]无线鼠标和无线键盘真的不能用了?——雷柏的重生之路~
查看>>
【转】plist涉及到沙盒的一个问题
查看>>
GNU make manual 翻译( 一百四十五)
查看>>
重构之美-走在Web标准化设计的路上[复杂表单]3 9 Update
查看>>
linux中的优先搜索树的实现--prio_tree【转】
查看>>
转载: 打造自己的asp.net验证控件
查看>>
重构之美-跨越Web标准,触碰语义网[开门见山:Microformat]
查看>>
git入门与实践【转】
查看>>
WPF 虚拟键盘
查看>>
储存卡无法打开专家教您怎么数据恢复
查看>>
彼得原理
查看>>
如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库...
查看>>
[20171113]修改表结构删除列相关问题3.txt
查看>>
特征选择
查看>>
在Winform程序中设置管理员权限及为用户组添加写入权限
查看>>