JavaScript の演算子と式の概要-jsチュートリアル-php.cn

この記事では、JavaScript の演算子と式について説明します。必要な方は参考にしてください。

1. 単項演算子

1.delete 演算子

delete 演算子は、オブジェクトの属性を削除するために使用されます。この属性への参照がない場合、最終的に解放されます

構文: delete 式

演算子は、指定されたプロパティをオブジェクトから削除します。正常に削除された場合は true を返し、それ以外の場合は false を返します

   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.typeof 演算子

typeof 演算子は、計算されていないオペランドの型を示す文字列を返します

構文: typeof operand typeof (operand);

void 演算子は指定された式を評価し、未定義を返します

構文: void 式

    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. 関係演算子

1.in 演算子

if 指定されたプロパティが指定されたオブジェクトまたはそのプロトタイプチェーン内にある場合、in 演算子は戻り値を返します。 true

構文: 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.instanceof演算子

instanceof演算子は、オブジェクトがそのプロトタイプチェーンにあるかどうかをテストするために使用されますコンストラクターのプロトタイプ属性があります

構文: objectinstanceofconstructor

    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. 式

1.this

関数内では、this の値は関数の呼び出し方法によって異なります。厳密モードでは、this は実行コンテキストに入ったときにその値を保持するため、次の this はデフォルトで未定義になります

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

ログイン後にコピー

関数が本体で this キーワードを使用する場合、関数を使用して Function.prototype から継承できます。 call または apply メソッドは、呼び出し内の特定のオブジェクトに this 値をバインドします

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

ログイン後にコピー

f.bind(someObject) を呼び出すと、f と同じ関数本体とスコープを持つ関数が作成されますが、この新しい関数では、これは永続的にバインドされます関数の呼び出し方法に関係なく、bind の最初の引数に追加されます

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

ログイン後にコピー

アロー関数では、これは、それを囲む字句コンテキストの this と一致します。グローバルコードでは、グローバルオブジェクトとして設定されます

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

構文:

super([arguments]) // 親オブジェクト/親クラスのコンストラクターを呼び出します

super.functionOnParent([arguments] ]) ; // 親オブジェクト/親クラスのメソッドを呼び出します

コンストラクターで使用する場合、super キーワードは単独で表示され、this キーワードを使用する前に使用する必要があります。 super キーワードは、親オブジェクトの関数を呼び出すためにも使用できます

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

ログイン後にコピー

3.new

new 演算子は、ユーザー定義のオブジェクト型のインスタンス、またはコンストラクターを使用して組み込みオブジェクトのインスタンスを作成します

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

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

ログイン後にコピー

4.構文を展開します

関数呼び出し/配列の構築中に構文レベルで配列式または文字列を展開できます。また、リテラルオブジェクトを構築するときに、キーと値の用語でオブジェクト式を展開することもできます

関数呼び出し中に展開を使用します

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

ログイン後にコピー

E -USE拡張構文リテラルアレイを構築するとき、コピー

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

ログイン後にコピー

Connect複数の配列

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

ログイン後にコピー

5を使用してクラスを定義します。関数式

function キーワードを使用して、式内で関数を定義することもできます。また、Function コンストラクターと関数宣言を使用して関数を定義することもできます関数宣言のホイスティングと関数式のホイスティング

: JavaScript の関数式は使用できません。ホイストされているため、関数宣言とは異なり、関数を定義する前に関数式を使用することはできません

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

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

ログイン後にコピー

7. function* 式function

キーワードは式の中に入れることができますジェネレーター関数 function

を定義します。この宣言メソッド (関数キーワードの後にアスタリスクが続きます)。 Generator オブジェクトを返すジェネレーター関数 (ジェネレーター関数) を定義します

構文: function* name([param[, param [, ... param]]]) { ステートメント }

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

ログイン後にコピー

パラメータを受け取る

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

ログイン後にコピー

パラメーターの受け渡し

/* 函数声明 */

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


/* 函数表达式 */

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

ログイン後にコピー

式

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

ログイン後にコピー