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);

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

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

// 普通函数
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指向

在对象的方法中，即使在严格模式下，方法中的 this 仍然会指向调用该方法的对象。严格模式主要影响到全局作用域下的 this 值的行为。

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

构造函数内部没有显式设置 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，取决于事件处理函数所在的上下文
});

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

作为构造函数

• 由于箭头函数没有自己的 this 绑定，它无法通过 new 关键字创建实例对象。箭头函数的 this 始终指向其外部词法作用域中的 this 值，而不会根据调用方式或绑定调用者来改变。
  
• 需要 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();