JavaScript高级——ES6基础入门


前言
ES6(ECMAScript 6),也被称为ES2015,是JavaScript的第六个版本.它于2015年发布,并在现代JavaScript开发中扮演了重要的角色.

学习方法:

看千遍,不如自己动手写一遍
遇到问题不要怕,微笑着面对它
记笔记
let 和 const
const和let是在ES6中引入的两个新的变量声明关键字,用于声明变量的作用域。
const:const用于声明一个常量,其值在声明后不能被修改。常量必须在声明时进行初始化,而且不能再次赋值。例如:

const PI = 3.14159;
PI = 3.14; // 报错,常量不能再次赋值
  • 常量适合用于保存不可变的值,如数学常数、配置项等。
  1. let:let用于声明块级作用域的变量,它与var相比具有更小的作用域范围。在块级作用域内部声明的变量只在该块级作用域内有效,而且不会被提升到函数作用域。例如:

    function example() {
      let x = 10;
      if (true) {
        let x = 20;
        console.log(x); // 输出 20
      }
      console.log(x); // 输出 10
    }
    

  2. 在使用块级作用域时,可以避免变量之间的命名冲突和问题。
  3. var:var是ES5中使用的变量声明关键字,它存在一些作用域上的问题。var声明的变量属于函数作用域或全局作用域,而不是块级作用域,因此在循环或条件语句中声明的变量会被提升到外部函数作用域。

    function example() {
      var x = 10;
      if (true) {
        var x = 20;
        console.log(x); // 输出 20
      }
      console.log(x); // 输出 20,而不是 10
    }
    

    var声明的变量存在变量提升的问题,在变量声明之前就可以访问到变量,可能导致意外的结果。
    块级作用域
    块级作用域指的是在代码中由花括号{}包围的部分,这个部分内部声明的变量只在该块级作用域内有效,超出该作用域范围就无法访问。在ES6之前,JavaScript只有全局作用域和函数作用域,没有块级作用域。

    使用块级作用域可以提供更细粒度的变量作用范围,避免变量的冲突和污染。块级作用域可以用于if语句、for循环、while循环等语句中的代码块,以及函数中的代码块。

    模板字符串
    一.模板字符串是什么
    模板字符串是在JavaScript中使用的一种特殊字符串语法。它使用反引号(`)包围,并允许在字符串中插入变量、表达式和换行符等。以下是一些模板字符串的特性:

    插入变量:通过${}语法,可以在字符串中插入变量。变量会被解析并替换为实际的值。示例代码如下:

    const name = "Alice";
    const message = `Hello, ${name}!`;
    console.log(message); // 输出 "Hello, Alice!"
    

    执行表达式:在${}中除了可以插入变量外,还可以执行表达式。这样可以在字符串中进行复杂的运算或逻辑操作。示例代码如下:

    const a = 10;
    const b = 5;
    const result = `The sum of ${a} and ${b} is ${a + b}.`;
    console.log(result); // 输出 "The sum of 10 and 5 is 15."
    

    多行字符串:在模板字符串中可以直接使用换行符,以方便创建多行文本。示例代码如下:

    const multiLine = `This is a 
    multi-line
    string.`;
    console.log(multiLine);
    // 输出:
    // This is a
    // multi-line
    // string.
    

    模板字符串更加灵活且易读,使得处理字符串的操作更加方便。它在与变量和表达式的结合使用时,特别有用。

    二.模板字符串的注意事项
    反引号(`)包围:模板字符串必须使用反引号(`)而不是单引号或双引号来包围。

    字符串中的插入项:使用${}来包裹要插入的变量或表达式。注意,在${}中可以使用任何有效的JavaScript表达式。但是,要注意不要在其中放置具有副作用的代码,以免产生意想不到的结果。

    转义字符:如果字符串中需要使用反引号(`),则需要使用转义字符(\)进行转义。

    换行字符:模板字符串中的换行字符会被保留。如果希望字符串换行,可使用显式的换行符(\n)。

    嵌套模板字符串:模板字符串可以嵌套在彼此之内,以创建更复杂的字符串结构。

    兼容性:模板字符串是ES6中引入的特性,因此在较旧的浏览器或环境中可能不被完全支持。为了兼容性考虑,可以使用转译工具(如Babel)将模板字符串转换为普通字符串。

    三. 模板字符串的应用
    字符串拼接:使用模板字符串可以更方便地进行字符串拼接,特别是需要插入变量或执行表达式时。相比传统的字符串拼接方法(使用加号或concat函数),模板字符串更简洁易读。

    动态HTML生成:通过将变量或表达式插入模板字符串中,可以动态生成包含动态数据的HTML片段。这对于基于数据生成复杂的HTML结构、动态更新网页内容等非常有用。

    URL拼接:构建URL时,模板字符串可以方便地插入参数值,以生成完整的URL。

    多语言支持:在多语言环境中,可以使用模板字符串来创建多语言文本模板,并根据需要插入对应语言的翻译。

    格式化输出:通过在模板字符串中使用占位符和格式化规则,可以实现对输出结果的格式化控制,如日期格式化、货币格式化等。

    生成代码:在某些情况下,可以使用模板字符串来生成动态的JavaScript代码。例如,根据用户输入生成动态的函数定义。

    箭头函数
    一.箭头函数是什么
    概念: 箭头函数是在ES6(ECMAScript 2015)中引入的一种新的函数声明语法。它提供了一种更简洁、更清晰的函数定义方式。

    语法:
     

    (argument1, argument2, ...) => {
      // 函数体
    }
    

    其中,参数列表由圆括号包围,后面跟着一个箭头(=>),然后是函数体(可以是一个代码块或一个表达式)。

    箭头函数的特点:

    简洁的语法:相对于常规函数,箭头函数提供了更简洁的语法形式,减少了冗余的代码。

    没有自己的this值:箭头函数没有自己的this上下文,继承了父级作用域的this值。这解决了常规函数中this指向的问题,使得箭头函数更易于理解和使用。

    没有自己的arguments对象:箭头函数也没有自己的arguments对象,但可以通过使用rest参数(...args)来获取传递给函数的所有参数。

    没有Constructor:由于没有自己的this值,箭头函数不能用作构造函数来创建对象实例,即无法使用new关键字调用箭头函数。

    示例:

    const add = (a, b) => {  //或者const add = (a, b) => a +b ;
      return a + b;
    };
    
    const greet = name => `Hello, ${name}!`;
    
    const numbers = [1, 2, 3, 4];
    const doubled = numbers.map(num => num * 2);
    

    二.普通函数与箭头函数的转换

  4. 判断函数是否有参数。如果有参数,需要使用小括号包裹参数列表。如果只有一个参数,则可以省略小括号。

    // 普通函数
    function sum(a, b) {
      return a + b;
    }
    
    // 转换为箭头函数
    const sum = (a, b) => a + b;
    

    移除function关键字,并在参数和箭头之间添加一个箭头(=>

    // 普通函数
    function sayHello() {
      console.log("Hello!");
    }
    
    // 转换为箭头函数
    const sayHello = () => {
      console.log("Hello!");
    };
    

    如果函数体只有一行代码,并且它是一个表达式,可以省略大括号和return关键字,并将该表达式放在箭头后面。

    // 普通函数
    function square(x) {
      return x * x;
    }
    
    // 转换为箭头函数
    const square = (x) => x * x;
    

    注意:
    箭头函数没有自己的this绑定,它会捕获外部作用域中的this值,因此在转换函数时请特别留意函数内部是否使用了this关键字。

    在一些特殊情况下,如果需要更复杂的函数体或需要使用 arguments 对象,那么箭头函数可能不适合转换,因为它们缺少常规函数的一些特性。

    三.this指向
    1. 全局作用域中的 this 指向
    在严格模式下,全局作用域中的 this 的值是 undefined。在非严格模式下,它会指向全局对象(浏览器中是 window 对象,Node.js 中是 global 对象)。

    使用严格模式可以通过在脚本文件或函数体的开头添加 "use strict"; 来启用。以下示例演示了在严格模式下全局作用域中的 this 的行为:

    "use strict";
    
    console.log(this); // undefined
    

    在非严格模式下,则会输出全局对象:

    console.log(this); // 全局对象(浏览器中是window对象,Node.js中是global对象)
    
     一般函数(非箭头函数)中的this指向
  5. 在对象的方法中,即使在严格模式下,方法中的 this 仍然会指向调用该方法的对象。严格模式主要影响到全局作用域下的 this 值的行为。

    "use strict";
    
    const obj = {
      name: "Alice",
      sayHello: function() {
        console.log(this); // 指向obj对象
      }
    };
    
    obj.sayHello();
    

    如果通过构造函数创建对象时,this 在严格模式下指向新创建的对象。但在非严格模式下,如果构造函数内部没有显式设置 this 的值,则 this 可能会指向全局对象。

    3.箭头函数中this指向
    在箭头函数中,this的值是由定义箭头函数的词法作用域决定的,而不是根据函数调用方式或绑定调用者来改变。

    换句话说,箭头函数没有自己的 this 绑定,它会捕获其外部的词法作用域中的 this 值,并沿用该值。因此,在箭头函数内部,this 的指向是固定的,指向定义箭头函数时所在的作用域中的 this。

    示例:

    对象方法:

    const obj = {
      name: "Alice",
      sayHello: () => {
        console.log(this.name); // 箭头函数没有自己的 this,沿用外部作用域中的 this,这里指向全局对象(浏览器中是 window,Node.js 中是 global)
      }
    };
    

    回调函数中的 this 绑定

    const button = document.querySelector("button");
    button.addEventListener("click", () => {
      console.log(this); // 箭头函数没有自己的 this,沿用外部作用域中的 this,取决于事件处理函数所在的上下文
    });
    

    四.不适用箭头函数的场景

  6. 作为构造函数

    • 由于箭头函数没有自己的 this 绑定,它无法通过 new 关键字创建实例对象。箭头函数的 this 始终指向其外部词法作用域中的 this 值,而不会根据调用方式或绑定调用者来改变。

      // 错误示例
      const Person = () => {
        this.name = "Alice"; // 错误:箭头函数不能用作构造函数
      };
      
      const person = new Person();
      

      需要 this 指向调用对象的情况

    • 对象方法:当需要在对象中定义方法,并且需要通过 ​this​ 来引用对象自身时,箭头函数不适用。箭头函数的 ​this​ 始终继承自外部词法作用域,无法根据调用方式来动态绑定。

      const obj = {
        name: "Alice",
        sayHello: () => {
          console.log(`Hello, ${this.name}!`); // 错误:箭头函数的 this 不是指向 obj
        }
      };
      
      

      动态绑定 ​this​:如果需要根据调用方式动态绑定 ​this​ 的值,例如通过 call()apply() 或 bind() 显式改变其 this 值,那么箭头函数就不适合使用。箭头函数的 ​this​ 始终保持不变。

      
      const greet = () => {
        console.log(`Hello, ${this.name}!`); // 错误:箭头函数的 this 不会被显式绑定
      };
      
      const person = {
        name: "Alice"
      };
      
      greet.call(person); // 错误:this 在箭头函数中不会改变
      
      

      需要使用函数的 arguments 对象

    • 箭头函数没有自己的 arguments 对象,无法访问传递给函数的参数集合。

      const sum = () => {
        console.log(arguments); // 错误:箭头函数没有自己的 arguments 对象
      };
      
      sum(1, 2, 3); // 错误:无法在箭头函数中访问 arguments
      

      .箭头函数的应用

    • 简化函数表达式:箭头函数提供了一种更简洁的函数表达式语法,特别适用于传递匿名函数或回调函数。

      // 传统函数表达式
      const sum = function(a, b) {
        return a + b;
      };
      
      // 箭头函数
      const sum = (a, b) => a + b;
      

      数组遍历与转换:结合数组的map()filter()reduce()等方法,可以使用箭头函数对数组进行快速遍历、筛选和转换操作。

      const numbers = [1, 2, 3, 4, 5];
      
      const doubled = numbers.map(num => num * 2);
      
      const evenNumbers = numbers.filter(num => num % 2 === 0);
      
      const sum = numbers.reduce((total, num) => total + num, 0);
      

      箭头函数作为回调函数:由于箭头函数没有自己的this值,因此常用于解决回调函数中this指向的问题。

      const obj = {
        name: "Alice",
        sayHello: function() {
          setTimeout(() => {
            console.log(`Hello, ${this.name}!`); // this指向obj对象
          }, 1000);
        }
      };
      
      obj.sayHello();
      

上一篇:ubuntu22.04 安装wine9.0 全网首发


下一篇:基于Spring Boot的医疗病历交互系统开发指南