js版本ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13、ES14[2023]新特性

ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言,本文讲述Javascript[ECMAScript]版本ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13、ES14[2023]的新特性,帮助朋友们更好的熟悉和使用Javascript

ES5

1.严格模式

use strict

2.Object

   getPrototypeOf，返回一个对象的原型
    getOwnPropertyDescriptor，返回某个对象自有属性的属性描述符
    getOwnPropertyNames，返回一个数组，包括对象所有自由属性名称集合（包括不可枚举的属性）
    hasOwnProperty，给定属性存在于对象实例中，返回 true
    isPrototypeOf，在原型链中出现过的原型，返回 true
    create，创建一个拥有指定原型和若干指定属性的对象
    defineProperty，为对象定义一个新属性，或者修改已有的属性，并对属性重新设置 getter 和 setter，这里可以被用作数据绑定的对象劫持用途
    defineProperties，在一个对象上添加或修改一个或者多个自有属性，与 defineProperty 类似
    seal，锁定对象，阻止修改现有属性的特性，并阻止添加新属性，但是可以修改已有属性的值
    freeze，冻结对象，阻止对对象的一切操作和更改，冻结对象将变成只读
    preventExtensions，让一个对象变得不可以扩展，也就是不能再添加新的属性
    isSealed，判断对象是否被锁定
    isFrozen，判断对象是否被冻结
    isExtensible，判断对象是否可以被扩展
    keys，返回一个由给定对象的所有可以枚举自身属性的属性名组成的数组

3.Array

Array.isArray，确定某个值到底是不是数组，不管它在哪个全局执行环境中创建
    push，接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
    pop，在数组尾部移除最后一项，减少数组的 length 值，然后返回移除的项
    shift，移除数组中的第一项并返回该项，同时将数组长度减 1
    unshift，在数组前端添加任意个项，并返回新数组的长度
    reverse，反转数组项的顺序，返回排序后的数组
    sort，默认情况下，按升序排序数组项，返回排序后的数组
    concat，创建当前数组的一个副本，将接收到的参数添加到这个副本的末尾，返回新构建的数组
    join，用指定的字符拼接数组，返回拼接好的字符串
    slice，基于当前数组中的一个或多个创建一个新数组，不影响原始数组
    splice，根据传入参数不同，可以删除、插入、替换数组元素，返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回空数组
    indexOf，返回根据给定元素找到的第一个索引值，如果不存在则返回 -1
    lastIndexOf，返回指定元素在数组中的最后一个索引值，如果不存在则返回 -1
    every ，对数组中的每一项运行给定函数 ，如果该函数对每一项都返回 true，则返回 true
    filter，对数组中的每一项运行给定函数 ，返回该函数会返回 true 的项组成的数组
    forEach，对数组中的每一项运行给定函数，没有返回值
    map，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
    some，对数组中的每一项运行给定函数，如果函数对任一项返回 true，则返回 truereduce，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终缩减为一个值
    reduceRight，接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终缩减为一个值

4.String

charAt，访问字符串中特定字符，返回给定位置的字符
    charCodeAt，访问字符串中特定字符，返回给定位置的字符的字符编码
    concat，将一个或多个字符串拼接起来，返回拼接得到的新字符串
    match，查找匹配的字符串，返回一个数组
    search，查找匹配的字符串，返回匹配项的索引，没有找到，返回 -1
    replace，替换字符串
    split，基于指定的分隔符将一个字符串分割成多个字符串，将结果放在一个数组中，并返回
    trim，创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果
    localeCompare，比较两个字符串
    slice，返回被操作字符串的一个子字符串
    substr，返回被操作字符串的一个子字符串
    substring，返回被操作字符串的一个子字符串

注意：slice、substr、substring 都接受一个或两个参数，第一个参数指定字符串的开始位置，第二个参数表示子字符串到哪里结束，slice 和 substring 的第二个参数指定的是子字符串的最后一个字符后面的位置，substr 第二个参数指定的是返回的字符个数，如果没有传递第二个参数，则将字符串的末尾作为结束位置。

5.Function

 	arguments.callee，该属性是一个指针，指向拥有这个 arguments 对象的函数
    arguments.caller，该属性保存着调用当前函数的函数的引用
    apply，在特定的作用域中调用函数，第一个参数是在其中运行函数的作用域，第二个是参数数组
    call，在特定的作用域中调用函数，第一个参数是在其中运行函数的作用域，其余参数直接传递给函数
    bind，创建一个函数的实例，其 this 值会被绑定到传给 bind 函数的值

6.JSON

	JSON.parse，解析字符串为 JSON 对象
    JSON.stringify，解析 JSON 对象为字符串
    JSON.valueOf，获取某个JSON 对象中的值
    JSON.toString，被调用时，会调用 Object 原型上的 toString 方法，会获的 JSON 对象的值并转为字符串，如果没有具体的值，则返回原型数组
    JSON.toLocaleString，也是Object 原型上的方法，经常会返回与 toString 相同内容，但是对于 Date 对象，则会返回格式化的时间字符串

7.其他

  Date.now，返回当前时间戳
    Date.toJSON，将 Date 对象转换为字符串，格式为 JSON 日期
    Math.min，确定一组数值中的最小值
    Math.max，确定一组数值中的最大值
    Math.random，返回大于 0 小于 1 的一个随机数
    Number.prototype.toFixed，按照指定的小数位返回数值的字符串表示

ES6(2015)

1.类

class Man {
   
  constructor(name) {
   
    this.name = '你好世界';
  }
  console() {
   
    console.log(this.name);
  }
}
const man = new Man('你好世界');
man.console(); // 你好世界
创建类的几种方法：
	在 JavaScript 中，创建类有几种不同的方式。以下是几种常见的方法：
1. 使用 class 关键字（ES6+）

这是 ES6 引入的一种标准语法来创建类，语法简洁易懂。

javascript
class Person {
   
  constructor(name, age) {
   
    this.name = name;
    this.age = age;
  }

  greet() {
   
    console.log(`Hello, my name is ${
    this.name} and I am ${
    this.age} years old.`);
  }
}

const person = new Person('Alice', 30);
person.greet();  // 输出: Hello, my name is Alice and I am 30 years old.

2. 使用函数构造器（传统方式）

在 ES6 之前，使用函数构造器来模拟类。函数构造器通过 new 关键字来创建实例，并通过原型链定义方法。

javascript
function Person(name, age) {
   
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
   
  console.log(`Hello, my name is ${
    this.name} and I am ${
    this.age} years old.`);
};

const person = new Person('Bob', 25);
person.greet();  // 输出: Hello, my name is Bob and I am 25 years old.

3. 使用 Object.create() 和构造函数

通过 Object.create() 可以创建一个对象并设置它的原型，进而模拟类的行为。

javascript
const PersonPrototype = {
   
  greet: function() {
   
    console.log(`Hello, my name is ${
    this.name} and I am ${
    this.age} years old.`);
  }
};

function Person(name, age) {
   
  const obj = Object.create(PersonPrototype);
  obj.name = name;
  obj.age = age;
  return obj;
}

const person = Person('Charlie', 40);
person.greet();  // 输出: Hello, my name is Charlie and I am 40 years old.

4. 使用 class 和继承（ES6+）

ES6 的 class 语法支持继承，可以通过 extends 关键字来实现。

javascript
class Animal {
   
  constructor(name) {
   
    this.name = name;
  }

  speak() {
   
    console.log(`${
    this.name} makes a noise.`);
  }
}

class Dog extends Animal {
   
  constructor(name) {
   
    super(name);  // 调用父类的构造函数
  }

  speak() {
   
    console.log(`${
    this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak();  // 输出: Rex barks.

5. 使用 ES6 class 和静态方法

class 还支持静态方法，这些方法不会被实例化，而是直接在类本身上调用。

javascript
class Calculator {
   
  static add(a, b) {
   
    return a + b;
  }

  static subtract(a, b) {
   
    return a - b;
  }
}

console.log(Calculator.add(5, 3));  // 输出: 8
console.log(Calculator.subtract(5, 3));  // 输出: 2

6. 使用 ES5 构造函数结合原型链和静态方法

在传统的 ES5 中，也可以通过原型链结合静态方法来模拟类的功能。

function Car(make, model) {
   
  this.make = make;
  this.model = model;
}

Car.prototype.drive = function() {
   
  console.log(`${
    this.make} ${
    this.model} is driving.`);
};

Car.getBrand = function() {
   
  return 'Generic Car Brand';
};

const car = new Car('Toyota', 'Camry');
car.drive();  // 输出: Toyota Camry is driving.
console.log(Car.getBrand());  // 输出: Generic Car Brand

2.模块化(ES Module)

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import {
    sub } from './A';
console.log(sub(1, 2)); // 3

3.箭头（Arrow）函数

const func = (a, b) => a + b;
func(1, 2); // 3

箭头函数（Arrow Function）是 JavaScript 中一种简化函数写法的语法，它使用 => 符号来定义函数。箭头函数提供了一种更简洁的方式来定义匿名函数，同时也改变了 this 关键字的行为。
基本语法

javascript
const functionName = (parameters) => {
   
  // 函数体
};

示例
1. 简单的箭头函数

javascript
const add = (a, b) => {
   
  return a + b;
};

console.log(add(2, 3));  // 输出: 5

2. 单行箭头函数（隐式返回）

如果箭头函数的主体只有一个表达式，可以省略 return 关键字，并且该表达式的值会被自动返回。

javascript
const add = (a, b) => a + b;

console.log(add(2, 3));  // 输出: 5

3. 无参数的箭头函数

如果没有参数，仍然需要一个空的括号。

javascript
const greet = () => console.log('Hello!');

greet();  // 输出: Hello!

4. 只有一个参数的箭头函数

如果函数只有一个参数，可以省略括号。

javascript
const square = x => x * x;

console.log(square(5));  // 输出: 25

箭头函数的特点
1. this 绑定

箭头函数最显著的特点是它不会创建自己的 this，而是继承外部上下文中的 this。这意味着箭头函数中的 this 与外部的 this 相同，而常规函数会根据调用的上下文来决定 this。

javascript
// 使用常规函数时，`this` 指向的是调用函数的对象
function Person(name) {
   
  this.name = name;
}

Person.prototype.greet = function() {
   
  console.log(`Hello, ${
    this.name}`);
};

const john = new Person('John');
john.greet();  // 输出: Hello, John

// 使用箭头函数时，`this` 继承自外部环境
function Person(name) {
   
  this.name = name;
  setTimeout(() => {
   
    console.log(`Hello, ${
    this.name}`);
  }, 1000<