js表達式和運算符總結

1.條件（三元）運算符

condition ? exprIfTrue : exprIfFalse

除了 false，可能的假值表達式還有：null 、NaN 、 0 、空字符串（ “” ）、和 undefined 。如果 condition 是以上中的任何一個, 那麼條件表達式的結果就是 exprIfFalse 表達式執行的結果。

2.解構賦值

//默認值
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5

//交換變量
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

//忽略某些返回值
function f() {
  return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

//對象屬性計算名和解構
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"

//解構對象時會查找原型鏈（如果屬性不在對象自身，將從原型鏈中查找）
// 聲明對象 和 自身 self 屬性
var obj = {self: '123'};
// 在原型鏈中定義一個屬性 prot
obj.__proto__.prot = '456';
// test
const {self, prot} = obj;
// self "123"
// prot "456"（訪問到了原型鏈）

3.邏輯運算符

運算符	語法	說明
邏輯與，AND（&&）	expr1 && expr2	若 expr1 可轉換爲 true，則返回 expr2(執行expr2)；否則，返回 expr1。(不執行expr2)
邏輯或，OR（||）	expr1|| expr2	若 expr1 可轉換爲 true，則返回 expr1；否則，返回 expr2。
邏輯非，NOT（!）	!expr	若 expr 可轉換爲 true，則返回 false；否則，返回 true。

會被轉換爲 false 的表達式有：
null；
NaN；
0；
空字符串（"" or ‘’ or ``）；
undefined。

4.按位邏輯操作符

|兩個位只要有一個爲1，那麼結果都爲1。否則就爲0
&兩個數值的個位分別相與，同時爲1才得1，只要一個爲0就爲0。

5.逗號操作符

逗號操作符 對它的每個操作數求值（從左到右），並返回最後一個操作數的值。

var x = 1;
x = (x++, x);
console.log(x);
// expected output: 2

x = (2, 3);
console.log(x);
// expected output: 3

6.算術運算符

冪 (**)

-2 ** 2; 
// 在 Bash 中等於 4 ，而在其他語言中一般等於 -4
// 在 JavaScript 中是錯誤的，因爲這會有歧義

-(2 ** 2);
// -4 在JavaScript中能夠明顯體現出作者的意圖

7.對象

計算屬性名

// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

8.運算符優先級

//b被賦值爲5，然後a也被賦值爲 b=5 的返回值，也就是5。
a = b = 5; 


3 > 2 && 2 > 1
// return true

3 > 2 > 1
// 返回 false，因爲 3 > 2 是 true，並且 true > 1 is false
// 加括號可以更清楚：(3 > 2) > 1

9.delete 操作符

delete 操作符用於刪除對象的某個屬性；如果沒有指向這個屬性的引用，那它最終會被釋放。成功刪除的時候回返回 true，否則返回 false。

• 如果你試圖刪除的屬性不存在，那麼delete將不會起任何作用，但仍會返回true
• 如果對象的原型鏈上有一個與待刪除屬性同名的屬性，那麼刪除屬性之後，對象會使用原型鏈上的那個屬性（也就是說，delete操作只會在自身的屬性上起作用）
• 任何使用 var 聲明的屬性不能從全局作用域或函數的作用域中刪除。
  • 這樣的話，delete操作不能刪除任何在全局作用域中的函數（無論這個函數是來自於函數聲明或函數表達式）
• 任何用let或const聲明的屬性不能夠從它被聲明的作用域中刪除。
• 不可設置的(Non-configurable)屬性不能被移除。這意味着像Math, Array, Object內置對象的屬性以及使用Object.defineProperty()方法設置爲不可設置的屬性不能被刪除。
  
  

var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});

console.log(delete Employee.name);  // returns false

var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
trees[3]//undefined
if (3 in trees) {
   // 這裏不會執行
}

var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
   // 這裏會被執行
}

10.in

// 數組
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // 返回true
3 in trees        // 返回true
6 in trees        // 返回false
"bay" in trees    // 返回false (必須使用索引號,而不是數組元素的值)
"length" in trees // 返回true (length是一個數組屬性)

// 自定義對象
var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // 返回true
"model" in mycar // 返回true

var mycar = {make: "Honda", model: "Accord", year: 1998};
delete mycar.make;
"make" in mycar;  // 返回false
var mycar = {make: "Honda", model: "Accord", year: 1998};
mycar.make = undefined;
"make" in mycar;  // 返回true


"toString" in {}; // 返回true

in右操作數必須是一個對象值。例如，你可以指定使用String構造函數創建的字符串，但不能指定字符串文字。

var color1 = new String("green");
"length" in color1 // 返回true
var color2 = "coral";
"length" in color2 // 報錯(color2不是對象)

11.void 運算符

void 運算符 對給定的表達式進行求值，然後返回 undefined。

當用戶點擊一個以 javascript: URI 時，它會執行URI中的代碼，然後用返回的值替換頁面內容，除非返回的值是undefined。void運算符可用於返回undefined。例如：

<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='green');">
  點擊這個鏈接會讓頁面背景變成綠色。
</a>

12.typeof

typeof 操作符返回一個字符串，表示未經計算的操作數的類型。

typeof operand
typeof(operand)

類型	結果
Undefined	“undefined”
Null	“object” (見下文)
Boolean	“boolean”
Number	“number”
BigInt	“bigint”
String	“string”
Symbol (ECMAScript 2015 新增)	“symbol”
宿主對象（由 JS 環境提供）	取決於具體實現
Function 對象 (按照 ECMA-262 規範實現 [[Call]])	“function”
其他任何對象	“object”

13.instanceof

instanceof 運算符用於檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true
auto.__proto__ = {} ;
console.log(auto instanceof Car);//false;
console.log(auto instanceof Object);
// expected output: true

14.new 運算符

new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。new 關鍵字會進行如下的操作：

1. 創建一個空的簡單JavaScript對象（即{}）；
2. 將新對象的__proto__指向構造函數的prototype對象。
3. 將構造函數的作用域賦值給新對（也就是this指向新對象）。
4. 執行構造函數中的代碼（爲這個新對象添加屬性）。
5. 返回新的對象

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined
 
Car.prototype.color = "original color";
console.log(car1.color);    // original color
 
car1.color = 'black';
console.log(car1.color);   // black

console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color)  // black
console.log(car2.color) // original color

15.yield

yield 關鍵字用來暫停和恢復一個生成器函數（(function* 或遺留的生成器函數）。IE不支持

function* countAppleSales () {
  var saleList = [3, 7, 5];
  for (var i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}

var appleStore = countAppleSales(); // Generator { }
console.log(appleStore.next()); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }


function* g2() {
  yield 1;
  yield [5,6,7];
}
// { value: 1, done: false }
// { value: [5,6,7], done: false }
// { value: undefined, done: true }

16.yield*

yield* 表達式用於委託給另一個generator 或可迭代對象

function* g1() {
  yield 2;
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield* [5,6,7];
}

var iterator = g2();

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

16.new.target

new.target屬性允許你檢測函數或構造方法是否是通過new運算符被調用的。在通過new運算符被初始化的函數或構造方法中，new.target返回一個指向構造方法或函數的引用。在普通的函數調用中，new.target 的值是undefined。

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"