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

3.Array

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

4.String

charAt，访问字符串中特定字符，返回给定位置的字符charCodeAt，访问字符串中特定字符，返回给定位置的字符的字符编码concat，将一个或多个字符串拼接起来，返回拼接得到的新字符串match，查找匹配的字符串，返回一个数组search，查找匹配的字符串，返回匹配项的索引，没有找到，返回 -1replace，替换字符串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));  // 输出: 26. 使用 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));  // 输出: 52. 单行箭头函数（隐式返回）如果箭头函数的主体只有一个表达式，可以省略 return 关键字，并且该表达式的值会被自动返回。javascript
const add = (a, b) => a + b;console.log(add(2, 3));  // 输出: 53. 无参数的箭头函数如果没有参数，仍然需要一个空的括号。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<