Heim  >  Artikel  >  Web-Frontend  >  Einführung in Erweiterungssymbole in ES6

Einführung in Erweiterungssymbole in ES6

不言
不言nach vorne
2018-11-14 15:41:543536Durchsuche

Dieser Artikel bietet Ihnen eine Einführung in die Erweiterungssymbole in ES6. Ich hoffe, er wird Ihnen als Referenz dienen.

Übersicht

Das Erweiterungssymbol ist wirklich eine sehr nützliche Sache. Ich verwende es oft zum Teilen von Zeichenfolgen, zum Zusammenführen von Arrays, zum Kopieren von Arrays, zum Zusammenführen von Objekten und zum Kopieren von Objekten.

0x001 Syntax

...iterableObj

0x002 Parametererweiterung beim Aufruf der Funktion

Dies dient der Erweiterung der Parameter beim Aufruf der Funktion, was sich von den übrigen Parametern unterscheidet Die übrigen Parameter werden in der Groß- und Kleinschreibung

myFunction(...iterableObj);

in der Funktionsdeklaration verwendet.

function add(a, b){
    return a + b
}
add(...[1,2]) // 相当于 add(1,2) -> 3

Array-Deklarationserweiterung

kann für die Array-Zusammenführung verwendet werden

[...[1,2,3],4] // 相当于[1,2,3].push(4) -> [1,2,3,4]
[...'1234'] // 相当于 '1234'.split("")

Objekterweiterung

kann für das Zusammenführen von Objekten und das Kopieren von Objekten verwendet werden

{...{name:1},age:2} // 相当于 Objeact.assign({},{name:1},{age:2}) -> {name:1,age:2}
{...{name:1}} // 相当于 Object.assign({},{name:1}) -> {name:1}

Babel-Übersetzung

String-/Array-Erweiterung

Quellcode

[...'1234']

Nach der Übersetzung

function _toConsumableArray(arr) {
 if (Array.isArray(arr)) {
  for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
   arr2[i] = arr[i]; 
   }
   return arr2; 
   } else { 
   return Array.from(arr); 
   } 
   }

[].concat(_toConsumableArray('1234'));

Objekterweiterung

Quellcode

let a={...{name:1}}

Übersetzt

var _extends = Object.assign || function (target) {
 for (var i = 1; i < arguments.length; i++) {
  var source = arguments[i]; 
  for (var key in source) {
   if (Object.prototype.hasOwnProperty.call(source, key))
    { target[key] = source[key]; 
    } 
    } 
    }
     return target; 
     };

var a = _extends({ name: 1 });

Das obige ist der detaillierte Inhalt vonEinführung in Erweiterungssymbole in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:https://segmentfault.com/a/1190000016977223. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen