Introduction aux opérateurs et expressions en JavaScript

Cet article vous apporte une introduction aux opérateurs et aux expressions en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Opérateurs unaires

1.opérateur de suppression

L'opérateur de suppression est utilisé pour supprimer un attribut d'un objet s'il n'y a pas de référence à cet attribut, alors il l'est. sera finalement publié

Syntaxe : delete expression

L'opérateur delete supprimera l'attribut spécifié d'un objet. Renvoie vrai une fois la suppression réussie, sinon renvoie faux

   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"}

2. Opérateur typeof

L'opérateur typeof renvoie une chaîne indiquant le type de l'opérande non calculé

Syntaxe : typeof operand; typeof (opérande);

    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';

3.void opérateur

void l'opérateur évalue l'expression donnée et renvoie undéfini

Syntaxe : void expression

<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. Opérateurs relationnels

Opérateur 1.in

Si l'attribut spécifié est dans l'objet spécifié ou dans sa chaîne de prototypes, l'opérateur in renvoie true

Syntaxe : prop in object

    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是一个数组属性)

2. opérateur instanceof

L'opérateur instanceof est utilisé pour tester un objet s'il existe un attribut prototype d'un constructeur dans sa chaîne de prototypes

Syntaxe : objet instanceof constructor

    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, 尽管原型没有定义

3. Expression

1.this

À l'intérieur d'une fonction, la valeur de this dépend de la façon dont la fonction est appelée. En mode strict, cela conservera la valeur qu'il avait lorsqu'il est entré dans le contexte d'exécution, donc ce qui suit sera par défaut undefined

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

Lorsqu'une fonction utilise le mot-clé this dans son corps, vous pouvez utiliser The La méthode call ou apply héritée de Function.prototype lie cette valeur à l'objet spécifique dans l'appel

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

L'appel de f.bind(someObject) créera une fonction avec le même corps et la même portée que la fonction f, mais dans cette nouvelle fonction, ceci sera lié en permanence au premier paramètre de bind, peu importe comment cette fonction est appelée

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

Dans les fonctions fléchées, c'est la même chose que la fermeture Le contexte lexical de ceci reste cohérent. Dans le code global, il sera défini sur l'objet global

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

2.super

Syntaxe :
super([arguments]); classe parent Le constructeur de
super.functionOnParent([arguments]); // Appeler la méthode sur l'objet parent/classe parent

Lorsqu'il est utilisé dans le constructeur, le mot-clé super apparaîtra seul et devra être used Utilisé avant ce mot-clé. Le mot-clé super peut également être utilisé pour appeler des fonctions sur l'objet parent

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

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

3 new

L'opérateur new crée une instance d'un type d'objet défini par l'utilisateur ou d'un objet intégré. objet avec un constructeur Exemples de

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

4. Syntaxe d'expansion

peut développer des expressions de tableau ou des chaînes au niveau de la syntaxe lors des appels de fonction/de la construction de tableaux, elle peut également être utilisée lors de la construction d'un littéral ; objets. Développez les expressions d'objet en termes de valeur-clé

Utilisez la syntaxe d'expansion lors de l'appel de fonctions

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);

Utilisez la syntaxe d'expansion lors de la construction de tableaux littéraux

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

Copie de tableau

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

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

Connectez plusieurs tableaux

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];

5. >

L'expression de classe est une syntaxe utilisée pour définir une classe

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

6. Expression de fonction

Le mot-clé function peut être utilisé dans une expression Pour définir une fonction dans une formule, vous pouvez également utiliser le constructeur Function et une déclaration de fonction pour définir une fonction

Hoisting de déclaration de fonction et hoisting d'expression de fonction : Les expressions de fonction en JavaScript ne sont pas hissées, contrairement à l'instruction de fonctions, vous ne pouvez pas utiliser une expression de fonction avant de définir l'expression de fonction

/* 函数声明 */

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


/* 函数表达式 */

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

7. Le mot-clé function* expression

fonction

peut définir un générateur à l'intérieur de l'expression Fonction, fonction Cette méthode de déclaration (mot-clé fonction suivi d'un astérisque) définira une fonction génératrice, qui renvoie un objet Générateur

Syntaxe : function* name([param[ , param[, ... param]]]) { déclarations }

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

Paramètres de réception

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

Paramètres de transmission

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 }"

Expression

let x = function*(y) {
   yield y * y;
};

Recommandations associées :

Introduction aux opérateurs == et === dans les compétences JavaScript_ javascript

langage de base javascript - expressions et opérateurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!