Heim  >  Artikel  >  Web-Frontend  >  Können Erweiterungszeichen in es6-Arrays verwendet werden?

Können Erweiterungszeichen in es6-Arrays verwendet werden?

青灯夜游
青灯夜游Original
2022-10-20 18:00:111710Durchsuche

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]

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

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

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

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

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]

3、字符串转为数组

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

const name = 'Jae';
console.log(...name); // J a e

字符串转数组除了用 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"]

    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]
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>
  • 2. Arrays zusammenführen

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

    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!

    Stellungnahme:
    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