Javascript基础-流程控制语句/函数/箭头函数/随机ip/杨辉三角

适余
163 阅读10分钟

✊不积跬步，无以至千里；不积小流，无以成江海。

条件语句（if 和 switch）、循环语句（for、for-in 和 for-of）以及控制语句（continue 和 break）

  1. if 语句：
    if 语句根据指定的条件执行不同的代码块。
if (condition) {
  // 当条件满足时执行的代码块
} else {
  // 当条件不满足时执行的代码块
}
  1. switch 语句：
    switch 语句根据不同的表达式值执行相应的代码块。
switch (expression) {
  case value1:
    // 当 expression 等于 value1 时执行的代码块
    break;
  case value2:
    // 当 expression 等于 value2 时执行的代码块
    break;
  default:
    // 当 expression 不等于任何 case 时执行的代码块
}
  1. for 循环：
    for 循环用于重复执行指定的代码块一定次数。
for (initialization; condition; iteration) {
  // 循环体中的代码
}
  1. for-in 循环：
    for-in 循环用于遍历对象的可枚举属性。
for (var key in object) {
  // 使用 key 访问对象的属性
}
  1. for-of 循环：
    for-of 循环用于遍历可迭代对象（如数组、字符串等）的元素。
for (var element of iterable) {
  // 使用 element 访问可迭代对象的元素
}
  1. continue 语句：
    continue 语句用于跳过当前循环中的剩余代码，进入下一次循环迭代。
for (var i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}
// 输出结果：0 1 3 4
  1. break 语句：
    break 语句用于终止当前循环，跳出循环体。
for (var i = 0; i < 5; i++) {
  if (i === 2) {
    break;
  }
  console.log(i);
}
// 输出结果：0 1

函数、函数声明、参数、返回值

在 JavaScript 中，函数是一段可重复使用的代码块，用于执行特定的任务。

  1. 函数的声明：
    使用 function 关键字来声明一个函数。
function functionName() {
  // 函数体中的代码
}
  1. 函数的参数：
    函数可以接受零个或多个参数，参数用于传递值给函数。
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // 输出：Hello, John!


函数的参数可以在声明时指定默认值，以便在调用函数时不传递该参数时使用默认值。

function greet(name = "Anonymous") {
  console.log("Hello, " + name + "!");
}

greet(); // 输出：Hello, Anonymous!
greet("John"); // 输出：Hello, John!
  1. 函数的返回值：
    函数可以通过 return 关键字返回一个值，将结果传递给调用函数的地方。
function add(a, b) {
  return a + b;
}

var sum = add(5, 3);
console.log(sum); // 输出：8

函数在执行 `return` 语句后，会立即终止函数的执行，并将返回值传递给调用者。
  1. 匿名函数和函数表达式：
    可以将函数赋值给变量，创建匿名函数或使用函数表达式。
var multiply = function(a, b) {
  return a * b;
};

var result = multiply(4, 2);
console.log(result); // 输出：8


匿名函数和函数表达式可以作为参数传递给其他函数，或者作为立即调用的函数表达式（IIFE）立即执行。

(function() {
  console.log("I'm an IIFE!");
})();
// 输出：I'm an IIFE!

箭头函数

箭头函数是ES6引入的一种新的函数语法，它提供了一种更简洁的方式来定义函数。箭头函数使用箭头（=>）来分隔参数和函数体，并且具有以下特点：

  1. 简洁的语法：箭头函数可以使用更简洁的语法来定义函数，省略了function关键字和大括号。例如：
// 传统函数
function add(x, y) {
  return x + y;
}

// 箭头函数
let add = (x, y) => x + y;
  1. 简化的参数列表：当只有一个参数时，可以省略参数的括号。当没有参数或有多个参数时，需要使用括号。例如：
let square = x => x * x; // 单个参数
let sum = (x, y) => x + y; // 多个参数
let sayHello = () => console.log("Hello"); // 没有参数
  1. 隐式返回值：如果函数体只有一条表达式，可以省略大括号，并且该表达式的结果将作为函数的返回值。例如：
let double = x => x * 2; // 隐式返回值

let multiply = (x, y) => {
  let result = x * y;
  return result;
}; // 显式返回值
  1. 词法作用域绑定：箭头函数没有自己的this值，它会继承父级作用域的this值。这意味着在箭头函数内部，this的值与外部的上下文保持一致。例如：
let obj = {
  name: "John",
  sayHello: function() {
    setTimeout(() => {
      console.log("Hello, " + this.name);
    }, 1000);
  }
};
obj.sayHello(); // 输出 "Hello, John"

箭头函数不适用于所有情况。它们不能用作构造函数，不能使用arguments对象，也不能使用yield关键字。此外，箭头函数的this值是固定的，无法通过call()、apply()或bind()方法来改变。

统计字符串字符个数、二进制转十进制

  1. 统计字符串字符个数：
    可以使用JavaScript中的length属性来获取字符串的字符个数。例如：
let str = "Hello World";
let count = str.length;
console.log(count); // 输出 11
  1. 二进制转十进制：
    可以使用parseInt()函数将二进制字符串转换为十进制数。parseInt()函数接受两个参数，第一个参数是要转换的字符串，第二个参数是基数（即进制）。对于二进制转换，基数应该设置为2。例如：
let binaryString = "101010";
let decimalNumber = parseInt(binaryString, 2);
console.log(decimalNumber); // 输出 42

在这个例子中，parseInt()函数将二进制字符串"101010"转换为十进制数42。

需要注意的是，以上方法只适用于非负整数的二进制转换。

随机IP、随机颜色

  1. 随机IP：
    可以使用Math.random()函数生成随机的IP地址。IP地址由四个数字组成，每个数字的范围是0到255。可以使用Math.random()生成0到1之间的随机数，并将其乘以256取整来生成每个数字。例如：
function generateRandomIP() { 
// 获取 IP 地址的四个部分 
var octets = []; 
for (var i = 0; i < 4; i++) { 
octets.push(Math.floor(Math.random() * 256)); 
} 

// 组合成 IP 地址 
return octets.join("."); 
} 

// 测试 

console.log(generateRandomIP()); // 192.168.1.1

Math.random() 函数会返回一个介于 0 到 1 之间的随机浮点数。如果直接使用 Math.random() 函数来生成 IP 地址，则可能生成一个小数。例如，Math.random() 可能返回 0.55，这将导致 IP 地址的第一个部分为 128.5。

Math.floor() 函数会将一个浮点数向下取整为最接近的整数。因此，Math.floor(Math.random() * 256) 将返回一个介于 0 到 255 之间的整数，这将确保 IP 地址的每个部分都是一个有效的数字。

  1. 随机颜色：
    可以使用Math.random()函数生成随机的颜色。颜色由红、绿、蓝三个分量组成，每个分量的范围是0到255。可以使用Math.random()生成0到1之间的随机数，并将其乘以255取整来生成每个分量。然后使用RGB格式将三个分量拼接成颜色字符串。例如：
function generateRandomColor() {
  let red = Math.floor(Math.random() * 256);
  let green = Math.floor(Math.random() * 256);
  let blue = Math.floor(Math.random() * 256);
  return `rgb(${red}, ${green}, ${blue})`;
}

let randomColor = generateRandomColor();
console.log(randomColor); // 输出随机的颜色，如 "rgb(123, 45, 67)"

打印杨辉三角：

杨辉三角是一个由数字组成的三角形，每个数字是上方两个数字之和。可以使用嵌套循环来生成杨辉三角，并使用console.log()函数打印出来。例如：

function printPascalTriangle(n) {
  // 声明块级变量
  let triangle = [];
  let i;
  let j;

  // 创建二维数组
  for (i = 0; i <= n; i++) {
    triangle.push([]);
    for (j = 0; j <= i; j++) {
      // 计算杨辉三角中每个元素的值
      //表示判断j是否等于 0 或i。如果j等于 0 或i，则j是杨辉三角中的第一列或最后一列，因此它的值为 1。
      if (j === 0 || j === i) {
        triangle[i].push(1);
      } else {
        triangle[i].push(triangle[i - 1][j - 1] + triangle[i - 1][j]);
        //这句话的意思是，将杨辉三角第 i 行的第 j 个数字的值，设置为第 i - 1 行的第 j - 1 个数字和第 i - 1 行的第 j 个数字的和。
        杨辉三角的每一行，从左到右，除了第一个数字和最后一个数字是 1 之外，其他数字都是其上一行同列和上一行前一列的数字之和。
      }
    }
  }

  // 打印杨辉三角
  for (i = 0; i <= n; i++) {
    for (j = 0; j <= i; j++) {
      console.log(triangle[i][j], " ");
    }
    console.log();
  }
}

// 测试
printPascalTriangle(5);

这段代码使用以下步骤来打印杨辉三角：

  1. 创建一个二维数组，用于存储杨辉三角。
  2. 循环遍历二维数组，计算每个元素的值。
  3. 循环遍历二维数组，打印每个元素。

以下是这段代码的输出：

1 
1 1 
1 2 1 
1 3 3 1 
1 4 6 4 1

关于代码中一些细节的解释：

var和let

var 关键字声明的变量是 局部变量，即它们只在声明它们的函数或代码块中可用。在打印杨辉三角的代码中，triangle、i 和 j 都是局部变量。

如果我们使用 let 关键字来声明这些变量，则它们将是 块级变量，即它们在声明它们的代码块中可用，以及其所有子代码块中。

作用域

var 声明的变量是局部变量，即它们只在声明它们的函数或代码块中可用。let 声明的变量是块级变量，即它们在声明它们的代码块中可用，以及其所有子代码块中。

初始化

var 声明的变量会在声明时默认初始化为 undefined。let 声明的变量不会在声明时初始化，必须在使用之前显式赋值。

重新声明

var 声明的变量可以被重新声明，即使它们已经被声明过。let 声明的变量不能被重新声明。

重复声明

var 允许变量在同一个作用域中重复声明。let 不允许变量在同一个作用域中重复声明。

暂时性死区

var 声明的变量在声明时会提升到作用域的顶部，但不会立即初始化。这可能会导致暂时性死区，即变量在使用之前还没有被初始化。let 声明的变量不会提升到作用域的顶部，因此不会出现暂时性死区。

示例

以下是 var 和 let 的使用示例：

// var 声明的变量是局部变量
function foo() {
  var x = 1; // 局部变量 x
  console.log(x); // 1
}

// let 声明的变量是块级变量
function foo() {
  let x = 1; // 块级变量 x
  console.log(x); // 1

  {
    let x = 2; // 块级变量 x
    console.log(x); // 2
  }

  console.log(x); // 1
}

foo(); // 1 2 1

局部 大 于 块级

push()

在打印杨辉三角代码中，triangle.push([]); 表示将一个空数组追加到 triangle 数组中。

triangle 是一个二维数组，用于存储杨辉三角。push() 方法用于将元素追加到数组的末尾。在本例中，我们将一个空数组追加到 triangle 数组中。这将创建一个新的数组行，用于存储杨辉三角的下一行元素。

以下是 triangle.push([]); 的详细说明：

  • triangle 是 printPascalTriangle() 函数的局部变量，它是一个二维数组。
  • .push() 是数组对象的方法，用于将元素追加到数组的末尾。
  • [] 是一个空数组。

因此，triangle.push([]); 表示将一个空数组追加到 triangle 数组中。

triangle[i].push(triangle[i - 1][j - 1] + triangle[i - 1][j]);

这句话的意思是，将杨辉三角第 i 行的第 j 个数字的值，设置为第 i - 1 行的第 j - 1 个数字和第 i - 1 行的第 j 个数字的和。

杨辉三角的每一行，从左到右，除了第一个数字和最后一个数字是 1 之外，其他数字都是其上一行同列和上一行前一列的数字之和。

例如，杨辉三角的前 3 行如下： 第 1 行：1 第 2 行：1, 1 第 3 行：1, 2, 1

根据杨辉三角的性质，第 3 行的第 2 个数字的值是第 2 行的第 1 个数字和第 2 行的第 2 个数字的和，即 1 + 1 = 2。

因此，triangle[3].push(triangle[2][1] + triangle[2][2]); 这句话的意思是，将杨辉三角第 3 行的第 2 个数字的值，设置为第 2 行的第 1 个数字和第 2 行的第 2 个数字的和，即 1 + 1 = 2。

因此，这句话的值为 2。

avatar
文章
阅读
粉丝