当前位置：首页 > news >正文

ES6（一）箭头函数，解构赋值，模板字符串，let 和 const，类和继承

news 来源：原创 2024/5/15 16:04:19

ES6（一）箭头函数，解构赋值，模板字符串，let 和 const，类和继承

01 箭头函数：

1.基本语法

// 普通函数
function regularFunction(a, b) {return a + b;
}// 箭头函数
const arrowFunction = (a, b) => {return a + b;
};

2.省略大括号和 return

当箭头函数只有一条语句时，可以省略大括号和 return 关键字。

// 等同于上面的箭头函数
const arrowFunction = (a, b) => a + b;

3.单个参数时的简写

当箭头函数只有一个参数时，可以省略参数的括号。

// 等同于上面的箭头函数
const square = x => x * x;

4.改变 this 的指向

箭头函数没有自己的 this，它会从定义它的作用域继承 this 值。

function Person() {this.age = 0;setInterval(() => {this.age++; // 这里的 this 指向 Person 对象}, 1000);
}

5.注意事项

不能作为构造函数使用：箭头函数没有自己的 this，因此不能用于构造实例对象。
没有 arguments 对象：箭头函数不具备 arguments 对象，需要通过 rest 参数(…)来获取所有参数。
不能用作 Generator 函数：箭头函数不能用作 Generator 函数。
箭头函数的引入极大地简化了 JavaScript 中函数的书写方式，并且更加清晰地表达了函数的意图。在实际开发中，箭头函数通常用于简短的回调函数或者需要保持 this 绑定的情况。

02 解构赋值：

ES6 中的解构赋值是一种方便的语法，用于从数组或对象中提取值并赋给变量。下面介绍一下解构赋值的基本用法和一些注意事项：

1.数组解构赋值

// 基本用法
const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2// 可以忽略某些元素
const [c, , d] = [3, 4, 5];
console.log(c); // 输出 3
console.log(d); // 输出 5// 默认值
const [e, f = 10] = [6];
console.log(e); // 输出 6
console.log(f); // 输出 10

2.对象解构赋值

// 基本用法
const { name, age } = { name: 'Alice', age: 30 };
console.log(name); // 输出 'Alice'
console.log(age); // 输出 30// 重命名变量
const { name: personName, age: personAge } = { name: 'Bob', age: 25 };
console.log(personName); // 输出 'Bob'
console.log(personAge); // 输出 25// 默认值
const { country = 'China' } = {};
console.log(country); // 输出 'China'

3.函数参数中的解构赋值

// 函数参数解构赋值
function greet({ name, age }) {console.log(`Hello, ${name}! You are ${age} years old.`);
}const person = { name: 'Carol', age: 35 };
greet(person); // 输出 "Hello, Carol! You are 35 years old."

4.注意事项

如果解构失败（比如右侧的值为 undefined 或 null），则变量的值将是 undefined。
可以嵌套使用数组和对象的解构赋值。
解构赋值可以在数组和对象字面量中使用。
解构赋值在处理复杂数据结构时非常有用，可以让代码更加简洁清晰。在实际开发中，经常用于函数返回多个值、处理 API 返回的数据等场景

03 模板字符串：

ES6 中的模板字符串是一种允许嵌入表达式的字符串字面量，使用反引号 (`) 来表示。模板字符串提供了更简洁、更灵活的字符串拼接方式。下面是一些关于模板字符串的基本用法和一些注意事项：

1.基本用法

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

2.多行字符串

使用模板字符串可以轻松创建多行字符串，不需要使用换行符或者字符串拼接符。

const multiLineString = `This is amulti-linestring.
`;
console.log(multiLineString);
// 输出：
//     This is a
//     multi-line
//     string.

3.嵌入表达式

模板字符串中可以嵌入任何有效的 JavaScript 表达式。

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."

4.原始字符串

通过在模板字符串前面加上 String.raw 可以创建原始字符串，忽略转义字符的特殊含义。

const path = String.raw`C:\Users\Administrator\Desktop\file.txt`;
console.log(path); // 输出 "C:\Users\Administrator\Desktop\file.txt"

区别
- 转义字符处理：在模板字符串中，反斜杠（\）会被解释为转义字符，而在原始字符串中，反斜杠（\）不会被解释为转义字符。
- 使用方式：模板字符串是以反引号（）包裹的字符串字面量形式，而原始字符串需要使用 String.raw` 方法来创建。

注意事项

在模板字符串中使用 ${} 来引入表达式，表达式可以是变量、函数调用、甚至是更复杂的表达式。
模板字符串中的空格、缩进和换行会保留在生成的字符串中。
模板字符串是不可变的，一旦创建就无法更改。
模板字符串使得字符串拼接更加简洁和易读，特别适用于需要动态生成字符串的场景，如拼接 URL、生成 HTML 片段等。

04 let 和 const：

1.let

let 关键字用于声明一个块级作用域的变量，变量的作用域限定在当前代码块内。
使用 let 声明的变量可以被重新赋值，但不可以被重复声明。
在 for 循环中使用 let 声明的变量具有每次迭代都会创建一个新的绑定的特性，有效避免了闭包中常见的问题。
示例：

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

2.const

const 关键字用于声明一个常量，常量的值在声明后不能被修改，并且必须进行初始化赋值。
使用 const 声明的变量必须在声明时进行初始化赋值，否则会报错。
const 声明的常量也具有块级作用域。
示例：

const PI //必须在声明时进行初始化赋值，否则会报错。
PI = 3.14159;
// 尝试修改常量值会导致错误，虽然现在浏览器不会报,但不建议这么做

使用建议

尽量使用 const 声明变量，避免意外的变量修改。
只有在需要重新赋值的情况下才使用 let。
减少使用 var，避免变量提升和全局作用域带来的问题。
总的来说，let 适用于需要变化的变量，而 const 更适用于常量或者不需要改变的变量。根据变量的需求灵活选择使用 let 或 const。

05 类和继承：

在 ES6 中，引入了类（class）和继承（inheritance）的概念，使得 JavaScript 的面向对象编程更加直观和易用。

类（class）

ES6 中引入了类的概念，可以使用关键字 class 来定义一个类，类可以包含构造函数、方法等。类提供了更加传统的面向对象编程方式来定义对象和对象之间的关系。

下面是一个简单的类的定义和使用示例：

javascriptCopy Codeclass Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + ' makes a noise.');}
}let animal = new Animal('Dog');
animal.speak(); // 输出 "Dog makes a noise."

继承（inheritance）

ES6 中引入了 extends 关键字，允许一个类继承另一个类的属性和方法。子类可以通过 super 关键字调用父类的构造函数以及方法。
下面是一个简单的继承示例：

class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类的构造函数this.breed = breed;}speak() {console.log(this.name + ' barks loudly.');}
}let dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出 "Buddy barks loudly."