Heim > Web-Frontend > Front-End-Fragen und Antworten > Können Erweiterungszeichen in es6-Arrays verwendet werden?

Können Erweiterungszeichen in es6-Arrays verwendet werden?

青灯夜游
Freigeben: 2022-10-20 18:00:11
Original
1771 Leute haben es durchsucht

ES6-Arrays können Erweiterungszeichen verwenden. Der Expander „…“ erweitert das iterierbare Objekt in seine einzelnen Elemente, und das sogenannte iterierbare Objekt ist jedes Objekt, das mit einer „for of“-Schleife durchlaufen werden kann, wie z. B. Arrays, Strings, Maps und Sets; Wenn der Expander mit Arrays verwendet wird, wandelt er ein Array in eine durch Kommas getrennte Folge von Argumenten um.

Können Erweiterungszeichen in es6-Arrays verwendet werden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Expand-Operator (Erweiterungsoperator) wurde in ES6 eingeführt, der iterierbare Objekte in ihre einzelnen Elemente erweitert. Das sogenannte iterierbare Objekt ist alles, was mit einer for-of-Schleife durchlaufen werden kann. wie Arrays, Strings, Maps, Sets, DOM-Knoten usw.  是ES6中引入的,将可迭代对象展开到其单独的元素中,所谓的可迭代对象就是任何能用for of循环进行遍历的对象,例如:数组、字符串、Map 、Set 、DOM节点等。

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

es6展开符的使用(数组方面)

1、复制数组

给定一个数组,想要将一个数组的成员复制到另一个数组中,该怎么做?

const a = [1, 2];
const b = a;
console.log(b); // [1, 2]
Nach dem Login kopieren

真有表面上这么简单吗?试着修改一下a数组中的值

a[0] = 3;
console.log(b); // [3, 2]
Nach dem Login kopieren

诶?怎么我修改了a数组中的值,结果b数组中的值也变了?这里涉及到的是堆栈的原理,就不具体展开说了,你只需要知道简单地使用两边相等的方式是不能完成数组的复制的,这里使用展开运算符就可以完成啦?

const a = [1, 2];
const c = [...a];
console.log(c); // [1, 2]
a[0] = 3;
console.log(c); // [1, 2]
Nach dem Login kopieren

2、合并数组

const a = [1, 2];
const b = [3];
const c = [4, 5];

console.log([...a, ...b, ...c]); // [1, 2, 3, 4, 5]
console.log([...c, ...a, ...b]); // [4, 5, 1, 2, 3]
console.log([99, ...a, 24, ...b, ...c]); // [99, 1, 2, 24, 3, 4, 5]
Nach dem Login kopieren

3、字符串转为数组

前置知识:字符串可以按照数组的形式展开?

const name = 'Jae';
console.log(...name); // J a e
Nach dem Login kopieren

字符串转数组除了用 split()

Mit dem Spread-Operator kann ein Ausdruck irgendwo erweitert werden. Der Spread-Operator kann verwendet werden, wenn mehrere Argumente (für Funktionsaufrufe), mehrere Elemente (für Array-Literale) oder mehrere Variablen (für Destrukturierungszuweisungen) vorhanden sind.

Verwendung des es6-Expanders (Array-Aspekt)

1. Array kopieren
  • Bei einem Array möchten Sie, wie es geht Mitglieder eines Arrays in ein anderes Array kopieren?

    const name = 'Jae';
    const name_string = [...name];
    console.log(name_string); // ["J", "a", "e"]
    Nach dem Login kopieren

    Ist es wirklich so einfach, wie es scheint? Versuchen Sie, die Werte im Array a
function func() {
	console.log(arguments);
}
func(1, 2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 使用展开远算符
function func() {
	console.log([...arguments]);
}
func(1, 2); // [1, 2]
Nach dem Login kopieren
eh zu ändern? Warum habe ich den Wert in Array a geändert, aber der Wert in Array b hat sich auch geändert? Hier geht es um das Prinzip des Stapels, daher werde ich es nicht im Detail erweitern. Sie müssen nur wissen, dass die einfache Verwendung der Methode zum Ausgleichen beider Seiten die Kopie des Arrays nicht vervollständigen kann.
    <!--HTML代码-->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    Nach dem Login kopieren
  • 2. Arrays zusammenführen

    const a = document.querySelectAll("p");
    console.log(a); // NodeList(3) [p, p, p]
    console.log([...a]); // [p, p, p]
    Nach dem Login kopieren

    3. Strings in Arrays konvertieren
  • Voraussetzungen: Strings können in Form von Arrays erweitert werden?

    rrreeeZusätzlich zur Verwendung von split( )-Methode, können Sie auch den Spread-Operator verwenden? Da Array-ähnliche Methoden keine Array-Methoden verwenden können, ist deren Konvertierung für einige Datenverarbeitungsanforderungen bequemer~

    Argumente🎜🎜🎜rrreee🎜🎜🎜NodeList🎜🎜🎜rrreeerrreee🎜[Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜 Programmiervideo🎜】🎜

    Das obige ist der detaillierte Inhalt vonKönnen Erweiterungszeichen in es6-Arrays verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser 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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage