Web开发人员应该掌握的8个Javascript概念

已收录   阅读次数: 1,060
2021-05-2320:13:42 发表评论
摘要

数以百万计的网页是建立在 JavaScript 上的，一方面，HTML 和 CSS 为网页提供了框架和样式，另一方面，JavaScript 的魔力使您的网页生动起来。今天，这种语言不仅限于您的网络浏览器。您还可以将其用于服务器端应用程序。为客户端和服务器端应用程序使用一种语言不是很酷吗？一种语言可以满足这两个目的，这也是科技行业 javascript 开发人员有大量职位发布的主要原因。今天咱们来说一下8个Web开发人员应该掌握的Javascript的概念吧……
分享至：
Web开发人员应该掌握的8个Javascript概念

开篇寄语

数以百万计的网页是建立在 JavaScript 上的，一方面，HTML 和 CSS 为网页提供了框架和样式，另一方面，JavaScript 的魔力使您的网页生动起来。今天，这种语言不仅限于您的网络浏览器。您还可以将其用于服务器端应用程序。为客户端和服务器端应用程序使用一种语言不是很酷吗？一种语言可以满足这两个目的，这也是科技行业 javascript 开发人员有大量职位发布的主要原因。今天咱们来说一下8个Web开发人员应该掌握的Javascript的概念吧。

内容详情

1.prototype

prototype是 JavaScript 对象相互继承特性的一种机制。咱们来看一个例子：

通过添加方法，编写以下函数来扩展Array Prototype：

square()
cube()
divisible_by(x)
strictly_above(x)
strictly_below(x)

举例：

[1, 2, 3].square ➞ [1, 4, 9]
[1, 2, 3].cube ➞ [1, 8, 27]
[1, 2, 3, 4].divisible_by(2) ➞ [2, 4]
[1, 2, 3, 4].strictly_above(1) ➞ [2, 3, 4]
[1, 2, 3, 4].strictly_below(2) ➞ [1]

解决代码如下：

Array.prototype.square = function() {
	return this.map(x=>x*x)
}

Array.prototype.cube = function() {
	return this.map(x=>x*x*x)
}

Array.prototype.divisible_by = function(x) {
	return this.filter(a=>a%x==0)
}

Array.prototype.strictly_above = function(x) {
	return this.filter(a=>a>x)
}

Array.prototype.strictly_below = function(x) {
	return this.filter(a=>a<x)
}

这样使得Array拥有了5种新的函数，比如有一个arr = [2, 4, 6]，那么使用arr.square这个函数，结果如下：

arr.square
//生成的结果就是[4, 16, 36]

2.Scope

范围意味着变量访问。代码运行时我可以访问什么变量？默认情况下，在 javascript 中，您始终处于根范围，即窗口范围。作用域只是一个带有变量、函数和对象边界的盒子。这些边界对变量施加了限制，并确定您是否有权访问该变量。它限制了变量对代码其他部分的可见性或可用性。您必须对这个概念有一个清晰的理解，因为它可以帮助您分离代码中的逻辑并提高可读性。范围可以通过两种方式定义……

  • Local Scope：局部变量
  • Global Scope：全局变量

咱们看一下一个很明显的列子：

function glor(){
  var str = "https://www.luckydesigner.space";
  console.log(str)
}
//在调试窗口会出现本站网址的字样，但是，如果将console.log()放在这个函数外呢？
function glor(){
  var str = "https://www.luckydesigner.space";
}
console.log(str)
//会出现错误，如下图所示
Web开发人员应该掌握的8个Javascript概念

即局部变量无法在函数外起到作用。

3.Hoisting

在 javascript 中，您可以在定义函数之前调用它，并且不会收到错误“Uncaught ReferenceError”。这背后的原因是在代码执行之前，javascript 解释器总是将变量和函数声明移动到当前作用域（函数作用域或全局作用域）的顶部。让我们通过例子来理解这一点。

a = 5;
var a;
//以上结果在调试窗口会得到5

而下面与之类似的，只是变换一下顺序，结果是一样的：

var a;
a = 5;

4.IIFE

顾名思义，IIFE 是 javascript 中的一个函数，它在定义后立即调用和执行。外部世界无法访问 IIFE 中声明的变量，这样您就可以避免全局范围受到污染。

举例：

(() => {
  /* */
})()
//在/* */可以添加各种函数

还可以给这个函数命名：

(function doSomething() {
  /* */
})()

或者在前面加个分号，以免在整个的函数中发生错误：

;(function doSomething() {
  /* */
})()

试举一例：

let add = (function(a,b){
    return a + b;
})(10, 20);

console.log(add);
//得到结果是30

5.Closures

闭包只是另一个函数内部的一个函数，它可以访问外部函数变量。

试举一例：

在代码选项卡中，您会发现为了通过测试而缺少单个字符的代码。但是，您的目标是提交尽可能简约的函数。使用下面提示部分中的提示。

编写五个加法器函数：

add2(x) should return 2 + x.
add3(x) should return 3 + x.
add5(x) should return 5 + x.
add7(x) should return 7 + x.
add11(x) should return 11 + x.

提示：

下面这个函数

function areSame(a, b) {
    return a == b;
}

可以表示成这样

areSame = (a, b) => a == b;

简单来说，就是将这些函数，改编成带“=>”这个符号的函数

改编前：

function add2(x) {
	return x + 2;
}

function add3(x) {
	return x + 3;
}

function add5(x) {
	return x + 5;
}

function add7(x) {
	return x + 7;
}

function add11(x) {
	return x + 1;
}

改编后：

const add2 = x => x+2
const add3 = x => x+3
const add5 = x => x+5
const add7 = x => x+7
const add11 = x => x+11

6.Callbacks

在 javascript 中，回调只是一个作为参数传递给另一个函数并在另一个函数内部调用或执行的函数。这里一个函数需要等待另一个函数执行或返回值，这使得功能链（当 X 完成时，然后 Y 执行，然后继续）。这就是javascript的异步操作中一般使用回调来提供同步能力的原因。

举例如下：

const greeting = (name) => {
  console.log("Hello " + name);
} 

const getName = (callback) => {
  name = "zhangboheng";
  callback(name);
}

greeting(getName);
//会得到结果“Hello zhangboheng”

7.Promises

我们了解callback的概念，但是如果您的代码在callback中的callback中包含callback并且继续下去会发生什么，那样的结果会惨不忍睹的，这时候Promises就起到了很大的作用。

我们来看一下它在MDN中解释的概念是什么吧：

Promise 对象表示异步操作的最终完成（或失败）及其结果值。

Promise 是在创建 Promise 时不一定知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。这让异步方法可以像同步方法一样返回值：异步方法不是立即返回最终值，而是返回在未来某个时间点提供值的承诺。

通俗来讲，Promise 在异步 javascript 操作中很有用，其中每个后续函数在前一个函数完成时启动。承诺是一个对象，它可能在未来的某个时间产生一个单一的值，要么是已解决的值，要么是未解决（被拒绝）的原因。

有三种状态结果：

  • 已完成：当操作成功完成时
  • 拒绝了：操作失败时
  • 等待中：初始状态，既不满足也不拒绝

举例如下：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

运行后，页面上的返回结果是“OK”。

再举一例演示，比如在3秒后在页面生成“I love you”

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

8.Async & Await

  • Async：async 使函数返回一个 Promise
  • Await：使函数等待 Promise

您可以使用 Async/await 来执行 Rest API 请求，您希望数据在推送到视图之前完全加载。对于 Nodejs 和浏览器程序员来说，async/await 是一个很好的语法改进。它可以帮助开发人员在 javascript 中实现函数式编程，并且还增加了代码的可读性。

试举一例：

const showPosts = async () => {
 const response = await fetch('https://jsonplaceholder.typicode.com/posts');
 const posts = await response.json();
 console.log(posts);
}

showPosts();

下面是您何时将在控制台中运行此代码的图像：

Web开发人员应该掌握的8个Javascript概念

而await 运算符用于等待 Promise。它只能在常规 JavaScript 代码中的异步函数内使用；但是它可以单独用于 JavaScript 模块。

这是一个承诺在 1 秒内解决的示例：

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

f();

它只是一种比 promise.then 更优雅的获取 promise 结果的语法。而且，它更容易阅读和写作。

收 藏
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: