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<