JavaScript函数:为什么它们必须理解? |简易指南 - 部分2
#javascript #初学者 #编程 #功能

我们研究了what functions are和不同类型的声明。我们还研究了参数,范围,托管和创建方法。请有关以上任何主题的refer back to JavaScript Functions part one,如果您想更好地了解此博客文章。

内容表:

Arrow to the right

箭头

箭头功能

什么是箭头功能?

箭头函数是编写函数表达式的另一种方式,也是编写匿名function的快捷方式。对于下一个示例,我们将具有表达功能并将其转换为箭头函数:

let nerd = function(level) {

  return level + " level"

}

console.log(nerd("nerd"))

//output: nerd level

Now by converting it to an arrow, notice what we will do in the next lines:

let nerd = (level) => {

  return level + " level"

}

console.log(nerd("nerd"))

//output: nerd level

我们删除了关键字函数,如果参数仅一个参数,并且如果函数仅返回一个语句,我们也可以摆脱括号/em> 喜欢:

let nerd = (level) => level + " level"

console.log(nerd("nerd"))

// output: nerd level

由于您可以使用此关键字带有箭头功能,因此您仍然可以在对象内的函数概括该功能。基本上,您摆脱了:â€和function关键字。

const nerdsInfo = {

  social: {

    blog: "nerdleveltech.com",

    twitter: "twitter.com/NerdLevelTech",

    reddit: "www.reddit.com/user/NerdLevelTech"

    },

      printSocial () {

      console.log(`Social links: 

      ${this.social.blog} 

      ${this.social.twitter}

      ${this.social.reddit}`)

    } 

}

nerdsInfo.printSocial()

// output: Social links: 

//     nerdleveltech.com 

//     twitter.com/NerdLevelTech

//     www.reddit.com/user/NerdLevelTech

关于箭头功能要记住的事情:

  • 箭头功能没有自己的绑定到此关键字
  • 箭头函数无法使用类似阵列的参数
  • 您可以使用REST运算符进行参数

lego constructor

lego构造函数

构造函数

什么是构造函数?

您可以以多种方式创建可重复使用的对象。因此,让我们探索另一个流行的模式来创建它们称为构造函数模式。构造函数是一种使用JavaScript函数编写类的方法。我们也可以说以下

其JavaScript函数的作用像类:

let Nerd = function (){

  let level;

}

let firstNerd = new Nerd

firstNerd.level = "Vito"

console.log(firstNerd)

在上面的示例中,我们启动了第一个字母,因为这是对此模式的熟悉的事情。请注意``也让FirstNerd =新的书呆子,该名称名为nerd的实例访问了NERD函数中的属性,就像类似于类。

说到属性,JavaScript可以访问一种非常特殊的属性,称为原型。使用上面的示例,但在属性原型中添加值:

let Nerd = function (){

  let level;

}

Nerd.prototype = {

  study: function(what) {

    return (console.log(what))

  }

}

let firstNerd = new Nerd

firstNerd.level = "Nerd"

firstNerd.study("JS")

console.log(firstNerd.level)

//output: JS Nerd

,或者我们可以将原型“声音”分别与动物的类示例一起使用,例如在以下示例中:

//Now we create two pets
let sound = function(hear) {

  return (console.log(hear))

}

let Dog = function() {

  let name;

}

let Cat = function() {

  let name;

}

Dog.prototype.sound = sound
Cat.prototype.sound = sound

// let’s create the Dog instances: 

let myDog = new Dog

myDog.name = "Jojo"

myDog.sound = "woof"

// let’s create the Cat instances: 

let myCat = new Cat

myCat.name = "Gogo"

myCat.sound = "meaw"

console.log(myCat, myDog)
// output: Cat { name: 'Gogo', sound: 'meaw' } Dog { name: 'Jojo', sound: 'woof' }

要牢记构造函数的事情:

  • 请注意,我们重复了cat和dog的功能上的一些属性。您可以考虑拥有具有此名称的较高功能,称为宠物或动物,然后继承它,因此您不重复自己。
  • 现在已经发生了,您将面临更广泛的系统面临的另一个挑战。将所有对象和属性直接放在正面会使您的设计过程变得复杂。

Multiple pieces of woods

多个木材

模块

什么是模块?

模块是库代码库,可让您将所需的功能或功能存储到文件中。该文件可以通过您的项目或不同项目导入和导出。现在,想象一下您的代码将如何组织,而不是在整个项目和所有其他项目中重复您的代码。

如何编写模块?

我们编写模块的方式在最近的JavaScript版本中变得更好。您需要做的就是编写功能并在关键字函数之前使用关键字导出。

export function add (...args){

  return args.reduce(function(a,c) {

    return a + c

    })

}

让我们说我们创建了一个使用以上函数的文件,称为modtest.js

现在我们可以在另一个文件中导入它:

import { add } from "./modTest.js"

我们使用上面的破坏,因此我们可以从该文件中导入尽可能多的功能。尽管它只是一个函数,但您需要使用非默认导出函数来习惯于语法。例如导出默认函数add(... args){}

导入添加来自“ ./modtest.js”的添加通知您在导入时用不同的名称命名,该更改应根据您的名称惯例进行。

import {addsum as sumadd}从./modtest.jsâ-破坏和更改名称

import *作为来自./modtest.js的funcs the usterisk表示弹性前缀内的所有功能,现在您可以使用此语法将其称为函数,以此为此:funcs: .addâ

要记住模块的事情:

  • 使用模块,您可以在该代码库中创建本地变量,而无需污染您的主代码

朋友显示闭合gif

闭合

什么是封闭?

关闭使用JavaScript中范围的某些方面,请记住范围是指代码中变量的可用性。有某种类型的示波器称为词汇范围。这是一个内部函数,可以访问父范围的范围资源和变量。

当您使用函数或另一个函数中的函数'时,JavaScript创建的闭合是由JavaScript创建的。在这里,子函数(或父级内的任何其他功能)可以访问父函数,而父级的变量可以记住创建的环境以及从子函数对其值进行的任何更改。在这里查看此示例,就像:

function counter() {

  let num = 0

  return function() {

    console.log(num++)

  }

}

let numbers = counter()

numbers() // 0

numbers() // 1

numbers() // 2

该计数器功能具有我们调用的内部函数(闭合)为什么?因为它在其中使用了关键字函数。这允许变量在父函数中记住num的值。尽管我们已经增加并将其归还了另一个功能。但是JavaScript每次运行函数时都会保持其值更新。

在下一个示例中。该对象将有两种方法。我们称它们为方法是因为它们是对象内部的功能。

function myCounterObj() {

  let num = 1

  return {

    show: () => console.log(num),

    increment: () => num++

  }

}

let myNum = myCounterObj() //creating instance

myNum.show() // 1

myNum.increment() // incremented by ++ 

myNum.show() // 2

myNum.increment()

myNum.show() // 3

Neon red lights

霓虹灯红灯

递归

什么是递归?

递归发生时,每当函数呼叫本身时,就会提出我们如何停止功能的问题,如果函数一直无限地调用自己?

,该怎么办?

这是我们需要停止条件的时候,如果符合递归停止。我们称这是基本案例。或者,我们可以将参数作为函数应如何调用的数字限制,如下面的fibonacci示例:

// Without a base case

function itself() {

  itself()

}
// With a base case

function increment(number, maxNumber) {

  if (number > maxNumber) return

  console.log(number)

  increment(number+1, maxNumber)

}

increment(1, 10)

在下一个示例中,最受欢迎的面试问题之一是构建斐波那契序列的功能,并将使用递归技术具有解决方案:

let fib = function(count) {

  if (count === 1) return [0, 1] // the base case

  let arr = fib(count -1)

  let sum = arr[arr.length -1] + arr[arr.length -2]

  arr.push(sum)

  console.log(arr)

  return arr

}

fib(7) // the function will be called 7 times according to the variable “count” value.

// output: 

// Fib: 7

// Fib: 6

// Fib: 5

// Fib: 4

// Fib: 3

// Fib: 2

// Fib: 1

// arr:

// [ 0, 1, 1 ]

// [ 0, 1, 1, 2 ]

// [ 0, 1, 1, 2, 3 ]

// [ 0, 1, 1, 2, 3, 5 ]

// [ 0, 1, 1, 2, 3, 5, 8 ]

// [ 0, 1, 1,  2, 3, 5, 8, 13 ]

// So as we can see the recursion works as a backwards loop by looking at the fib value each time

Airplanes show

飞机显示

异步函数

什么是异步函数?

等待某些条件或事情发生的功能,您可以构建仅在其他触发它时起作用的函数。在JavaScript中,我们可以使用关键字来创建此类函数。

另一个表达式称为Promise,即首先需要完成,满足或返回某个条件以触发运行或完成的功能,我们提到了上面的那部分。

async function canDo() {

  return console.log("Currently doing it...")

}

canDo().then (task => {

  console.log("yes you did it!")

})

// output: 

// Currently doing it...

// yes you did it!
async function doIt() {

  return console.log("Preparing it...")

}

async function canDo() {

  await doIt()

  return console.log("Currently doing it...")

}

canDo()

// output: 

// Preparing it...

// Currently doing it...

尽管我们调用cando()函数,但第一个字符串打印为doit()函数中的字符串,为什么?

因为我们必须等待doit()函数发生,然后才能运行cando()函数的其余部分并将其返回。

在JavaScript中,ASYNC/等待的最实际用途是从外部来源获取数据。一旦获取数据,就会实现承诺。

async function getSocial() {

  // Once the data received then the promised fulfilled.

  const result = await fetch("https://links.socialData.json") 

  const data = await result.json() 

  return data

}

async function printSocial() {

  try{

    const social = await getSocial()  

    console.log(social)

  } catch {

    console.log("Error: the data not available")

  }  

}

printSocial()

// output:

// Error: the data not available

我们试图从不存在的URL获取来演示Try/Catch语句。如果发生任何错误,我们可以通过使用{}并捕获{}。

尝试{

//您要工作的任何代码

}捕获{

//如果它不起作用,请使用捕获的错误进行以下操作

}

Conclusion word in separate characters

单独字符中的结论

结论为什么函数对理解至关重要?

函数可以通过多种方式应用。通过在这些代码中写下它们,您不仅要整理代码,还可以通过不重复相同功能的情况来节省大量时间,以防您在项目中再次想要它。相信我,你会的。

您练习和探索功能越多,您就越能为您节省时间和金钱来编写简洁明了的代码。查看这些功能上的这些great resources