文章首次发表在:https://segmentfault.com/a/1190000014913511
这些JavaScript方法将会在几分钟内提高你的技能
现在创建的大多数应用都会需要对一些数据集合做修改。处理集合中的元素是你最可能遇到的操作。不要再使用常规的像是(const i; i < value.length; i++ )
的for-loop
方式。
如果你想要展示一个商品列表,并且对这个数据集合做分类、筛选、搜索、修改和更新。或者你想做一些快速计算比如求和,相乘等等。实现这些操作的最佳方式是什么?
可能你不喜欢箭头函数,你也不想花费太多时间去学习这些新东西,或者它们跟你没有关系。放心,并不是只有你这样。我会同时在ES5(普通函数)和ES6(箭头函数)中展示给你看怎么实现。
注意:箭头函数和函数声明/表达式不是等价的,而且也不能盲目替换。你要记得this
关键字在两者之间的作用不一样的。
这些方法将会被使用
- Spread operator(扩展运算符,三个点)
- for…of iterator
- includes()
- some()
- every()
- filter()
- map()
- reduce()
1. 扩展操作符
扩展运算符用于把一个数组展开变为一个数组元素序列(一系列逗号隔开的值)。也可以展开对象字面量。
为什么我应该用它?
- 简单且快速的方式列出数组元素
- 同时用于数组和对象
- 快速且直观的方式传递参数
- 只需要写三个点
例子:
假如你想展示一个喜爱的水果列表,但不是通过一个循环函数的方式。你可以用一个扩展操作符,像这样:
const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];
console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs
2. for…of 迭代器
for...of
利用循环/迭代器表达式遍历集合,为你提供了修改特定元素的能力。它可以替代常规的for-loop
方式。
为什么我应该用它?
- 一种简单的方式添加、更新一个元素
- 执行计算(累加、相乘)
- 代码简单,可读性高
例子:
如果你有一个工具箱,你想要展示里面所有的工具。for...of
迭代器会让它变得更简单。
const toolBox = ['Hammer', 'Screwdriver', 'Ruler']
for(const item of toolBox) {
console.log(item)
}
// Hammer
// Screwdriver
// Ruler
3. Includes() 方法
include()
方法被用来检查数集合中是否包含指定元素,如果存在则返回true
,否则返回false
。记得,他是区分大小写的:如果集合中的这个元素是SCHOOL
,但你查询的是school
,那么它将会返回false
。
为什么我应该用它?
- 可以构建简单的查询代码块
- 一种直观的方法来确定元素是否存在
- 它使用条件语句来修改、过滤等等
- 代码可读性高
例子:
假如,无论什么原因,你不知道车库里有什么车,你需要一个系统检查你想要的车在不在车库里。includes()
可以拯救你!
const garge = ['BMW', 'AUDI', 'VOLVO'];
const findCar = garge.includes('BMW');
console.log(findCar);
// true
4. Some() 方法
some()
方法检查在数组中是否存在某些元素,如果存在返回true
否则返回false
。这跟includes
方法有几分相似,但是参数是一个函数,而不是一个字符串。
为什么我应该用它?
- 可以确保某些项测试通过
- 用函数执行条件表达式
- 使你的代码更直观
- 它非常好用
例子:
假如你是一个酒吧老板,也不在乎谁进入这家酒吧。但是某些人是不允许进来的,因为他们已经喝了很多酒了。下面分别用ES5和ES6检查他们的不同:
ES5
const age = [16, 14, 18];
age.some(function(person) {
return person >= 18;
});
// Output: true
ES6
const age = [16, 14, 18];
age.some((person) => person >= 18);
// true
5. Every() 方法
every()
方法遍历数组,检查数组中的每一项是否都可以通过,如果都通过返回true
否则返回false
。与some()
方法概念有些相似。但是每一项都必须通过条件表达式,否则,它会返回false
。
为什么我应该用它?
- 可以确保所有项测试通过
- 可以用函数执行条件表达式
- 使代码更直观
例子:
上次你用some()
方法让某些未成年学生进了酒吧,有人举报了这事,并且警察逮捕了你。这次你害怕还会发生这样的事情,你将用every()
方法确保每一个进来酒吧的人都是满足年龄限制的。
ES5
const age = [15, 20, 19];
age.every(function(person) {
return person >= 18;
})
// Output: false
ES6
const age = [15, 20, 19];
age.every((person)=> person >= 18);
//false
6. Filter() 方法
filter()
方法会创建一个包含所有满足条件的元素的新数组。
为什么我应该用它?
- 可以避免对原始数组的修改
- 可以让你过滤掉那些你不需要的元素
- 让你的代码可读性更高
例子:
假如你只想要大于或者等于30的价格,过滤掉其他价格。
ES5
//array
const prices = [25, 30, 15, 55, 40, 10];
prices.filter(function(price){
return price >= 30;
})
// Output: [30, 55, 40]
ES6
const prices = [25, 30, 15, 55, 40, 10];
prices.filter((price) => price >= 30);
// [30, 55, 40]
7. Map() 方法
map()
方法跟filter()
方法想似,也是会返回一个新数组。但是,唯一的区别是它用于修改数组中的元素。
为什么我应该用它?
- 可以避免对原始数组的修改
- 可以修改你想修改的元素
- 代码可读性更高
例子:
假如你有一个商品的价格列表,你的经理要展示一个被征收25%的税之前的价格列表。map()
方法可以帮你实现它。
ES5
const productPriceList = [200, 356, 1500, 5000];
productPriceList.map(function(item){
return item * 0.75;
})
// [150, 267, 1125, 3750]
ES6
const productPriceList = [200, 356, 1500, 5000];
productPriceList.map((item) => item * 0.75);
// [150, 267, 1125, 3750]
8. Reduce() 方法
reduce()
方法用来把一个数组转化为一个int值,一个对象,一个promises串(顺序执行的promises)等等。实际上,一个简单的用例就是对一系列int值求和。简单来说,它就是把数组中的所有值最终”缩短”为一个值。
为什么我应该用它?
- 合并计算为一个值
- 重复执行计算
- 把对象按照属性分组
- 顺序执行promises代码块
- 一种快速的执行运算函数的方式
例子:
假如你想得到这一周的消费总和,reduce()
可以帮你实。
ES5
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce(function(first, last) {
return first + last;
})
// 8530
ES6
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce((first, last) => first + last);
// 8530
原文链接:These JavaScript methods will boost your skills in just a few minutes