成为 JavaScript 大师需要了解的概念

MLH #MajorLeagueHacking #LocalHackDay

如何使用 JavaScript

JavaScript 是一门令人惊叹的编程语言。它最流行的用途是作为浏览器的编程语言，但这并不意味着它的全部用途。它的用途远不止于此……后端开发、桌面开发、机器学习等等。
对于任何不在浏览器中运行的 JavaScript，Node.js是编译和运行 JavaScript 的一种方式。

使用浏览器

在浏览器中，您只需使用如下标签将带有扩展名的文件添加.js到 HTML 中即可：script

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <script defer src="path/to/file.js"></script>
  </body>
</html>

注意：JavaScript 文件中的所有内容都将在浏览器中执行。

使用 Node.js

为了在您的机器上运行 JavaScript 文件，您需要做的就是使用如下控制台：

// script.js

console.log("Hello World!");

node script.js

掌握 JavaScript 你需要知道什么

数据结构

数据结构的概念并非 JavaScript 所独有。但是 JS 中有一些有趣的特性。

数组

在 JavaScript 中，数组具有附加的特殊函数，称为数组方法。

示例将使用以下数组：


var array = [18, 20, 22, 40, 15, 21, 16, 17, 96];

1.forEach功能：


function callbackFunction(value, <index>) {
  sum = sum + value;
}

array.forEach(callbackFunction);

这将返回数组中所有元素的总和，而无需创建新数组。

值参数具有指定数组的特定元素。
index参数是可选的，返回当前索引。

2.map功能


function callbackFunction(value, <index>) {
  sum = sum + value;
}

array.map(callbackFunction);

这与函数执行相同的操作forEach，但它会生成一个新的数组来处理。

3.filter功能


function callbackFunction(value, <index>) {
  return value > 20;
}

array.filter(callbackFunction);

该函数创建一个新数组，其中包含通过作为参数传递的函数测试的元素。

4.reduce功能


var sum = array.reduce(callbackFunction)

function callbackFunction(total, value) {
  return total + value;
}

此函数将数组缩减为单个数字。在本例中，它将数组缩减为其中所有元素的总和。

参数为：

total- 初始值/先前返回的值
value- 当前值

对象

在 JavaScript 中，对象是该语言其他元素的集合。我说其他元素，是因为它还可以包含函数和其他对象。

例子：


const object = {
  elem1: "text", //a string
  elem2: 2,      //an integer
  elem3: function () {
                 // a function
    const a = 2, b = 3;
    return a + b;
  },
  elem4: {       // an object
    elem: "text2"
  }
};

如何访问对象的元素

您可以使用符号从对象访问元素.。


console.log(object.elem1);     //return "text"

console.log(object.elem2);     //return 2

console.log(object.elem3());   //return 5(2+3);

console.log(object.elem4.elem);//return "text2"

功能

在 JavaScript 中，有 3 种方法声明函数：

命名函数

function myFunction() {
  //code here
}

匿名函数

function() {
  //code here
}

箭头函数

const myFunction = () => {
  //code here
}

函数的使用方法有多种：

普通的

myFunction();

IIFE（立即调用函数表达式）

function myFunction() {
  //code here
}();

注意：如您所见，该函数在声明后立即()被调用。我们可以通过函数声明末尾的括号来判断。

返回一个函数

一个函数可以返回另一个函数，返回的函数被称为闭包。以下是一个例子：

function parentFunction() {
  return {
    function returnedFunction() {
      //code here
    }
  }
}

parentFunction().returnedFunction();

**注意：**此概念有助于封装（一种信息划分的技术）。
例如：

function parentFunction() {
  function _privateFunction() {

    return "text to be returned"
  }
  return {
    function returnedFunction() {
      return _privateFunction();
    }
  }
}

parentFunction().returnedFunction()  //"text to be returned"

承诺

生产代码是需要花费一些时间的代码。消费代码是必须等待结果的代码。Promise是一个 JavaScript对象，用于连接生产代码和消费代码。

let myPromise = new Promise(function(resolve, reject) {
  resolve();  //when successful
  reject();   //when an error occurs
});

myPromise
  .then(res => {
    //when the call is successful
    //we have access to the result via the res parameter
  })
  .catch(err => {
    //when an error occurs
    // we have access to the error via the err parameter
  })

异步/等待

当 'async' 关键字async位于函数声明前面时，该函数将返回一个Promise。所以：

async function myFunction() {
  return "Hello World!"
}

等价于：

async function myFunction() {
  return Promise.resolve("Hello World!")
}

关键字函数前面的await关键字await使函数等待承诺。

let result = await promise;

**注意：**该await关键字只能在async. 函数内部使用。

Web API 请求

向 API 发出请求是 JavaScript 的重要组成部分。每个开发者都必须了解这一点。例如：

前端开发人员需要了解访问 API 以使项目更具交互性（发送电子邮件、保存在数据库中等）
后端开发人员需要知道这一点才能访问现有服务（Spotify API、Discord API、Twilio API 等），而不是从 0 开始编写代码（而不是重新发明轮子）

有两种很好的方法可以进行 API 调用：

使用fetch函数（包含在基本 JavaScript 安装中） - 无需安装任何东西


const options = {
  method: "GET/POST/PUT/DELETE",
  headers: {}, //optional
  data: {},  //optional
  body: {},    //optional
}

const request = fetch('url/of/api', options); // this returns a promise so we could and should use the await keyword

const result = request.json(); // returns a JSON object

或者

const options = {
  method: "GET/POST/PUT/DELETE",
  headers: {}, //optional
  data: {},  //optional
  body: {},    //optional
}

fetch('url/of/api', options)
  .then(res => {
    //returns a JSON object
  })
  .catch(err => {
    //code for error here
    console.error(err);
  });

使用该axios功能 -需要安装axios函数

**注意：**您必须axios像这样导入库：

import axios from 'axios';

const options = {
  headers: {}, //optional
  params: {},  //optional
};

axios.<get/put/post/delete>('url/to/api', options)
  .then(res => {
    // can access a JSON object
  })
  .catch(err => console.error(err));

或者

const options = {
  headers: {}, //optional
  params: {},  //optional
  method: "GET/POST/PUT/DELETE"
};

axios('url/to/api', options)
  .then(res => {
    // can access a JSON object
  })
  .catch(err => console.error(err));

什么有助于掌握任何与代码相关的知识

下一部分很重要，但它没有任何技术解释。这些是一些关于如何成长为开发人员以及如何在求职时提供帮助的技巧。如果您不感兴趣，可以跳过此部分。

加入
开发者社区可以帮助你结识对相同主题感兴趣的新朋友。这不仅有趣，还能让你学习其他开发者的经验。
加入 GitHub ，为开源贡献力量
。发现有趣的东西，为项目增值。想了解更多信息，我推荐Eddie Jaoude 的 YouTube 频道。他的内容非常精彩。
参加黑客马拉松。
目前我正在参加MLH的“本地黑客日：构建”（Local Hack Day: Build），挑战非常精彩。他们提出的主题包括“合并两个API”、“使用音乐API”或“使用Twilio API”，以及许多其他有趣的问题，你可以独自或与公会成员一起解决。这是一次非常棒的体验，我推荐给所有认真对待开发和编程的人。#MLH #MajorLeagueHacking #LocalHackDay

鏂囩珷鏉ユ簮锛�https://dev.to/mstanciu552/concepts-you-should-know-to-be-a-master-of-javascript-2nn8

Concepts you should know to be a master of JavaScript MLH #MajorLeagueHacking #LocalHackDay

成为 JavaScript 大师需要了解的概念

MLH #MajorLeagueHacking #LocalHackDay

MLH #MajorLeagueHacking #LocalHackDay

如何使用 JavaScript

使用浏览器

使用 Node.js

掌握 JavaScript 你需要知道什么

数据结构

数组

对象

如何访问对象的元素

功能

函数的使用方法有多种：

返回一个函数

承诺

异步/等待

Web API 请求

什么有助于掌握任何与代码相关的知识