资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/这些JavaScript方法将会在几分钟内提高你的技能

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

mylxsw / 2283人阅读

摘要：这些方法将会被使用扩展运算符，三个点扩展操作符扩展运算符用于把一个数组展开变为一个数组元素序列一系列逗号隔开的值。

这些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

云服务器 GPU云服务器 提高你的python 几分钟内 一分钟内 php 一分钟内

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95069.html

相关文章

  • 如何在没有实际项目经验的情况下找到工作

    摘要：对于许多年轻的计算机或相关专业毕业生，在没有实际项目开发经验的情况下找到第一份全职工作可能是你在职业生涯中遇到的最大的挑战。总结毕业后在没有实际项目开发经验的情况下找到你的第一份工作是一个艰巨的任务。 原文：How to Land a Development Job Without Experience作者：Paddy Sherry译者：LeviDing声明：转载请注明出处。   许多...

    Invoker 评论0 收藏0

  • 如何在没有实际项目经验的情况下找到工作

    摘要：对于许多年轻的计算机或相关专业毕业生，在没有实际项目开发经验的情况下找到第一份全职工作可能是你在职业生涯中遇到的最大的挑战。总结毕业后在没有实际项目开发经验的情况下找到你的第一份工作是一个艰巨的任务。 原文：How to Land a Development Job Without Experience作者：Paddy Sherry译者：LeviDing声明：转载请注明出处。   许多...

    red_bricks 评论0 收藏0

  • 如何在没有实际项目经验的情况下找到工作

    摘要：对于许多年轻的计算机或相关专业毕业生，在没有实际项目开发经验的情况下找到第一份全职工作可能是你在职业生涯中遇到的最大的挑战。总结毕业后在没有实际项目开发经验的情况下找到你的第一份工作是一个艰巨的任务。 原文：How to Land a Development Job Without Experience作者：Paddy Sherry译者：LeviDing声明：转载请注明出处。   许多...

    evin2016 评论0 收藏0

  • 如何在没有实际项目经验的情况下找到工作

    摘要：对于许多年轻的计算机或相关专业毕业生，在没有实际项目开发经验的情况下找到第一份全职工作可能是你在职业生涯中遇到的最大的挑战。总结毕业后在没有实际项目开发经验的情况下找到你的第一份工作是一个艰巨的任务。 原文：How to Land a Development Job Without Experience作者：Paddy Sherry译者：LeviDing声明：转载请注明出处。   许多...

    Jioby 评论0 收藏0

  • 全栈开发：2017年你最好的选择[翻译]

    摘要：全栈开发是一个学习实现提高的过程。解除对开发人员的限制所有的职业都在持续的进化。哪怕是爆炸和拥挤的印度招聘市场，全栈工程师在年也非常的抢手。印度的创业公司已经开发意识到全栈工程师的重要意义，全栈会越来越重要。 在不断壮大的招聘市场上，最需要的是有非常广泛技术栈的人。 前言 敬爱的读者，大家好。大家经常讨论的话题是作为一个软件工程师是一个持续学习的过程。因为现有的趋势和技术在软件领域会很...

    fireflow 评论0 收藏0

发表评论

登陆后可评论

0条评论

mylxsw

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<