原文: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这样的第三方库。

比如, 把两个对象合并成一个:

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

17个实用的JavaScript数组和对象的方法相关推荐

  1. javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())...

    javascript 数组和对象的浅度复制和深度复制 在平常我们用 '='来用一个变量引用一个数组或对象,这里是'引用'而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3, ...

  2. js的数组和对象的多种复制和清空, 以及区分JS数组和对象的方法

    js的数组和对象的多种"复制"和"清空", 以及区分JS数组和对象的方法 一.数组清空与复制方法 1.数组清空的方法 var a = [1,2,3]; a.le ...

  3. 遍历数组、对象的方法

    前提​:前端最重要的任务的经常要处理数据的​!经常的是列表的遍历问题​!例如遍历数组.对象的方法​!!! 遍历数组: 1.普通for循环 for(var i = 0; i < arr.lengt ...

  4. JavaScript 数组 函数 对象

    数组 数组的概念 数组就是一组数据的集合,并且存储在单个变量名下 数组的创建方式 利用new创建数组 var 数组名 = new Array();var arr = new Array();//创建了 ...

  5. php的对象和数组应该学js,JavaScript数组与对象的常用方法及 json 的序列化

    一.JavaScript数据类型: 1- 原始类型:number(数值),string(字符串),boolean(布尔值)var age = 18; var username = "admi ...

  6. javascript 数组以及对象的深拷贝方法

    for循环 var arr = [{name: 'jq',old: '20' },{name: 'aa',old: '18' }] var arr2=[] for(let i=0;i<arr.l ...

  7. JavaScript 数组和对象

    数组 数组:一组数据的集合,数组的每一个数据叫做一个元素 数组元素可以是任何类型,同一个数组中的不同元素可能是对象或数组 每个数组都具有一个length属性,通过该属性可以获取数组长度,并且可以给一个 ...

  8. 创建零填充JavaScript数组的最有效方法?

    在JavaScript中创建任意长度的零填充数组的最有效方法是什么? #1楼 使用对象符号 var x = []; 零填充? 喜欢... var x = [0,0,0,0,0,0]; 充满" ...

  9. javascript数组的属性、方法和清空-最全!!!(必看)

    今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...

最新文章

  1. 边缘提取算子检测比较
  2. 使用coding进行项目代码管理(全程可视化操作!)
  3. Range回源和视频拖拽播放
  4. Java API —— IO流( FileInputStream FileOutputStream BufferedInputStream BufferedOutputStream )...
  5. 自用JavaMail实现
  6. 解决 webpack-dev-server 不能自动刷新的问题
  7. 半正定矩阵 正定
  8. 三极管构成的流水灯电路分析
  9. 小程序样式出现 semi-colon expected的解决方案
  10. ArcGIS网络分析之数据组织、连通性设置
  11. Python量化交易学习笔记(51)——程序化交易2
  12. 近年来Person Re-identification论文汇总
  13. MySQL时间序列分表分区_干货丨时序数据库分区教程
  14. python控制鼠标移动
  15. vmvare打开虚拟机时报错:vmx文件已损坏
  16. win10系统用chew-wga激活重启后蓝屏
  17. 【2022国赛模拟】逆天题——生成函数、单位根、Pollard-Rho算法
  18. 陈潇冰 react权威指南_React中条带化付款的分步指南
  19. 【移动端】滑动验证致使整个屏幕都在动
  20. python3编写http代理服务器_HTTP代理服务器[Python]

热门文章

  1. c++primer第五版,p134页第2题自编程序
  2. How to be a hacker
  3. netstat 和 losf
  4. 自定义字符串查找函数c语言,(C语言自定义函数,/*编写函数实现在字符串pStr中查找子串pSub int subString( char* pStr, char* pSub);...
  5. 计算机存储器可分两类,计算机存储器可分为几类?它们的主要区别是什么?
  6. ORACLE 绑定变量用法总结
  7. bugku-杂项 听首音乐
  8. smarty课程---smarty3的安装和使用
  9. Mybatis的SqlSession运行原理
  10. tomcat 部署脚本