JavaScript中操作符和表達式的介紹

這篇文章帶給大家的內容是關於JavaScript中操作符和表達式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、一元運算子

1.delete運算子

delete 運算子用來刪除物件的某個屬性；如果沒有指向這個屬性的引用，那它最終會被釋放

語法：delete expression

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

    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運算子

void 運算子對給定的表達式進行求值，然後傳回undefined

#void 運算子對給定的表達式進行求值，然後傳回undefined

語法：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>

二、關係運算子

1.in運算子

如果指定的屬性在指定的物件或其原型鏈中，則in 運算子傳回true

語法：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.instanceof運算子

instanceof 運算子用來測試一個物件在其原型鏈中是否存在一個建構子的prototype 屬性

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

三、表達式

1.this

##在函數內部，this的值取決於函數被呼叫的方式。在嚴格模式下，this將保持他進入執行上下文時的值，所以下面的this將會預設為undefined

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

當一個函數在其主體中使用this 關鍵字時，可以透過使用函數繼承自Function.prototype 的call 或apply 方法將this 值綁定到呼叫中的特定物件

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

呼叫f.bind(someObject)會建立一個與f具有相同函數體和作用域的函數，但是在這個新函數中，this將永久地被綁定到了bind的第一個參數，無論這個函數是如何被調用的

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

在箭頭函數中，this與封閉詞法上下文的this保持一致。在全域程式碼中，它將被設定為全域物件

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

2.super

語法：
super([arguments]); // 呼叫父物件/父類別的構造函數
super.functionOnParent([arguments]); // 呼叫父物件/父類別上的方法

在建構子中使用時，super關鍵字將單獨出現，並且必須在使用this關鍵字之前使用。 super關鍵字也可以用來呼叫父物件上的函數

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

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

3.new

#new 運算子建立一個使用者定義的物件類型的實例或具有建構函數的內建物件的實例

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.展開語法

可以在函數呼叫/陣列建構時, 將陣列表達式或string在語法層級展開；還可以在建構字面量物件時, 將物件表達式以key-value的方式展開

在函式呼叫時使用展開語法

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

建構字面量陣列時使用展開語法

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

陣列拷貝

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

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

連接多個陣列

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.類別表達式

類別表達式是用來定義類別的一種語法

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

6.函數表達式

function 關鍵字可以用來在一個表達式中定義一個函數，你也可以使用Function 建構子和一個函數宣告來定義函數
函數宣告提升和函數表達式提升：JavaScript中的函數表達式沒有提升,不像函數宣告,你在定義函數表達式之前不能使用函數表達式

/* 函数声明 */

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


/* 函数表达式 */

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

7.function*表達式

function關鍵字可以在表達式內部定義一個生成器函數，function 這種宣告方式(function關鍵字後面接一個星號）會定義一個生成器函數(generator function)，它回傳一個  Generator  物件

語法：function* name([param[, param[, ... param]]]) { statements }

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

接收參數

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

傳遞參數

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

表達式

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

相關推薦：

JavaScript中的運算元==與===介紹_javascript技巧

#javascript 核心語言- 表達式與運算子

以上是JavaScript中操作符和表達式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！