ES6-ES11核心知识点整理

2023-10-07 08:12:14

变量声明

let 和 const

在 ES6 中，可以使用 let 和 const 来声明变量。let 声明的变量可以在声明后重新赋值，而 const 声明的变量则只能赋值一次。

let x = 10;
x = 20; // 可以重新赋值

const y = 20;
y = 30; // 报错

解构赋值

解构赋值允许你从数组和对象中提取值，并将其赋值给变量。

// 从数组中解构赋值
const arr = [10, 20, 30];
const [x, y, z] = arr;
console.log(x, y, z); // 输出：10 20 30

// 从对象中解构赋值
const obj = {
  name: '张三',
  age: 20,
};
const {name, age} = obj;
console.log(name, age); // 输出：张三 20

模板字符串

模板字符串允许你使用 ${} 来嵌入变量或表达式。

const name = '张三';
const age = 20;

// 普通字符串
const str1 = '姓名：' + name + '，年龄：' + age;

// 模板字符串
const str2 = `姓名：${name}，年龄：${age}`;

console.log(str1); // 输出：姓名：张三，年龄：20
console.log(str2); // 输出：姓名：张三，年龄：20

对象写法

简化对象写法

在 ES6 中，可以使用更简洁的语法来写对象。

// 传统对象写法
const obj1 = {
  name: '张三',
  age: 20,
};

// 简化对象写法
const obj2 = {name: '张三', age: 20};

console.log(obj1); // 输出：{name: "张三", age: 20}
console.log(obj2); // 输出：{name: "张三", age: 20}

计算属性名

计算属性名允许你使用变量或表达式作为对象的属性名。

const name = '张三';
const age = 20;

// 计算属性名
const obj = {
  [name]: '张三',
  [age]: 20,
};

console.log(obj); // 输出：{张三: "张三", 20: 20}

箭头函数

箭头函数是 ES6 中引入的一种新的函数语法。

// 传统函数写法
function sum(a, b) {
  return a + b;
}

// 箭头函数写法
const sum = (a, b) => {
  return a + b;
};

console.log(sum(10, 20)); // 输出：30

rest参数

rest参数允许你将函数的多余参数收集到一个数组中。

function sum(...nums) {
  let total = 0;
  for (const num of nums) {
    total += num;
  }
  return total;
}

console.log(sum(10, 20, 30)); // 输出：60

扩展运算符

扩展运算符允许你将一个数组或对象展开为单个元素。

const arr1 = [10, 20, 30];
const arr2 = [40, 50, 60];

// 将两个数组合并成一个新的数组
const newArr = [...arr1, ...arr2];

console.log(newArr); // 输出：[10, 20, 30, 40, 50, 60]

const obj1 = {
  name: '张三',
  age: 20,
};
const obj2 = {
  city: '北京',
  country: '中国',
};

// 将两个对象合并成一个新的对象
const newObj = {...obj1, ...obj2};

console.log(newObj); // 输出：{name: "张三", age: 20, city: "北京", country: "中国"}