Einführung in Operatoren und Ausdrücke in JavaScript

Dieser Artikel bietet Ihnen eine Einführung in Operatoren und Ausdrücke in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

1. Unäre Operatoren

1.Löschoperator

Der Löschoperator wird verwendet, um ein Attribut eines Objekts zu löschen wird irgendwann freigegeben

Syntax: Löschausdruck

Der Löschoperator entfernt das angegebene Attribut aus einem Objekt. Gibt „true“ zurück, wenn das Löschen erfolgreich war, andernfalls wird „false“ zurückgegeben. typeof (operand);

   let Employee = {
        age: 28,
        name: 'abc',
        designation: 'developer'
    };
    console.log(delete Employee.name);   // returns true
    console.log(delete Employee.age);    // returns true
    console.log(Employee); //{designation: "developer"}

3.void-Operator

void-Operator wertet den angegebenen Ausdruck aus und gibt undefiniert zurück

Syntax: void-Ausdruck

    typeof NaN === 'number';
    typeof Number(1) === 'number';
    typeof "" === 'string';
    typeof true === 'boolean';
    typeof Symbol('foo') === 'symbol';
    typeof undefined === 'undefined';
    typeof null === 'object'
    typeof [1, 2, 4] === 'object';
    typeof new Boolean(true) === 'object';
    typeof new Number(1) === 'object';
    typeof new String("abc") === 'object';
    typeof function(){} === 'function';

2. Relationale Operatoren

1.in-Operator

Wenn sich das angegebene Attribut im angegebenen Objekt oder seiner Prototypenkette befindet, dann gibt der in-Operator true zurück

Syntax: prop in object

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor=&#39;green&#39;);">
  点击这个链接会让页面背景变成绿色。
</a>

2. Instanz des Operators

Der Instanz-Operator wird verwendet, um zu testen, ob ein Objekt in seiner Prototypenkette vorhanden ist. Prototyp-Attribut des Konstruktors

Syntax: Objektinstanz des Konstruktors

    let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
    console.log(0 in trees); // 返回true
    console.log(3 in trees); // 返回true
    console.log(6 in trees); // 返回false
    console.log("bay" in trees); // 返回false (必须使用索引号,而不是数组元素的值)
    console.log("length" in trees); // 返回true (length是一个数组属性)

3. Ausdruck

1.this

Innerhalb der Funktion hängt der Wert von this davon ab, wie die Funktion aufgerufen wird. Im strikten Modus behält dies den Wert bei, den es hatte, als es in den Ausführungskontext eintrat, daher wird die folgende Funktion standardmäßig auf undefiniert gesetzt

    let simpleStr = "This is a simple string";
    let myString  = new String();
    let newStr    = new String("String created with constructor");
    let myDate    = new Date();
    let myObj     = {};
    simpleStr instanceof String; // 返回 false, 检查原型链会找到 undefined
    myString  instanceof String; // 返回 true
    newStr    instanceof String; // 返回 true
    myString  instanceof Object; // 返回 true
    myDate instanceof Date;     // 返回 true
    myObj instanceof Object;    // 返回 true, 尽管原型没有定义

Wenn eine Funktion das Schlüsselwort this in ihrem Körper verwendet, kann es durch using geerbt werden Funktion Binden Sie diesen Wert an das spezifische Objekt im Aufruf aus der Aufruf- oder Apply-Methode von Function.prototype

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}
f2() === undefined; // true

Durch den Aufruf von f.bind(someObject) wird eine Funktion mit demselben Funktionskörper und Umfang wie f erstellt, aber In dieser neuen Funktion wird dies dauerhaft an das erste Argument von bind gebunden, unabhängig davon, wie die Funktion aufgerufen wird.

function add(c, d) {
  return this.a + this.b + c + d;
}
let o = {a: 1, b: 3};
// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

In Pfeilfunktionen stimmt dies mit dem This des umschließenden lexikalischen Kontexts überein. Im globalen Code wird es auf das globale Objekt

function f(){
  return this.a;
}
let g = f.bind({a:"azerty"});
console.log(g()); // azerty
let h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

2.super

gesetzt. Syntax:

super([arguments]); // Rufen Sie den Konstruktor des übergeordneten Objekts auf /parent class Function

super.functionOnParent([arguments]); // Rufen Sie die Methode für das übergeordnete Objekt/die übergeordnete Klasse auf

Bei Verwendung im Konstruktor erscheint das Schlüsselwort super allein und muss verwendet werden wobei der Schlüssel this vor dem Wort verwendet wird. Das Schlüsselwort super kann auch zum Aufrufen von Funktionen für das übergeordnete Objekt

let globalObject = this;
let foo = (() => this);
console.log(foo() === globalObject); // true

new

verwendet werden. Der neue Operator erstellt eine Instanz eines benutzerdefinierten Objekttyps oder eine Instanz eines erstellten Objekttyps. im Objekt mit einem Konstruktor

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'

4. Erweiterungssyntax

Sie können Array-Ausdrücke oder Strings auf syntaktischer Ebene während Funktionsaufrufen/Array-Konstruktionen erweitern; Sie können Objektausdrücke auch erweitern, wenn Sie Literalobjekte erstellen Erweitern Sie auf Schlüsselwert-Weise

Verwenden Sie die Erweiterungssyntax, wenn Sie eine Funktion aufrufen

function Car() {}
car1 = new Car()
console.log(car1.color)           // undefined
Car.prototype.color = null
console.log(car1.color)           // null
car1.color = "black"
console.log(car1.color)           // black

Verwenden Sie die Erweiterungssyntax, wenn Sie ein Literal-Array erstellen

function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction.apply(null, args);

//展开语法
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);

Array-Kopie

let parts = ['shoulders'，'knees']; 
let lyrics = ['head'，... parts，'and'，'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Mehrere Arrays verbinden

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

5. Klassenausdruck

Klassenausdruck It ist eine Syntax zum Definieren von Klassen

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
let arr3 = arr1.concat(arr2);

//使用展开语法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
let arr3 = [...arr1, ...arr2];

6. Funktionsausdruck

Das Funktionsschlüsselwort kann zum Definieren einer Funktion in einem Ausdruck verwendet werden. Sie können auch den Funktionskonstruktor und eine Funktionsdeklaration verwenden Definieren Sie eine Funktion

Heben von Funktionsdeklarationen und Heben von Funktionsausdrücken

: In JavaScript gibt es kein Heben für Funktionsausdrücke. Im Gegensatz zu Funktionsdeklarationen können Sie Funktionsausdrücke nicht verwenden, bevor Sie sie definieren

let Foo = class {
  constructor() {}
  bar() {
    return "Hello World!";
  }
};
let instance = new Foo();
instance.bar(); 
// "Hello World!"

7 .function*expression

function Schlüsselwort kann eine Generatorfunktion innerhalb des Ausdrucks definieren, function Diese Deklarationsmethode (Funktionsschlüsselwort gefolgt von Asterisk) definiert eine Generatorfunktion (Generatorfunktion), die zurückgibt ein Generatorobjekt

Syntax: Funktion* Name([param[, param[, ... param]]]) { Anweisungen }

/* 函数声明 */

foo(); // "bar"
function foo() {
  console.log("bar");
}


/* 函数表达式 */

baz(); // TypeError: baz is not a function
let baz = function() {
  console.log("bar2");
};

Parameter empfangen

function* idMaker(){
  let index = 0;
  while(index<3)
    yield index++;
}

let gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined

Übergabeparameter

function* idMaker(){
    let index = arguments[0] || 0;
    while(true)
        yield index++;
}

let gen = idMaker(5);
console.log(gen.next().value); // 5
console.log(gen.next().value); // 6

Ausdruck

function *createIterator() {
    let first = yield 1;
    let second = yield first + 2; // 4 + 2 
                                  // first =4 是next(4)将参数赋给上一条的
    yield second + 3;             // 5 + 3
}

let iterator = createIterator();

console.log(iterator.next());    // "{ value: 1, done: false }"
console.log(iterator.next(4));   // "{ value: 6, done: false }"
console.log(iterator.next(5));   // "{ value: 8, done: false }"
console.log(iterator.next());    // "{ value: undefined, done: true }"

Verwandte Empfehlungen:

Einführung in Operatoren = = und === in JavaScript_Javascript-Kenntnissen

Javascript-Kernsprache – Ausdrücke und Operator

Das obige ist der detaillierte Inhalt vonEinführung in Operatoren und Ausdrücke in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!