JS之ES6-上

一 变量和常量

• 变量：替换为let
• 常量：const，赋值后不可更改
• 可以使用代码块{}，进行变量定义域的限制

{
    let count = 0
    count++
}
console.log(count)
//报错，显示变量为定义

二 模板字符串

• 通过反引号${}

str1 = 'abc'
str2 = 'def'
//普通拼接
str3 = str1 + str2
//模板字符串拼接，可以跨行
str4 = `123${str1}
这是拼接后的内容
`

三 解构赋值

1.数组

//结果a=1, b=2, c=3
const [a,b,c] = [1,2,3]

2.对象

• 别名
• ...otherInfo-接收剩余变量

const {username, age:useAge, ...otherInfo} = {
    username: 'ZD',
    age: 18,
    gender: 'male',
    category: 'user'
}

四 数组和对象的扩展

1.扩展运算符

• ...arr/obj：表示将arr/obj中的数据依次展开并填充

//数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2, 10, 20]
//对象
const obj1 = {
    age: 18
}
const obj2 = {
    gender: 'male'
}
const obj3 = {
    name: 'ZD',
    ...obj1,
    ...obj2
}

2.数组方法

• Array.from：将伪数组（不能使用push方法等）转为数组，当你用 document.querySelectorAll 获取元素时，返回的是 NodeList，它是类数组，没有 map、filter、forEach 等数组方法（虽然在现代浏览器中 NodeList 有 forEach，但依然没有 map/filter）

// ❌ 错误：会报错 TypeError
const divs = document.querySelectorAll('div');
divs.map(div => div.textContent); 

// ✅ 正确：转为数组后随意操作
const divsArray = Array.from(document.querySelectorAll('div'));
const textList = divsArray.map(div => div.textContent);

3.对象方法

• Object.assign：浅拷贝，当参数类型为基本数据类型时，复制的是值；当参数为引用数据类型，复制的是内存地址；基本数据的修改互不影响，但引用类型的修改会互相影响

const obj1 = {
    name: 'ZD',
    //其他参数
}
//使用方法
const obj2 = Object.assign({}, obj1, 更多对象)

五 Class

类似java的类

// 1. 基类：User
class User {
  // 静态属性（ES6+ 支持）
  static USER_TYPE = 'common';
  
  // 私有字段（ES2022，以 # 开头）
  #password;
  
  // 构造函数
  constructor(username, email, password) {
    this.username = username;
    this.email = email;
    this.#password = password;
    this.createdAt = new Date();
  }
  
  // Getter
  get passwordMask() {
    return this.#password ? '******' : '未设置';
  }
  
  // Setter（带校验）
  set email(newEmail) {
    if (!newEmail.includes('@')) {
      throw new Error('邮箱格式不正确');
    }
    this._email = newEmail; // 用 _email 存储实际值
  }
  
  get email() {
    return this._email;
  }
  
  // 实例方法
  login() {
    console.log(`${this.username} 已登录`);
    this.#logActivity('登录');
  }
  
  // 私有方法（以 # 开头）
  #logActivity(action) {
    console.log(`[${this.createdAt.toLocaleString()}] ${action}`);
  }
  
  // 静态方法（类本身调用，不需要实例）
  static compareUsers(user1, user2) {
    return user1.createdAt - user2.createdAt;
  }
}

// 2. 子类：Admin（继承 User）
class Admin extends User {
  // 静态属性可以重写
  static USER_TYPE = 'admin';
  
  // 静态方法也可以重写
  static compareUsers(user1, user2) {
    console.log('管理员比较用户');
    return super.compareUsers(user1, user2); // 调用父类静态方法
  }
  
  constructor(username, email, password, permissions = []) {
    // 必须先调用 super()
    super(username, email, password);
    this.permissions = permissions;
    this.role = 'admin';
  }
  
  // 重写父类方法
  login() {
    // 调用父类方法
    super.login();
    console.log(`管理员 ${this.username} 拥有权限: ${this.permissions.join(', ')}`);
  }
  
  // 子类特有方法
  deleteUser(user) {
    console.log(`管理员 ${this.username} 删除了用户 ${user.username}`);
  }
}

六 箭头函数

类似lamda函数

const getSum = (n1, n2, ...other) => n1 + n2
//复杂逻辑
const getSum = arr =>{
    let sum = 0
    //for(let i=0; i<arr.length; i++){
    //   sum+=arr[i]
    //}
    arr.forEach(item => sum + item)
    return sum
}