Zusammenfassung aller neuen Funktionen von JavaScript ECMAScript 6
WBOY
Freigeben： 2022-08-15 18:13:22
nach vorne
1526 Leute haben es durchsucht
Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Der Artikel stellt hauptsächlich den Inhalt rund um das Thema vor und hat einen bestimmten Referenzwert Werfen wir einen Blick darauf, ich hoffe, es hilft allen.
Es ist 8 Jahre her, seit ECMAScript ES6 im Jahr 2015 offiziell veröffentlicht hat, und seit 2015 wird jedes Jahr eine neue Version veröffentlicht Juni, mit dem aktuellen Jahr als Versionsnummer.
In diesen vielen Versionen sind viele neue Funktionen erschienen. Um die Erinnerung zu erleichtern, habe ich alle neuen Funktionen in diesem Artikel geordnet.
ps: Einige Informationen besagen, dass alle Versionen nach ES2015 gemeinsam als ES6 bezeichnet werden, und einige sagen, ES6 bedeute ES2015, ES7 bedeute ES2016 usw., was hier nicht besprochen wird.
ES2015 (ES6)
ES2015 ist die Version mit den größten Änderungen. Es ist ungefähr wie in der Abbildung unten dargestellt:
let, const Schlüsselwort- und Blockebenenbereich
Vor ES6 gab es nur eine Möglichkeit, Variablen zu deklarieren, nämlich die Verwendung des Schlüsselworts var. In ES2015 let und wurden hinzugefügt. Das Schlüsselwort const wird zum Deklarieren von Variablen und Konstanten verwendet. Der Code lautet wie folgt: var关键字，在ES2015中新增了let和const关键字来声明变量与常量，
代码如下：
// 声明变量
let v = 100
v = 200
// 声明常量
const V = 200
// 修改常量
// V = 300 // 报错
Nach dem Login kopieren
同时使用let和const关键字声明的变量或者常量是具有块级作用域的，
示例代码如下：
{
var v = 100
}
{
let val = 200
}
console.log(v)
console.log(val) // 报错 val is not defined
Nach dem Login kopieren
值得注意的是使用let或者const关键字声明的变量不具有变量提升的特性，且存在暂时性死区的特性。
函数的扩展
在ES2015中允许函数使用默认值，示例代码如下：
// es2015之前
function foo(v) {
v = v ? v : 100
return v
}
// es2015
function bar(v = 100) {
return v
}
Nach dem Login kopieren
值得注意的是如果有多个参数时，默认参数必须从后向前使用。
在ES2015中新增了箭头函数，这是函数的一种简写形式，示例代码如下：
function foo(v) {
return v``
}
// 箭头函数写法
const foo = (v) => {
return v
}
// 简写形式 1
const foo = v => { // 只有一个参数可以省略括号
return v
}
// 简写形式 2
const foo = v => v // 语句中只有return时可以省略return和花括号
Nach dem Login kopieren
值得注意的是箭头函数的this是根据执行上下文决定的，内部并不会绑定this。
使用箭头函数时内部并不存在arguments对象，而是采用剩余参数的方式代替，
示例代码如下：
const foo = (...args) => {
// console.log(arguments) // ReferenceError: arguments is not defined
console.log(args) // args 是一个数组
}
foo(1, 2, 3, 4) // [ 1, 2, 3, 4 ]
Nach dem Login kopieren
在ES2015中为函数增加的要给name属性，该属性指向函数的名称，
示例代码如下：
function foo(v) {
return v
}
const bar = v => v
console.log(foo.name) // foo
console.log(bar.name) // bar
Die Variablen oder Konstanten werden sowohl mit let als auch mit const< deklariert /code>-Schlüsselwörter lauten: Mit Gültigkeitsbereich auf Blockebene lautet der </tbody></table>🎜Beispielcode wie folgt: 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // 复制数组
console.log(Math.max.call(null, ...arr)) // 将数组中的每一项作为参数使用</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Es ist erwähnenswert, dass Variablen mit <code>let oder const</code deklariert wurden > Schlüsselwörter haben keine variablen Werbemerkmale und es gibt eine vorübergehende tote Zone. 🎜🎜Die Funktionserweiterung🎜🎜🎜ermöglicht Funktionen die Verwendung von Standardwerten in ES2015. Der Beispielcode lautet wie folgt: 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">function foo() {
return Array.from(arguments) // 将 arguments 转换为数组
}
console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Es ist zu beachten, dass 🎜wenn mehrere Parameter vorhanden sind, die Standardparameter verwendet werden müssen von hinten nach vorne🎜. 🎜🎜In ES2015🎜Es wurde eine neue Pfeilfunktion hinzugefügt, die eine Kurzform der Funktion ist🎜,🎜Der Beispielcode lautet wie folgt:🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">Array.of(1) // [1]
Array.of(true, 1, &#39;一碗周&#39;) // [true, 1, &#39;一碗周&#39;]</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Es ist erwähnenswert, dass die Pfeilfunktion auf <code>this basiert Abhängig vom Ausführungskontext wird this nicht intern gebunden. 🎜🎜Bei Verwendung der Pfeilfunktion gibt es kein internes Argumentobjekt, sondern stattdessen werden die restlichen Parameter verwendet. 🎜🎜🎜Der Beispielcode lautet wie folgt: 🎜🎜
🎜Erweiterung numerischer Werte🎜🎜Die Erweiterung numerischer Werte in ES2015 fügt hauptsächlich einige Werte zu den beiden Objekten Math hinzu - und Number-Methoden sowie binäre und oktale Darstellungen. 🎜🎜Verwenden Sie in ES2015 0b oder 0B, um binär darzustellen, und verwenden Sie 0o oder 0O, um oktal darzustellen. 🎜🎜🎜Der Beispielcode lautet wie folgt: 🎜🎜
import a from 'm' // 导入模块 m 中的默认导出，将其命名为 a
import a, { b } from 'm' // 导入模块 m 中的默认导出以及单独导入成员 b
import * as A from 'm' // 导入模块中的所有成员
import 'm' // 执行 m 模块
export const b = 1 // 单独导出
export default b // 默认导出
export { b } // 按需导出
export { b as bb } // 改名导出
export { b } from 'm' // 导入模块 m 中的成员 b 并导出
Nach dem Login kopieren
解构赋值
ES2015新增了解构赋值的语法，允许我们使用按照一定的模式，在数组或者对象中提取指定的值，
示例代码如下：
// 数组的解构赋值
let [name, age, hobby = 'coding' /* 结构赋值的默认值 */] = ['一碗周', 18]
// 交换两个变量的值
let a = 1
let b = 2
;[a, b] = [b, a]
console.log(a, b) // 2 1
// 对象的结构赋值
let { name: ObjName /* 解构赋值重命名 */, sex } = { name: '一碗周', sex: 1 }
// 函数参数的解构赋值
function bar({ name, age }) {
return name + age
}
bar({ name: '一碗周', age: 18 }) // 一碗周18
// 之前
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
var globals = getGlobal();
if (typeof globals.setTimeout !== 'function') {
// no setTimeout in this environment!
}
Nach dem Login kopieren
// 之后
if (typeof globalThis.setTimeout !== 'function') {
// no setTimeout in this environment!
}
Das obige ist der detaillierte Inhalt vonZusammenfassung aller neuen Funktionen von JavaScript ECMAScript 6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
