首页 > 编程语言 >【技术积累】JavaScript中的基础语法【三】

【技术积累】JavaScript中的基础语法【三】

时间：2023-07-17 10:12:21浏览次数：45  
标签：积累 语句 函数 作用域 JavaScript 语法 循环 变量

JavaScript的条件结构

JavaScript中的条件结构主要包括if语句、if-else语句、if-else if语句和switch语句。这些条件结构用于根据不同的条件执行不同的代码块。

if语句

if语句用于在满足条件时执行一段代码块。语法如下：

if (condition) {
  // code to be executed if condition is true
}

示例代码：

let num = 10;
if (num > 0) {
  console.log("Number is positive");
}

解释：如果变量num的值大于0，则打印"Number is positive"。

if-else语句

if-else语句用于在满足条件时执行一个代码块，否则执行另一个代码块。语法如下：

if (condition) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is false
}

示例代码：

let num = -5;
if (num > 0) {
  console.log("Number is positive");
} else {
  console.log("Number is negative");
}

解释：如果变量num的值大于0，则打印"Number is positive"，否则打印"Number is negative"。

if-else if语句

if-else if语句用于在满足多个条件时执行不同的代码块。语法如下：

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if none of the conditions are true
}

示例代码：

let num = 0;
if (num > 0) {
  console.log("Number is positive");
} else if (num < 0) {
  console.log("Number is negative");
} else {
  console.log("Number is zero");
}

解释：如果变量num的值大于0，则打印"Number is positive"；如果变量num的值小于0，则打印"Number is negative"；否则打印"Number is zero"。

switch语句

switch语句用于根据不同的条件执行不同的代码块。语法如下：

switch (expression) {
  case value1:
    // code to be executed if expression matches value1
    break;
  case value2:
    // code to be executed if expression matches value2
    break;
  default:
    // code to be executed if expression doesn't match any value
}

示例代码：

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Other day");
}

解释：根据变量day的值，打印相应的星期几。

以上是JavaScript中常用的条件结构，根据不同的需求选择合适的条件结构来编写代码。

JavaScript的循环结构

在JavaScript中，循环结构用于重复执行一段代码，直到满足特定条件为止。JavaScript提供了多种循环结构，包括for循环、while循环和do-while循环。

for循环

for循环用于重复执行一段代码，可以指定循环的起始条件、终止条件和每次迭代的步长。

案例：计算1到10的和。

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 输出55

解释：在这个例子中，我们使用for循环从1到10迭代，每次迭代将当前的i值加到sum变量中。最后，我们输出sum的值，得到1到10的和。

while循环

while循环用于在满足特定条件时重复执行一段代码。

案例：计算1到10的和。

let sum = 0;
let i = 1;
while (i <= 10) {
  sum += i;
  i++;
}
console.log(sum); // 输出55

解释：在这个例子中，我们使用while循环来重复执行代码块，直到i的值大于10。在每次迭代中，我们将当前的i值加到sum变量中，并递增i的值。

do-while循环

do-while循环与while循环类似，但它会先执行一次代码块，然后再检查条件是否满足。

案例：计算1到10的和。

let sum = 0;
let i = 1;
do {
  sum += i;
  i++;
} while (i <= 10);
console.log(sum); // 输出55

解释：在这个例子中，我们使用do-while循环来重复执行代码块，直到i的值大于10。在每次迭代中，我们将当前的i值加到sum变量中，并递增i的值。由于do-while循环先执行一次代码块，所以即使条件不满足，代码块也会执行一次。

以上是JavaScript中常用的循环结构及其案例。这些循环结构可以根据具体的需求选择使用，用于重复执行一段代码，提高代码的复用性和效率。

JavaScript的循环控制

在JavaScript中，循环控制用于在循环执行过程中改变循环的行为，包括跳出循环、跳过当前迭代和终止整个脚本的执行。

break语句

break语句用于跳出循环，即使循环条件仍然满足。

案例：找到数组中的第一个负数。

const numbers = [1, 2, -3, 4, 5];
let firstNegative = null;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    firstNegative = numbers[i];
    break;
  }
}

console.log(firstNegative); // 输出-3

解释：在这个例子中，我们使用for循环遍历数组numbers。当找到第一个负数时，我们使用break语句跳出循环，并将该负数赋值给firstNegative变量。

continue语句

continue语句用于跳过当前迭代，继续执行下一次迭代。

案例：计算数组中正数的和。

const numbers = [1, -2, 3, -4, 5];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    continue;
  }
  sum += numbers[i];
}

console.log(sum); // 输出9

解释：在这个例子中，我们使用for循环遍历数组numbers。当遇到负数时，我们使用continue语句跳过当前迭代，继续执行下一次迭代。只有当数字为正数时，我们将其加到sum变量中。

return语句

return语句用于终止整个脚本的执行，不仅仅是循环。

案例：找到数组中的第一个负数，并返回其索引。

function findFirstNegative(numbers) {
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] < 0) {
      return i;
    }
  }
  return -1;
}

const numbers = [1, 2, -3, 4, 5];
const index = findFirstNegative(numbers);

console.log(index); // 输出2

解释：在这个例子中，我们定义了一个函数findFirstNegative，该函数使用for循环遍历数组numbers。当找到第一个负数时，我们使用return语句终止函数的执行，并返回负数的索引。如果没有找到负数，则返回-1。

以上是JavaScript中常用的循环控制语句及其案例。这些循环控制语句可以根据具体的需求选择使用，用于改变循环的行为，提供更灵活的控制和处理方式。

JavaScript执行上下文作用域

执行上下文是JavaScript中的一个概念，它定义了变量和函数的可访问性以及代码的执行顺序。每当JavaScript代码执行时，都会创建一个执行上下文，并将其添加到执行上下文栈中。

执行上下文作用域是指在当前执行上下文中可访问的变量、函数和对象。JavaScript中有三种类型的执行上下文作用域：全局作用域、函数作用域和块级作用域。

全局作用域

全局作用域是在代码中没有嵌套在任何函数或块级作用域中的部分。在全局作用域中声明的变量和函数可以在代码的任何地方访问。

案例：在全局作用域中声明和访问变量。

let message = "Hello, world!";

function showMessage() {
  console.log(message);
}

showMessage(); // 输出Hello, world!

解释：在这个例子中，变量message在全局作用域中声明，并且可以在函数showMessage中访问和使用。

函数作用域

函数作用域是在函数内部声明的变量和函数所在的作用域。在函数作用域中声明的变量和函数只能在函数内部访问。

案例：在函数作用域中声明和访问变量。

function showMessage() {
  let message = "Hello, world!";
  console.log(message);
}

showMessage(); // 输出Hello, world!
console.log(message); // 报错，message未定义

解释：在这个例子中，变量message在函数作用域中声明，并且只能在函数内部访问和使用。在函数外部尝试访问message变量会导致错误。

块级作用域

块级作用域是在代码块（例如if语句、for循环等）内部声明的变量和函数所在的作用域。在块级作用域中声明的变量和函数只能在该代码块内部访问。

案例：在块级作用域中声明和访问变量。

if (true) {
  let message = "Hello, world!";
  console.log(message);
}

console.log(message); // 报错，message未定义

解释：在这个例子中，变量message在块级作用域中声明，并且只能在if语句的代码块内部访问和使用。在代码块外部尝试访问message变量会导致错误。

执行上下文作用域决定了变量和函数的可访问性。了解不同类型的执行上下文作用域可以帮助我们编写更具可读性和可维护性的代码，并避免变量冲突和作用域污染的问题。

async和defer

async和defer是用于控制脚本加载和执行的属性，它们通常用于在HTML文档中引入外部JavaScript文件。

async属性

async属性用于异步加载脚本文件。当浏览器遇到带有async属性的脚本标签时，它会立即开始下载脚本文件，并在下载完成后立即执行脚本，而不会等待其他资源的加载和解析。

案例：使用async属性异步加载脚本文件。

<!DOCTYPE html>
<html>
<head>
  <title>Async Example</title>
</head>
<body>
  <script async src="script.js"></script>
  <h1>Hello, world!</h1>
</body>
</html>

解释：在这个例子中，我们使用async属性在HTML文档中异步加载脚本文件script.js。浏览器会立即开始下载脚本文件，而不会阻塞HTML文档的解析和其他资源的加载。因此，页面上的"h1"标签会在脚本加载和执行过程中显示出来。

defer属性

defer属性用于延迟加载脚本文件。当浏览器遇到带有defer属性的脚本标签时，它会继续解析HTML文档，并在文档解析完成后再按照顺序执行延迟加载的脚本文件。

案例：使用defer属性延迟加载脚本文件。

<!DOCTYPE html>
<html>
<head>
  <title>Defer Example</title>
</head>
<body>
  <script defer src="script.js"></script>
  <h1>Hello, world!</h1>
</body>
</html>

解释：在这个例子中，我们使用defer属性在HTML文档中延迟加载脚本文件script.js。浏览器会继续解析HTML文档，并在文档解析完成后按照顺序执行延迟加载的脚本文件。因此，页面上的"h1"标签会在脚本加载和执行完成后显示出来。

async和defer属性都可以用于优化脚本加载和执行的顺序，提高页面的性能和用户体验。它们的选择取决于脚本的依赖关系和执行时机的要求。

JavaScript闭包

JavaScript闭包指的是函数创建时的作用域仍然存在于函数调用之后的能力，即函数可以访问它所创建的作用域内的变量和函数，即使这个作用域已经被销毁了。

闭包是由函数和函数内部状态（即函数运行时能访问的变量）构成的组合体。在JavaScript中，只要有内部函数，就有闭包的产生。

闭包的具体作用包括：

  1. 保护变量不受全局污染。使用闭包可以将变量封装在函数内部，避免其污染全局变量。
  2. 记录函数执行时的状态。通过闭包，可以记录函数执行时的状态，这在事件函数和回调函数中会有很大的作用。
  3. 延长局部变量的生命周期。如果局部变量在函数执行结束后就被销毁，但是如果其被闭包所引用，那么这个变量将一直存在于内存中，不会被销毁。

使用闭包时需要注意以下几点：

  1. 闭包会占用内存，过多的闭包可能会导致内存泄漏，应该尽量避免使用过多的闭包。
  2. 闭包中的变量在被引用时必须已经存在，否则会出现undefined的情况。因此需要注意函数调用的顺序。
  3. 闭包的作用域链不应该太长，否则会影响代码的性能。
function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();
counter(); // 输出1
counter(); // 输出2
counter(); // 输出3

解释：在这个例子中，我们定义了一个外部函数createCounter，该函数内部定义了一个变量count和一个内部函数increment。内部函数increment可以访问并修改外部函数作用域中的变量count。我们通过调用外部函数createCounter，将内部函数increment作为返回值返回，并将其赋值给变量counter。每次调用counter函数时，它都会访问并更新外部函数作用域中的count变量，并将其打印出来。

因此，通过使用闭包，可以实现记忆计数器的功能，不需要使用全局变量或者类似的论坛限制方式。

标签：积累,语句,函数,作用域,JavaScript,语法,循环,变量
From： https://www.cnblogs.com/yyyyfly1/p/17559177.html

相关文章

  • javascript 快排
    functionquickSort(arr){//如果数组只有一个数，就直接返回；if(arr.length<1){returnarr;}//找到中间的那个数的索引值；如果是浮点......
  • 【技术积累】JavaScript中的基础语法【二】
    JavaScript编写方式JavaScript是一种脚本语言，用于为网页添加交互性和动态功能。它可以直接嵌入到HTML中，并通过浏览器解释执行。下面是一些常见的JavaScript编写方式和相应的代码示例：内联方式在HTML文件中直接嵌入JavaScript代码，使用`<script>`标签将代码包裹起来。这种方式适用......
  • JavaScript：将对象数组映射到字典
    JavaScript：将对象数组映射到字典#javascript#打字稿#数据在JavaScript/TypeScript中将对象数组转换为字典的最简单方法：letdata=[{id:1,country:'Germany',population:83623528},{id:2,country:'Austria',population:8975552},{id:3,country......
  • SQL语法
    joinLEFTJOIN连接左表中的所有行，即使在右表中找不到匹配的行也显示出来，用NULL值代替。RIGHTJOIN和LEFTJOIN在功能上是等效的，只要表顺序被切换。INNERJOIN中ON条件等同于WHERE子句中的条件。groupbygroupby在where后面，groupby紧跟着having，groupby默认取第1条。like匹......
  • 【技术积累】JavaScript中的基础语法【一】
    Math对象JavaScript中的Math对象是一个内置的数学对象，表示对数字进行数学运算的方法和属性的集合。Math对象不是一个构造函数，所以不能使用new关键字来创建一个Math对象的实例。它包含了一些常见的数学运算函数和常量，可以直接通过Math对象来调用。以下是Math对象的一些常用方法：......
  • 【技术积累】Vue.js中的事件【一】
    Vue中的事件是什么在Vue.js中，事件是用于处理用户交互的重要机制。Vue.js提供了一系列的事件处理方法和指令，使开发者能够方便地处理用户的各种操作。1.事件绑定：Vue.js通过v-on指令来绑定事件。可以在HTML标签上使用v-on指令来监听特定的事件，并在触发事件时执行相应的方法。例如，......
  • JavaScript
    html<!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/html"><head><metaname="author"content="weiyupeng"><metaname="time"content="2023/7/1020:23"......
  • Markdown语法大全
    使用Markdown进行文档编辑Markdown是一种轻量级的标记语言，广泛用于编写文档和格式化文本。它具有简洁、易读、易写的特点，适用于各种场景，如写博客、编写文档、撰写README文件等。标题在Markdown中，你可以使用不同数量的#符号来创建标题。一个#表示一级标题，两个#表示二级标题，以此......
  • Perl学习笔记1_面向对象语法
    perl面向对象没有什么特别的语法,以例子介绍如下.例子中涉及三个文件:main.pl,AllPerson.pm,Person.pm.其中:main.pl是主脚本,它要用到AllPerson.pm.AllPerson.pm是一个class,它要用到Person.pm.Person.pm是一个class,存储人员信息.main.pl#!/usr/bin/perlusestr......
  • 10.JavaScript原型，原型链有什么特点
    10.JavaScript原型，原型链？有什么特点？在js中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个prototype属性值，这个属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后，在这个对象的内部将包含......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99