这些JavaScript方法将会在几分钟内提高你的技能

发布时间:2019-08-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了这些JavaScript方法将会在几分钟内提高你的技能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

这些JavaScript方法将会在几分钟内提高你的技能

现在创建的大多数应用都会需要对一些数据集合做修改。处理集合中的元素是你最可能遇到的操作。不要再使用常规的像是(const i; i < value.length; i++ )for-loop方式。
如果你想要展示一个商品列表,并且对这个数据集合做分类、筛选、搜索、修改和更新。或者你想做一些快速计算比如求和,相乘等等。实现这些操作的最佳方式是什么
可能你不喜欢箭头函数,你也不想花费太多时间去学习这些新东西,或者它们跟你没有关系。放心,并不是只有你这样。我会同时在ES5(普通函数)和ES6(箭头函数)中展示给你看怎么实现。
注意:箭头函数和函数声明/表达式不是等价的,而且也不能盲目替换。你要记得this关键字在两者之间的作用不一样的。

这些方法将会被使用

  1. Spread operator(扩展运算符三个点
  2. for…of ITerator
  3. includes()
  4. some()
  5. every()
  6. filter()
  7. map()
  8. 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', '@R_588_1269@driver', '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

@H_304_664@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

脚本宝典总结

以上是脚本宝典为你收集整理的这些JavaScript方法将会在几分钟内提高你的技能全部内容,希望文章能够帮你解决这些JavaScript方法将会在几分钟内提高你的技能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。