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 expression

<a href="javascript:void(0);" rel="external nofollow" >
 這個鏈接點擊之后不會做任何事情，如果去掉 void()，
 點擊之后整個頁面會被替換成一個字符 0。
</a>
<p> chrome中即使<a href="javascript:0;" rel="external nofollow" >也沒變化，firefox中會變成一個字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor='green');" rel="external nofollow" >
 點擊這個鏈接會讓頁面背景變成綠色。
</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中怎么使用操作符和表達式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。