V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Harldwell
V2EX  ›  推广

几分钟内提升技能的 8 个 JavaScript 方法!

  •  
  •   Harldwell · 2018-11-02 21:57:23 +08:00 · 1215 次点击
    这是一个创建于 2197 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们今天构建的大多数应用程序都需要进行某种数据收集修改。您最常遇到的常见操作是处理集合中的项。不要再使用 for-loop 循环的传统方式( let i=0; i < value.length; i++ )。

    请注意,在 for 循环中使用 const 会报一个错误。原因是因为它在每次执行期间重新赋值,因此 i 被 i++ 修改。所以每当你想到使用 const 或 let 时,问问自己 – 这个值会被重新声明吗?如果答案是肯定的,请选择 let,如果不是,请选择 const。

    假设您要显示产品列表并对集合进行分类,过滤,搜索,修改或更新。或者您可能希望执行快速计算,例如求和,乘法等。实现这一目标的最佳方法是什么?

    也许你不喜欢箭头功能,你不想花太多时间学习新东西,或者它们与你无关。放心,并不是只有你这样。我将向您展示如何在 ES5 (普通函数)和 ES6 (箭头功能)中实现。

    请注意:箭头函数和函数声明 /表达式不是等效的,不能 盲目替换。请记住,this 关键字在两者之间的工作方式不同。

    我们将要关注的方法有:

    Spread operator (展开操作符)

    for … of 迭代器

    includes()

    some()

    every()

    filter()

    map()

    reduce()

    如果您想成为更好的 Web 开发人员,开始自己的事业,教别人或提高您的开发技能,我将每周发布最新的关于 Web 开发语言的技术和技巧。

    1. Spread operator (展开操作符) Spread operator (展开操作符)将数组展开为其对应的元素。它也可以用于对象字面量。

    为什么我应该用它呢?

    这是一种简单且快速的方式来列出数组元素

    同时适用于数组和对象

    这是一种快速直观的传递参数的方法

    它只需要三个点 ...

    示例:

    假如你想展示一个喜爱的水果列表,但不是通过一个循环函数的方式。你可以用一个扩展操作符,像这样:

    JavaScript 代码:

    const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];

    console.log(...favoriteFood);

    //Pizza Fries Swedish-meatballs

    1. for … of 迭代器 for...of 语句循环 /遍历集合,为你提供了修改特定元素的功能。 它取代传统的 for-loop 方式。

    为什么我应该用它呢?

    这是添加或更新项的简单方法

    执行计算(求和,乘法等)

    和条件语句结合使用( if,while,switch 等)

    代码干净,可读性高

    示例:

    假设你有一个工具箱,你想要展示里面所有的工具。for...of 迭代器会让它变得更简单。

    JavaScript 代码:

    const toolBox = ['Hammer', 'Screwdriver', 'Ruler']

    for(const item of toolBox) {

    console.log(item)

    }

    // Hammer

    // Screwdriver

    // Ruler

    1. Includes() 方法 include() 方法被用来检查数集合中是否包含指定的元素,如果存在则返回 true,否则返回 false。 请记住,它是区分大小写的:如果集合中的某项元素是 SCHOOL,并且但你查询的是 school,那么它将会返回 false。

    为什么我应该用它呢?

    构建简单的搜索功能

    这是一种确定元素项是否存在的直观方法

    它使用条件语句来修改,过滤等

    代码可读性高

    示例:

    比如,无论出于什么原因,你不知道车库里有什么车,你需要一个系统检查你想要的车是否在车库里。includes() 可以拯救你!

    JavaScript 代码:

    const garge = ['BMW', 'AUDI', 'VOLVO'];

    const findCar = garge.includes('BMW');

    console.log(findCar);

    // true

    1. Some() 方法 some() 方法检查在数组中是否存在某些元素,如果存在返回 true,否则返回 false。这和 includes()方法相似,但是 some() 方法的参数是一个函数,而不是一个字符串。

    为什么我应该用它呢?

    它确保某些项目通过测试

    它使用函数执行条件语句

    使您的代码更具声明性

    它足够好用

    示例:

    假如你是一个俱乐部老板,并不在乎谁进入这俱乐部吧。但是有些人是不允许进来的,因为他们已经喝了很多酒(我的想象力很好)。查看以下 ES5 和 ES6 之间的差异:

    ES5:

    JavaScript 代码:

    const age = [16, 14, 18];

    age.some(function(person) {

    return person >= 18;

    });

    // Output: true

    ES6:

    JavaScript 代码:

    const age = [16, 14, 18];

    age.some((person) => person >= 18);

    // true

    1. Every() 方法 every() 方法循环遍历数组,检查数组中的每个元素项,并返回 true 或 false。与 some() 概念相似。但是每一项都必须通过条件表达式,否则返回 false。

    为什么我应该用它呢?

    它确保每个项目都通过测试

    您可以使用函数执行条件语句

    使您的代码更具声明性

    示例:

    上次你用 some()方法允许一些未成年学生进入俱乐部,有人举报了这事,警察抓住了你。这次你不会让这种情况再次发生,你将用 every() 方法确保每一个进来俱乐部的人都是满足年龄限制的。

    ES5:

    JavaScript 代码:

    const age = [15, 20, 19];

    age.every(function(person) {

    return person >= 18;

    })

    // Output: false

    ES6:

    JavaScript 代码:

    const age = [15, 20, 19];

    age.every((person)=> person >= 18);

    // false

    1. Filter() 方法 filter() 方法创建一个包含所有通过测试的元素的新数组。

    为什么我应该用它呢?

    你可以修改原始数组

    你可以让你过滤掉那些你不需要的元素项

    让你的代码可读性更高

    示例:

    假如你只想要大于或者等于 30 的价格,过滤掉其他价格。

    ES5:

    JavaScript 代码:

    //array

    const prices = [25, 30, 15, 55, 40, 10];

    prices.filter(function(price){

    return price >= 30;

    })

    // Output: [30, 55, 40]

    ES6:

    JavaScript 代码:

    const prices = [25, 30, 15, 55, 40, 10];

    prices.filter((price) => price >= 30);

    // [30, 55, 40]

    1. Map() 方法 在返回新数组方面,map() 方法跟 filter() 方法相似。但是,唯一的区别是它用于修改数组中的元素项。

    为什么我应该用它呢?

    它可以让你避免对原始数组进行修改

    你可以修改你所需的元素项

    代码可读性更高

    示例:

    假如你有一份价格清单。 您的经理需要一个清单,以便展示在税率增加 25 %后的新价格。map()方法可以帮助你。

    ES5:

    JavaScript 代码:

    const productPriceList = [200, 356, 1500, 5000];

    productPriceList.map(function(item){

    return item * 0.75;

    })

    // [150, 267, 1125, 3750]

    ES6:

    JavaScript 代码:

    const productPriceList = [200, 356, 1500, 5000];

    productPriceList.map((item) => item * 0.75);

    // [150, 267, 1125, 3750]

    1. Reduce() 方法 reduce()方法可用于将数组转换为其他内容,可以是整数,对象,promises 链(顺序执行的 promises )等等。出于实际原因,一个简单的用例是对整数列表求和。简而言之,它将整个数组“缩短”为一个你想要的值。

    为什么我应该用它呢?

    执行计算

    计算一个值

    计算重复数

    按属性分组对象

    按顺序执行 promises

    这是一种快速执行计算的方法

    示例:

    假如你想得到这一周的消费总和,reduce()可以帮你实。

    ES5:

    JavaScript 代码:

    const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

    weeklyExpenses.reduce(function(first, last) {

    return first + last;

    })

    // 8530

    ES6:

    JavaScript 代码:

    const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]

    weeklyExpenses.reduce((first, last) => first + last);

    // 8530

    希望你的 JavaScript 技能有所提升!

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2449 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:02 · PVG 00:02 · LAX 08:02 · JFK 11:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.