Javascript 简明教程

JavaScript - ES5

JavaScript 的 ES6 版本于 2015 年发布，标志着 JavaScript 的第二次重大修订。ES6 也被称为 ECMAScript 2015。ES6 中引入的一些重要功能是箭头函数、let 和 const 关键字、类、res 参数等。本章将讨论 ES6 版本中所有新添加的功能。

New Added Features in ES6

以下是添加到 JavaScript 的 ES6 版本中的新方法、功能等。

  1. Arrow Functions

  2. Array find()

  3. Array findIndex()

  4. Array from()

  5. Array keys()

  6. Classes

  7. const keyword

  8. Default Parameters

  9. For/of

  10. Function Rest Parameter

  11. JavaScript Modules

  12. let keyword

  13. Map Objects

  14. New Global Methods

  15. New Math Methods

  16. New Number Methods

  17. New Number Properties

  18. Promises

  19. Set Objects

  20. String.endsWith()

  21. String.includes()

  22. String.startsWith()

  23. Symbol

  24. The spread Operator

在此，我们使用示例详细解释了每个功能。

JavaScript Arrow Functions

箭头函数是一种编写更短函数代码的方式。箭头函数的概念允许你在不使用函数关键字、大括号和 return 关键字的情况下定义函数。

Example

在以下代码中，func() 是一个常规函数，而变量 subtracts 存储箭头函数。

<html>
<body>
   <div id = "output">The subtraction of 20 and 10 is: </div>
   <script>
      /* Normal function
      function func(a, b) {
         return a - b;
      }
      */
      // Arrow function
      const subtract = (a, b) => a - b;
      document.getElementById("output").innerHTML += subtract(20, 10);
   </script>
</body>
</html>
The subtraction of 20 and 10 is: 10

JavaScript Array find() Method

JavaScript array.find() 方法返回遵循特定条件的第一个元素。

Example

在以下代码中，我们使用 array.find() 方法查找长度小于 4 的第一个数组元素。

<html>
<body>
   <div id = "output">The first array element whose length is less than 4 is: </div>
   <script>
      const strs = ["Hello", "World", "How", "are", "You"];

      function func_len(value, index, array) {
         return value.length < 4;
      }

      document.getElementById("output").innerHTML += strs.find(func_len);
   </script>
</body>
</html>
The first array element whose length is less than 4 is: How

JavaScript Array findIndex()

JavaScript array.findIndex() 方法类似于 array.find() 方法，但它返回第一个匹配特定条件的元素的索引。它返回 0 索引。

Example

在以下代码中，我们使用 array.findIndex() 方法查找长度小于 4 的第一个元素的索引。

<html>
<body>
   <div id = "output">The first array element whose length is less than 4 is: </div>
   <script>

      const strs = ["Hello", "World", "How", "are", "You"];

      function func_len(value, index, array) {
         return value.length < 4;
      }

      document.getElementById("output").innerHTML += strs.findIndex(func_len);
   </script>
</body>
</html>
The first array element whose length is less than 4 is: 2

JavaScriipt Array from()

JavaScript Array.from() 方法从作为参数传递的可迭代对象创建一个数组。

Example

在以下代码中，我们使用 Array.from() 方法从字符串创建一个数组。但是，你也可以将可迭代对象作为 Array.from() 方法的参数进行传递。

<html>
<body>
   <div id = "output">The array from the Hello string is: </div>
   <script>
      document.getElementById("output").innerHTML += Array.from("Hello");
   </script>
</body>
</html>
The array from the Hello string is: H,e,l,l,o

JavaScript Array keys()

JavaScript array.keys() 方法返回一个用于迭代键的迭代器。数组元素的键是数组元素的索引。

Example

在以下代码中，我们使用 keys() 方法获取 nums[] 数组的键的迭代器。然后，我们使用 for/of 循环来遍历数组键。

<html>
<body>
   <div id = "demo">The keys of the nums array is: <br></div>
   <script>
      const output = document.getElementById("demo");
      const nums = [45, 67, 89, 342, 123, 12];
      const iteratorNums = nums.keys();
      for (let key of iteratorNums) {
         output.innerHTML += key + "<br>";
      }
   </script>
</body>
</html>
The keys of the nums array is:
0
1
2
3
4
5

JavaScript Classes

类在面向对象编程语言中至关重要。它是对象的蓝图。

你可以使用 class 关键字来定义类。你可以在类主体中添加构造函数、属性和方法。若要访问类属性和方法，可使用类实例。

Example

在下方的代码中，我们定义了动物类。

构造器初始化 name 和 isVegetarian 属性的值。getInfo() 方法返回动物信息。

我们创建了动物类的对象，并使用它调用类的 getInfo() 方法。

<html>
<body>
   <div id = "output">The animal information is: </div>
   <script>
      class animal {
         constructor(name, isVegetarian) {
            this.name = name;
            this.isVegetarian = isVegetarian;
         }
         getInfo() {
            return "Name : " + this.name + ", " + "isVegetarian? : " + this.isVegetarian;
         }
      }

      const lion = new animal("Lion", false);

      document.getElementById("output").innerHTML += lion.getInfo();
   </script>
</body>
</html>
The animal information is: Name : Lion, isVegetarian? : false

JavaScript const keyword

JavaScript const 关键字用于声明常量变量。您需要在声明常量变量时对其进行初始化。

Example

在下方的代码中，"fruit" 是一个常量变量。您无法重新初始化它的值。

<html>
<body>
   <div id = "output">The value of the fruit variable is: </div>
   <script>
      const fruit = "Apple";
      // fruit = "Banana"; This is Invalid
      document.getElementById("output").innerHTML += fruit;
   </script>
</body>
</html>
The value of the fruit variable is: Apple

JavaScript let keyword

JavaScript let 关键字用于定义受阻的范围变量。

Example

在下方的代码中，我们在"if" 块内部使用 let 关键字定义了变量"a"。由于其范围规则，无法在"if" 块外部访问它。

<html>
<body>
   <div id = "output"> </div>
   <script>
      if (true) {
         let a = 20;
         document.getElementById("output").innerHTML += "The value of a is: " + a;
      }
      // You can't access it here.
   </script>
</body>
</html>
The value of a is: 20

JavaScript Default Parameters

默认参数意味着函数参数可以具有默认值。当您没有传递足够的参数到函数时，它会使用默认参数值。

Example

在下方的代码中，division() 函数接受两个参数。a 的默认值为 10，b 的默认值为 2。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      function division(a = 10, b = 2) {
         return a / b;
      }
      output.innerHTML += "division(40, 5) => " + division(40, 5) + "<br>";
      output.innerHTML += "division(40) => " + division(40) + "<br>";
      output.innerHTML += "division() => " + division();
   </script>
</body>
</html>
division(40, 5) => 8
division(40) => 20
division() => 5

JavaScript for…of Loop

JavaScript for…​of 循环遍历诸如数组、字符串、集合、映射等可迭代项。

Example

在下方的代码中，我们遍历数字数组，并将数组的每个元素打印到输出中。

<html>
<body>
   <div id = "output">The array elements are:  </div>
   <script>
      const array = [10, 67, 82, 75, 80];
      for (let number of array) {
         document.getElementById("output").innerHTML += number + ", ";
      }
   </script>
</body>
</html>
The array elements are: 10, 67, 82, 75, 80,

JavaScript Function Rest Parameter

当您不确定函数的参数数量时，可以使用 rest 参数。rest 参数允许您将多个参数收集到单个数组中。

Example

我们使用 rest 参数将下面的代码传递给 sum() 函数。rest 参数的名称可以是有效的标识符，并且它与展开（…​）运算符一起使用。

sum() 函数添加多个数值并返回它们。

<html>
<body>
   <div id = "output">sum(10, 67, 82, 75, 80) =  </div>
   <script>
      function sum(...restParam) {
         let res = 0;
         for (let ele of restParam) {
            res += ele;
         }
         return res;
      }
      document.getElementById("output").innerHTML += sum(10, 67, 82, 75, 80);
   </script>
</body>
</html>
sum(10, 67, 82, 75, 80) = 314

JavaScript Modules

在 JavaScript 中，您可以创建不同的模块来编写可重用代码。然后，您可以将模块导入到不同的 JavaScript 文件中。

Default Export/Import modules

const moduleMath = "This is the default value.";
export default moduleMath; // Exporting the module

在其他 JavaScript 文件中，

// Importing the default module
import moduleMath from './filename.js';
console.log(moduleMath);

Named Export/Import modules

您还可以从模块中导出特定函数或属性，并将它们导入到其他 JavaScript 文件中。

// Exporting variables
export const size = 90;

// Exporting function
export function add(a, b) {
  return a + b;
}

在其他 JavaScript 文件中，

// Importing specific properties and functions
import { size, add} from './filename.js';

console.log(myVariable); // 90
console.log(add(15, 25)); // 40

JavaScript Map Objects

映射用于存储键值对。您可以使用 Map() 构造器定义映射。

Example

在下面的示例中，我们使用映射来存储水果的名称和价格。set() 方法用于将键值对插入 fruit 映射中，get() 方法用于从映射中获取特定键的值。

<html>
<body>
   <div id = "output1">The price of the Apple is: </div>
   <div id = "output2">The price of the Banana is: </div>
   <script>
      const fruit = new Map();
      fruit.set("Apple", 50);
      fruit.set("Banana", 60);
      document.getElementById("output1").innerHTML += fruit.get("Apple") + "<br>";
      document.getElementById("output2").innerHTML += fruit.get("Banana");
   </script>
</body>
</html>
The price of the Apple is: 50
The price of the Banana is: 60

New Global Methods

在 ES6 中，添加了两个全局方法。

  1. isFinite()

  2. isNaN()

isFinite()

isFinite() 方法检查作为参数传递的值是否是有限的。

Example

在下面的代码中，num1 变量包含无限值，num2 包含有效数字值。

我们使用 isFinite() 方法检查 num1 和 num2 变量的值是否有限。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const num1 = 6453 / 0;
      const num2 = 90;
      document.getElementById("output").innerHTML =
	  "isFinite(6453 / 0): " + isFinite(num1) + "<br>" +
      "isFinite(90): " + isFinite(num2);
   </script>
</body>
</html>
isFinite(6453 / 0): false
isFinite(90): true

isNaN()

isNaN() 方法检查参数是否是有效数字。它对数字值返回 false。

Example

在下面的代码中，isNaN() 方法对 num1 变量返回 true，因为它包含字符串，而字符串不是数字。对 num2 变量，isNaN() 方法返回 false，因为它包含数字值。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const num1 = "Hello";
      const num2 = 867;
      document.getElementById("output").innerHTML =
	  "isNaN(num1):  " + isNaN(num1) + "<br>" +
      "isNaN(num2):  " + isNaN(num2);
    </script>
</body>
</html>
isNaN(num1): true
isNaN(num2): false

New JavaScript Math Methods

在 ES6 中，为 Math 对象添加了 5 个新方法。

  1. Math.cbrt() − 用于查找给定数字的立方根。

  2. Math.log2() – 用于查找某个数字的对数并使用底 2。

  3. Math.log10() – 查找数字值的底 10 对数。

  4. Math.trunc() – 从浮点数中移除小数部分并将其转换为整数。

  5. Math.sign() – 根据作为参数传递的数字的符号，返回 1、0 和 -1。

Example: Math.cbrt()

下面的代码找出了 64 的立方根。

<html>
<body>
   <div id = "output">The cube root of the 64 is: </div>
   <script>
      document.getElementById("output").innerHTML += Math.cbrt(64);
   </script>
</body>
</html>

Example: Math.log2()

下面的代码找出了 30 的底 2 对数。

<html>
<body>
   <div id = "output">The value of logarithm of 30 base 2 is: </div>
   <script>
      document.getElementById("output").innerHTML += Math.log2(30);
   </script>
</body>
</html>

Example: Math.log10()

下面的代码找出了 10 的底 10 对数。

<html>
<body>
   <div id = "output">The value of the logarithm of 10 base 10 is: </div>
   <script>
      document.getElementById("output").innerHTML += Math.log10(10);
   </script>
</body>
</html>

Example: Math.trunc()

下面的代码使用 Math.trunc() 方法截断了浮点数。

<html>
<body>
   <div id = "output">After converting 23.2 to integer is: </div>
   <script>
      document.getElementById("output").innerHTML += Math.trunc(23.2);
   </script>
</body>
</html>

Example: Math.sign()

<html>
<body>
   <div id="output1">Math.sign(23): </div>
   <div id="output2">Math.sign(-23): </div>
   <script>
      document.getElementById("output1").innerHTML += Math.sign(23);
      document.getElementById("output2").innerHTML += Math.sign(-23);
   </script>
</body>
</html>

New Number Methods

在 ES6 中，添加了两个新的数字方法。

  1. Number.isInteger() − 它检查作为参数传递的数字是否是整数。

  2. Number.isSafeInteger() − 它检查数字是否可以表示为 64 位双精度数字。

Example

下面的代码检查 10 和 10.5 是否是整数。此外，它使用 number 类的 isSafeInteger() 方法检查该数字是否是安全整数。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      output.innerHTML += "Is 10 integer? " + Number.isInteger(10) + "<br>";
      output.innerHTML += "Is 10.5 integer? " + Number.isInteger(10.5) + "<br>";

      output.innerHTML += "Is 10000 safe integer? " + Number.isSafeInteger(10000) + "<br>";
      output.innerHTML += "Is 10000000000000000000000 safe integer? " + Number.isSafeInteger(10000000000000000000000);
   </script>
</body>
</html>
Is 10 integer? true
Is 10.5 integer? false
Is 10000 safe integer? - true
Is 10000000000000000000000 safe integer? - false

New Number Properties

在 ES6 中，添加了三个新数字属性。

  1. EPSILON − 它返回 Epsilon 的值。

  2. MIN_SAFE_INTEGER − 它返回 64 位数字可以表示的最小整数值。

  3. MAX_SAFE_INTEGER − 返回可以由 64 位表示的最大数字。

Example

下面的代码显示了 Epsilon 常量、安全整数的最小值、JavaScript 中安全整数的最大值。

<html>
<body>
   <div id = "output1">The value of Epsilon is: </div>
   <div id = "output2">The minimum safe integer is:  </div>
   <div id = "output3">The maximum safe integer is: </div>
   <script>
      document.getElementById("output1").innerHTML +=  Number.EPSILON;
      document.getElementById("output2").innerHTML +=  Number.MIN_SAFE_INTEGER;
      document.getElementById("output3").innerHTML +=  Number.MAX_SAFE_INTEGER
   </script>
</body>
</html>
The value of Epsilon is: 2.220446049250313e-16
The minimum safe integer is: -9007199254740991
The maximum safe integer is: 9007199254740991

JavaScript Promises

在 JavaScript 中，promise 用于异步处理代码。

它生成并消耗代码。

Example

在下面的代码中，我们使用 Promise() 构造函数创建一个 promise。我们根据使用 Math 块的 random() 方法生成随机值来解决并拒绝该 promise。

之后，我们使用 then() 和 catch() 块处理 promise。

<html>
<body>
   <div id = "output"> </div>
   <script>
      // Creating a Promise
      const newPromise = new Promise((res, rej) => {
         setTimeout(() => {
            const rand_value = Math.random();
            if (rand_value < 0.5) {
               res("Value is less than 0.5"); // Resolving the promise
            } else {
               rej("Value is greater than 0.5"); // Rejecting the promise
            }
         }, 1000); // Adding 1 second delay
      });

      // Consuming the Promise
      newPromise
         .then((res) => {
             document.getElementById("output").innerHTML += res;
          })
         .catch((rej) => {
              document.getElementById("output").innerHTML += rej;
         });
   </script>
</body>
</html>
Value is greater than 0.5

JavaScript Set Objects

Set() 构造函数用于创建一个集合。该集合仅存储不同类型的唯一元素。

Example

在下面的代码中，我们创建了一个新的集合，并将包含数字的数组作为 Set() 构造函数的参数传递。该集合仅包含唯一元素，您可以在输出中看到。

<html>
<body>
   <div id = "output">The set elements are: </div>
   <script>
      const num_set = new Set([10, 20, 20, 42, 12]);
      for (let num of num_set) {
         document.getElementById("output").innerHTML += ", " + num;
      }
   </script>
</body>
</html>
The set elements are: , 10, 20, 42, 12

JavaScript New String Methods

在 ES6 中，添加了三个新的字符串方法。

  1. endsWith() − 检查字符串是否以特定子字符串结尾。

  2. includes() − 检查字符串在任何位置是否包含子字符串。

  3. startsWith() − 检查字符串是否以特定子字符串开头。

Example

下面的示例演示如何使用字符串 endsWith()、includes() 和 startsWith() 方法以及帮助信息“您怎么样？我很好！”

<html>
<body>
   <div id = "output1">Does string end with 'fine'? </div>
   <div id = "output2">Does string include 'are'? </div>
   <div id = "output3">Does string start with 'How'?  </div>
   <script>
      let str = "How are you? I'm fine!";
      document.getElementById("output1").innerHTML +=  str.endsWith("fine!");
      document.getElementById("output2").innerHTML += str.includes("are");
      document.getElementById("output3").innerHTML += str.startsWith("How");
   </script>
</body>
</html>
Does string end with 'fine'? true
Does string include 'are'? true
Does string start with 'How'? true

JavaScript Symbol

JavaScript Symbol 是一款原始数据类型。在 JavaScript 中，每个 Symbol 都是唯一的。您可以用它创建唯一的 ID。

Example

在下面的代码中，我们定义了两个符号，并将相同的值作为参数传递。不过，这两个符号都是唯一的，您可以在输出中看到。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const sym1 = Symbol("a");
      const sym2 = Symbol("a");
      if (sym1 == sym2) {
         document.getElementById("output").innerHTML += "sym1 and sym2 are equal. <br>";
      } else {
         document.getElementById("output").innerHTML += "sym1 and sym2 are not equal.";
      }
   </script>
</body>
</html>
sym1 and sym2 are not equal.

JabaScript Spread Operator

JavaScript 展开运算符允许你创建可迭代对象的副本，例如数组、字符串等。

Example

以下代码展示了使用展开运算符从字符串中创建字符数组。

<html>
<body>
   <div id = "output">The char array is: </div>
   <script>
      let str = "Hello World!";
      const char = [...str];
      document.getElementById("output").innerHTML += char;
   </script>
</body>
</html>
The char array is: H,e,l,l,o, ,W,o,r,l,d,!