返回
ES6 核心概念,重塑你的代码风格
前端
2023-10-14 07:40:34
ES6 核心概念概述
ES6 是 JavaScript 语言的一个重大更新,它引入了许多新的特性和改进,使得 JavaScript 变得更加强大和灵活。这些特性包括:
* **变量声明:** let 和 const 可以用来声明变量,let 声明的变量可以重新赋值,而 const 声明的变量则不能重新赋值。
* **解构赋值:** 解构赋值可以将一个数组或对象中的元素提取出来,并将其赋给多个变量。
* **扩展运算符:** 扩展运算符可以将一个数组或对象中的元素展开,并将其添加到另一个数组或对象中。
* **rest运算符:** rest运算符可以将一个数组或对象中的剩余元素收集起来,并将其赋给一个变量。
* **模板字符串:** 模板字符串可以用来创建多行字符串,并可以嵌入变量。
* **箭头函数:** 箭头函数是一种新的函数语法,它可以简化函数的编写。
## let 和 const 关键字
let 和 const 是两种新的变量声明关键字。let 声明的变量可以重新赋值,而 const 声明的变量则不能重新赋值。
```javascript
let x = 10;
x = 20; // 允许重新赋值
const y = 20;
y = 30; // 报错
```
## 解构赋值
解构赋值可以将一个数组或对象中的元素提取出来,并将其赋给多个变量。
```javascript
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
const obj = {
name: 'John Doe',
age: 30
};
const {name, age} = obj;
console.log(name); // John Doe
console.log(age); // 30
```
## 扩展运算符
扩展运算符可以将一个数组或对象中的元素展开,并将其添加到另一个数组或对象中。
```javascript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]
const obj1 = {
name: 'John Doe',
age: 30
};
const obj2 = {
city: 'New York'
};
const newObj = {...obj1, ...obj2};
console.log(newObj); // {name: 'John Doe', age: 30, city: 'New York'}
```
## rest运算符
rest运算符可以将一个数组或对象中的剩余元素收集起来,并将其赋给一个变量。
```javascript
const arr = [1, 2, 3, 4, 5];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]
const obj = {
name: 'John Doe',
age: 30,
city: 'New York'
};
const {name, ...rest} = obj;
console.log(name); // John Doe
console.log(rest); // {age: 30, city: 'New York'}
```
## 模板字符串
模板字符串可以用来创建多行字符串,并可以嵌入变量。
```javascript
const name = 'John Doe';
const age = 30;
const str = `
My name is ${name} and I am ${age} years old.
`;
console.log(str);
// My name is John Doe and I am 30 years old.
```
## 箭头函数
箭头函数是一种新的函数语法,它可以简化函数的编写。
```javascript
const add = (a, b) => a + b;
console.log(add(1, 2)); // 3
```