ES6知识点总结

变量和常量

1.变量

在JavaScript可以用var进行变量声明的，这种声明方式没有任何的问题，但是有时候会出现不经意的覆盖，在ES6中，增加了一种新的声明方式——let声明方式。

let num = 0;

在ES6还提出了块作用域的概念，即用一对大括号框住代码，变量的作用域只在大括号内，在括号外无效（这种概念有点类似于局部变量），有效避免一个变量名在多个地方使用出现冲突的情况。

2.常量

常量是一种不能修改的容器，在声明的时候命名通常采用大写结构，多个部分之间用下划线做分隔 。

const base = 1;//一经声明后期不能再做修改

模板字符串

 在JavaScript中，可以通过单引号或双引号来表示字符串。在ES6中，新增了一种反引号的方式（反引号即键盘上的波浪号，单击即可得），在新方式中，当有想要连接的字符串时，无需用加号，而且在新符号中，直接换行也可以实现换行效果。

const str = 'efg'
const str1 = `abc${'hij'}//直接加字符串
    新的一行

`
const str2 = `abc${str}//直接加指定常量
    新的一行    //换行效果可以实现

`

解构赋值操作

解构赋值使用于数组和对象这两种类型

1.数组 

通过解构的方式对数组进行操作，从而达到快速地从数组中进行数据保存、存储的目的。

const [a,b,c] = [1,2,3];//a对应1，b对应2，c对应3

 这里不再对数组常规命名，而是写一个中括号，按照位置的顺序进行名称的分配。

2.对象 

 对象是无序的，在对对象进行解构赋值时，无需按照位置进行分配，而是要按照键名进行存储。

const { username, age: myage } = {
    username: 'lxx',
    age: 21
};
console.log(username, myage)

直接在大括号中声明，表示声明了一个常量叫username，对应的就是对象中username的值。如果想要自命名的话，先写对应属性的名称，再在后面加上冒号，写上自定义名称。注意，当自定义名称时，后续使用到该属性，应使用自定义常量名进行操作。

除了以上两种按照位置或属性进行存储的操作外，还可以用‘...’+命名来存储剩下的属性

const [a, ...otherInfo1] = [1, 2, 3];//a对应1，b对应2，c对应3
console.log(otherInfo1);
const { username, ...otherInfo2 } = {
    username: 'lxx',
    age: 21,
    sex：'nv'
    
};
console.log(otherInfo2);

数组和对象的扩展 

1.扩展运算符

 当想要把两个数组添加到一个新的数组里面的时候，可以用扩展运算符'...',它是把对象的所有键给展开，并填充到相应位置。

console.log(otherInfo2)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [100, ...arr1, ...arr2];//在扩展的时候也可以添加自己的元素

对象也是一样，同样是将 扩展运算符'...'加到指定对象的属性，实现扩展的目的

const obj1 = {
    a: 1
};
const obj2 = {
    b: 2
};
const obj3 = {
    ...obj1,
    ...obj2
};

2.数组方法 

在ES6中新增了很多数组的方法 ，在Javascript的使用中，会经常遇到数组与伪数组交替使用的情况，ES6中的新增的form方法，可以将伪数组转换为真实的数组

// 伪数组
const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
console.log(pseudoArray)
// 使用 Array.from() 将伪数组转换为真实数组
const realArray = Array.from(pseudoArray);

// 打印转换后的真实数组
console.log(realArray); // 输出: ['a', 'b', 'c']

3.对象方法 

在对象中使用赋值的话，只能得到一个相同的引用，不能得到一个副本。这里的Object.assgin方法实现了一个浅拷贝的功能，操作之后得到一个全新的对象，不是相同的引用

// 原始对象
const originalObj = { a: 1, b: 2 };

// 使用 Object.assign 进行浅拷贝
const copiedObj = Object.assign({}, originalObj);

// 修改复制后的对象，不会影响原始对象
copiedObj.a = 10;

console.log(originalObj); // 输出: { a: 1, b: 2 }
console.log(copiedObj); // 输出: { a: 10, b: 2 }

Object.assign也可以实现对象的合并

// 目标对象
const targetObj = { a: 1, b: 2 };

// 源对象
const sourceObj = { b: 3, c: 4 };

// 使用 Object.assign() 合并两个对象
const mergedObj = Object.assign({}, targetObj, sourceObj);

console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 }

 在上面的例子中，targetObj 是目标对象，sourceObj 是源对象。通过 Object.assign({}, targetObj, sourceObj) 将 sourceObj 的属性合并到 targetObj 中，形成了一个新的对象 mergedObj。在新对象中，如果有相同的属性，后面的对象（在这里是 sourceObj）的属性值会覆盖前面的对象（targetObj）的属性值。

类 

ES6中引入了类的概念，使得更接近与面向对象语言，以下是一些 ES6 中类的主要内容和特性。

1. 类声明：使用 class 关键字可以声明一个类。
2. 构造函数：使用 constructor 方法来定义类的构造函数，用于初始化对象的实例。
3. 类方法：在类中定义的方法会成为类的原型方法，可以通过实例访问。
4. 静态方法：使用 static 关键字定义的方法属于类本身，而不是类的实例。
5. 继承：通过 extends 关键字可以实现类的继承，子类可以继承父类的属性和方法

// 定义一个类
class Animal {
  // 构造函数
  constructor(name) {
    this.name = name;
  }

  // 类方法
  speak() {
    console.log(`${this.name} makes a sound.`);
  }

  // 静态方法
  static info() {
    console.log('This is an animal class.');
  }
}

// 继承 Animal 类
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  // 重写父类的方法
  speak() {
    console.log(`${this.name} barks.`);
  }
}

// 创建 Animal 实例
const animal = new Animal('Cat');
animal.speak(); // 输出: Cat makes a sound.

// 调用静态方法
Animal.info(); // 输出: This is an animal class.

// 创建 Dog 实例
const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出: Buddy barks.

箭头函数 

匿名函数的简写方式

const getSum1 = n => n + 3;
const getSum2 = (n1, n2) => n1 + n2;//两数相加
const getSum3 = (n1, n2, ...other) => console.log(n1, n2, other)//当有多个参数时，可以用...other表示剩下的实例
const getSum4 = arr => {
    let sum = 0;
    arr.forEach(t = item => {
        sum += item;
    });
    return sum;
}
console.log(getSum1(2));//输出5
console.log(getSum2(2, 4));//输出6
getSum3(2, 3, 4, 5, 6);//输出2 3 Array(3)[4, 5, 6]
console.log(getSum4([1, 2, 3, 4, 5, 6]));//输出21