JS之ES6新特性

虽然以前用过ES6但还是对它不熟悉还是抽时间巩固一下吧...... 毕竟想要深入了解一些三方库的源码还是得先搞透ES6

概念理解

ES6是JS语言的下一代标准，这次的ES6可以当成JS的第六季，特别的是15年出了ES6之后 往后的就是版本号改成了年号，就是ECMAScript 2015，ECMAScript 2016，......一直这样更新

以下总结几个重要的新特性：

箭头函数

箭头函数的this指向的是定义函数时的上下文对象不是调用时的对象，不能用new实例化对象，因为它没有prototype属性。

function add(a, b){
    return a+b;
}
//箭头函数咋许多上镜中简化了函数的定义，需要注意箭头函数的this指向问题
//箭头函数
const add = (a, b) => a+b;

模板字符串

//字符串插值
//使用${}语法在模板字符串中插入变量和表达式
const name = ‘李四’
const msg = `我的名字叫：${name}`;
//${}中可以是变量、函数调用、运算符等

//多行字符串 可以跨越多行，不用转义字符或拼接操作符
const tit = `多行
  文本
`;

//原始字符串 （String.raw）
//在开发中会有后端传俩一个带反斜杠的字符串，当显示到页面上是可能会被转义处理，如果不想被转义可以添加前缀 String.raw
const path = String.raw`D:\work\node\config.js`;
//这样就不会被转义了

解构赋值

这是一种新的赋值语法，它可以让我们更方便地从对象或数组中提取值，并将其赋给变量

//数组解构赋值
const [a,b, ...rest] = [1,2,3,4,5];
console.log(a);//1
console.log(b);//2
console.log(rest);//[3,4,5]

//对象结构赋值
const person = {
    name:'张三',
    addres:{
        city:'北京'
    }
}
const {name,addres:{city}} = person;
console.log(name);//张三
console.log(city);//北京

函数参数默认值

//允许为函数参数设置默认值
function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

扩展运算符

它可以让我们更方便地将数组或对象展开为多个参数或元素

//数组
const arr  = [1,2,3]
console.log(...arr);// 1 2 3  可以很方便的传给函数或合并多个数组
//字符串
const str = 'hello'
console.log(...str); //h e l l o 拆分成单个字符
//对象
const obj = {a:1,b:2};
console.log({...obj});//{a:1,b:2}  可以复制或合并或创建新的对象

Class类

1. 定义方式：使用class关键字来定义类，这是一种更接近传统面向对象编程的语法糖
2. 构造函数：在类定义中使用constructor方法作为构造函数，用于初始化实例属性
3. 实例属性和方法：通过this关键字在构造函数内部定义实例属性和方法
4. 静态属性和方法：使用static关键字来定义静态属性和方法，它们可以直接通过类名调用，而不是类的实例
5. 继承：使用extends关键字来实现类的继承，子类可以继承父类的属性和方法，并可以使用super关键字来调用父类的方法

6. 常见问题总计

   1. this指向问题：在类的方法中，this关键字通常指向类的实例。然而，如果在普通函数或箭头函数中直接使用this，它可能不会按照预期指向类的实例，这可能会导致错误
   2. 构造函数和类的命名：通常，类的名称首字母大写，以区别于普通函数。虽然这不是强制性的，但遵循这个约定可以提高代码的可读性
   3. 方法的定义和调用：在类的定义中，方法不需要使用function关键字，多个方法之间也不需要使用逗号隔开。另外，在调用类的实例方法时，需要使用实例对象来调用
   4. 继承和super的使用：在使用extends进行继承时，需要注意super关键字的使用。在子类的构造函数中，需要调用super来传递参数给父类的构造函数。同时，在子类中重写父类的方法时，可以使用super来调用父类的方法
   5. 静态方法和实例方法的区别：静态方法可以直接通过类名调用，而实例方法需要通过类的实例来调用。在使用时需要注意区分

模块化

模块化是一种将代码拆分成独立、可重用的单元的方式，每个模块都有自己的作用域，并且可以通过export和import关键字来导出和导入其他模块的功能。这种方式有助于提高代码的可维护性、可重用性和可测试性。

1. 主要特点
   • 静态导入/导出：ES6模块是静态的，意味着在编译时就能确定模块的依赖关系。你不能在运行时改变模块的导入或导出
   • 单例模式：每个模块只加载一次，无论你尝试加载多少次，都只会从内存中读取已经加载的模块
   • 作用域隔离：每个模块有自己的作用域，这意味着模块内部的变量、函数等不会污染全局作用域
   • 严格模式：ES6模块自动开启严格模式，无需在模块头部显式添加use strict

//module.js
//导出 export 可以将一个变量或函数或类导出为一个模块，导入到其他模块中使用
export function fn(x){
    return x*x;
}
//默认导出 export default 
export default function add(x){
    return x+10;
}

//app.js
//导入 import 
import { fn } from './module.js';
console.log(fn(2)); //4
//默认导入
import add from './module.js';
console.log(add(5)); //15